liuyiliang
/
ccic-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

题库管理和试卷管理代码提交

Browse Source
main
hujunpeng 3 months ago
parent e0ec2a481e
commit e9093ceb57
5 changed files with 369 additions and 574 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      packages/examination/src/api/question/index.tsx
  2. 7
      packages/examination/src/views/examPaper/examPaperAdd.tsx
  3. 301
      packages/examination/src/views/question/questionAdd.tsx
  4. 502
      packages/examination/src/views/question/questionEdit.tsx
  5. 67
      packages/examination/src/views/question/questionList.tsx

66
packages/examination/src/api/question/index.tsx
Unescape View File

@ -1,26 +1,19 @@
import axios from '../axios'; import axios from '../axios';
/* /**
* 查询试题 * 查询试题
*/ */
export function getList(num: number, page: number, obj:object){ export function getList(data: any) {
const data = {
num:num,
page:page,
industryId:obj['industryId'],
serviceTypeId:obj['serviceTypeId'],
questionContent:obj['questionContent']
};
return axios({ return axios({
url: "/ex/question/getList", url: "/ex/question/getList",
method: 'post', method: 'post',
data: data data: data
}) });
} }
/* /**
* 删除试题 * 删除试题
*/ */
export function delQuestion(ids: any) { export function delQuestion(ids: any) {
return axios({ return axios({
url: '/ex/question/delQuestion', url: '/ex/question/delQuestion',
@ -29,44 +22,45 @@ export function delQuestion(ids: any) {
}); });
} }
/* /**
* 新增题目 * 添加试题
*/ */
export function add(questionData: object) { export function addQuestion(questionData: object) {
return axios({ return axios({
url: "/ex/question/add", url: "/ex/question/addQuestion",
method: 'post', method: 'post',
data: questionData data: questionData
}); });
} }
/* /**
* 修改题目 * 修改试题
*/ */
export function update(questionData: object) { export function editQuestion(questionData: object) {
return axios({ return axios({
url: "/ex/question/update", url: "/ex/question/editQuestion",
method: 'post', method: 'post',
data: questionData data: questionData
}); });
} }
/* /**
* 行业 * 获取题目详情
*/ */
export function findIndustry() { export function getQuestionDetail(id: string | null) {
return axios({ return axios({
url: '/ex/question/findIndustry', url: `/ex/question/getQuestionDetail?id=${id}`,
method: 'get' method: 'get'
}) });
} }
/* /**
* 题目详情 * 获取监管行业
*/ */
export function getDetail(id: string|null) { export function findIndustry() {
return axios({ return axios({
url: '/ex/question/getDetail?id=' + id, url: '/ex/question/findIndustry',
method: 'get' method: 'get'
}); });
} }

7
packages/examination/src/views/examPaper/examPaperAdd.tsx
Unescape View File

@ -243,7 +243,12 @@ class ExamPaperAdd extends Component<any, States> {
serviceTypeId, serviceTypeId,
questionContent questionContent
}; };
getList(num, page, listQuery) const data = {
...listQuery,
num,
page
};
getList(data)
.then((res: any) => { .then((res: any) => {
if (res.data) { if (res.data) {
this.setState({ total: res.data.total }); this.setState({ total: res.data.total });

301
packages/examination/src/views/question/questionAdd.tsx
Unescape View File

@ -1,29 +1,16 @@
import React, { Component } from'react'; import React, { Component } from'react';
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd'; import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd';
import { dictionary } from "api/dict/index"; import { dictionary } from "api/dict/index";
import { add, findIndustry } from 'api/question'; import { addQuestion, findIndustry } from 'api/question';
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
const { Option} = Select; const { Option} = Select;
interface QuestionState {
questionTypes: string;
industryId: string;
serviceTypeId: string;
questionContent: string;
optionA: string;
optionB: string;
optionC: string;
optionD: string;
answer: string;
}
interface States { interface States {
industryDict: any; industryDict: any;
serviceTypeDict: any; serviceTypeDict: any;
questions: QuestionState[]; formCount: number;
} }
class QuestionAdd extends Component<any, States> { class QuestionAdd extends Component<any, States> {
@ -36,28 +23,16 @@ class QuestionAdd extends Component<any, States> {
this.state = { this.state = {
industryDict: [], industryDict: [],
serviceTypeDict: [], serviceTypeDict: [],
questions: [ formCount: 1
{
questionTypes: '1',
industryId: '',
serviceTypeId: '',
questionContent: '',
optionA: '',
optionB: '',
optionC: '',
optionD: '',
answer: ''
}
]
}; };
} }
componentDidMount() { componentDidMount() {
this.findDict(); this.handleFindDict();
} }
// 字典 // 字典
findDict() { handleFindDict() {
// 监管行业 // 监管行业
findIndustry() findIndustry()
.then((res: any) => { .then((res: any) => {
@ -82,97 +57,48 @@ class QuestionAdd extends Component<any, States> {
// 题型切换 // 题型切换
handleQuestionTypeChange = (index: number, value: string) => { handleQuestionTypeChange = (index: number, value: string) => {
this.setState((prevState) => { const formValues = {};
const questions = [...prevState.questions]; formValues[`questionTypes_${index}`] = value;
questions[index].questionTypes = value; formValues[`answer_${index}`] = '';
questions[index].answer = ''; this.formRef.current.setFieldsValue(formValues);
return {
questions
};
});
};
// 单选框Change
handleRadioChange = (index: number, value: string) => {
this.setState((prevState) => {
const questions = [...prevState.questions];
questions[index].answer = value;
return {
questions
};
});
};
// 多选框Change
handleCheckboxChange = (index: number, values: CheckboxValueType[]) => {
this.setState((prevState) => {
const questions = [...prevState.questions];
const stringValues = values.map((val) => String(val));
stringValues.sort();
questions[index].answer = stringValues.join('，');
return {
questions
};
});
}; };
// 新增试题 // 新增试题
addNewQuestion = () => { handleAddNewQuestion = () => {
this.setState((prevState) => ({ this.setState((prevState) => ({
questions: [ formCount: prevState.formCount + 1,
...prevState.questions,
{
questionTypes: '1',
industryId: '',
serviceTypeId: '',
questionContent: '',
optionA: '',
optionB: '',
optionC: '',
optionD: '',
answer: ''
}
]
})); }));
}; };
// 删除试题 // 删除试题
deleteQuestion = (index: number) => { handleDeleteQuestion = (index: number) => {
this.setState((prevState) => { this.setState((prevState) => ({
const questions = [...prevState.questions]; formCount: prevState.formCount - 1,
questions.splice(index, 1); }));
return {
questions
};
});
}; };
// 处理表单提交 // 处理表单提交
handleSubmit = () => { handleSubmit = () => {
this.formRef.current.validateFields().then((values: any) => { this.formRef.current.validateFields().then((values: any) => {
const questions = this.state.questions.map((question, index) => { const questions = [];
const industryId = values[`industryId_${index}`]; for (let i = 0; i < this.state.formCount; i++) {
const serviceTypeId = values[`serviceTypeId_${index}`]; const question = {
const questionContent = values[`questionContent_${index}`]; questionTypes: values[`questionTypes_${i}`],
const optionA = values[`optionA_${index}`] industryId: values[`industryId_${i}`],
const optionB = values[`optionB_${index}`]; serviceTypeId: values[`serviceTypeId_${i}`],
const optionC = values[`optionC_${index}`]; questionContent: values[`questionContent_${i}`],
const optionD = values[`optionD_${index}`]; optionA: values[`optionA_${i}`],
return { optionB: values[`optionB_${i}`],
...question, optionC: values[`optionC_${i}`],
industryId, optionD: values[`optionD_${i}`],
serviceTypeId, answer: values[`answer_${i}`],
questionContent,
optionA,
optionB,
optionC,
optionD,
}; };
}); questions.push(question);
}
add(questions).then((res) => { addQuestion(questions).then((res) => {
const count = res.data; const success = res['success'];
if (count > 0) { if (success) {
message.success(`新增成功`); message.success(`新增成功`);
this.props.history.push('/questionList'); this.props.history.push('/questionList');
} else { } else {
@ -181,12 +107,11 @@ class QuestionAdd extends Component<any, States> {
}).catch(() => { }).catch(() => {
message.error('新增试题时发生错误，请检查'); message.error('新增试题时发生错误，请检查');
}); });
}).catch(() => {
}); });
}; };
// 下载模板 // 下载模板
downloadTemplate = () => { handleDownloadTemplate = () => {
const headers = ['题型', '监管行业', 'AQ服务类型', '题干', '选项A', '选项B', '选项C', '选项D', '答案']; const headers = ['题型', '监管行业', 'AQ服务类型', '题干', '选项A', '选项B', '选项C', '选项D', '答案'];
const ws = XLSX.utils.aoa_to_sheet([headers]); const ws = XLSX.utils.aoa_to_sheet([headers]);
const wb = XLSX.utils.book_new(); const wb = XLSX.utils.book_new();
@ -207,37 +132,28 @@ class QuestionAdd extends Component<any, States> {
const worksheet = workbook.Sheets[firstSheetName]; const worksheet = workbook.Sheets[firstSheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
const rows = jsonData.slice(1); const rows = jsonData.slice(1);
const newQuestions = rows.map((row: any) => { const formValues = {};
const question: QuestionState = { rows.forEach((row: any, index) => {
questionTypes: String(row[0]), formValues[`questionTypes_${index}`] = String(row[0]);
industryId: String(row[1]), formValues[`industryId_${index}`] = String(row[1]);
serviceTypeId: String(row[2]), formValues[`serviceTypeId_${index}`] = String(row[2]);
questionContent: String(row[3]), formValues[`questionContent_${index}`] = String(row[3]);
optionA: String(row[4]), formValues[`optionA_${index}`] = String(row[4]);
optionB: String(row[5]), formValues[`optionB_${index}`] = String(row[5]);
optionC: String(row[6]), formValues[`optionC_${index}`] = String(row[6]);
optionD: String(row[7]), formValues[`optionD_${index}`] = String(row[7]);
answer: String(row[8]) formValues[`answer_${index}`] = String(row[8]);
};
return question;
}); });
this.setState({ questions: newQuestions }, () => { this.setState({ formCount: rows.length }, () => {
const formValues = {};
newQuestions.forEach((question, index) => {
formValues[`questionTypes_${index}`] = question.questionTypes;
formValues[`industryId_${index}`] = question.industryId;
formValues[`serviceTypeId_${index}`] = question.serviceTypeId;
formValues[`questionContent_${index}`] = question.questionContent;
formValues[`answer_${index}`] = question.answer;
formValues[`optionA_${index}`] = question.optionA;
formValues[`optionB_${index}`] = question.optionB;
formValues[`optionC_${index}`] = question.optionC;
formValues[`optionD_${index}`] = question.optionD;
});
this.formRef.current.setFieldsValue(formValues); this.formRef.current.setFieldsValue(formValues);
}); });
}; };
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
const input = this.fileInputRef.current;
if (input) {
input.value = null;
}
} }
}; };
@ -247,15 +163,14 @@ class QuestionAdd extends Component<any, States> {
}; };
render() { render() {
const { industryDict, serviceTypeDict, questions } = this.state; const { industryDict, serviceTypeDict, formCount } = this.state;
// 使用 this.props.history 进行页面跳转
const handleListQuestion = () => { const handleListQuestion = () => {
this.props.history.push('/questionList'); this.props.history.push('/questionList');
}; };
return ( return (
<div className="container"> <div className="container">
<div style={{textAlign: 'right'}}> <div style={{textAlign: 'right'}}>
<Button type="default" style={{marginRight: 10}} onClick={this.downloadTemplate}>下载模版</Button> <Button type="default" style={{marginRight: 10}} onClick={this.handleDownloadTemplate}>下载模版</Button>
<Button type="default" onClick={this.handleImportClick}>一键导入</Button> <Button type="default" onClick={this.handleImportClick}>一键导入</Button>
<input <input
type="file" type="file"
@ -265,11 +180,8 @@ class QuestionAdd extends Component<any, States> {
onChange={this.handleFileChange} onChange={this.handleFileChange}
/> />
</div> </div>
<Form <Form ref={this.formRef} layout="inline">
ref={this.formRef} {Array.from({ length: formCount }, (_, index) => (
layout="inline"
>
{questions.map((question, index) => (
<div key={index} style={{marginBottom: 30}}> <div key={index} style={{marginBottom: 30}}>
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
<Form.Item name={`questionTypes_${index}`}> <Form.Item name={`questionTypes_${index}`}>
@ -332,7 +244,7 @@ class QuestionAdd extends Component<any, States> {
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
{index > 0 && ( {index > 0 && (
<Button type="link" onClick={() => this.deleteQuestion(index)}>X</Button>)} <Button type="link" onClick={() => this.handleDeleteQuestion(index)}>X</Button>)}
</Form.Item> </Form.Item>
</div> </div>
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
@ -350,87 +262,64 @@ class QuestionAdd extends Component<any, States> {
</div> </div>
<div style={{marginTop: 10, marginLeft: 40}}> <div style={{marginTop: 10, marginLeft: 40}}>
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
{question.questionTypes === '1' ? ( <Form.Item
<Form.Item> name={`answer_${index}`}
<Radio.Group rules={[{ required: true, message: '请选择答案' }]}>
name={`answer_${index}`} {this.formRef.current && this.formRef.current.getFieldValue(`questionTypes_${index}`) === '1' ? (
value={question.answer} <Radio.Group>
onChange={(e) => this.handleRadioChange(index, e.target.value)} <div style={{display: 'flex'}}>
>
<div style={{display: 'flex'}}>
<Form.Item rules={[{required: true, message: '请选择选项'}]}>
<Radio value="A">A</Radio> <Radio value="A">A</Radio>
</Form.Item> <Form.Item name={`optionA_${index}`} rules={[{required: true, message: '请输入答案A'}]}>
<Form.Item name={`optionA_${index}`} rules={[{required: true, message: '请输入答案A'}]}> <Input placeholder="请输入答案" style={{width: 500}}/>
<Input placeholder="请输入答案" style={{width: 490}}/> </Form.Item>
</Form.Item>
<Form.Item>
<Radio value="B">B</Radio> <Radio value="B">B</Radio>
<Form.Item name={`optionB_${index}`} rules={[{required: true, message: '请输入答案B'}]}>
<Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item>
</div>
<div style={{display: 'flex', marginTop: 10}}>
<Radio value="C">C</Radio>
<Form.Item name={`optionC_${index}`} rules={[{required: true, message: '请输入答案C'}]}>
<Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item>
<Radio value="D">D</Radio>
<Form.Item name={`optionD_${index}`} rules={[{required: true, message: '请输入答案D'}]}>
<Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item>
</div>
</Radio.Group>
) : (
<Checkbox.Group>
<div style={{display: 'flex'}}>
<Checkbox value="A">A</Checkbox>
<Form.Item name={`optionA_${index}`} rules={[{required: true, message: '请输入答案A'}]}>
<Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item> </Form.Item>
<Checkbox value="B">B</Checkbox>
<Form.Item name={`optionB_${index}`} rules={[{required: true, message: '请输入答案B'}]}> <Form.Item name={`optionB_${index}`} rules={[{required: true, message: '请输入答案B'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/> <Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item> </Form.Item>
</div> </div>
<div style={{display: 'flex', marginTop: 10}}> <div style={{display: 'flex', marginTop: 10}}>
<Form.Item> <Checkbox value="C">C</Checkbox>
<Radio value="C">C</Radio>
</Form.Item>
<Form.Item name={`optionC_${index}`} rules={[{required: true, message: '请输入答案C'}]}> <Form.Item name={`optionC_${index}`} rules={[{required: true, message: '请输入答案C'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/> <Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item>
<Form.Item>
<Radio value="D">D</Radio>
</Form.Item> </Form.Item>
<Checkbox value="D">D</Checkbox>
<Form.Item name={`optionD_${index}`} rules={[{required: true, message: '请输入答案D'}]}> <Form.Item name={`optionD_${index}`} rules={[{required: true, message: '请输入答案D'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/> <Input placeholder="请输入答案" style={{width: 500}}/>
</Form.Item> </Form.Item>
</div> </div>
</Radio.Group> </Checkbox.Group>
</Form.Item> )}
</Form.Item>
) : (
<Checkbox.Group
name={`answer_${index}`}
value={question.answer ? String(question.answer || '').split('，') : []}
onChange={(values) => this.handleCheckboxChange(index, values)}
>
<div style={{display: 'flex'}}>
<Form.Item>
<Checkbox value="A">A</Checkbox>
</Form.Item>
<Form.Item name={`optionA_${index}`} rules={[{required: true, message: '请输入答案A'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/>
</Form.Item>
<Form.Item>
<Checkbox value="B">B</Checkbox>
</Form.Item>
<Form.Item name={`optionB_${index}`} rules={[{required: true, message: '请输入答案B'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/>
</Form.Item>
</div>
<div style={{display: 'flex', marginTop: 10}}>
<Form.Item>
<Checkbox value="C">C</Checkbox>
</Form.Item>
<Form.Item name={`optionC_${index}`} rules={[{required: true, message: '请输入答案C'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/>
</Form.Item>
<Form.Item>
<Checkbox value="D">D</Checkbox>
</Form.Item>
<Form.Item name={`optionD_${index}`} rules={[{required: true, message: '请输入答案D'}]}>
<Input placeholder="请输入答案" style={{width: 490}}/>
</Form.Item>
</div>
</Checkbox.Group>
)}
</div> </div>
</div> </div>
</div> </div>
))} ))}
</Form> </Form>
<div style={{textAlign: 'right'}}> <div style={{textAlign: 'right'}}>
<Button type="default" onClick={this.addNewQuestion}> <Button type="default" onClick={this.handleAddNewQuestion}>
新增试题 新增试题
</Button> </Button>
</div> </div>

502
packages/examination/src/views/question/questionEdit.tsx
Unescape View File

@ -1,211 +1,119 @@
import React, { Component } from'react'; import React, { Component } from'react';
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd'; import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd';
import { dictionary } from "api/dict/index"; import { dictionary } from "api/dict/index";
import {findIndustry, getDetail, update} from 'api/question'; import { findIndustry, getQuestionDetail, editQuestion } from 'api/question';
const { Option } = Select; const { Option } = Select;
interface QuestionState {
id: string|null;
questionTypes: string;
industryId: string;
serviceTypeId: string;
questionContent: string;
answerOptions: {[
key: string]: string
};
answer: string;
}
interface States { interface States {
industryDict: any; industryDict: any;
serviceTypeDict: any; serviceTypeDict: any;
isLoading: boolean; questionTypes: string;
question: QuestionState;
} }
class QuestionEdit extends Component<any, States> { class QuestionEdit extends Component<any, States> {
formRef: any; formRef: any;
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.formRef = React.createRef(); this.formRef = React.createRef();
this.state = { this.state = {
industryDict: undefined, industryDict: [],
serviceTypeDict: undefined, serviceTypeDict: [],
isLoading: false, questionTypes: ''
question: {
id: '',
questionTypes: '1',
industryId: '',
serviceTypeId: '',
questionContent: '',
answerOptions: { A: '', B: '', C: '', D: '' },
answer: ''
},
}; };
} }
componentDidMount() { componentDidMount() {
this.findIndustry() this.handleFindDict();
this.findDict(); this.handleGetQuestionDetail();
this.getDetail();
}
// 监管行业
findIndustry() {
findIndustry().then((res: any) => {
if (res.data) {
this.setState({ industryDict: res.data });
}
});
} }
// AQ服务类型 // 字典
findDict() { handleFindDict() {
dictionary('serviceTypeDict').then((res) => { findIndustry()
if (res.data) { .then((res: any) => {
this.setState({ serviceTypeDict: res.data }); if (res.data) {
} this.setState({ industryDict: res.data });
}); }
});
dictionary('serviceTypeDict')
.then((res) => {
if (res.data) {
this.setState({ serviceTypeDict: res.data });
}
});
} }
// 题目详情 // 试题详情
getDetail = () => { handleGetQuestionDetail = () => {
const id = sessionStorage.getItem('id'); const id = sessionStorage.getItem('id');
sessionStorage.removeItem('id'); sessionStorage.removeItem('id');
getDetail(id).then((res: any) => { getQuestionDetail(id).then((res: any) => {
if (res.data) { if (res.data) {
let answerOptions = {}; //this.setState({ questionTypes: String(res.data.questionTypes) });
const formValues = {};
formValues['id'] = res.data.id;
formValues['questionTypes'] = String(res.data.questionTypes);
formValues['industryId'] = String(res.data.industryId);
formValues['serviceTypeId'] = String(res.data.serviceTypeId);
formValues['questionContent'] = res.data.questionContent;
formValues['answer'] = res.data.answer;
const options = res.data.options.split('，'); const options = res.data.options.split('，');
options.forEach((option: any) => { options.forEach((option: any) => {
const [key, value] = option.split(':'); const [key, value] = option.split(':');
answerOptions[key] = value; formValues[`option${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);
}); });
this.formRef.current.setFieldsValue(formValues);
} }
}).catch(() => { }).catch(() => {
message.error('获取题目详情失败，请重试'); message.error('获取题目详情失败');
}); });
}; };
// 题型 // 题型切换
handleQuestionTypeChange = (value: string) => { handleQuestionTypeChange = (value: string) => {
this.setState((prevState) => { 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 { return {
question: prevState.question questionTypes: value
}; };
}); });
const formValues = {};
formValues['answer'] = '';
this.formRef.current.setFieldsValue(formValues);
}; };
// 保存修改 // 保存修改
update = () => { handleEditQuestion = () => {
this.setState({ isLoading: true }); this.formRef.current.validateFields().then((values: any) => {
this.formRef.current.validateFields().then((values: Record<string, any>) => { if (Array.isArray(values.answer)) {
const { question } = this.state; values.answer.sort();
const updatedQuestion = { values.answer = values.answer.join('，');
...question, }
industryId: values['industryId'], editQuestion(values).then((res) => {
serviceTypeId: values['serviceTypeId'], const success = res['success'];
questionContent: values['questionContent'] if (success) {
};
this.setState({ question: updatedQuestion });
update(updatedQuestion).then((res) => {
const isSuccess = res.data;
if (isSuccess) {
message.success('修改成功'); message.success('修改成功');
this.setState({ isLoading: false });
this.props.history.push('/questionList'); this.props.history.push('/questionList');
} else { } else {
message.error('修改失败，请稍后重试'); message.error('修改失败，请稍后重试');
this.setState({ isLoading: false });
} }
}).catch(() => { }).catch(() => {
message.error('修改时发生错误，请检查'); message.error('修改时发生错误，请检查');
this.setState({ isLoading: false });
}); });
}); });
}; };
render() { render() {
const { industryDict, serviceTypeDict, question, isLoading } = this.state; const { industryDict, serviceTypeDict, questionTypes } = this.state;
const handleListQuestion = () => {
this.props.history.push('/questionList');
};
return ( return (
<div className="container"> <div className="container">
<Form ref={this.formRef} layout="inline"> <Form ref={this.formRef} layout="inline">
<div style={{ display: 'flex'}}> <div style={{ display: 'flex' }}>
<Form.Item name="questionTypes"> <Form.Item name="questionTypes">
<Radio.Group <Radio.Group
onChange={(e) => this.handleQuestionTypeChange(e.target.value)}> onChange={(e) => this.handleQuestionTypeChange(e.target.value)}
>
<Radio.Button value="1">单选题</Radio.Button> <Radio.Button value="1">单选题</Radio.Button>
<Radio.Button value="2">多选题</Radio.Button> <Radio.Button value="2">多选题</Radio.Button>
</Radio.Group> </Radio.Group>
@ -215,24 +123,27 @@ class QuestionEdit extends Component<any, States> {
name="industryId" name="industryId"
rules={[{ required: true, message: '请选择监管行业' }]} rules={[{ required: true, message: '请选择监管行业' }]}
> >
<Select placeholder="请选择监管行业" <Select
style={{ width: 240 }} placeholder="请选择监管行业"
allowClear> style={{ width: 240 }}
{ allowClear
industryDict && industryDict.length > 0 ? >
(() => { {industryDict && industryDict.length > 0 ? (
let rows = []; (() => {
for (let i = 0; i < industryDict.length; i++) { let rows = [];
const item = industryDict[i]; for (let i = 0; i < industryDict.length; i++) {
rows.push( const item = industryDict[i];
<Option value={item.industryId}>{item.industryName}</Option> rows.push(
); <Option value={item.industryId}>
} {item.industryName}
return rows; </Option>
})() );
: }
<Option disabled>暂无数据</Option> return rows;
} })()
) : (
<Option disabled>暂无数据</Option>
)}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@ -240,25 +151,29 @@ class QuestionEdit extends Component<any, States> {
name="serviceTypeId" name="serviceTypeId"
rules={[{ required: true, message: '请选择AQ服务类型' }]} rules={[{ required: true, message: '请选择AQ服务类型' }]}
> >
<Select placeholder="请选择AQ服务类型" <Select
style={{ width: 240 }} placeholder="请选择AQ服务类型"
allowClear> style={{ width: 240 }}
{ allowClear
serviceTypeDict && serviceTypeDict.length > 0 ? >
(() => { {serviceTypeDict && serviceTypeDict.length > 0 ? (
let rows = []; (() => {
for (let i = 0; i < serviceTypeDict.length; i++) { let rows = [];
const item = serviceTypeDict[i]; for (let i = 0; i < serviceTypeDict.length; i++) {
rows.push( const item = serviceTypeDict[i];
<Option rows.push(
value={String(item.dictKey).trim().toLowerCase()}>{item.dictValue}</Option> <Option
); value={String(item.dictKey).trim().toLowerCase()}
} >
return rows; {item.dictValue}
})() </Option>
: );
<Option disabled>暂无数据</Option> }
} return rows;
})()
) : (
<Option disabled>暂无数据</Option>
)}
</Select> </Select>
</Form.Item> </Form.Item>
</div> </div>
@ -273,128 +188,123 @@ class QuestionEdit extends Component<any, States> {
style={{ width: 1100, height: 60 }} style={{ width: 1100, height: 60 }}
/> />
</Form.Item> </Form.Item>
<Form.Item style={{ marginTop: 10, marginLeft: 40 }}> <div style={{ display: 'flex', marginTop: 10, marginLeft: 50 }}>
<div> <Form.Item
<div style={{ display: 'flex' }}> name={`answer`}
{question.questionTypes === '1'? ( rules={[{ required: true, message: '请选择答案' }]}
<Radio.Group >
value={question.answer} {questionTypes === '1' ? (
onChange={(e) => this.handleRadioChange(e.target.value)} <Radio.Group>
> <div style={{ display: 'flex' }}>
<Radio value="A">A</Radio> <Radio value="A">A</Radio>
<Input <Form.Item
placeholder="请输入答案" name={`optionA`}
value={question.answerOptions.A} rules={[{ required: true, message: '请输入答案A' }]}
style={{ width: 490}} >
onChange={(e) => this.handleAnswerOptionChange('A', e.target.value)} <Input
/> placeholder="请输入答案"
</Radio.Group> style={{ width: 500 }}
) : ( />
<Checkbox.Group </Form.Item>
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> <Radio value="B">B</Radio>
<Input <Form.Item
placeholder="请输入答案" name={`optionB`}
value={question.answerOptions.B} rules={[{ required: true, message: '请输入答案B' }]}
style={{ width: 490}} >
onChange={(e) => this.handleAnswerOptionChange('B', e.target.value)} <Input
/> placeholder="请输入答案"
</Radio.Group> style={{ width: 500 }}
) : ( />
<Checkbox.Group </Form.Item>
style={{ marginLeft: 20 }} </div>
value={question.answer? String(question.answer || '').split('，') : []} <div style={{ display: 'flex', marginTop: 10 }}>
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> <Radio value="C">C</Radio>
<Input <Form.Item
placeholder="请输入答案" name={`optionC`}
value={question.answerOptions.C} rules={[{ required: true, message: '请输入答案C' }]}
style={{ width: 490}} >
onChange={(e) => this.handleAnswerOptionChange('C', e.target.value)} <Input
/> placeholder="请输入答案"
</Radio.Group> style={{ width: 500 }}
) : ( />
<Checkbox.Group </Form.Item>
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> <Radio value="D">D</Radio>
<Input <Form.Item
placeholder="请输入答案" name={`optionD`}
value={question.answerOptions.D} rules={[{ required: true, message: '请输入答案D' }]}
style={{ width: 490}} >
onChange={(e) => this.handleAnswerOptionChange('D', e.target.value)} <Input
/> placeholder="请输入答案"
</Radio.Group> style={{ width: 500 }}
) : ( />
<Checkbox.Group </Form.Item>
style={{ marginLeft: 20 }} </div>
value={question.answer? String(question.answer || '').split('，') : []} </Radio.Group>
onChange={(values) => this.handleCheckboxChange('D',values)}> ) : (
<Checkbox.Group>
<div style={{ display: 'flex' }}>
<Checkbox value="A">A</Checkbox>
<Form.Item
name={`optionA`}
rules={[{ required: true, message: '请输入答案A' }]}
>
<Input
placeholder="请输入答案"
style={{ width: 500 }}
/>
</Form.Item>
<Checkbox value="B">B</Checkbox>
<Form.Item
name={`optionB`}
rules={[{ required: true, message: '请输入答案B' }]}
>
<Input
placeholder="请输入答案"
style={{ width: 500 }}
/>
</Form.Item>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<Checkbox value="C">C</Checkbox>
<Form.Item
name={`optionC`}
rules={[{ required: true, message: '请输入答案C' }]}
>
<Input
placeholder="请输入答案"
style={{ width: 500 }}
/>
</Form.Item>
<Checkbox value="D">D</Checkbox> <Checkbox value="D">D</Checkbox>
<Input <Form.Item
placeholder="请输入答案" name={`optionD`}
value={question.answerOptions.D} rules={[{ required: true, message: '请输入答案D' }]}
style={{ width: 500}} >
onChange={(e) => this.handleAnswerOptionChange('D', e.target.value)} <Input
/> placeholder="请输入答案"
</Checkbox.Group> style={{ width: 500 }}
)} />
</div> </Form.Item>
</div> </div>
</Checkbox.Group>
)}
</Form.Item>
</div>
<Form.Item name="id">
<Input type="hidden" />
</Form.Item> </Form.Item>
</Form> </Form>
<div style={{ textAlign: 'right', marginTop: 30 }}> <div style={{ textAlign: 'right', marginTop: 30 }}>
<Button type="default" onClick={handleListQuestion} style={{ marginRight: 10 }}> <Button
type="default"
onClick={() => {
this.props.history.push(`/questionList`);
}}
style={{ marginRight: 10 }}
>
取消 取消
</Button> </Button>
<Button type="primary" htmlType="submit" loading={isLoading} onClick={this.update}> <Button type="primary" htmlType="submit" onClick={this.handleEditQuestion}>
保存修改 保存修改
</Button> </Button>
</div> </div>

67
packages/examination/src/views/question/questionList.tsx
Unescape View File

@ -1,4 +1,4 @@
import React, { Component } from'react'; import React, { Component } from 'react';
import { Form, Input, Button, Table, Select, message, Modal } from 'antd'; import { Form, Input, Button, Table, Select, message, Modal } from 'antd';
import { delQuestion, findIndustry, getList } from 'api/question'; import { delQuestion, findIndustry, getList } from 'api/question';
import { dictionary } from "api/dict/index"; import { dictionary } from "api/dict/index";
@ -9,11 +9,6 @@ interface States {
num: number; num: number;
page: number; page: number;
total: number; total: number;
listQuery: {
industryId: string;
serviceTypeId: string;
questionContent: string;
};
list: any[]; list: any[];
loading: boolean; loading: boolean;
industryDict: any; industryDict: any;
@ -31,11 +26,6 @@ class QuestionList extends Component<any, States> {
num: 10, num: 10,
page: 1, page: 1,
total: 0, total: 0,
listQuery: {
industryId: '',
serviceTypeId: '',
questionContent: ''
},
list: [], list: [],
loading: false, loading: false,
industryDict: [], industryDict: [],
@ -46,7 +36,7 @@ class QuestionList extends Component<any, States> {
componentDidMount() { componentDidMount() {
this.findDict(); this.findDict();
this.getList(); this.handlegetList();
} }
// 字典 // 字典
@ -61,6 +51,7 @@ class QuestionList extends Component<any, States> {
.catch(() => { .catch(() => {
message.error('获取监管行业字典数据失败，请稍后重试'); message.error('获取监管行业字典数据失败，请稍后重试');
}); });
// AQ服务类型 // AQ服务类型
dictionary('serviceTypeDict') dictionary('serviceTypeDict')
.then((res) => { .then((res) => {
@ -74,10 +65,18 @@ class QuestionList extends Component<any, States> {
} }
// 查询 // 查询
getList() { handlegetList() {
this.setState({ loading: true }); this.setState({ loading: true });
const { num, page, listQuery } = this.state; const values = this.formRef.current.getFieldsValue();
getList(num, page, listQuery) const { num, page } = this.state;
const data = {
...values,
num,
page
};
getList(data)
.then((res) => { .then((res) => {
this.setState({ this.setState({
list: res.data.data, list: res.data.data,
@ -96,13 +95,6 @@ class QuestionList extends Component<any, States> {
// 重置 // 重置
handleReset = () => { handleReset = () => {
this.formRef.current.resetFields(); this.formRef.current.resetFields();
this.setState({
listQuery: {
industryId: '',
serviceTypeId: '',
questionContent: '',
},
});
}; };
// 删除问题 // 删除问题
@ -117,7 +109,7 @@ class QuestionList extends Component<any, States> {
const success = res['success']; const success = res['success'];
if (success) { if (success) {
message.success('删除成功'); message.success('删除成功');
this.getList(); this.handlegetList();
} else { } else {
message.error('删除失败，请稍后重试'); message.error('删除失败，请稍后重试');
} }
@ -139,6 +131,7 @@ class QuestionList extends Component<any, States> {
message.warning('请选择要删除的问题').then(); message.warning('请选择要删除的问题').then();
return; return;
} }
Modal.confirm({ Modal.confirm({
title: '确认删除', title: '确认删除',
content: '你确定要删除这些选中的问题吗？', content: '你确定要删除这些选中的问题吗？',
@ -148,7 +141,7 @@ class QuestionList extends Component<any, States> {
const success = res['success']; const success = res['success'];
if (success) { if (success) {
message.success('删除成功'); message.success('删除成功');
this.getList(); this.handlegetList();
} else { } else {
message.error('删除失败，请稍后重试'); message.error('删除失败，请稍后重试');
} }
@ -170,16 +163,10 @@ class QuestionList extends Component<any, States> {
}; };
render() { render() {
const onFinish = (values: object) => { const changePage = (current: number, pageSize: number) => {
const listQuery = { ...this.state.listQuery, ...values };
this.setState({ listQuery });
this.getList();
};
const changePage = (current: number, pageSize?: number) => {
setTimeout(() => { setTimeout(() => {
this.setState({ page: current, num: pageSize || 20 }); this.setState({ page: current, num: pageSize });
this.getList(); this.handlegetList();
}, 0); }, 0);
}; };
@ -192,6 +179,7 @@ class QuestionList extends Component<any, States> {
page, page,
num num
} = this.state; } = this.state;
const columns: any = [ const columns: any = [
{ {
title: '序号', title: '序号',
@ -273,7 +261,6 @@ class QuestionList extends Component<any, States> {
ref={this.formRef} ref={this.formRef}
className="filter" className="filter"
layout="inline" layout="inline"
onFinish={onFinish}
> >
<Form.Item <Form.Item
label="监管行业：" label="监管行业："
@ -301,6 +288,7 @@ class QuestionList extends Component<any, States> {
} }
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="AQ服务类型：" label="AQ服务类型："
name="serviceTypeId" name="serviceTypeId"
@ -327,6 +315,7 @@ class QuestionList extends Component<any, States> {
} }
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="题干条件：" label="题干条件："
name="questionContent" name="questionContent"
@ -336,13 +325,18 @@ class QuestionList extends Component<any, States> {
style={{ width: 240 }} style={{ width: 240 }}
/> />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="default" onClick={this.handleReset}>重置</Button> <Button type="default" onClick={this.handleReset}>重置</Button>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" htmlType="submit">查询</Button> <Button type="primary" htmlType="submit" onClick={() => {
this.handlegetList();
}}>查询</Button>
</Form.Item> </Form.Item>
</Form> </Form>
<Form <Form
className="filter" className="filter"
layout="inline" layout="inline"
@ -351,12 +345,14 @@ class QuestionList extends Component<any, States> {
<Form.Item> <Form.Item>
<Button type="default" onClick={this.handleBatchDeleteQuestions}>删除</Button> <Button type="default" onClick={this.handleBatchDeleteQuestions}>删除</Button>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" onClick={() => { <Button type="primary" onClick={() => {
this.props.history.push('/questionAdd'); this.props.history.push('/questionAdd');
}}>新增试题</Button> }}>新增试题</Button>
</Form.Item> </Form.Item>
</Form> </Form>
<Table <Table
dataSource={list} dataSource={list}
columns={columns} columns={columns}
@ -382,4 +378,5 @@ class QuestionList extends Component<any, States> {
); );
} }
} }
export default QuestionList; export default QuestionList;
Write Preview
Loading…
Cancel
Save