Commit 1ded60fc by yuananting

Merge branch 'feature/yuananting/20210327/test-paper' of…

Merge branch 'feature/yuananting/20210327/test-paper' of https://xmgit.ixm5.cn/xiaomai-cloud-class/xiaomai-cloud-class-web into feature/yuananting/20210327/test-paper
parents de92f985 594db8cf
...@@ -663,9 +663,9 @@ module.exports = function (webpackEnv) { ...@@ -663,9 +663,9 @@ module.exports = function (webpackEnv) {
// The formatter is invoked directly in WebpackDevServerUtils during development // The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined, formatter: isEnvProduction ? typescriptFormatter : undefined,
}), }),
new vConsolePlugin({ // new vConsolePlugin({
enable: (process.env.DEPLOY_ENV === 'prod' || process.env.DEPLOY_ENV === 'beta') ? false : true // enable: (process.env.DEPLOY_ENV === 'prod' || process.env.DEPLOY_ENV === 'beta') ? false : true
}) // })
].filter(Boolean), ].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser. // Some libraries import Node modules but don't use them in the browser.
// Tell webpack to provide empty mocks for them so importing them works. // Tell webpack to provide empty mocks for them so importing them works.
......
...@@ -67,3 +67,5 @@ declare module '*.module.less' { ...@@ -67,3 +67,5 @@ declare module '*.module.less' {
const classes: { readonly [key: string]: string }; const classes: { readonly [key: string]: string };
export default classes; export default classes;
} }
declare module '@/components/GraphicsEditor'
\ No newline at end of file
...@@ -11,6 +11,7 @@ import CheckBox from './CheckBox.tsx'; ...@@ -11,6 +11,7 @@ import CheckBox from './CheckBox.tsx';
import CropperModal from './CropperModal.tsx'; import CropperModal from './CropperModal.tsx';
import ImgCutModalNew from './ImgCutModalNew'; import ImgCutModalNew from './ImgCutModalNew';
export { export {
SearchBar, SearchBar,
PageControl, PageControl,
......
...@@ -167,10 +167,10 @@ class GraphicsEditor extends React.Component { ...@@ -167,10 +167,10 @@ class GraphicsEditor extends React.Component {
render() { render() {
const { editorId, textLength } = this.state; const { editorId, textLength } = this.state;
const { limitLength = 1000, isIntro } = this.props; const { limitLength = 1000, isIntro, maxLimit } = this.props;
return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}`}> return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}`}>
<div className="editor-box" id={`editor${editorId}`}></div> <div className="editor-box" id={`editor${editorId}`}></div>
<div className="editor-tips">({textLength}/100000)</div> <div className="editor-tips">({textLength}/{maxLimit || 100000})</div>
</div> </div>
} }
} }
......
...@@ -6,4 +6,28 @@ ...@@ -6,4 +6,28 @@
font-size: 18px; font-size: 18px;
} }
} }
.table{
border: 1px solid #e8e8e8;
width: 600px;
margin-left: 45px;
margin-top: -10px;
.header,.body-list{
background-color: #fafafa;
display: flex;
.item{
width: 16%;
box-sizing: border-box;
line-height: 32px;
text-align: center;
&.long{
width: 20%;
}
}
}
.body-list{
background-color: transparent;
}
}
} }
\ No newline at end of file
import React, { useState, useRef, useEffect, useContext } from 'react' import React, { useState, useRef, useEffect, useContext } from 'react'
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
import { Form, Alert, Input, Button } from 'antd'; import { Form, Alert, Input, Button, InputNumber, DatePicker } from 'antd';
import { Route, withRouter } from 'react-router-dom'; import { Route, withRouter } from 'react-router-dom';
import moment from 'moment'
import GraphicsEditor from '../../course-manage/components/GraphicsEditor';
import SelectPaperModal from './SelectPaperModal' import SelectPaperModal from './SelectPaperModal'
import './AddExam.less'; import './AddExam.less';
const { RangePicker } = DatePicker;
function AddExam(props: any) { function AddExam(props: any) {
const paperInfoInit: any = { passScore: 60 };
const [showModal, setShowModal] = useState(false);
const [paperInfo, setPaperInfo] = useState(paperInfoInit);
const [paperId, setPaperId] = useState('');
const [passRate, setPassRate] = useState(60);//及格线
const [startTime, setStartTime] = useState('');
const [examEndTime, setExamEndTime] = useState('');
const [examName, setExamName] = useState('');
const [examDuration, setExamDuration] = useState(0);
useEffect(() => {
console.log(paperInfo)
setPaperId(paperInfo.paperId)
setPassRate(paperInfo.passScore)
}, [paperInfo.paperId])
function disabledDate(current: any) {
// Can not select days before today and today
return current && current < moment().startOf('day');
}
const [showModal, setShowModal] = useState(false)
function disabledRangeTime(date: any, type: any) {
if (moment(date).isSame(moment(), 'day')) {
return {
disabledHours: () => {
const hours = [];
for (let i = 0; i < moment().hour(); i++) {
hours.push(i);
}
return hours;
},
disabledMinutes: () => {
const currentMinute = moment().minute();
const currentHour = moment(date).hour();
const minutes = [];
if (currentHour === moment().hour()) {
for (let i = 0; i < currentMinute; i++) {
minutes.push(i);
}
}
return minutes;
},
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
};
}
return <div className="page examPage"> return <div className="page examPage">
<Breadcrumbs navList={"新建考试"} goBack={() => props.history.goBack()} /> <Breadcrumbs navList={"新建考试"} goBack={() => props.history.goBack()} />
...@@ -22,21 +77,105 @@ function AddExam(props: any) { ...@@ -22,21 +77,105 @@ function AddExam(props: any) {
layout="horizontal" layout="horizontal"
> >
<Form.Item label="考试名称" name="size" required> <Form.Item label="考试名称" name="size" required>
<Input placeholder='请输入试卷名称(40字以内)' style={{ width: 300 }} />
<Input placeholder='请输入试卷名称(40字以内)' value={examName} onChange={(e) => {
console.log(e.target.value)
setExamName(e.target.value) }} style={{ width: 300 }} />
</Form.Item> </Form.Item>
<Form.Item label="选择试卷" name="size" required> <Form.Item label="选择试卷" name="size" required>
<Button onClick={() => { setShowModal(true) }} >选择试卷</Button> <span style={{ marginRight: 12, lineHeight: '32px' }}>{paperInfo.paperName}</span> <Button onClick={() => { setShowModal(true) }} >{paperInfo.paperId ? '重新选择' : '选择试卷'}</Button>
</Form.Item> </Form.Item>
{
paperInfo.paperId && <div className="table">
<div className="header">
<div className="item">单选题</div>
<div className="item">多选题</div>
<div className="item">判断题</div>
<div className="item">填空题</div>
<div className="item">不定项选择题</div>
<div className="item">合计</div>
</div>
<div className="body-list">
<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">{paperInfo.singleChoiceCnt + paperInfo.multiChoiceCnt + paperInfo.judgeCnt + paperInfo.gapFillingCnt + paperInfo.indefiniteChoiceCnt || 0}</div>
</div>
<div className="body-list">
<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">{paperInfo.totalScore || 0}</div>
</div>
</div>
}
<Form.Item label="及格线" name="size" required>
<InputNumber value={passRate} onChange={(value: any) => { setPassRate(value) }} style={{ width: 100 }} />
<span style={{ marginLeft: 4 }}>%
</span>
<span style={{ marginLeft: 20, color: "#999" }}>
{` 总分(${paperInfo.totalScore || 0})*及格线(${passRate || 0}%)=及格分数(${parseInt(((paperInfo.totalScore || 0) * (passRate || 0)) as any / 100 + '')})`}</span>
</Form.Item>
<Form.Item label="考试有效期" name="size" required>
{/* <RangePicker
ranges={{
'近七天': [moment(), moment().add(6, 'day').endOf('day')],
'近1个月': [moment(), moment().add(1, 'month').endOf('day')],
'近3个月': [moment(), moment().add(3, 'month').endOf('day')],
}}
disabledDate={disabledDate}
// value={[
// startTime ? moment(Number(startTime)) : null,
// examEndTime ? moment(Number(examEndTime)) : null
// ]}
disabledTime={disabledRangeTime}
showTime
format="YYYY/MM/DD HH:mm"
onChange={(date: any) => {
setStartTime(date && date[0]?.startOf('day').valueOf());
setExamEndTime(date && date[1]?.endOf('day').valueOf());
}}
/> */}
</Form.Item>
<Form.Item label="开始时长" name="size" required>
<InputNumber value={examDuration} max={1440} min={1} onChange={(value: any) => { setExamDuration(value) }} style={{ width: 100 }} />
<span style={{ marginLeft: 4 }}>分钟
</span>
<span style={{ marginLeft: 20, color: "#999" }}>
{` 时长不能超过1440分钟(24小时)`}</span>
</Form.Item>
<Form.Item label="开始时长" name="size" required>
<GraphicsEditor
isIntro={true}
detail={{
content: ''
}}
onChange={(val:any) => { }}
/>
</Form.Item>
</Form> </Form>
</div> </div>
</div> </div>
{ {
showModal && <SelectPaperModal close={() => { setShowModal(false) }}></SelectPaperModal> showModal && <SelectPaperModal onSelect={(info: any) => {
console.log(info, 'jkhjkhjk')
setPaperInfo(info)
}} paperInfo={paperInfo} close={() => { setShowModal(false) }}></SelectPaperModal>
} }
</div> </div>
......
...@@ -208,7 +208,7 @@ function ExaminationManager(props: any) { ...@@ -208,7 +208,7 @@ function ExaminationManager(props: any) {
onChange={(date: any) => { onChange={(date: any) => {
const _query = { ...query } const _query = { ...query }
_query.examStartTime = date && date[0]?.startOf('day').valueOf(); _query.examStartTime = date && date[0]?.startOf('day').valueOf();
_query.examEndTime = date && date[0]?.endOf('day').valueOf(); _query.examEndTime = date && date[1]?.endOf('day').valueOf();
setQuery(_query); setQuery(_query);
}} /> }} />
...@@ -224,7 +224,7 @@ function ExaminationManager(props: any) { ...@@ -224,7 +224,7 @@ function ExaminationManager(props: any) {
onChange={(date: any) => { onChange={(date: any) => {
const _query = { ...query } const _query = { ...query }
_query.createStartTime = date && date[0]?.startOf('day').valueOf(); _query.createStartTime = date && date[0]?.startOf('day').valueOf();
_query.createEndTime = date && date[0]?.endOf('day').valueOf(); _query.createEndTime = date && date[1]?.endOf('day').valueOf();
setQuery(_query); setQuery(_query);
}} /> }} />
......
import React, { useState, useRef, useEffect, useContext } from 'react' import React, { useState, useRef, useEffect, useContext } from 'react'
import { Modal } from 'antd'; import { message, Modal } from 'antd';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import ExaminationPaperContent from '../examination-paper/ExaminationPaperContent' import ExaminationPaperContent from '../examination-paper/ExaminationPaperContent'
import './AddExam.less'; import './AddExam.less';
import user from '@/common/js/user';
function SelectPaperModal(props: any) { function SelectPaperModal(props: any) {
const [item, setItem] = useState({paperId:''}); const [item, setItem] = useState(props.paperInfo);
const itemRef = useRef({})
useEffect(() => { useEffect(() => {
console.log(item) itemRef.current = item
console.log(item, 'khjkhjkhjk')
}, [item]) }, [item])
return <Modal return <Modal
width={900} width={900}
title="选择试卷" title="选择试卷"
visible={true} visible={true}
onOk={() => { } onOk={() => {
props.onSelect(itemRef.current);
props.close();
}
} }
onCancel={() => { props.close() }} onCancel={() => { props.close() }}
> >
......
...@@ -254,7 +254,7 @@ class ExaminationPaperContent extends Component { ...@@ -254,7 +254,7 @@ class ExaminationPaperContent extends Component {
this.setState({ this.setState({
selectedRowKeys selectedRowKeys
}) })
this.props.onSelect(selectedRows) this.props.onSelect(selectedRows[0] || {})
} }
render() { render() {
......
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