hujunpeng
4 months ago
parent
079c6c5a2b
commit
7ac4da701e
2 changed files with 238 additions and 23 deletions
@ -0,0 +1,223 @@ |
||||
import React, { Component } from'react'; |
||||
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd'; |
||||
import { findIndustry, getRandomQuestions } from 'api/examPaper'; |
||||
|
||||
const { Option } = Select; |
||||
|
||||
interface optionsState { |
||||
value: string; |
||||
label: string; |
||||
} |
||||
|
||||
// 定义单个试题的状态接口
|
||||
interface QuestionState { |
||||
id: string; |
||||
questionTypes: string; |
||||
questionContent: string; |
||||
answerOptions: optionsState[]; |
||||
answer: string | null; |
||||
} |
||||
|
||||
// 定义组件的状态接口
|
||||
interface States { |
||||
industryDict: any; |
||||
isLoading: boolean; |
||||
questions: QuestionState[]; |
||||
} |
||||
|
||||
class ExamPaperAdd extends Component<any, States> { |
||||
formRef: any; |
||||
|
||||
constructor(props: any) { |
||||
super(props); |
||||
this.formRef = React.createRef(); |
||||
this.state = { |
||||
industryDict: undefined, |
||||
isLoading: false, |
||||
questions: [] |
||||
}; |
||||
} |
||||
|
||||
// 初期
|
||||
componentDidMount() { |
||||
this.findIndustry(); |
||||
} |
||||
|
||||
// 监管行业
|
||||
findIndustry() { |
||||
findIndustry().then((res: any) => { |
||||
if (res.data) { |
||||
this.setState({ industryDict: res.data }); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// 随机生成题目
|
||||
handleRandomGenerate = () => { |
||||
this.formRef.current.validateFields(['industryId', 'questionCount']) |
||||
.then((values:any) => { |
||||
const industryId = values.industryId; |
||||
const questionCount = values.questionCount; |
||||
// 随机获取试题
|
||||
getRandomQuestions(industryId, questionCount) |
||||
.then((res: any) => { |
||||
if (res.data) { |
||||
if(res.data.length == 0){ |
||||
message.warning('题库没题了'); |
||||
this.setState({ questions: [] }); |
||||
return; |
||||
} |
||||
const newQuestions: QuestionState[] = res.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), |
||||
questionTypes: String(questionData.questionTypes), |
||||
questionContent: String(questionData.questionContent), |
||||
answerOptions: answerOptions, |
||||
answer: String(questionData.answer) |
||||
}; |
||||
}); |
||||
this.setState({ questions: newQuestions }); |
||||
message.success('成功获取题目'); |
||||
} else { |
||||
message.error('未获取到随机题目'); |
||||
} |
||||
}).catch(() => { |
||||
message.error('获取随机题目失败'); |
||||
}); |
||||
}).catch(() => {}); |
||||
}; |
||||
|
||||
render() { |
||||
const { industryDict, questions, isLoading } = 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="试卷名称：" |
||||
name="paperName" |
||||
style={{width: 1190}} |
||||
rules={[{required: true, message: '请输入试卷名称'}]} |
||||
> |
||||
<Input placeholder="请输入试卷名称"/> |
||||
</Form.Item> |
||||
<div style={{display: 'flex', gap: 20}}> |
||||
<Form.Item |
||||
label="监管行业：" |
||||
name={`industryId`} |
||||
rules={[{ required: true, message: '请选择监管行业' }]} |
||||
> |
||||
<Select placeholder="请选择监管行业" style={{width: 240}} allowClear> |
||||
{industryDict && industryDict.length > 0 ? ( |
||||
(() => { |
||||
let rows = []; |
||||
for (let i = 0; i < industryDict.length; i++) { |
||||
const item = industryDict[i]; |
||||
rows.push( |
||||
<Option value={item.industryId}>{item.industryName}</Option> |
||||
); |
||||
} |
||||
return rows; |
||||
})() |
||||
) : ( |
||||
<Option disabled>暂无数据</Option> |
||||
)} |
||||
</Select> |
||||
</Form.Item> |
||||
<Form.Item |
||||
label="题目数量：" |
||||
name="questionCount" |
||||
rules={[{ required: true, message: '请输入题目数量' }]} |
||||
> |
||||
<Input type="number" style={{ textAlign: 'right' }} placeholder="请输入题目数量" min={1}/> |
||||
</Form.Item> |
||||
<Form.Item |
||||
label="总分值：" |
||||
name="totalScore" |
||||
rules={[{ required: true, message: '请输入总分值' }]} |
||||
> |
||||
<Input type="number" style={{ textAlign: 'right' }} placeholder="请输入总分值" min={1}/> |
||||
</Form.Item> |
||||
<Form.Item |
||||
label="考试时长：" |
||||
name="examDuration" |
||||
|
||||
rules={[{ required: true, message: '请输入考试时长' }]} |
||||
> |
||||
<Input type="number" style={{ textAlign: 'right' }} addonAfter="分钟" placeholder="请输入考试时长" min={1}/> |
||||
</Form.Item> |
||||
</div> |
||||
<Form.Item |
||||
label="内容描述：" |
||||
name="description" |
||||
style={{width: 1190}} |
||||
rules={[{ required: true, message: '请输入内容描述' }]} |
||||
> |
||||
<Input.TextArea placeholder="请输入内容描述"/> |
||||
</Form.Item> |
||||
<div style={{display: 'flex'}}> |
||||
<h3 style={{ fontWeight: 'bold' }}>试题详情</h3> |
||||
<div> |
||||
<Button type="link" onClick={this.handleRandomGenerate}> |
||||
随机生成 |
||||
</Button> |
||||
<Button type="link">手动选题</Button> |
||||
</div> |
||||
</div> |
||||
{questions.map((question, index) => ( |
||||
<div style={{border: '1px solid #e8e8e8', padding: 10, marginBottom: 10,backgroundColor: 'lightblue'}} |
||||
> |
||||
<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} style={{marginRight: 10}}> |
||||
取消 |
||||
</Button> |
||||
<Button type="primary" htmlType="submit" loading={isLoading}> |
||||
确定 |
||||
</Button> |
||||
</div> |
||||
</Form> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default ExamPaperAdd; |
||||
Loading…
Reference in new issue