style:关联考试抽屉样式调整

src/modules/task-center/train-task/components/RelatedExamDrawer.jsx

@@ -2,22 +2,21 @@
  * @Author: yuananting
  * @Date: 2021-08-03 17:05:32
  * @LastEditors: yuananting
- * @LastEditTime: 2021-08-03 18:05:53
+ * @LastEditTime: 2021-08-03 20:02:27
  * @Description: 新建培训任务-关联考试抽屉
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
 import React, { useState, useRef } from 'react';
-import { Drawer, Form, Input, Button, Tooltip, Switch, Radio, DatePicker, InputNumber } from 'antd';
+import { Drawer, Form, Input, Button, Tooltip, Switch, Radio, InputNumber } from 'antd';
 import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
 import moment from 'moment';
 import './RelatedExamDrawer.less';
-
-const { RangePicker } = DatePicker;
+import SelectPaperModal from '@/modules/teach-tool/examination-manager/SelectPaperModal';
 
 function RelatedExamDrawer(props) {
   const paperInfoInit = { passScore: 60 };
-  const [showModal, setShowModal] = useState(false);
+  const [showPaperModal, setShowPaperModal] = useState(false);
   const [paperInfo, setPaperInfo] = useState(paperInfoInit);
   const [paperId, setPaperId] = useState('');
   const [passRate, setPassRate] = useState(60); //及格线
@@ -256,19 +255,50 @@ function RelatedExamDrawer(props) {
       });
     return result;
   }
-
   return (
     <Drawer title='添加考试' width={720} maskClosable={false} closable={true} onClose={props.onClose} visible={true} mask className='related-exam-drawer'>
-      <div>
-        <div className='module-title'>基本信息</div>
       <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout='horizontal'>
+        <div className='module-title'>基本信息</div>
         <Form.Item label='选择试卷' validateStatus={check && !paperId ? 'error' : ''} help={check && !paperId && '请选择试卷'} required>
           <Button
             onClick={() => {
-                setShowModal(true);
+              setShowPaperModal(true);
             }}>
             {paperInfo.paperId ? '重新选择' : '选择试卷'}
           </Button>
+          {paperInfo.paperId && (
+            <div className='paper-title'>
+              <img src='https://image.xiaomaiketang.com/xm/pY5imEhjzw.png' alt='' /> {paperInfo.paperName}
+            </div>
+          )}
+          {paperInfo.paperId && (
+            <div className='paper-table'>
+              <div className='header'>
+                <div className='item'>单选题</div>
+                <div className='item'>多选题</div>
+                <div className='item'>判断题</div>
+                <div className='item'>填空题</div>
+                <div className='item long'>不定项选择题</div>
+                <div className='item'>合计</div>
+              </div>
+              <div className='body-list' style={{ borderBottom: '1px solid #e8e8e8' }}>
+                <div className='item'>{paperInfo.singleChoiceCnt || 0}题</div>
+                <div className='item'>{paperInfo.multiChoiceCnt || 0}题</div>
+                <div className='item'>{paperInfo.judgeCnt || 0}题</div>
+                <div className='item'>{paperInfo.gapFillingCnt || 0}题</div>
+                <div className='item long'>{paperInfo.indefiniteChoiceCnt || 0}题</div>
+                <div className='item'>{examTotal}题</div>
+              </div>
+              <div className='body-list'>
+                <div className='item'>{paperInfo.singleChoiceScore || 0}分</div>
+                <div className='item'>{paperInfo.multiChoiceScore || 0}分</div>
+                <div className='item'>{paperInfo.judgeScore || 0}分</div>
+                <div className='item'>{paperInfo.gapFillingScore || 0}分</div>
+                <div className='item long'>{paperInfo.indefiniteChoiceScore || 0}分</div>
+                <div className='item'>{paperInfo.totalScore || 0}分</div>
+              </div>
+            </div>
+          )}
         </Form.Item>
 
         <Form.Item
@@ -339,7 +369,9 @@ function RelatedExamDrawer(props) {
             }}
           />
         </Form.Item>
-          <div className='module-title'>考试设置</div>
+        <div className='module-title' style={{ marginTop: 16 }}>
+          考试设置
+        </div>
 
         <Form.Item label='选项乱序' required>
           <div style={{ display: 'flex', marginLeft: 4 }}>
@@ -378,7 +410,22 @@ function RelatedExamDrawer(props) {
           </Radio.Group>
         </Form.Item>
       </Form>
+      <div className='footer shrink-footer'>
+        <Button onClick={props.onClose}>取消</Button>
+        <Button type='primary' onClick={() => console.log('提交')}>
+          确定
+        </Button>
       </div>
+      {showPaperModal && (
+        <SelectPaperModal
+          onSelect={(info) => {
+            setPaperInfo(info);
+          }}
+          paperInfo={paperInfo}
+          close={() => {
+            setShowPaperModal(false);
+          }}></SelectPaperModal>
+      )}
     </Drawer>
   );
 }

src/modules/task-center/train-task/components/RelatedExamDrawer.less

@@ -5,6 +5,64 @@
     line-height: 22px;
     margin-bottom: 24px;
   }
+  .paper-title {
+    color: #333333;
+    line-height: 20px;
+    padding: 10px 12px;
+    margin-top: 12px;
+    margin-bottom: 8px;
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+    }
+  }
+  .paper-table {
+    border: 1px solid #e8e8e8;
+    width: 550px;
+    .header {
+      font-weight: 500;
+      .item {
+        padding: 10px 16px;
+      }
+    }
+    .body-list {
+      .item {
+        padding: 14px 16px;
+      }
+    }
+    .header,
+    .body-list {
+      display: flex;
+      color: #333333;
+      .item {
+        box-sizing: border-box;
+        width: 86px;
+        &.long {
+          width: 120px;
+        }
+      }
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    height: 50px;
+    width: 720px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 24px;
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    z-index: 9999;
+    .ant-btn {
+      margin-left: 8px;
+    }
+  }
+
   .ant-form-item {
     margin-bottom: 24px !important;
     .graphics-editor-container {