hujunpeng
4 months ago
parent
7ecca9ec82
commit
daf10d7133
6 changed files with 1415 additions and 0 deletions
@ -0,0 +1,82 @@ |
|||||||
|
import axios from '../axios'; |
||||||
|
|
||||||
|
/* |
||||||
|
* 查询 |
||||||
|
*/ |
||||||
|
export function getList(num: number, page: number, obj:object){ |
||||||
|
const rData = { |
||||||
|
num:num, |
||||||
|
page:page, |
||||||
|
industryId:obj['industryId'], |
||||||
|
serviceTypeId:obj['serviceTypeId'], |
||||||
|
questionContent:obj['questionContent'] |
||||||
|
}; |
||||||
|
return axios({ |
||||||
|
url: "/ex/question/list", |
||||||
|
method: 'post', |
||||||
|
data: rData |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 删除(明细) |
||||||
|
*/ |
||||||
|
export function deleteQuestion(id: number) { |
||||||
|
return axios({ |
||||||
|
url: '/ex/question/delete?id=' + id, |
||||||
|
method: 'get' |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 删除 |
||||||
|
*/ |
||||||
|
export function deleteQuestionList(ids: any) { |
||||||
|
return axios({ |
||||||
|
url: '/ex/question/deleteList', |
||||||
|
method: 'post', |
||||||
|
data: ids |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 新增题目 |
||||||
|
*/ |
||||||
|
export function add(questionData: object) { |
||||||
|
return axios({ |
||||||
|
url: "/ex/question/add", |
||||||
|
method: 'post', |
||||||
|
data: questionData |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 修改题目 |
||||||
|
*/ |
||||||
|
export function update(questionData: object) { |
||||||
|
return axios({ |
||||||
|
url: "/ex/question/update", |
||||||
|
method: 'post', |
||||||
|
data: questionData |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 行业 |
||||||
|
*/ |
||||||
|
export function findIndustry() { |
||||||
|
return axios({ |
||||||
|
url: '/ex/question/findIndustry', |
||||||
|
method: 'get' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 题目详情 |
||||||
|
*/ |
||||||
|
export function getDetail(id: string|null) { |
||||||
|
return axios({ |
||||||
|
url: '/ex/question/getDetail?id=' + id, |
||||||
|
method: 'get' |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,505 @@ |
|||||||
|
import React, { Component } from'react'; |
||||||
|
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd'; |
||||||
|
import { dictionary } from "api/dict/index"; |
||||||
|
import { add, findIndustry } from 'api/question'; |
||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import { saveAs } from 'file-saver'; |
||||||
|
|
||||||
|
const { Option } = Select; |
||||||
|
|
||||||
|
// 定义单个试题的状态接口
|
||||||
|
interface QuestionState { |
||||||
|
questionTypes: string; |
||||||
|
industryId: string | null; |
||||||
|
serviceTypeId: string | null; |
||||||
|
questionContent: string; |
||||||
|
answerOptions: { [key: string]: string }; |
||||||
|
answer: string | null; |
||||||
|
} |
||||||
|
|
||||||
|
// 定义组件的状态接口
|
||||||
|
interface States { |
||||||
|
industryDict: any; |
||||||
|
serviceTypeDict: any; |
||||||
|
isLoading: boolean; |
||||||
|
questions: QuestionState[]; |
||||||
|
} |
||||||
|
|
||||||
|
class QuestionAdd extends Component<any, States> { |
||||||
|
formRef: any; |
||||||
|
fileInputRef: any; |
||||||
|
|
||||||
|
constructor(props: any) { |
||||||
|
super(props); |
||||||
|
this.formRef = React.createRef(); |
||||||
|
this.fileInputRef = React.createRef(); |
||||||
|
this.state = { |
||||||
|
industryDict: undefined, |
||||||
|
serviceTypeDict: undefined, |
||||||
|
isLoading: false, |
||||||
|
questions: [ |
||||||
|
{ |
||||||
|
questionTypes: '1', |
||||||
|
questionContent: '', |
||||||
|
answerOptions: { A: '', B: '', C: '', D: ''}, |
||||||
|
answer: null, |
||||||
|
industryId: null, |
||||||
|
serviceTypeId: null |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// 初期
|
||||||
|
componentDidMount() { |
||||||
|
this.getDict(); |
||||||
|
this.findIndustry(); |
||||||
|
} |
||||||
|
|
||||||
|
// 字典
|
||||||
|
getDict() { |
||||||
|
// 服务类型
|
||||||
|
dictionary('serviceTypeDict').then((res) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ serviceTypeDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 行业
|
||||||
|
findIndustry() { |
||||||
|
// 监管行业
|
||||||
|
findIndustry().then((res) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ industryDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 题型
|
||||||
|
handleQuestionTypeChange = (index: number, value: string) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
const questions = [...prevState.questions]; |
||||||
|
questions[index].questionTypes = value; |
||||||
|
questions[index].answer = null; |
||||||
|
return { |
||||||
|
questions |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 单选框
|
||||||
|
handleRadioChange = (index: number, value: string) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
const questions = [...prevState.questions]; |
||||||
|
questions[index].answer = value; |
||||||
|
return { |
||||||
|
questions |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 多选框
|
||||||
|
handleCheckboxChange = (index: number, type: string, values: (string | number | boolean)[] | null) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
const questions = [...prevState.questions]; |
||||||
|
const currentAnswer = questions[index].answer || ''; |
||||||
|
const currentSelectedArray = currentAnswer? currentAnswer.split('，') : []; |
||||||
|
if (!values || values.length === 0) { |
||||||
|
const newSelectedArray = currentSelectedArray.filter(val => val!== type); |
||||||
|
newSelectedArray.sort(); |
||||||
|
questions[index].answer = newSelectedArray.join('，'); |
||||||
|
} else { |
||||||
|
const stringValues = values.map((val) => String(val)); |
||||||
|
const newSelectedArray = Array.from(new Set([...currentSelectedArray, ...stringValues])); |
||||||
|
newSelectedArray.sort(); |
||||||
|
questions[index].answer = newSelectedArray.join('，'); |
||||||
|
} |
||||||
|
return { |
||||||
|
questions |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 答案
|
||||||
|
handleAnswerOptionChange = (index: number, option: string, value: string) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
const questions = [...prevState.questions]; |
||||||
|
questions[index].answerOptions[option] = value; |
||||||
|
return { |
||||||
|
questions |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 新增试题
|
||||||
|
addNewQuestion = () => { |
||||||
|
this.setState((prevState) => ({ |
||||||
|
questions: [ |
||||||
|
...prevState.questions, |
||||||
|
{ |
||||||
|
questionTypes: '1', |
||||||
|
questionContent: '', |
||||||
|
answerOptions: { A: '', B: '', C: '', D: ''}, |
||||||
|
answerDisabled: false, |
||||||
|
answer: null, |
||||||
|
industryId: null, |
||||||
|
serviceTypeId: null |
||||||
|
} |
||||||
|
] |
||||||
|
})); |
||||||
|
}; |
||||||
|
|
||||||
|
// 删除试题
|
||||||
|
deleteQuestion = (index: number) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
const questions = [...prevState.questions]; |
||||||
|
questions.splice(index, 1); |
||||||
|
return { |
||||||
|
questions |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 处理表单提交
|
||||||
|
handleSubmit = () => { |
||||||
|
this.setState({ isLoading: true }); |
||||||
|
this.formRef.current.validateFields().then((values: Record<string, any>) => { |
||||||
|
const questions = this.state.questions.map((question, index) => { |
||||||
|
const industryId = values[`industryId_${index}`]; |
||||||
|
const serviceTypeId = values[`serviceTypeId_${index}`]; |
||||||
|
const questionContent = values[`questionContent_${index}`]; |
||||||
|
return { |
||||||
|
...question, |
||||||
|
industryId, |
||||||
|
serviceTypeId, |
||||||
|
questionContent |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
add(questions).then((res) => { |
||||||
|
const count = res.data; |
||||||
|
if (count>0) { |
||||||
|
message.success(`成功新增 ${count} 条试题`); |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
this.props.history.push('/questionList'); |
||||||
|
} else { |
||||||
|
message.error('新增试题失败，请稍后重试'); |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
message.error('新增试题时发生错误，请检查'); |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
}); |
||||||
|
}).catch(() => { |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 下载模板
|
||||||
|
downloadTemplate = () => { |
||||||
|
const headers = ['题型', '监管行业', 'AQ服务类型', '题干', '选项A', '选项B', '选项C', '选项D', '答案']; |
||||||
|
const ws = XLSX.utils.aoa_to_sheet([headers]); |
||||||
|
const wb = XLSX.utils.book_new(); |
||||||
|
XLSX.utils.book_append_sheet(wb, ws, '试题模板'); |
||||||
|
const wbOut = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); |
||||||
|
saveAs(new Blob([wbOut], { type: 'application/octet-stream' }), '试题模板.xlsx'); |
||||||
|
}; |
||||||
|
|
||||||
|
// 一键导入
|
||||||
|
handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
||||||
|
const file = e.target.files?.[0]; |
||||||
|
if (file) { |
||||||
|
const reader = new FileReader(); |
||||||
|
reader.onload = (event) => { |
||||||
|
const data = new Uint8Array(event.target?.result as ArrayBuffer); |
||||||
|
const workbook = XLSX.read(data, { type: 'array' }); |
||||||
|
const firstSheetName = workbook.SheetNames[0]; |
||||||
|
const worksheet = workbook.Sheets[firstSheetName]; |
||||||
|
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); |
||||||
|
const rows = jsonData.slice(1); |
||||||
|
const newQuestions = rows.map((row: any) => { |
||||||
|
const question: QuestionState = { |
||||||
|
questionTypes: String(row[0]), |
||||||
|
industryId: String(row[1]), |
||||||
|
serviceTypeId: String(row[2]).trim().toLowerCase(), |
||||||
|
questionContent: String(row[3]), |
||||||
|
answerOptions: { |
||||||
|
A: String(row[4]), |
||||||
|
B: String(row[5]), |
||||||
|
C: String(row[6]), |
||||||
|
D: String(row[7]) |
||||||
|
}, |
||||||
|
answer: String(row[8]) |
||||||
|
}; |
||||||
|
return question; |
||||||
|
}); |
||||||
|
this.setState({ questions: newQuestions }, () => { |
||||||
|
const formValues = {}; |
||||||
|
newQuestions.forEach((question, index) => { |
||||||
|
formValues[`questionContent_${index}`] = question.questionContent; |
||||||
|
formValues[`industryId_${index}`] = question.industryId; |
||||||
|
formValues[`serviceTypeId_${index}`] = question.serviceTypeId; |
||||||
|
formValues[`answer_${index}`] = question.answer; |
||||||
|
formValues[`answerOption_A_${index}`] = question.answerOptions.A; |
||||||
|
formValues[`answerOption_B_${index}`] = question.answerOptions.B; |
||||||
|
formValues[`answerOption_C_${index}`] = question.answerOptions.C; |
||||||
|
formValues[`answerOption_D_${index}`] = question.answerOptions.D; |
||||||
|
}); |
||||||
|
this.formRef.current.setFieldsValue(formValues); |
||||||
|
}); |
||||||
|
}; |
||||||
|
reader.readAsArrayBuffer(file); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 文件
|
||||||
|
handleImportClick = () => { |
||||||
|
this.fileInputRef.current?.click(); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { industryDict, serviceTypeDict, questions, isLoading } = this.state; |
||||||
|
// 使用 this.props.history 进行页面跳转
|
||||||
|
const handleListQuestion = () => { |
||||||
|
this.props.history.push('/questionList'); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<div style={{ textAlign: 'right'}}> |
||||||
|
<Button type="default" style={{ marginRight: 10 }} onClick={this.downloadTemplate}>下载模版</Button> |
||||||
|
<Button type="default" onClick={this.handleImportClick}>一键导入</Button> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
ref={this.fileInputRef} |
||||||
|
style={{ display: 'none' }} |
||||||
|
accept=".xlsx,.xls" |
||||||
|
onChange={this.handleFileChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<Form |
||||||
|
ref={this.formRef} |
||||||
|
layout="inline" |
||||||
|
className="ant-bg-light" |
||||||
|
> |
||||||
|
{questions.map((question, index) => ( |
||||||
|
<div key={index} style={{ marginBottom: 30 }}> |
||||||
|
<div style={{ display: 'flex' }}> |
||||||
|
<Form.Item> |
||||||
|
<Radio.Group |
||||||
|
value={question.questionTypes} |
||||||
|
onChange={(e) => this.handleQuestionTypeChange(index, e.target.value)}> |
||||||
|
<Radio.Button value="1">单选题</Radio.Button> |
||||||
|
<Radio.Button value="2">多选题</Radio.Button> |
||||||
|
</Radio.Group> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item |
||||||
|
label="监管行业：" |
||||||
|
name={`industryId_${index}`} |
||||||
|
> |
||||||
|
<Select placeholder="请选择监管行业" |
||||||
|
style={{ width: 240 }} |
||||||
|
allowClear |
||||||
|
value={question.industryId}> |
||||||
|
{ |
||||||
|
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="AQ服务类型：" |
||||||
|
name={`serviceTypeId_${index}`} |
||||||
|
> |
||||||
|
<Select placeholder="请选择AQ服务类型" |
||||||
|
style={{ width: 240 }} |
||||||
|
allowClear |
||||||
|
value={question.serviceTypeId}> |
||||||
|
{ |
||||||
|
serviceTypeDict && serviceTypeDict.length > 0? |
||||||
|
(() => { |
||||||
|
let rows = []; |
||||||
|
for (let i = 0; i < serviceTypeDict.length; i++) { |
||||||
|
const item = serviceTypeDict[i]; |
||||||
|
rows.push( |
||||||
|
<Option value={String(item.dictKey).trim().toLowerCase()}>{item.dictValue}</Option> |
||||||
|
); |
||||||
|
} |
||||||
|
return rows; |
||||||
|
})() |
||||||
|
: |
||||||
|
<Option disabled>暂无数据</Option> |
||||||
|
} |
||||||
|
</Select> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item> |
||||||
|
{index > 0 && (<Button type="link" onClick={() => this.deleteQuestion(index)}>X</Button>)} |
||||||
|
</Form.Item> |
||||||
|
</div> |
||||||
|
<Form.Item |
||||||
|
label="题干：" |
||||||
|
name={`questionContent_${index}`} |
||||||
|
style={{marginTop: 10 }} |
||||||
|
> |
||||||
|
<Input.TextArea |
||||||
|
placeholder="请输入题干内容" |
||||||
|
value={question.questionContent} |
||||||
|
style={{ width: 1100, height: 60 }} |
||||||
|
/> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item style={{marginTop: 10, marginLeft: 40}}> |
||||||
|
<div> |
||||||
|
<div style={{ display: 'flex' }}> |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange(index, e.target.value)} |
||||||
|
> |
||||||
|
<Radio value="A">A</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.A} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'A', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange(index,'A', values,)}> |
||||||
|
<Checkbox value="A">A</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.A} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'A', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange(index, e.target.value)} |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
> |
||||||
|
<Radio value="B">B</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.B} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'B', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange(index,'B',values)}> |
||||||
|
<Checkbox value="B">B</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.B} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'B', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div style={{ display: 'flex', marginTop: 10 }}> |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange(index, e.target.value)} |
||||||
|
> |
||||||
|
<Radio value="C">C</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.C} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'C', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange(index,'C', values)}> |
||||||
|
<Checkbox value="C">C</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.C} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'C', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange(index, e.target.value)} |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
> |
||||||
|
<Radio value="D">D</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.D} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'D', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange(index,'D',values)}> |
||||||
|
<Checkbox value="D">D</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.D} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange(index, 'D', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Form.Item> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</Form> |
||||||
|
<div style={{ textAlign: 'right'}}> |
||||||
|
<Button type="default" onClick={this.addNewQuestion}> |
||||||
|
新增试题 |
||||||
|
</Button> |
||||||
|
</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} onClick={this.handleSubmit}> |
||||||
|
确定添加 |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
export default QuestionAdd; |
||||||
@ -0,0 +1,393 @@ |
|||||||
|
import React, { Component } from'react'; |
||||||
|
import {Form, Input, Button, Table, Select, message, Modal} from 'antd'; |
||||||
|
import { TableRowSelection } from 'antd/lib/table/interface'; |
||||||
|
import {deleteQuestion, deleteQuestionList, findIndustry, getList} from 'api/question'; |
||||||
|
import { dictionary } from "api/dict/index"; |
||||||
|
|
||||||
|
const { Option } = Select; |
||||||
|
|
||||||
|
interface States { |
||||||
|
num: number; |
||||||
|
page: number; |
||||||
|
listQuery: { |
||||||
|
industryId: string | undefined; |
||||||
|
serviceTypeId: string | undefined; |
||||||
|
questionContent: string | undefined; |
||||||
|
}; |
||||||
|
list: any[]; |
||||||
|
total: number; |
||||||
|
loading: boolean; |
||||||
|
currentRow: object; |
||||||
|
title: string; |
||||||
|
modalText: string; |
||||||
|
modalWidth: number | string; |
||||||
|
industryDict: any; |
||||||
|
serviceTypeDict: any; |
||||||
|
selectedRowKeys: number[]; |
||||||
|
isAllSelected: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
class QuestionList extends Component<any, States> { |
||||||
|
formRef: any; |
||||||
|
constructor(props: any) { |
||||||
|
super(props); |
||||||
|
this.formRef = React.createRef(); |
||||||
|
this.state = { |
||||||
|
num: 10, |
||||||
|
page: 1, |
||||||
|
listQuery: { |
||||||
|
industryId: undefined, |
||||||
|
serviceTypeId: undefined, |
||||||
|
questionContent: undefined |
||||||
|
}, |
||||||
|
list: [], |
||||||
|
total: 0, |
||||||
|
loading: false, |
||||||
|
currentRow: { |
||||||
|
id: 0, |
||||||
|
status: 0 |
||||||
|
}, |
||||||
|
title: '', |
||||||
|
modalText: '', |
||||||
|
modalWidth: 0, |
||||||
|
industryDict: undefined, |
||||||
|
serviceTypeDict: undefined, |
||||||
|
selectedRowKeys: [], |
||||||
|
isAllSelected: false, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.findDict(); |
||||||
|
this.findIndustry(); |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
|
||||||
|
// 监管行业
|
||||||
|
findIndustry() { |
||||||
|
findIndustry().then((res: any) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ industryDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// AQ服务类型
|
||||||
|
findDict() { |
||||||
|
dictionary('serviceTypeDict').then((res) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ serviceTypeDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 查询
|
||||||
|
getList() { |
||||||
|
this.setState({ loading: true }); |
||||||
|
const { num, page, listQuery } = this.state; |
||||||
|
getList(num, page, listQuery).then((res) => { |
||||||
|
this.setState({ |
||||||
|
loading: false, |
||||||
|
list: res.data.data, |
||||||
|
total: res.data.total, |
||||||
|
selectedRowKeys: [], |
||||||
|
isAllSelected: false, |
||||||
|
}); |
||||||
|
this.setState({ loading: false }); |
||||||
|
}).catch(() => { |
||||||
|
this.setState({ loading: false }); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 重置
|
||||||
|
handleReset = () => { |
||||||
|
if (this.formRef.current) { |
||||||
|
// 重置表单字段
|
||||||
|
this.formRef.current.resetFields(); |
||||||
|
// 重置 listQuery 状态
|
||||||
|
this.setState({ |
||||||
|
listQuery: { |
||||||
|
industryId: undefined, |
||||||
|
serviceTypeId: undefined, |
||||||
|
questionContent: undefined |
||||||
|
}, |
||||||
|
selectedRowKeys: [], |
||||||
|
isAllSelected: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 删除（明细）
|
||||||
|
deleteSingle = (id: number) => { |
||||||
|
Modal.confirm({ |
||||||
|
title: '确认删除', |
||||||
|
content: '你确定要删除这个问题吗？', |
||||||
|
onOk: () => { |
||||||
|
deleteQuestion(id).then((res) => { |
||||||
|
const isSuccess = res.data; |
||||||
|
if (isSuccess) { |
||||||
|
message.success('删除成功'); |
||||||
|
this.getList(); |
||||||
|
} else { |
||||||
|
message.error('删除失败，请稍后重试'); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
message.error('删除时发生错误，请检查'); |
||||||
|
}); |
||||||
|
}, |
||||||
|
onCancel: () => { |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 删除
|
||||||
|
deleteMultiple = () => { |
||||||
|
const { selectedRowKeys } = this.state; |
||||||
|
if (selectedRowKeys.length === 0) { |
||||||
|
message.warning('请选择要删除的问题'); |
||||||
|
return; |
||||||
|
} |
||||||
|
Modal.confirm({ |
||||||
|
title: '确认删除', |
||||||
|
content: '你确定要删除这些选中的问题吗？', |
||||||
|
onOk: () => { |
||||||
|
deleteQuestionList(selectedRowKeys) |
||||||
|
.then((res) => { |
||||||
|
const isSuccess = res.data; |
||||||
|
if (isSuccess) { |
||||||
|
message.success('删除成功'); |
||||||
|
this.getList(); |
||||||
|
} else { |
||||||
|
message.error('删除失败，请稍后重试'); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
message.error('删除时发生错误，请检查'); |
||||||
|
}); |
||||||
|
}, |
||||||
|
onCancel: () => { |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 多选
|
||||||
|
onSelectChange = (selectedRowKeys: React.Key[]) => { |
||||||
|
this.setState({ |
||||||
|
selectedRowKeys: selectedRowKeys as number[], |
||||||
|
isAllSelected: selectedRowKeys.length === this.state.list.length |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 单选
|
||||||
|
onSelect = (record: any, selected: boolean) => { |
||||||
|
if (selected) { |
||||||
|
// 单选时只保留当前选中行
|
||||||
|
this.setState({ |
||||||
|
selectedRowKeys: [record.id], |
||||||
|
isAllSelected: false |
||||||
|
}); |
||||||
|
} else { |
||||||
|
// 取消选中时清空选中行
|
||||||
|
this.setState({ |
||||||
|
selectedRowKeys: [], |
||||||
|
isAllSelected: false |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const onFinish = (values: object) => { |
||||||
|
const _listQuery = { ...this.state.listQuery, ...values }; |
||||||
|
this.setState({ listQuery: _listQuery }); |
||||||
|
this.getList(); |
||||||
|
}; |
||||||
|
|
||||||
|
const { industryDict, serviceTypeDict, selectedRowKeys } = this.state; |
||||||
|
|
||||||
|
// 行选择
|
||||||
|
const rowSelection: TableRowSelection<any> = { |
||||||
|
selectedRowKeys, |
||||||
|
onChange: this.onSelectChange, |
||||||
|
onSelect: this.onSelect, |
||||||
|
getCheckboxProps: (record) => ({ |
||||||
|
checked: selectedRowKeys.includes(record.id), |
||||||
|
indeterminate: selectedRowKeys.includes(record.id), |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
// 页面跳转
|
||||||
|
const handleAddQuestion = () => { |
||||||
|
this.props.history.push('/questionAdd'); |
||||||
|
}; |
||||||
|
|
||||||
|
const columns: any = [ |
||||||
|
{ title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 60, |
||||||
|
render: (_: number, __: number, index: number) => { |
||||||
|
const { page, num } = this.state; |
||||||
|
return (page - 1) * num + index + 1; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '监管行业', dataIndex: 'industryId', key: 'industryId', align: 'center', width: 150, |
||||||
|
render: (industryId:any) => { |
||||||
|
const industry = industryDict?.find((item: { industryId: string | number; industryName: string }) => String(item.industryId) === String(industryId)); |
||||||
|
return industry? industry.industryName : industryId; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: 'AQ服务类型', dataIndex: 'serviceTypeId', key: 'serviceTypeId', align: 'center', width: 150, |
||||||
|
render: (serviceTypeId:any) => { |
||||||
|
const serviceType = serviceTypeDict?.find((item: { dictKey: string | number; dictValue: string }) => String(item.dictKey) === String(serviceTypeId)); |
||||||
|
return serviceType? serviceType.dictValue : serviceTypeId; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '题型', dataIndex: 'questionTypes', key: 'questionTypes', align: 'center', width: 80, |
||||||
|
render: (questionTypes:any) => { |
||||||
|
if (questionTypes === 1) { |
||||||
|
return '单选题'; |
||||||
|
} else if (questionTypes === 2) { |
||||||
|
return '多选题'; |
||||||
|
} |
||||||
|
return questionTypes;} |
||||||
|
}, |
||||||
|
{ title: '题干', dataIndex: 'questionContent', key: 'questionContent', align: 'center', width: 450 }, |
||||||
|
{ title: '答案', dataIndex: 'answer', key: 'answer', align: 'center', width: 120 }, |
||||||
|
{ title: '题目ID', dataIndex: 'id', key: 'id', width: 120}, |
||||||
|
{ title: '操作', key: 'operation', align: 'center', fixed: 'right', width: 120, |
||||||
|
render: (record: any) => [ |
||||||
|
<span className='mr10 link' onClick={() => { |
||||||
|
this.setState({title: '删除', modalWidth: '85%'}) |
||||||
|
this.deleteSingle(record.id); |
||||||
|
}}>删除</span>, |
||||||
|
<span className="mr10 link" onClick={() => { |
||||||
|
this.setState({title: '修正', modalWidth: '85%'}) |
||||||
|
sessionStorage.setItem('id', String(record.id)); |
||||||
|
this.props.history.push(`/questionUp`); |
||||||
|
}}>修正</span> |
||||||
|
] |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
// 分页切换
|
||||||
|
const changePage = (current: number, pageSize?: number) => { |
||||||
|
setTimeout(() => { |
||||||
|
this.setState({page: current, num: pageSize || 20}); |
||||||
|
this.getList(); |
||||||
|
}, 0); |
||||||
|
}; |
||||||
|
|
||||||
|
// 多少每页
|
||||||
|
const selectChange = (page: number, num: number) => { |
||||||
|
this.setState({ page, num }); |
||||||
|
this.getList(); |
||||||
|
}; |
||||||
|
|
||||||
|
const { list, loading } = this.state; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<div className="list-filter"> |
||||||
|
<Form |
||||||
|
ref={this.formRef} |
||||||
|
className="filter" |
||||||
|
layout="inline" |
||||||
|
name="basic" |
||||||
|
onFinish={onFinish} |
||||||
|
> |
||||||
|
<Form.Item |
||||||
|
label="监管行业：" |
||||||
|
name="industryId" |
||||||
|
> |
||||||
|
<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="AQ服务类型：" |
||||||
|
name="serviceTypeId" |
||||||
|
> |
||||||
|
<Select placeholder="请选择AQ服务类型" |
||||||
|
style={{ width: 240 }} |
||||||
|
allowClear> |
||||||
|
{ |
||||||
|
serviceTypeDict && serviceTypeDict.length > 0? |
||||||
|
(() => { |
||||||
|
let rows = []; |
||||||
|
for (let i = 0; i < serviceTypeDict.length; i++) { |
||||||
|
const item = serviceTypeDict[i]; |
||||||
|
rows.push( |
||||||
|
<Option value={item.dictKey}>{item.dictValue}</Option> |
||||||
|
); |
||||||
|
} |
||||||
|
return rows; |
||||||
|
})() |
||||||
|
: |
||||||
|
<Option disabled>暂无数据</Option> |
||||||
|
} |
||||||
|
</Select> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item |
||||||
|
label="题干条件：" |
||||||
|
name="questionContent" |
||||||
|
> |
||||||
|
<Input placeholder="请输入题干条件" style={{ width: 240 }}/> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item> |
||||||
|
<Button type="default" onClick={this.handleReset}>重置</Button> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item> |
||||||
|
<Button type="primary" htmlType="submit">查询</Button> |
||||||
|
</Form.Item> |
||||||
|
</Form> |
||||||
|
</div> |
||||||
|
<Form |
||||||
|
className="filter" |
||||||
|
layout="inline" |
||||||
|
name="basic" |
||||||
|
onFinish={onFinish} |
||||||
|
style={{ display: 'flex', justifyContent: 'flex-end' }} |
||||||
|
> |
||||||
|
<Form.Item> |
||||||
|
<Button type="default" onClick={this.deleteMultiple}>删除</Button> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item> |
||||||
|
<Button type="primary" onClick={handleAddQuestion}>新增试题</Button> |
||||||
|
</Form.Item> |
||||||
|
</Form> |
||||||
|
<Table |
||||||
|
dataSource={list} |
||||||
|
columns={columns} |
||||||
|
rowKey="id" |
||||||
|
loading={loading} |
||||||
|
scroll={{ y: '400px' }} |
||||||
|
pagination={{ |
||||||
|
total: this.state.total, |
||||||
|
current: this.state.page, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
showTotal: (total) => `共 ${total} 条`, |
||||||
|
onShowSizeChange: selectChange, |
||||||
|
onChange: changePage |
||||||
|
}} |
||||||
|
rowSelection={rowSelection} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default QuestionList; |
||||||
@ -0,0 +1,403 @@ |
|||||||
|
import React, { Component } from'react'; |
||||||
|
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd'; |
||||||
|
import { dictionary } from "api/dict/index"; |
||||||
|
import {findIndustry, getDetail, update} from 'api/question'; |
||||||
|
|
||||||
|
const { Option } = Select; |
||||||
|
|
||||||
|
interface QuestionState { |
||||||
|
id: string|null; |
||||||
|
questionTypes: string; |
||||||
|
industryId: string; |
||||||
|
serviceTypeId: string; |
||||||
|
questionContent: string; |
||||||
|
answerOptions: {[ |
||||||
|
key: string]: string |
||||||
|
}; |
||||||
|
answer: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface States { |
||||||
|
industryDict: any; |
||||||
|
serviceTypeDict: any; |
||||||
|
isLoading: boolean; |
||||||
|
question: QuestionState; |
||||||
|
} |
||||||
|
|
||||||
|
class QuestionUp extends Component<any, States> { |
||||||
|
formRef: any; |
||||||
|
constructor(props: any) { |
||||||
|
super(props); |
||||||
|
this.formRef = React.createRef(); |
||||||
|
this.state = { |
||||||
|
industryDict: undefined, |
||||||
|
serviceTypeDict: undefined, |
||||||
|
isLoading: false, |
||||||
|
question: { |
||||||
|
id: '', |
||||||
|
questionTypes: '1', |
||||||
|
industryId: '', |
||||||
|
serviceTypeId: '', |
||||||
|
questionContent: '', |
||||||
|
answerOptions: { A: '', B: '', C: '', D: '' }, |
||||||
|
answer: '' |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.findIndustry() |
||||||
|
this.findDict(); |
||||||
|
this.getDetail(); |
||||||
|
} |
||||||
|
|
||||||
|
// 监管行业
|
||||||
|
findIndustry() { |
||||||
|
findIndustry().then((res: any) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ industryDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// AQ服务类型
|
||||||
|
findDict() { |
||||||
|
dictionary('serviceTypeDict').then((res) => { |
||||||
|
if (res.data) { |
||||||
|
this.setState({ serviceTypeDict: res.data }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 题目详情
|
||||||
|
getDetail = () => { |
||||||
|
const id = sessionStorage.getItem('id'); |
||||||
|
sessionStorage.removeItem('id'); |
||||||
|
getDetail(id).then((res: any) => { |
||||||
|
if (res.data) { |
||||||
|
let answerOptions = {}; |
||||||
|
const options = res.data.options.split(';'); |
||||||
|
options.forEach((option: any) => { |
||||||
|
const [key, value] = option.split(':'); |
||||||
|
answerOptions[key] = value; |
||||||
|
}); |
||||||
|
const question: QuestionState = { |
||||||
|
id:id, |
||||||
|
questionTypes: String(res.data.questionTypes), |
||||||
|
industryId: String(res.data.industryId), |
||||||
|
serviceTypeId: String(res.data.serviceTypeId), |
||||||
|
questionContent: String(res.data.questionContent), |
||||||
|
answerOptions: answerOptions, |
||||||
|
answer: res.data.answer |
||||||
|
}; |
||||||
|
this.setState({ question: question }, () => { |
||||||
|
const formValues = {}; |
||||||
|
formValues['questionTypes'] = question.questionTypes; |
||||||
|
formValues['industryId'] = question.industryId; |
||||||
|
formValues['serviceTypeId'] = question.serviceTypeId; |
||||||
|
formValues['questionContent'] = question.questionContent; |
||||||
|
formValues['answer'] = question.answer; |
||||||
|
formValues['answerOption_A'] = question.answerOptions.A; |
||||||
|
formValues['answerOption_B'] = question.answerOptions.B; |
||||||
|
formValues['answerOption_C'] = question.answerOptions.C; |
||||||
|
formValues['answerOption_D'] = question.answerOptions.D; |
||||||
|
this.formRef.current.setFieldsValue(formValues); |
||||||
|
}); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
message.error('获取题目详情失败，请重试'); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 题型
|
||||||
|
handleQuestionTypeChange = (value: string) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
prevState.question.questionTypes = value; |
||||||
|
prevState.question.answer = ''; |
||||||
|
return { |
||||||
|
question: prevState.question |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 单选框
|
||||||
|
handleRadioChange = (value: string) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
prevState.question.answer = value; |
||||||
|
return { |
||||||
|
question: prevState.question |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 多选框
|
||||||
|
handleCheckboxChange = (type: string, values: (string | number | boolean)[] | null) => { |
||||||
|
const currentAnswer = this.state.question.answer; |
||||||
|
const currentSelectedArray = currentAnswer? currentAnswer.split('，') : []; |
||||||
|
if (!values || values.length === 0) { |
||||||
|
const newSelectedArray = currentSelectedArray.filter(val => val!== type); |
||||||
|
newSelectedArray.sort(); |
||||||
|
this.setState((prevState) => { |
||||||
|
prevState.question.answer = newSelectedArray.join('，'); |
||||||
|
return { |
||||||
|
question: prevState.question |
||||||
|
}; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
const stringValues = values.map((val) => String(val)); |
||||||
|
const newSelectedArray = Array.from(new Set([...currentSelectedArray, ...stringValues])); |
||||||
|
newSelectedArray.sort(); |
||||||
|
this.setState((prevState) => { |
||||||
|
prevState.question.answer = newSelectedArray.join('，'); |
||||||
|
return { |
||||||
|
question: prevState.question |
||||||
|
}; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 答案
|
||||||
|
handleAnswerOptionChange = (option: string, value: string) => { |
||||||
|
this.setState((prevState) => { |
||||||
|
prevState.question.answerOptions[option] = value; |
||||||
|
return { |
||||||
|
question: prevState.question |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 保存修改
|
||||||
|
update = () => { |
||||||
|
this.setState({ isLoading: true }); |
||||||
|
this.formRef.current.validateFields().then((values: Record<string, any>) => { |
||||||
|
const { question } = this.state; |
||||||
|
const updatedQuestion = { |
||||||
|
...question, |
||||||
|
industryId: values['industryId'], |
||||||
|
serviceTypeId: values['serviceTypeId'], |
||||||
|
questionContent: values['questionContent'] |
||||||
|
}; |
||||||
|
this.setState({ question: updatedQuestion }); |
||||||
|
update(updatedQuestion).then((res) => { |
||||||
|
const isSuccess = res.data; |
||||||
|
if (isSuccess) { |
||||||
|
message.success('修改成功'); |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
this.props.history.push('/questionList'); |
||||||
|
} else { |
||||||
|
message.error('修改失败，请稍后重试'); |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
message.error('修改时发生错误，请检查'); |
||||||
|
this.setState({ isLoading: false }); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
render() { |
||||||
|
const { industryDict, serviceTypeDict, question, isLoading } = this.state; |
||||||
|
const handleListQuestion = () => { |
||||||
|
this.props.history.push('/questionList'); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<Form ref={this.formRef} layout="inline"> |
||||||
|
<div style={{ display: 'flex'}}> |
||||||
|
<Form.Item name="questionTypes"> |
||||||
|
<Radio.Group |
||||||
|
onChange={(e) => this.handleQuestionTypeChange(e.target.value)}> |
||||||
|
<Radio.Button value="1">单选题</Radio.Button> |
||||||
|
<Radio.Button value="2">多选题</Radio.Button> |
||||||
|
</Radio.Group> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item |
||||||
|
label="监管行业：" |
||||||
|
name="industryId" |
||||||
|
> |
||||||
|
<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="AQ服务类型：" |
||||||
|
name="serviceTypeId" |
||||||
|
> |
||||||
|
<Select placeholder="请选择AQ服务类型" |
||||||
|
style={{ width: 240 }} |
||||||
|
allowClear> |
||||||
|
{ |
||||||
|
serviceTypeDict && serviceTypeDict.length > 0 ? |
||||||
|
(() => { |
||||||
|
let rows = []; |
||||||
|
for (let i = 0; i < serviceTypeDict.length; i++) { |
||||||
|
const item = serviceTypeDict[i]; |
||||||
|
rows.push( |
||||||
|
<Option |
||||||
|
value={String(item.dictKey).trim().toLowerCase()}>{item.dictValue}</Option> |
||||||
|
); |
||||||
|
} |
||||||
|
return rows; |
||||||
|
})() |
||||||
|
: |
||||||
|
<Option disabled>暂无数据</Option> |
||||||
|
} |
||||||
|
</Select> |
||||||
|
</Form.Item> |
||||||
|
</div> |
||||||
|
<Form.Item |
||||||
|
label="题干：" |
||||||
|
name="questionContent" |
||||||
|
style={{ marginTop: 10 }} |
||||||
|
> |
||||||
|
<Input.TextArea |
||||||
|
placeholder="请输入题干内容" |
||||||
|
style={{ width: 1100, height: 60 }} |
||||||
|
/> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item style={{ marginTop: 10, marginLeft: 40 }}> |
||||||
|
<div> |
||||||
|
<div style={{ display: 'flex' }}> |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange(e.target.value)} |
||||||
|
> |
||||||
|
<Radio value="A">A</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.A} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange('A', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange('A', values,)}> |
||||||
|
<Checkbox value="A">A</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.A} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange('A', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
{question.questionTypes === '1' ? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange( e.target.value)} |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
> |
||||||
|
<Radio value="B">B</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.B} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange('B', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange('B',values)}> |
||||||
|
<Checkbox value="B">B</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.B} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange( 'B', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div style={{ display: 'flex', marginTop: 10 }}> |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange( e.target.value)} |
||||||
|
> |
||||||
|
<Radio value="C">C</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.C} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange('C', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange('C', values)}> |
||||||
|
<Checkbox value="C">C</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.C} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange( 'C', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
{question.questionTypes === '1'? ( |
||||||
|
<Radio.Group |
||||||
|
value={question.answer} |
||||||
|
onChange={(e) => this.handleRadioChange( e.target.value)} |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
> |
||||||
|
<Radio value="D">D</Radio> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.D} |
||||||
|
style={{ width: 490}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange('D', e.target.value)} |
||||||
|
/> |
||||||
|
</Radio.Group> |
||||||
|
) : ( |
||||||
|
<Checkbox.Group |
||||||
|
style={{ marginLeft: 20 }} |
||||||
|
value={question.answer? String(question.answer || '').split('，') : []} |
||||||
|
onChange={(values) => this.handleCheckboxChange('D',values)}> |
||||||
|
<Checkbox value="D">D</Checkbox> |
||||||
|
<Input |
||||||
|
placeholder="请输入答案" |
||||||
|
value={question.answerOptions.D} |
||||||
|
style={{ width: 500}} |
||||||
|
onChange={(e) => this.handleAnswerOptionChange('D', e.target.value)} |
||||||
|
/> |
||||||
|
</Checkbox.Group> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Form.Item> |
||||||
|
</Form> |
||||||
|
<div style={{ textAlign: 'right', marginTop: 30 }}> |
||||||
|
<Button type="default" onClick={handleListQuestion} style={{ marginRight: 10 }}> |
||||||
|
取消 |
||||||
|
</Button> |
||||||
|
<Button type="primary" htmlType="submit" loading={isLoading} onClick={this.update}> |
||||||
|
保存修改 |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default QuestionUp; |
||||||
Loading…
Reference in new issue