|
|
|
|
@ -0,0 +1,290 @@
|
|
|
|
|
/** 资质考试 */
|
|
|
|
|
import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
|
|
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox } from 'antd';
|
|
|
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
|
|
|
|
import { useParams, useRequest } from 'umi';
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
const { Text, Link } = Typography;
|
|
|
|
|
import { getRulesPaper, getPaperQuestionList } from '../service';
|
|
|
|
|
import type { CardListItemDataType } from '../data';
|
|
|
|
|
import styles from './style.less';
|
|
|
|
|
import SubMenu from 'antd/lib/menu/SubMenu';
|
|
|
|
|
import ProCard from '@ant-design/pro-card';
|
|
|
|
|
|
|
|
|
|
const { Paragraph } = Typography;
|
|
|
|
|
|
|
|
|
|
const CardList = () => {
|
|
|
|
|
// 组卷详情查询
|
|
|
|
|
const [rulesPaperInfo, setRulesPaperInfo] = useState([]);
|
|
|
|
|
// 试题列表
|
|
|
|
|
const [paperInfo, setPaperInfo] = useState([]);
|
|
|
|
|
//答题卡列表
|
|
|
|
|
const [questionTypeList, setQuestionTypeList] = useState([])
|
|
|
|
|
// 当前答题id
|
|
|
|
|
const [questionNow, setQuestionNow] = useState([])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [parsingShow, setParsingShow] = useState(false)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const params = useParams();
|
|
|
|
|
const { loading, data } = useRequest(() => {
|
|
|
|
|
return getRulesPaper({
|
|
|
|
|
rules_id: params.rules_id
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
formatResult: (result) => {
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
onSuccess: (result) => {
|
|
|
|
|
if (result.success) {
|
|
|
|
|
setRulesPaperInfo(result.question_list || [])
|
|
|
|
|
console.log(result, 'result1')
|
|
|
|
|
run({ paper_id: result.question_list[0].paper_id, question_type_count: result.question_list[0].question_type_count })
|
|
|
|
|
// setQuestionTypeList(result.question_list[0].question_type_count)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const { run } = useRequest(getPaperQuestionList,
|
|
|
|
|
{
|
|
|
|
|
refreshDeps: [rulesPaperInfo],
|
|
|
|
|
manual: true,
|
|
|
|
|
formatResult: (result) => {
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
onSuccess: (result, params) => {
|
|
|
|
|
// setRulesPaperInfo(result || [])
|
|
|
|
|
if (result.success) {
|
|
|
|
|
// 试题列表
|
|
|
|
|
const paperList = result.question_list;
|
|
|
|
|
|
|
|
|
|
const qList = params[0].question_type_count
|
|
|
|
|
const questionList = []
|
|
|
|
|
qList.map((e, i) => {
|
|
|
|
|
if (e.count > 0) {
|
|
|
|
|
questionList.push({
|
|
|
|
|
children: [],
|
|
|
|
|
...e
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// 根据分类拆分试题 左侧答题卡
|
|
|
|
|
paperList.map((e) => {
|
|
|
|
|
questionList.map((item, index) => {
|
|
|
|
|
if (item.question_type == e.question_type) {
|
|
|
|
|
questionList[index].children.push({ ...e, question_type: item.question_type, answerSelect: "" })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 根据答题卡生成考试顺序
|
|
|
|
|
const questionInfo = []
|
|
|
|
|
for (let i = 0; i < questionList.length; i++) {
|
|
|
|
|
console.log(questionList[i], 'iiii')
|
|
|
|
|
questionList[i].children.map((e, index) => {
|
|
|
|
|
console.log(e, "num");
|
|
|
|
|
questionInfo.push({ ...e, index: index })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setPaperInfo(questionInfo || [])
|
|
|
|
|
setQuestionNow(questionInfo[0] || [])
|
|
|
|
|
setQuestionTypeList(questionList || [])
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const content = (
|
|
|
|
|
<div className={styles.pageHeaderContent}>
|
|
|
|
|
<p>
|
|
|
|
|
试卷信息：{rulesPaperInfo[0]?.rules_name}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(rulesPaperInfo, 'rulesPaperInfo', questionList)
|
|
|
|
|
|
|
|
|
|
const numbers = [];
|
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
|
|
|
numbers.push({ id: `${i}` })
|
|
|
|
|
}
|
|
|
|
|
const tiNum = (a: number) => {
|
|
|
|
|
switch (a) {
|
|
|
|
|
case 0:
|
|
|
|
|
return "A："
|
|
|
|
|
break;
|
|
|
|
|
case 1:
|
|
|
|
|
return "B："
|
|
|
|
|
break;
|
|
|
|
|
case 2:
|
|
|
|
|
return "C："
|
|
|
|
|
break;
|
|
|
|
|
case 3:
|
|
|
|
|
return "D："
|
|
|
|
|
break;
|
|
|
|
|
case 4:
|
|
|
|
|
return "E："
|
|
|
|
|
break;
|
|
|
|
|
case 5:
|
|
|
|
|
return "F："
|
|
|
|
|
break;
|
|
|
|
|
case 6:
|
|
|
|
|
return "G："
|
|
|
|
|
break;
|
|
|
|
|
case 7:
|
|
|
|
|
return "H："
|
|
|
|
|
break;
|
|
|
|
|
case 8:
|
|
|
|
|
return "I："
|
|
|
|
|
break;
|
|
|
|
|
case 9:
|
|
|
|
|
return "J："
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
return ""
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<PageContainer content={content} extraContent={false}>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={6} style={{ paddingRight: 24 }}>
|
|
|
|
|
<ProCard
|
|
|
|
|
title="题号列表"
|
|
|
|
|
bordered
|
|
|
|
|
headStyle={{ padding: 24, border: '#d9d9d9 solid 1px' }}
|
|
|
|
|
>
|
|
|
|
|
{console.log("当前题号：", questionNow, "试题顺序：", paperInfo, "二维数组:", questionTypeList)}
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
questionTypeList && (
|
|
|
|
|
|
|
|
|
|
questionTypeList.map((e, i) => {
|
|
|
|
|
console.log(e.children, 'e.children')
|
|
|
|
|
return <List
|
|
|
|
|
key={i}
|
|
|
|
|
header={e.type_name}
|
|
|
|
|
footer={false}
|
|
|
|
|
bordered
|
|
|
|
|
dataSource={e.children}
|
|
|
|
|
renderItem={(item, index) => {
|
|
|
|
|
// console.log(item, 'list')
|
|
|
|
|
return <List.Item
|
|
|
|
|
id={item.id}
|
|
|
|
|
> <Button
|
|
|
|
|
className={
|
|
|
|
|
`pdefault ${questionNow.id === item.id ? "pact" : ""} ${item.answertrue === item.answerSelect ? "pok" : ""}`
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setParsingShow(false)
|
|
|
|
|
setQuestionNow(item)
|
|
|
|
|
}}
|
|
|
|
|
>{index}</Button> </List.Item>
|
|
|
|
|
}}
|
|
|
|
|
style={{ background: '#ffffff', margin: '-25px -24px 24px -24px' }}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
<List
|
|
|
|
|
header={<div>二. 多选题</div>}
|
|
|
|
|
footer={false}
|
|
|
|
|
bordered
|
|
|
|
|
dataSource={numbers}
|
|
|
|
|
renderItem={item => (
|
|
|
|
|
<List.Item>
|
|
|
|
|
<Typography.Text mark={item.id === '3' ? false : true}><span className="number">{item.id}</span></Typography.Text>
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
style={{ background: '#ffffff', margin: '-1px -24px' }}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</ProCard>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={13} style={{ background: '#ffffff', padding: 0 }}>
|
|
|
|
|
<ProCard
|
|
|
|
|
title={
|
|
|
|
|
questionNow.question_type === 0 ? "一、单选器" : questionNow.question_type === 1 ? "二、多选题" : questionNow.question_type === 2 ? "判断题" : ""
|
|
|
|
|
}
|
|
|
|
|
extra={false}
|
|
|
|
|
split='vertical'
|
|
|
|
|
bordered
|
|
|
|
|
headerBordered
|
|
|
|
|
>
|
|
|
|
|
<Space direction="vertical" style={{ width: '100%', padding: '24px 48px' }}>
|
|
|
|
|
|
|
|
|
|
<Typography style={{ marginBottom: 16, fontSize: 18 }}>
|
|
|
|
|
{questionNow?.question_stem}
|
|
|
|
|
</Typography>
|
|
|
|
|
<Radio.Group onChange={() => { return true }} value={0} size="large">
|
|
|
|
|
<Space direction="vertical" style={{ fontSize: 16 }}>
|
|
|
|
|
{questionNow.question_type === 0 ?
|
|
|
|
|
(<Radio.Group><Space direction="vertical">{questionNow?.answers?.map((item, index) => {
|
|
|
|
|
return <Radio key={item.id} onChange={() => {
|
|
|
|
|
const qArr = []
|
|
|
|
|
questionNow?.answers?.map(() => {
|
|
|
|
|
qArr.push("0")
|
|
|
|
|
})
|
|
|
|
|
qArr[index] = item.is_true
|
|
|
|
|
const questionAnswer = qArr.join(",")
|
|
|
|
|
const paperInfoTemp = paperInfo
|
|
|
|
|
paperInfoTemp[questionNow.index].answerSelect = questionAnswer
|
|
|
|
|
setPaperInfo(paperInfoTemp || [])
|
|
|
|
|
console.log('0', paperInfoTemp, questionNow.index)
|
|
|
|
|
}} value={item.id} style={{ padding: 5, fontSize: 16 }}>{tiNum(index)}{item.answer}</Radio>
|
|
|
|
|
})}</Space></Radio.Group>) : questionNow.question_type === 1 ? questionNow?.answers?.map((item, index) => {
|
|
|
|
|
return <Checkbox key={item.id} value={1} style={{ padding: 5, fontSize: 16 }}>{tiNum(index)}{item.answer}</Checkbox>
|
|
|
|
|
}) : questionNow.question_type === 2 ? questionNow?.answers?.map((item, index) => {
|
|
|
|
|
return <Radio key={item.id} value={1} style={{ padding: 5, fontSize: 16 }}>{tiNum(index)}{item.answer}</Radio>
|
|
|
|
|
}) : ""}
|
|
|
|
|
|
|
|
|
|
</Space>
|
|
|
|
|
</Radio.Group>
|
|
|
|
|
|
|
|
|
|
<Radio.Group onChange={() => { return true }} value={0} size="large">
|
|
|
|
|
<Space direction="vertical" style={{ fontSize: 16 }}>
|
|
|
|
|
<Button type="primary" onClick={() => {
|
|
|
|
|
setParsingShow(!parsingShow)
|
|
|
|
|
}}>查看解析</Button>
|
|
|
|
|
<div style={{ display: (parsingShow ? 'block' : 'none') }} dangerouslySetInnerHTML={{ __html: questionNow.parsing }} />
|
|
|
|
|
</Space>
|
|
|
|
|
</Radio.Group>
|
|
|
|
|
</Space>
|
|
|
|
|
</ProCard>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={5} style={{ paddingLeft: 24 }}>
|
|
|
|
|
<div style={{ background: '#ffffff', padding: 24 }}>
|
|
|
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
|
|
|
<strong>剩余时间</strong>
|
|
|
|
|
<Typography>6分14秒</Typography>
|
|
|
|
|
<Divider style={{ margin: '6px 0', opacity: 0.5 }} />
|
|
|
|
|
<strong>答题序号</strong>
|
|
|
|
|
<Typography>14/80</Typography>
|
|
|
|
|
<Divider style={{ margin: '6px 0', opacity: 0.5 }} />
|
|
|
|
|
<Button size="large" block>上一题</Button>
|
|
|
|
|
<Button size="large" block>下一题</Button>
|
|
|
|
|
<Button size="large" type="primary" block>提交答卷</Button>
|
|
|
|
|
</Space>
|
|
|
|
|
</div>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row >
|
|
|
|
|
</PageContainer >
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default CardList;
|
