hujunpeng
3 months ago
parent
da9be7517a
commit
913365cd70
5 changed files with 545 additions and 144 deletions
@ -0,0 +1,229 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import { Form, Input, Button, Radio, Checkbox, Select, message} from 'antd'; |
||||||
|
import { getDetail} from 'api/examPaper'; |
||||||
|
import { findIndustry} from 'api/question'; |
||||||
|
|
||||||
|
const { Option } = Select; |
||||||
|
|
||||||
|
interface optionsState { |
||||||
|
value: string; |
||||||
|
label: string; |
||||||
|
} |
||||||
|
|
||||||
|
// 定义单个试题的状态接口
|
||||||
|
interface QuestionState { |
||||||
|
id: string; |
||||||
|
serviceTypeId: string; |
||||||
|
questionTypes: string; |
||||||
|
questionContent: string; |
||||||
|
answerOptions: optionsState[]; |
||||||
|
answer: string | null; |
||||||
|
} |
||||||
|
|
||||||
|
// 定义组件的状态接口
|
||||||
|
interface States { |
||||||
|
id: string | undefined; |
||||||
|
industryDict: any; |
||||||
|
paperName : string | undefined; |
||||||
|
industryId : number | undefined; |
||||||
|
questionCount : number | undefined; |
||||||
|
totalScore : number | undefined; |
||||||
|
examDuration : string | undefined; |
||||||
|
durationType : number | undefined; |
||||||
|
paperContent : string | undefined; |
||||||
|
questions: QuestionState[]; |
||||||
|
} |
||||||
|
|
||||||
|
class ExamPaperView extends Component<any, States> { |
||||||
|
formRef: any; |
||||||
|
constructor(props: any) { |
||||||
|
super(props); |
||||||
|
this.formRef = React.createRef(); |
||||||
|
this.state = { |
||||||
|
id: undefined, |
||||||
|
industryDict: undefined, |
||||||
|
paperName: undefined, |
||||||
|
industryId: undefined, |
||||||
|
questionCount: undefined, |
||||||
|
totalScore: undefined, |
||||||
|
examDuration: undefined, |
||||||
|
durationType: undefined, |
||||||
|
paperContent: undefined, |
||||||
|
questions: [], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// 初期
|
||||||
|
componentDidMount() { |
||||||
|
const id = sessionStorage.getItem('id'); |
||||||
|
sessionStorage.removeItem('id'); |
||||||
|
this.findIndustry(); |
||||||
|
this.getDetail(id); |
||||||
|
} |
||||||
|
|
||||||
|
// 监管行业
|
||||||
|
findIndustry() { |
||||||
|
findIndustry().then((res: any) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ industryDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 试卷详情
|
||||||
|
getDetail = (id: string | null) => { |
||||||
|
getDetail(id).then((res: any) => { |
||||||
|
if (res.data) { |
||||||
|
const newQuestions: QuestionState[] = res.data.data.map((questionData: any) => { |
||||||
|
const options = questionData.options.split('，'); |
||||||
|
const answerOptions = options.map((option: any) => { |
||||||
|
const [value, label] = option.split(':'); |
||||||
|
return { value, label }; |
||||||
|
}); |
||||||
|
return { |
||||||
|
id: String(questionData.id), |
||||||
|
serviceTypeId: String(questionData.serviceTypeId), |
||||||
|
questionTypes: String(questionData.questionTypes), |
||||||
|
questionContent: String(questionData.questionContent), |
||||||
|
answerOptions: answerOptions, |
||||||
|
answer: String(questionData.answer) |
||||||
|
}; |
||||||
|
}); |
||||||
|
const paperName = res.data.head.paperName; |
||||||
|
const industryId = res.data.head.industryId; |
||||||
|
const questionCount = res.data.head.questionCount; |
||||||
|
const totalScore = res.data.head.totalScore; |
||||||
|
const examDuration = res.data.head.examDuration; |
||||||
|
const durationType = res.data.head.durationType; |
||||||
|
const paperContent = res.data.head.paperContent; |
||||||
|
this.setState({ |
||||||
|
questions: newQuestions, |
||||||
|
paperName, |
||||||
|
industryId, |
||||||
|
questionCount, |
||||||
|
totalScore, |
||||||
|
examDuration, |
||||||
|
durationType, |
||||||
|
paperContent, |
||||||
|
}); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
message.error('获取题目详情失败，请重试'); |
||||||
|
}); |
||||||
|
}; |
||||||
|
findDurationTypeName = (durationType:number | undefined) => { |
||||||
|
switch (durationType) { |
||||||
|
case 1: |
||||||
|
return '分(min)'; |
||||||
|
case 2: |
||||||
|
return '时(h)'; |
||||||
|
default: |
||||||
|
return '未知'; |
||||||
|
} |
||||||
|
}; |
||||||
|
findIndustryName = (industryId:number | undefined) => { |
||||||
|
const { industryDict } = this.state; |
||||||
|
if (industryDict) { |
||||||
|
const industry = industryDict.find((item:any) => item.industryId === String(industryId)); |
||||||
|
return industry ? industry.industryName : '未知行业'; |
||||||
|
} |
||||||
|
return '未知行业'; |
||||||
|
}; |
||||||
|
render() { |
||||||
|
const { |
||||||
|
questions, |
||||||
|
paperName, |
||||||
|
industryId, |
||||||
|
questionCount, |
||||||
|
totalScore, |
||||||
|
examDuration, |
||||||
|
durationType, |
||||||
|
paperContent, |
||||||
|
} = this.state; |
||||||
|
// 页面跳转
|
||||||
|
const handleListQuestion = () => { |
||||||
|
this.props.history.push('/examPaperList'); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<Form ref={this.formRef}> |
||||||
|
<h3 style={{ fontWeight: 'bold' }}>基本信息</h3> |
||||||
|
<Form.Item label="试卷名称："> |
||||||
|
<span>{paperName}</span> |
||||||
|
</Form.Item> |
||||||
|
<div style={{ display: 'flex', gap: 20 }}> |
||||||
|
<Form.Item label="监管行业："> |
||||||
|
<span>{this.findIndustryName(industryId)}</span> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item label="题目数量："> |
||||||
|
<span>{questionCount}</span> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item label="总分值："> |
||||||
|
<span>{totalScore}</span> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item label="考试时长："> |
||||||
|
<span>{examDuration}</span> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item label=""> |
||||||
|
<span>{this.findDurationTypeName(durationType)}</span> |
||||||
|
</Form.Item> |
||||||
|
</div> |
||||||
|
<Form.Item label="内容描述："> |
||||||
|
<span>{paperContent}</span> |
||||||
|
</Form.Item> |
||||||
|
<div style={{ display: 'flex' }}> |
||||||
|
<h3 style={{ fontWeight: 'bold' }}>试题详情</h3> |
||||||
|
</div> |
||||||
|
{questions.map((question, index) => ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
border: '1px solid #e8e8e8', |
||||||
|
padding: 10, |
||||||
|
marginBottom: 10 |
||||||
|
}} |
||||||
|
> |
||||||
|
<span style={{ fontWeight: 'bold' }}>{index + 1}. {question.questionContent}</span> |
||||||
|
<Form.Item> |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group value={question.answer}> |
||||||
|
{question.answerOptions.map((option) => ( |
||||||
|
<Radio value={option.value}> |
||||||
|
{option.value}. {option.label} |
||||||
|
</Radio> |
||||||
|
))} |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group value={question.answer? question.answer.split('，') : []}> |
||||||
|
{question.answerOptions.map((option) => ( |
||||||
|
<Checkbox value={option.value}> |
||||||
|
{option.value}. {option.label} |
||||||
|
</Checkbox> |
||||||
|
))} |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
</Form.Item> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
textAlign: 'right', |
||||||
|
position: 'fixed', |
||||||
|
bottom: 10, |
||||||
|
right: 10, |
||||||
|
width: '100%', |
||||||
|
backgroundColor: 'white', |
||||||
|
zIndex: 1000 |
||||||
|
}} |
||||||
|
> |
||||||
|
<Button type="default" htmlType="button" onClick={ |
||||||
|
handleListQuestion |
||||||
|
}> |
||||||
|
取消 |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</Form> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
export default ExamPaperView; |
||||||
Loading…
Reference in new issue