Skip to content

X
xiaomai-cloud-class-web
Commit 4f7e0407 by yuananting
Options

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

parent b85643d2
Showing with 224 additions and 119 deletions
src/modules/task-center/train-task/components/RelatedExamDrawer.jsx
...@@ -2,22 +2,21 @@ ...@@ -2,22 +2,21 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-08-03 17:05:32 * @Date: 2021-08-03 17:05:32
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-08-03 18:05:53 * @LastEditTime: 2021-08-03 20:02:27
* @Description: 新建培训任务-关联考试抽屉 * @Description: 新建培训任务-关联考试抽屉
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React, { useState, useRef } from 'react'; 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 GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
import moment from 'moment'; import moment from 'moment';
import './RelatedExamDrawer.less'; import './RelatedExamDrawer.less';
import SelectPaperModal from '@/modules/teach-tool/examination-manager/SelectPaperModal';
const { RangePicker } = DatePicker;
function RelatedExamDrawer(props) { function RelatedExamDrawer(props) {
const paperInfoInit = { passScore: 60 }; const paperInfoInit = { passScore: 60 };
const [showModal, setShowModal] = useState(false); const [showPaperModal, setShowPaperModal] = useState(false);
const [paperInfo, setPaperInfo] = useState(paperInfoInit); const [paperInfo, setPaperInfo] = useState(paperInfoInit);
const [paperId, setPaperId] = useState(''); const [paperId, setPaperId] = useState('');
const [passRate, setPassRate] = useState(60); //及格线 const [passRate, setPassRate] = useState(60); //及格线
...@@ -256,129 +255,177 @@ function RelatedExamDrawer(props) { ...@@ -256,129 +255,177 @@ function RelatedExamDrawer(props) {
}); });
return result; return result;
} }
return ( return (
<Drawer title='添加考试' width={720} maskClosable={false} closable={true} onClose={props.onClose} visible={true} mask className='related-exam-drawer'> <Drawer title='添加考试' width={720} maskClosable={false} closable={true} onClose={props.onClose} visible={true} mask className='related-exam-drawer'>
<div> <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout='horizontal'>
<div className='module-title'>基本信息</div> <div className='module-title'>基本信息</div>
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout='horizontal'> <Form.Item label='选择试卷' validateStatus={check && !paperId ? 'error' : ''} help={check && !paperId && '请选择试卷'} required>
<Form.Item label='选择试卷' validateStatus={check && !paperId ? 'error' : ''} help={check && !paperId && '请选择试卷'} required> <Button
<Button onClick={() => {
onClick={() => { setShowPaperModal(true);
setShowModal(true); }}>
}}> {paperInfo.paperId ? '重新选择' : '选择试卷'}
{paperInfo.paperId ? '重新选择' : '选择试卷'} </Button>
</Button> {paperInfo.paperId && (
</Form.Item> <div className='paper-title'>
<img src='https://image.xiaomaiketang.com/xm/pY5imEhjzw.png' alt='' /> {paperInfo.paperName}
<Form.Item </div>
label='考试名称' )}
validateStatus={check && (!examName || examName.length > 40 || checkExist(examName)) ? 'error' : ''} {paperInfo.paperId && (
help={check && (!examName ? '请输入考试名称' : examName.length > 40 ? '考试名称最多40字' : checkExist(examName) && '此考试名称已存在')} <div className='paper-table'>
required> <div className='header'>
<Input <div className='item'>单选题</div>
placeholder='请输入考试名称（40字以内）' <div className='item'>多选题</div>
maxLength={40} <div className='item'>判断题</div>
value={examName} <div className='item'>填空题</div>
onChange={(e) => { <div className='item long'>不定项选择题</div>
setExamName(e.target.value); <div className='item'>合计</div>
}}
style={{ width: 300 }}
/>
</Form.Item>
<Form.Item
label={
<div>
<span>及格线</span>
<Tooltip title='默认为选中试卷所设置的及格线，可修改'>
<span className='icon iconfont' style={{ color: '#BFBFBF', marginLeft: 4 }}>
&#xe61d;
</span>
</Tooltip>
</div> </div>
} <div className='body-list' style={{ borderBottom: '1px solid #e8e8e8' }}>
style={{ marginTop: 24 }} <div className='item'>{paperInfo.singleChoiceCnt || 0}题</div>
validateStatus={check && !passRate ? 'error' : ''} <div className='item'>{paperInfo.multiChoiceCnt || 0}题</div>
help={check && !passRate && '请输入及格线'} <div className='item'>{paperInfo.judgeCnt || 0}题</div>
required> <div className='item'>{paperInfo.gapFillingCnt || 0}题</div>
<InputNumber <div className='item long'>{paperInfo.indefiniteChoiceCnt || 0}题</div>
value={passRate} <div className='item'>{examTotal}题</div>
min={0}
max={100}
onChange={(value) => {
setPassRate(parseInt(value));
}}
style={{ width: 100 }}
/>
<span style={{ marginLeft: 8 }}>%</span>
<span style={{ marginLeft: 16, color: '#999' }}>{` 总分(${paperInfo.totalScore || 0})*及格线（${passRate || 0}%）=及格分数（${passScore}）`}</span>
</Form.Item>
<Form.Item label='考试时长' validateStatus={check && !examDuration ? 'error' : ''} help={check && !examDuration && '请输入考试时长'} required>
<InputNumber
value={examDuration}
max={1440}
min={1}
onChange={(value) => {
setExamDuration(parseInt(value));
}}
style={{ width: 100 }}
/>
<span style={{ marginLeft: 8 }}>分钟</span>
<span style={{ marginLeft: 16, color: '#999' }}>{` 时长不能超过1440分钟（24小时）`}</span>
</Form.Item>
<Form.Item label='考试说明' validateStatus={check && desclen > 1000 ? 'error' : ''} help={check && desclen > 1000 && '最多只能输入1000个字'}>
<GraphicsEditor
maxLimit={1000}
isIntro={true}
detail={{
content: examDesc,
}}
onChange={(val, len) => {
setExamDesc(val);
setDescLen(len);
}}
/>
</Form.Item>
<div className='module-title'>考试设置</div>
<Form.Item label='选项乱序' required>
<div style={{ display: 'flex', marginLeft: 4 }}>
<Switch
checked={needOptionDisorder == 'OPTION_RANDOM'}
onChange={(val) => {
setNeedOptionDisorder(val ? 'OPTION_RANDOM' : 'OPTION_SORT');
}}></Switch>
<div style={{ position: 'relative', left: 8, color: '#999' }}>
{needOptionDisorder == 'OPTION_RANDOM' ? '已开启，选项随机排序' : '已关闭，选项按设置顺序排序'}
</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
label='考试名称'
validateStatus={check && (!examName || examName.length > 40 || checkExist(examName)) ? 'error' : ''}
help={check && (!examName ? '请输入考试名称' : examName.length > 40 ? '考试名称最多40字' : checkExist(examName) && '此考试名称已存在')}
required>
<Input
placeholder='请输入考试名称（40字以内）'
maxLength={40}
value={examName}
onChange={(e) => {
setExamName(e.target.value);
}}
style={{ width: 300 }}
/>
</Form.Item>
<Form.Item
label={
<div>
<span>及格线</span>
<Tooltip title='默认为选中试卷所设置的及格线，可修改'>
<span className='icon iconfont' style={{ color: '#BFBFBF', marginLeft: 4 }}>
&#xe61d;
</span>
</Tooltip>
</div>
}
style={{ marginTop: 24 }}
validateStatus={check && !passRate ? 'error' : ''}
help={check && !passRate && '请输入及格线'}
required>
<InputNumber
value={passRate}
min={0}
max={100}
onChange={(value) => {
setPassRate(parseInt(value));
}}
style={{ width: 100 }}
/>
<span style={{ marginLeft: 8 }}>%</span>
<span style={{ marginLeft: 16, color: '#999' }}>{` 总分(${paperInfo.totalScore || 0})*及格线（${passRate || 0}%）=及格分数（${passScore}）`}</span>
</Form.Item>
<Form.Item label='考试时长' validateStatus={check && !examDuration ? 'error' : ''} help={check && !examDuration && '请输入考试时长'} required>
<InputNumber
value={examDuration}
max={1440}
min={1}
onChange={(value) => {
setExamDuration(parseInt(value));
}}
style={{ width: 100 }}
/>
<span style={{ marginLeft: 8 }}>分钟</span>
<span style={{ marginLeft: 16, color: '#999' }}>{` 时长不能超过1440分钟（24小时）`}</span>
</Form.Item>
<Form.Item label='考试说明' validateStatus={check && desclen > 1000 ? 'error' : ''} help={check && desclen > 1000 && '最多只能输入1000个字'}>
<GraphicsEditor
maxLimit={1000}
isIntro={true}
detail={{
content: examDesc,
}}
onChange={(val, len) => {
setExamDesc(val);
setDescLen(len);
}}
/>
</Form.Item>
<div className='module-title' style={{ marginTop: 16 }}>
考试设置
</div>
<Form.Item label='选项乱序' required>
<div style={{ display: 'flex', marginLeft: 4 }}>
<Switch
checked={needOptionDisorder == 'OPTION_RANDOM'}
onChange={(val) => {
setNeedOptionDisorder(val ? 'OPTION_RANDOM' : 'OPTION_SORT');
}}></Switch>
<div style={{ position: 'relative', left: 8, color: '#999' }}>
{needOptionDisorder == 'OPTION_RANDOM' ? '已开启，选项随机排序' : '已关闭，选项按设置顺序排序'}
</div> </div>
</Form.Item> </div>
</Form.Item>
<Form.Item label='考试结果内容' required> <Form.Item label='考试结果内容' required>
<Radio.Group <Radio.Group
onChange={(e) => { onChange={(e) => {
setResultContent(e.target.value); setResultContent(e.target.value);
}} }}
value={resultContent}> value={resultContent}>
<Radio value={'PASS_AND_SCORE'}>显示考试分数和是否及格</Radio> <Radio value={'PASS_AND_SCORE'}>显示考试分数和是否及格</Radio>
<Radio value={'ONLY_SCORE'}>仅显示考试分数</Radio> <Radio value={'ONLY_SCORE'}>仅显示考试分数</Radio>
<Radio value={'ONLY_PASS'}>仅显示是否及格</Radio> <Radio value={'ONLY_PASS'}>仅显示是否及格</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label='答案与解析' required> <Form.Item label='答案与解析' required>
<Radio.Group <Radio.Group
onChange={(e) => { onChange={(e) => {
setAnswerAnalysis(e.target.value); setAnswerAnalysis(e.target.value);
}} }}
value={answerAnalysis}> value={answerAnalysis}>
<Radio value={'ANALYSE_AND_RIGHT_OR_WRONG'}>显示对错与解析</Radio> <Radio value={'ANALYSE_AND_RIGHT_OR_WRONG'}>显示对错与解析</Radio>
<Radio value={'RIGHT_OR_WRONG'}>仅显示对错</Radio> <Radio value={'RIGHT_OR_WRONG'}>仅显示对错</Radio>
<Radio value={'CAN_NOT_CHECK'}>都不显示</Radio> <Radio value={'CAN_NOT_CHECK'}>都不显示</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
</Form> </Form>
<div className='footer shrink-footer'>
<Button onClick={props.onClose}>取消</Button>
<Button type='primary' onClick={() => console.log('提交')}>
确定
</Button>
</div> </div>
{showPaperModal && (
<SelectPaperModal
onSelect={(info) => {
setPaperInfo(info);
}}
paperInfo={paperInfo}
close={() => {
setShowPaperModal(false);
}}></SelectPaperModal>
)}
</Drawer> </Drawer>
); );
} }
......
src/modules/task-center/train-task/components/RelatedExamDrawer.less
...@@ -5,6 +5,64 @@ ...@@ -5,6 +5,64 @@
line-height: 22px; line-height: 22px;
margin-bottom: 24px; 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 { .ant-form-item {
margin-bottom: 24px !important; margin-bottom: 24px !important;
.graphics-editor-container { .graphics-editor-container {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment