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

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

Browse Source
main
hujunpeng 4 months ago
parent bc052dfa73
commit 17e162eed9
2 changed files with 286 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 274
      packages/examination/src/views/examPaper/examPaperAdd.tsx
  2. 7
      packages/examination/src/views/question/questionList.tsx

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

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd';
import {Form, Input, Button, Radio, Checkbox, Select, message, Modal, Table} from 'antd';
import { findIndustry, getRandomQuestions } from 'api/examPaper';
import { getList} from 'api/question';
import {dictionary} from "../../api/dict";
const { Option } = Select;
@ -12,6 +14,7 @@ interface optionsState {
// 定义单个试题的状态接口
interface QuestionState {
id: string;
serviceTypeId: string;
questionTypes: string;
questionContent: string;
answerOptions: optionsState[];
@ -20,27 +23,57 @@ interface QuestionState {
// 定义组件的状态接口
interface States {
num: number;
page: number;
total: number;
listQuery: {
industryId: string | undefined;
serviceTypeId: string | undefined;
questionContent: string | undefined;
};
industryDict: any;
serviceTypeDict: any;
isLoading: boolean;
questions: QuestionState[];
isModalVisible: boolean;
selectedParams: any;
selectedQuestionList: QuestionState[];
questionSelectList: QuestionState[];
queryCondition: string;
}
class ExamPaperAdd extends Component<any, States> {
formRef: any;
formRefSub: any;
constructor(props: any) {
super(props);
this.formRef = React.createRef();
this.formRefSub = React.createRef();
this.state = {
num: 10,
page: 1,
total: 0,
listQuery: {
industryId: undefined,
serviceTypeId: undefined,
questionContent: undefined
},
industryDict: undefined,
serviceTypeDict: undefined,
isLoading: false,
questions: []
questions: [],
isModalVisible: false,
selectedParams: {},
selectedQuestionList: [],
questionSelectList: [],
queryCondition: ''
};
}
// 初期
componentDidMount() {
this.findIndustry();
this.findDict();
}
// 监管行业
@ -52,6 +85,15 @@ class ExamPaperAdd extends Component<any, States> {
});
}
// AQ服务类型
findDict() {
dictionary('serviceTypeDict').then((res) => {
if (res.data) {
this.setState({ serviceTypeDict: res.data });
}
});
}
// 随机生成题目
handleRandomGenerate = () => {
this.formRef.current.validateFields(['industryId', 'questionCount'])
@ -71,9 +113,11 @@ class ExamPaperAdd extends Component<any, States> {
const options = questionData.options.split('，');
const answerOptions = options.map((option: any) => {
const [value, label] = option.split(':');
return { value, label };});
return { value, label };
});
return {
id: String(questionData.id),
serviceTypeId: String(questionData.serviceTypeId),
questionTypes: String(questionData.questionTypes),
questionContent: String(questionData.questionContent),
answerOptions: answerOptions,
@ -85,17 +129,133 @@ class ExamPaperAdd extends Component<any, States> {
} else {
message.error('未获取到随机题目');
}
}).catch(() => {
})
.catch(() => {
message.error('获取随机题目失败');
});
}).catch(() => {});
})
.catch(() => {});
};
// 打开手动选题模态框
handleOpenManualSelectionModal = () => {
const { questions } = this.state;
this.formRef.current.validateFields(['industryId', 'questionCount'])
.then((values: any) => {
const industryId = values.industryId;
const questionCount = values.questionCount;
this.setState({
isModalVisible: true,
selectedParams: { questions, industryId, questionCount }
});
})
.catch(() => {});
};
// 关闭手动选题模态框
handleCloseManualSelectionModal = () => {
this.setState({ isModalVisible: false });
};
// 处理选择试题添加到已选列表
handleSelectQuestion = (selectedRows:any) => {
const { selectedQuestionList } = this.state;
const newSelectedList = [...selectedQuestionList,...selectedRows];
this.setState({ selectedQuestionList: newSelectedList });
};
// 处理删除已选试题
handleDeleteQuestion = (record:any) => {
const { questions } = this.state;
const newQuestion = questions.filter(question => question.id!== record.id);
this.setState({ questions: newQuestion });
};
// 处理查询
handleQuery = () => {
const { num, page, selectedParams } = this.state;
const industryId = selectedParams.industryId;
const { serviceTypeId } = this.formRefSub.current.getFieldsValue(['serviceTypeId']);
const { questionContent } = this.formRefSub.current.getFieldsValue(['questionContent']);
const listQuery = {
industryId,
serviceTypeId,
questionContent
};
getList(num, page, listQuery)
.then((res: any) => {
if (res.data) {
this.setState({total: res.data.total});
const newQuestions: QuestionState[] = res.data.data.map((questionData: any) => {
const options = questionData.options.split('，');
const answerOptions = options.map((option: any) => {
const [value, label] = option.split(':');
return { value, label };
});
return {
id: String(questionData.id),
serviceTypeId: String(questionData.serviceTypeId),
questionTypes: String(questionData.questionTypes),
questionContent: String(questionData.questionContent),
answerOptions: answerOptions,
answer: String(questionData.answer)
};
});
this.setState({ questionSelectList: newQuestions });
} else {
message.warning('未找到符合条件的试题');
}
})
.catch(() => {
message.error('检索试题失败');
});
};
render() {
const { industryDict, questions, isLoading } = this.state;
const { industryDict, serviceTypeDict, questions, isLoading, isModalVisible, questionSelectList } = this.state;
// 分页切换
const changePage = (current: number, pageSize?: number) => {
setTimeout(() => {
this.setState({page: current, num: pageSize || 20});
this.handleQuery();
}, 0);
};
// 多少每页
const selectChange = (page: number, num: number) => {
this.setState({ page, num });
this.handleQuery();
};
const handleListQuestion = () => {
this.props.history.push('/examPaperList');
};
const columns: any = [
{ title: '序号', dataIndex: 'index', align: 'center', width: 60,
render: (_:number, __:number, index:number) => index + 1
},
{ 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) === 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: '操作', dataIndex: 'operation', align: 'center', width: 120,
render: (_:number, record:number) => (
<Button type="link" danger onClick={() => this.handleDeleteQuestion(record)}>删除</Button>
)
}
];
return (
<div className="container">
<Form ref={this.formRef}>
@ -148,7 +308,6 @@ class ExamPaperAdd extends Component<any, States> {
<Form.Item
label="考试时长："
name="examDuration"
rules={[{ required: true, message: '请输入考试时长' }]}
>
<Input type="number" style={{ textAlign: 'right' }} addonAfter="分钟" placeholder="请输入考试时长" min={1} />
@ -168,11 +327,18 @@ class ExamPaperAdd extends Component<any, States> {
<Button type="link" onClick={this.handleRandomGenerate}>
随机生成
</Button>
<Button type="link">手动选题</Button>
<Button type="link" onClick={this.handleOpenManualSelectionModal}>
手动选题
</Button>
</div>
</div>
{questions.map((question, index) => (
<div style={{border: '1px solid #e8e8e8', padding: 10, marginBottom: 10,backgroundColor: 'lightblue'}}
<div
style={{
border: '1px solid #e8e8e8',
padding: 10,
marginBottom: 10
}}
>
<span style={{ fontWeight: 'bold' }}>{index + 1}. {question.questionContent}</span>
<Form.Item>
@ -215,6 +381,94 @@ class ExamPaperAdd extends Component<any, States> {
</Button>
</div>
</Form>
<Modal
title="选择试题"
open={isModalVisible}
maskClosable={false}
onCancel={this.handleCloseManualSelectionModal}
footer={[
<Button key="cancel" onClick={this.handleCloseManualSelectionModal}>
取消
</Button>,
<Button key="ok" type="primary" onClick={this.handleCloseManualSelectionModal}>
确定
</Button>
]}
width={1100}
style={{ top: 20 }}
>
<div>
<h3 style={{ fontWeight: 'bold' }}>已选列表</h3>
<div style={{ height: '500', overflowY: 'auto' }}>
<Table
dataSource={questions}
columns={columns}
pagination={{
showQuickJumper: true,
pageSize: 5
}}
/>
</div>
</div>
<div>
<h3 style={{ fontWeight: 'bold' }}>试题选择</h3>
<Form
className="filter"
layout="inline"
ref={this.formRefSub}
>
<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: 500 }}/>
</Form.Item>
<Form.Item>
<Button type="primary" onClick={this.handleQuery}>查询</Button>
</Form.Item>
</Form>
</div>
<Table
dataSource={questionSelectList}
columns={columns}
rowSelection={{
onChange: this.handleSelectQuestion
}}
pagination={{
total: this.state.total,
current: this.state.page,
showQuickJumper: true,
showSizeChanger: true,
showTotal: (total) => `共 ${total} 条`,
onShowSizeChange: selectChange,
onChange: changePage
}}
/>
</Modal>
</div>
);
}

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

@ -36,9 +36,9 @@ class QuestionList extends Component<any, States> {
num: 10,
page: 1,
listQuery: {
industryId: undefined,
serviceTypeId: undefined,
questionContent: undefined
industryId: '',
serviceTypeId: '',
questionContent: ''
},
list: [],
total: 0,
@ -250,7 +250,6 @@ class QuestionList extends Component<any, States> {
},
{ 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={() => {

Write Preview
Loading…
Cancel
Save