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

5646ebc7 · yuananting · b2cf2de1 · f2de2d7f · 5646ebc7 · 5646ebc7
Commit 5646ebc7 authored Jun 09, 2021 by yuananting
Showing with 184 additions and 57 deletions

src/modules/teach-tool/paper-manage/OperatePaper.jsx
+165 -41

src/modules/teach-tool/question-manage/components/OperateQuestionTab.jsx
+18 -15

src/modules/teach-tool/question-manage/modal/PreviewQuestionModal.less
+1 -1

No files found.
--- a/src/modules/teach-tool/paper-manage/OperatePaper.jsx
+++ b/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,6 +852,7 @@ class OperatePaper extends Component {
                  </div>
                </Form.Item>
+                <Space size={8}>
                  <Button
                    className="choose-btn"
                    type="primary"
@@ -786,6 +861,17 @@ class OperatePaper extends Component {
                  >
                    自选题目
                  </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`}

--- a/src/modules/teach-tool/question-manage/components/OperateQuestionTab.jsx
+++ b/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,11 +66,16 @@ 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)) {
+    if (
+      ["INDEFINITE_CHOICE", "MULTI_CHOICE", "SINGLE_CHOICE"].includes(
+        questionTypeKey
+      )
+    ) {
      // 选择题（单选 多选 不定项）-插入4条默认选项
      for (var i = 0; i < optionSize; i++) {
        this.handleAddOption();
@@ -631,7 +636,7 @@ 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, "");
@@ -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={{
+                style={
-                  display: ["PICTURE", "VIDEO"].includes(type)
+                  !["PICTURE", "VIDEO"].includes(type)
-                    ? "inline-grid"
+                    ? { display: "flex" }
-                    : "flex",
+                    : { float: "left" }
-                }}
+                }
                key={index}
              >
                {dom}
@@ -1191,10 +1196,8 @@ class OperateQuestionTab extends Component {
                data-label="正确答案"
              >
                {_.map(chooseOptions, (optionItem, optionIndex) => {
-                  const {
+                  const { questionOptionContentList, isCorrectAnswer } =
-                    questionOptionContentList,
+                    optionItem;
-                    isCorrectAnswer,
-                  } = optionItem;
                  optionItem.optionSort = optionIndex;
                  const mediaBtn = ["VOICE", "AUDIO", "PICTURE"];
                  const placeHold =

--- a/src/modules/teach-tool/question-manage/modal/PreviewQuestionModal.less
+++ b/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;