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

8de5c4d5 · yuananting · 6f6f0307 · 64e0b3ef · 8de5c4d5 · 8de5c4d5
Commit 8de5c4d5 authored Jun 08, 2021 by yuananting
Hide whitespace changes
Inline Side-by-side

Showing with 156 additions and 44 deletions

src/modules/teach-tool/paper-manage/OperatePaper.jsx
+153 -42

src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.jsx
+3 -2

No files found.
--- a/src/modules/teach-tool/paper-manage/OperatePaper.jsx
+++ b/src/modules/teach-tool/paper-manage/OperatePaper.jsx
 /*
 * @Author: yuananting
 * @Date: 2021-03-27 16:15:13
- * @LastEditors: Please set LastEditors
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-06-08 10:11:08
+ * @LastEditTime: 2021-06-08 10:34:53
 * @Description: 助学工具-新建/复制/编辑试卷
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -19,6 +19,8 @@ import {
  message,
  Modal,
  Spin,
+  Space,
+  Radio,
 } from "antd";
 import Lottie from 'react-lottie';
 import { PlusOutlined } from "@ant-design/icons";
@@ -34,6 +36,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: "单选题",
@@ -71,12 +74,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",
+        },
+      ],
    };
  }
@@ -129,10 +158,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"),
@@ -146,7 +175,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);
      }
    );
  };
@@ -197,30 +230,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,
@@ -242,12 +253,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={() => {
@@ -262,7 +275,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 }, () =>
@@ -473,14 +486,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;
@@ -499,8 +504,6 @@ class OperatePaper extends Component {
        dataIndex: "questionType",
        key: "questionType",
        width: "12%",
-        sorter: true,
-        showSorterTooltip: false,
        filters: [
          {
            text: "单选题",
@@ -560,8 +563,7 @@ class OperatePaper extends Component {
            <Tooltip title="多选题和填空题的漏选/半对得分不能高于题目本身分值">
              <span
                className="icon iconfont"
-                style={{ color: "#BFBFBF", fontSize: 14,fontWeight:"400"
+                style={{ color: "#BFBFBF", fontSize: 14, fontWeight: "400" }}
-              }}
              >
                &#xe7c4;
              </span>
@@ -680,11 +682,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,
@@ -717,6 +745,50 @@ class OperatePaper extends Component {
        preserveAspectRatio: 'xMidYMid slice'
      }
    }
+    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">
@@ -849,6 +921,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`}

--- a/src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.jsx
+++ b/src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-03-29 10:52:26
 * @LastEditors: yuananting
- * @LastEditTime: 2021-05-08 16:11:27
+ * @LastEditTime: 2021-06-07 14:45:02
 * @Description: 助学工具-试卷-新建选择题目弹窗
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -42,7 +42,8 @@ class SelectQuestionModal extends Component {
        width={1080}
        onOk={() => {
          this.props.setSelectedQuestion(
-            this.listRef.current.state.selectQuestionKeys.map((item) => {
+            this.listRef.current.state.selectQuestionKeys.map((item, index) => {
+              item.sorterIndex = index;
              item.questionId = item.id || item.questionId;
              item.questionType = item.questionTypeEnum || item.questionType;
              item.score = item.score || 2;