Skip to content

X
xiaomai-cloud-class-web
Commit 5646ebc7 by yuananting
Options

fix:解决合并快捷排序冲突

parents b2cf2de1 f2de2d7f
Showing with 194 additions and 67 deletions
src/modules/teach-tool/paper-manage/OperatePaper.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-27 16:15:13
* @LastEditors: yuananting
* @LastEditTime: 2021-06-01 17:07:30
* @LastEditTime: 2021-06-09 15:17:17
* @Description: 助学工具-新建/复制/编辑试卷
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -19,6 +19,8 @@ import {
message,
Modal,
Spin,
Space,
Radio,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { XMTable } from "@/components";
......@@ -33,6 +35,7 @@ import Bus from "@/core/bus";
import { Route, withRouter } from "react-router-dom";
import * as paperEmpty from '../../lottie/paperEmpty/data.json';
import AddExam from "@/modules/teach-tool/examination-manager/AddExam";
import _ from "underscore";
const questionTypeEnum = {
SINGLE_CHOICE: "单选题",
......@@ -70,12 +73,38 @@ class OperatePaper extends Component {
},
selectQuestionModal: null,
paperPreviewModal: null,
quickSortModalVisible: false, // 快捷排序弹窗显隐
selectQuestionList: [],
currentOperate: "",
currentNav: "",
currentCategoryPapers: [],
loading: false,
check: false,
sorterMethod: "addOrder",
sorterBy: [
"SINGLE_CHOICE",
"MULTI_CHOICE",
"JUDGE",
"GAP_FILLING",
"INDEFINITE_CHOICE",
],
sorterTypeList: [
{
typeKey: "SINGLE_CHOICE",
},
{
typeKey: "MULTI_CHOICE",
},
{
typeKey: "JUDGE",
},
{
typeKey: "GAP_FILLING",
},
{
typeKey: "INDEFINITE_CHOICE",
},
],
};
}
......@@ -128,10 +157,10 @@ class OperatePaper extends Component {
};
const res = await AidToolService.queryPaperDetail(query);
const { result } = res;
const { paperName, passRate } = result;
const { paperName, passRate, questionList } = result;
this.setState(
{
selectQuestionList: result.questionList,
selectQuestionList: questionList,
formData: {
...result,
paperId: getParameterByName("paperId"),
......@@ -145,7 +174,11 @@ class OperatePaper extends Component {
paperName: this.state.formData.paperName,
passRate,
});
this.setFormData(result.questionList);
questionList.map((item, index) => {
item.sorterIndex = index;
return item;
});
this.setFormData(questionList);
}
);
};
......@@ -196,30 +229,8 @@ class OperatePaper extends Component {
return prev + Number(cur.score) || 0;
}, 0);
const sortedTableData = [
...singleQuestion,
...multiQuestion,
...indefiniteQuestion,
...judgeQuestion,
...gapQuestion,
];
let currentQuestionList = [];
switch (sorter) {
case "ascend":
currentQuestionList = sortedTableData;
break;
case "descend":
currentQuestionList = sortedTableData.reverse();
break;
default:
currentQuestionList = _selectQuestionList;
break;
}
const passScore = Math.round(totalScore * formData.passRate * 0.01);
this.setState({
selectQuestionList: currentQuestionList,
formData: {
...formData,
singleChoiceCnt: singleQuestion.length,
......@@ -241,12 +252,14 @@ class OperatePaper extends Component {
// 选择题目
chooseQuestion = () => {
const { selectQuestionList, sorterMethod, sorterBy } = this.state;
const m = (
<SelectQuestionModal
getSelectedQuestion={this.state.selectQuestionList}
getSelectedQuestion={selectQuestionList}
setSelectedQuestion={(list) => {
this.setState({ selectQuestionModal: null }, () => {
this.setFormData(list);
this.quickSorter(list, sorterMethod, sorterBy);
});
}}
close={() => {
......@@ -261,7 +274,7 @@ class OperatePaper extends Component {
// 移动已选题目
handleMoveItem = (index, moveLength) => {
const { selectQuestionList } = this.state;
const selectQuestionList = [...this.state.selectQuestionList];
const item = selectQuestionList.splice(index + moveLength, 1);
selectQuestionList.splice(index, 0, item[0]);
this.setState({ selectQuestionList }, () =>
......@@ -472,14 +485,6 @@ class OperatePaper extends Component {
});
};
// 题型排序
sortByQuestionType = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
if (columnKey === "questionType") {
this.setFormData(this.state.selectQuestionList, order);
}
};
// 表头设置
parseColumns = () => {
const { selectQuestionList } = this.state;
......@@ -498,8 +503,6 @@ class OperatePaper extends Component {
dataIndex: "questionType",
key: "questionType",
width: "12%",
sorter: true,
showSorterTooltip: false,
filters: [
{
text: "单选题",
......@@ -680,11 +683,37 @@ class OperatePaper extends Component {
return columns;
};
// 上下移题型
handleMoveTypeSorter = (index, moveLength) => {
const sorterTypeList = [...this.state.sorterTypeList];
const item = sorterTypeList.splice(index + moveLength, 1);
sorterTypeList.splice(index, 0, item[0]);
const sorterBy = _.pluck(sorterTypeList, "typeKey");
this.setState({ sorterTypeList, sorterBy });
};
// 快捷排序
quickSorter = (list, sorterMethod, sorterBy) => {
this.setState({
selectQuestionList:
sorterMethod === "addOrder"
? list.sort((a, b) => a.sorterIndex - b.sorterIndex)
: list.sort(
(a, b) =>
sorterBy.indexOf(a.questionTypeEnum || a.questionType) -
sorterBy.indexOf(b.questionTypeEnum || b.questionType)
),
});
};
render() {
const {
selectQuestionModal,
paperPreviewModal,
selectQuestionList,
quickSortModalVisible,
sorterMethod,
sorterTypeList,
sorterBy,
currentNav,
formData,
loading,
......@@ -709,6 +738,52 @@ class OperatePaper extends Component {
totalScore,
} = formData;
const { match } = this.props;
const selectQuestionList = [...this.state.selectQuestionList];
const questionTypeEnum = {
SINGLE_CHOICE: "【单选题】",
MULTI_CHOICE: "【多选题】",
JUDGE: "【判断题】",
GAP_FILLING: "【填空题】",
INDEFINITE_CHOICE: "【不定项选择题】",
};
const typeColumns = [
{
title: "题型",
dataIndex: "typeKey",
key: "typeKey",
render: (text, record, index) => <span style={{color: '#333333'}}>{questionTypeEnum[text]}</span>,
},
{
title: "操作",
key: "action",
align: 'right',
render: (text, record, index) => (
<Space size="middle">
<span
style={{color: index > 0 ? '#2966FF' : '#CCCCCC', cursor: 'pointer'}}
onClick={() => {
index > 0 && this.handleMoveTypeSorter(index, -1);
}}
>
上移
</span>
<span style={{color: '#BFBFBF'}}> | </span>
<span
style={{color: index < 4 ? '#2966FF' : '#CCCCCC', cursor: 'pointer'}}
onClick={() => {
index < 4 && this.handleMoveTypeSorter(index, 1);
}}
>
下移
</span>
</Space>
),
},
];
return (
<div>
<div className="page operate-paper-page">
......@@ -743,7 +818,6 @@ class OperatePaper extends Component {
/>
</Form.Item>
<Form.Item
name="passRate"
label="及格线："
......@@ -778,14 +852,26 @@ class OperatePaper extends Component {
</div>
</Form.Item>
<Button
className="choose-btn"
type="primary"
icon={<PlusOutlined />}
onClick={this.chooseQuestion}
>
自选题目
</Button>
<Space size={8}>
<Button
className="choose-btn"
type="primary"
icon={<PlusOutlined />}
onClick={this.chooseQuestion}
>
自选题目
</Button>
<Button
className="choose-btn"
onClick={() => {
this.setState({
quickSortModalVisible: true,
});
}}
>
快捷排序
</Button>
</Space>
{questionCnt > 0 && (
<div
className="paper-info-tip"
......@@ -812,7 +898,6 @@ class OperatePaper extends Component {
columns={this.parseColumns()}
dataSource={selectQuestionList}
pagination={false}
onChange={this.sortByQuestionType}
renderEmpty={{
image: paperEmpty,
description: <span style={{ display: 'block', paddingBottom: 24 }}>请在左上角添加题目</span>
......@@ -833,6 +918,45 @@ class OperatePaper extends Component {
</Spin>
{selectQuestionModal}
{paperPreviewModal}
<Modal
maskClosable={false}
title="快捷排序"
width={560}
visible={quickSortModalVisible}
onOk={() => {
this.setState(
{
quickSortModalVisible: false,
},
() => this.quickSorter(selectQuestionList, sorterMethod, sorterBy)
);
}}
onCancel={() => {
this.setState({ quickSortModalVisible: false });
}}
>
<Radio.Group
onChange={(e) =>
this.setState({
sorterMethod: e.target.value,
})
}
value={sorterMethod}
>
<Radio value={"addOrder"}>按添加顺序排序</Radio>
<Radio value={"typeOrder"}>按题型排序</Radio>
</Radio.Group>
{sorterMethod === "typeOrder" && (
<Table
rowClassName="table-row-style"
style={{marginTop: '24px'}}
showHeader={false}
columns={typeColumns}
dataSource={sorterTypeList}
pagination={false}
/>
)}
</Modal>
</div>
<Route
path={`${match.url}/exam-operate-page`}
......
src/modules/teach-tool/question-manage/components/OperateQuestionTab.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 14:34:29
* @LastEditors: yuananting
* @LastEditTime: 2021-06-04 17:06:46
* @LastEditTime: 2021-06-09 12:00:12
* @Description: 助学工具-题库-操作题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -66,12 +66,17 @@ class OperateQuestionTab extends Component {
}
componentDidMount() {
const { chooseOptions } = this.state;
const { questionTypeKey } = this.props;
const isEditCurrent = getParameterByName("id") && getParameterByName("type") === questionTypeKey;
const isEditCurrent =
getParameterByName("id") &&
getParameterByName("type") === questionTypeKey;
const optionSize = isEditCurrent ? 20 : 4;
if (["INDEFINITE_CHOICE", "MULTI_CHOICE", "SINGLE_CHOICE"].includes(questionTypeKey)) {
// 选择题（单选 多选 不定项）-插入4条默认选项
if (
["INDEFINITE_CHOICE", "MULTI_CHOICE", "SINGLE_CHOICE"].includes(
questionTypeKey
)
) {
// 选择题（单选 多选 不定项）-插入4条默认选项
for (var i = 0; i < optionSize; i++) {
this.handleAddOption();
this.setState({
......@@ -631,9 +636,9 @@ class OperateQuestionTab extends Component {
this.state.stemContent,
(contentItem) => contentItem.type === "RICH_TEXT"
);
if(stemContent.textLength > 1000) {
if (stemContent.textLength > 1000) {
validateError++;
}
}
let stem = stemContent.content.replace(/<[^>]+>/g, "");
stem = stem.replace(/\&nbsp\;/gi, "");
stem = stem.replace(/\s+/g, "");
......@@ -691,7 +696,7 @@ class OperateQuestionTab extends Component {
optionUnChecked = item.isCorrectAnswer
? optionUnChecked
: optionUnChecked + 1;
if(optionContent[0].textLength > 1000) {
if (optionContent[0].textLength > 1000) {
validateError++;
}
let optionInput = optionContent[0].content.replace(/<[^>]+>/g, "");
......@@ -1037,11 +1042,11 @@ class OperateQuestionTab extends Component {
return dom ? (
<div
className="question-item_question-content"
style={{
display: ["PICTURE", "VIDEO"].includes(type)
? "inline-grid"
: "flex",
}}
style={
!["PICTURE", "VIDEO"].includes(type)
? { display: "flex" }
: { float: "left" }
}
key={index}
>
{dom}
......@@ -1191,10 +1196,8 @@ class OperateQuestionTab extends Component {
data-label="正确答案"
>
{_.map(chooseOptions, (optionItem, optionIndex) => {
const {
questionOptionContentList,
isCorrectAnswer,
} = optionItem;
const { questionOptionContentList, isCorrectAnswer } =
optionItem;
optionItem.optionSort = optionIndex;
const mediaBtn = ["VOICE", "AUDIO", "PICTURE"];
const placeHold =
......
src/modules/teach-tool/question-manage/modal/PreviewQuestionModal.less
......@@ -32,7 +32,7 @@
color: #666666;
.input-box {
margin-bottom: 8px;
display: inline-block;
// display: inline-block;
*:not(p) {
font-weight: normal !important;
font-size: 14px !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment