fix:loading

da03cc27 · yuananting · 0c8b67b7 · da03cc27 · da03cc27 · da03cc27
Commit da03cc27 authored Apr 10, 2021 by yuananting
4 changed files
--- a/src/modules/teach-tool/components/CourseCategorySiderTree.jsx
+++ b/src/modules/teach-tool/components/CourseCategorySiderTree.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-02-22 10:59:43
 * @LastEditors: yuananting
- * @LastEditTime: 2021-04-07 12:19:27
+ * @LastEditTime: 2021-04-10 10:59:32
 * @Description: 助学工具-侧边课程分类树
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -131,7 +131,7 @@ class CourseCategorySiderTree extends Component {
      } else if (this.props.fromModule === "QUESTION_MODAL") {
        Bus.trigger("queryQuestionModalList", selectedKeys[0]);
      } else {
-        Bus.trigger("queryPaperPageList", selectedKeys[0]);
+        Bus.trigger("queryPaperPageList", selectedKeys[0], false);
      }
    });
  };

--- 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-04-07 12:56:49
+ * @LastEditTime: 2021-04-10 11:04:26
 * @Description: 助学工具-新建/复制/编辑试卷
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -18,6 +18,7 @@ import {
  Tooltip,
  message,
  Modal,
+  Spin,
 } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import ShowTips from "@/components/ShowTips";
@@ -69,6 +70,7 @@ class OperatePaper extends Component {
      currentOperate: "",
      currentNav: "",
      currentCategoryPapers: [],
+      loading: false,
    };
  }
@@ -110,7 +112,8 @@ class OperatePaper extends Component {
  };
  // 编辑/复制试卷时获取相应试卷详情
-  queryPaperDetail = () => {
+  queryPaperDetail = async () => {
+    this.setState({ loading: true });
    const { currentOperate } = this.state;
    let query = {
      paperId: getParameterByName("paperId"),
@@ -118,7 +121,7 @@ class OperatePaper extends Component {
      userId: User.getStoreUserId(),
      tenantId: User.getStoreId(),
    };
-    AidToolService.queryPaperDetail(query).then((res) => {
+    const res = await AidToolService.queryPaperDetail(query);
    const { result } = res;
    const { paperName, passRate } = result;
    this.setState(
@@ -131,6 +134,7 @@ class OperatePaper extends Component {
          paperName:
            currentOperate === "copy" ? paperName + "（复制）" : paperName,
        },
+        loading: false,
      },
      () => {
        this.formRef.current.setFieldsValue({
@@ -140,7 +144,6 @@ class OperatePaper extends Component {
        this.setFormData(result.questionList);
      }
    );
-    });
  };
  // 自定义表格空状态
@@ -324,7 +327,7 @@ class OperatePaper extends Component {
                window.RCHistory.push({
                  pathname: `/paper-manage-index?categoryId=${categoryId}`,
                });
-                Bus.trigger("queryPaperPageList", categoryId);
+                Bus.trigger("queryPaperPageList", categoryId, true);
                Bus.trigger("queryCategoryTree", "remain");
              }
            });
@@ -340,7 +343,7 @@ class OperatePaper extends Component {
                    "categoryId"
                  )}`,
                });
-                Bus.trigger("queryPaperPageList", categoryId);
+                Bus.trigger("queryPaperPageList", categoryId, true);
              }
            });
          }
@@ -482,7 +485,10 @@ class OperatePaper extends Component {
        title: (
          <Tooltip title="多选题和填空题的漏选/半对得分不能高于题目本身分值">
            分值{" "}
-            <span className="icon iconfont" style={{ color: "#BFBFBF" , fontSize: 14 }}>
+            <span
+              className="icon iconfont"
+              style={{ color: "#BFBFBF", fontSize: 14 }}
+            >
              &#xe7c4;
            </span>
          </Tooltip>
@@ -603,6 +609,7 @@ class OperatePaper extends Component {
      selectQuestionList,
      currentNav,
      formData,
+      loading,
    } = this.state;
    const {
      singleChoiceCnt,
@@ -626,6 +633,7 @@ class OperatePaper extends Component {
    return (
      <div className="page operate-paper-page">
        <Breadcrumbs navList={currentNav} goBack={() => this.handleGoBack()} />
+        <Spin spinning={loading}>
          <div className="box">
            <div className="show-tips">
              <ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
@@ -720,7 +728,10 @@ class OperatePaper extends Component {
                自选题目
              </Button>
              {questionCnt > 0 && (
-              <div className="paper-info-tip" style={{ margin: "0 auto 12px" }}>
+                <div
+                  className="paper-info-tip"
+                  style={{ margin: "0 auto 12px" }}
+                >
                  总计<span>{totalScore}</span>分，共<span>{questionCnt}</span>
                  题。{" "}
                  {singleChoiceCnt > 0 &&
@@ -753,6 +764,7 @@ class OperatePaper extends Component {
              保存
            </Button>
          </div>
+        </Spin>
        {selectQuestionModal}
        {paperPreviewModal}
      </div>

--- a/src/modules/teach-tool/paper-manage/components/PaperList.jsx
+++ b/src/modules/teach-tool/paper-manage/components/PaperList.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-02-25 11:23:47
 * @LastEditors: yuananting
- * @LastEditTime: 2021-04-08 10:03:45
+ * @LastEditTime: 2021-04-10 11:03:26
 * @Description: 助学工具-题库-试卷列表数据
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -22,7 +22,7 @@ import {
 } from "antd";
 import { PageControl } from "@/components";
 import "./PaperList.less";
-import { Route, withRouter } from 'react-router-dom';
+import { Route, withRouter } from "react-router-dom";
 import OperatePaper from "@/modules/teach-tool/paper-manage/OperatePaper";
 import User from "@/common/js/user";
 import AidToolService from "@/domains/aid-tool-domain/AidToolService";
@@ -48,23 +48,32 @@ class PaperList extends Component {
      selectedRowKeys: [this.props.paperId],
      dataSource: [],
      paperPreviewModal: null, // 试卷预览模态框
+      loading: false,
    };
  }
  componentDidMount() {
    this.queryPaperPageList();
-    Bus.bind('queryPaperPageList', (selectedCategoryId) => {
+    Bus.bind("queryPaperPageList", (selectedCategoryId, delay) => {
-      selectedCategoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
+      selectedCategoryId =
-      this.InitSearch(selectedCategoryId)
+        selectedCategoryId === "null" ? null : selectedCategoryId;
-    })
+      this.setState({ loading: true });
+      if (delay) {
+        setTimeout(() => {
+          this.InitSearch(selectedCategoryId);
+        }, 5000);
+      } else {
+        this.InitSearch(selectedCategoryId);
+      }
+    });
  }
  componentWillUnmount() {
-    Bus.unbind('queryPaperPageList', this.queryPaperPageList)
+    Bus.unbind("queryPaperPageList", this.queryPaperPageList);
  }
  // 初始化列表查询
-  InitSearch = (categoryId) => {
+  InitSearch = (categoryId, delay) => {
    const _query = {
      ...this.state.query,
      categoryId,
@@ -77,11 +86,10 @@ class PaperList extends Component {
  };
  // 查询试卷列表
-  queryPaperPageList = () => {
+  queryPaperPageList = async () => {
-    AidToolService.queryPaperPageList(this.state.query).then((res) => {
+    const res = await AidToolService.queryPaperPageList(this.state.query);
    const { records = [], total = 0 } = res.result;
-      this.setState({ dataSource: records, total });
+    this.setState({ dataSource: records, total, loading: false });
-    });
  };
  // 预览试卷
@@ -112,8 +120,6 @@ class PaperList extends Component {
  // 编辑试卷
  editPaper = (record) => {
-    const { match } = this.props;
    if (record.relatedExam === 0) {
      const { categoryId } = this.state.query;
      const { match } = this.props;
@@ -158,7 +164,7 @@ class PaperList extends Component {
        });
      }
    });
-  }
+  };
  // 删除试卷确认
  confirmDeletePaper = (record) => {
@@ -249,45 +255,49 @@ class PaperList extends Component {
        width: this.props.type !== "modal-select" ? "12%" : "20%",
        align: "right",
        render: (val, record) => {
-          return (
+          return this.props.type !== "modal-select" ? (
+            <span>{record.questionCnt}</span>
-            this.props.type !== "modal-select" ?
+          ) : (
-              <span>
-                {record.questionCnt}
-              </span> :
            <Tooltip
              overlayClassName="tool-list"
              title={
                <div>
-                    <div className="item">单选题:{record.singleChoiceCnt || 0}个</div>
+                  <div className="item">
-                    <div className="item">多选题:{record.multiChoiceCnt || 0}个</div>
+                    单选题:{record.singleChoiceCnt || 0}个
+                  </div>
+                  <div className="item">
+                    多选题:{record.multiChoiceCnt || 0}个
+                  </div>
                  <div className="item">判断题:{record.judgeCnt || 0}个</div>
-                    <div className="item">填空题:{record.gapFillingCnt || 0}个</div>
+                  <div className="item">
-                    <div className="item">不定项选择题:{record.indefiniteChoiceCnt || 0}个</div>
+                    填空题:{record.gapFillingCnt || 0}个
+                  </div>
+                  <div className="item">
+                    不定项选择题:{record.indefiniteChoiceCnt || 0}个
+                  </div>
                </div>
              }
              placement="top"
              overlayStyle={{ maxWidth: 700 }}
            >
-                <span>
+              <span>{record.questionCnt}</span>
-                  {record.questionCnt}
-                </span>
            </Tooltip>
          );
        },
      },
    ];
    if (this.props.type !== "modal-select") {
-      const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole());
+      const isPermiss = ["CloudManager", "StoreManager"].includes(
+        User.getUserRole()
+      );
      columns.push({
        title: "关联考试数",
        key: "relatedExam",
        dataIndex: "relatedExam",
        width: this.props.type !== "modal-select" ? "16%" : "24%",
        align: "right",
-      })
+      });
      columns.push({
        title: "操作",
        key: "operate",
@@ -302,17 +312,25 @@ class PaperList extends Component {
              >
                预览
              </div>
-              {isPermiss && <span className="record-operate__item split"> | </span>}
+              {isPermiss && (
-              {isPermiss && <div
+                <span className="record-operate__item split"> | </span>
+              )}
+              {isPermiss && (
+                <div
                  className="record-operate__item"
                  onClick={() => this.copyPaper(record)}
                >
                  复制
-              </div>}
+                </div>
-              {isPermiss && <span className="record-operate__item split"> | </span>}
+              )}
-              {isPermiss && <Dropdown overlay={this.initDropMenu(record)}>
+              {isPermiss && (
+                <span className="record-operate__item split"> | </span>
+              )}
+              {isPermiss && (
+                <Dropdown overlay={this.initDropMenu(record)}>
                  <div className="record-operate__item">更多</div>
-              </Dropdown>}
+                </Dropdown>
+              )}
            </div>
          );
        },
@@ -359,6 +377,7 @@ class PaperList extends Component {
      query,
      paperPreviewModal,
      selectedRowKeys,
+      loading,
    } = this.state;
    const { current, size, categoryId, paperName } = query;
    const rowSelection = {
@@ -366,7 +385,9 @@ class PaperList extends Component {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
-    const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole())
+    const isPermiss = ["CloudManager", "StoreManager"].includes(
+      User.getUserRole()
+    );
    const { match } = this.props;
    return (
      <div className={"paper-list " + this.props.type}>
@@ -397,8 +418,7 @@ class PaperList extends Component {
            </div>
          </Row>
        </div>
-        {this.props.type !== "modal-select" && isPermiss &&
+        {this.props.type !== "modal-select" && isPermiss && categoryId && (
-          categoryId && (
          <Button
            type="primary"
            onClick={() => {
@@ -420,6 +440,7 @@ class PaperList extends Component {
                columns={this.parseColumns()}
                pagination={false}
                bordered
+                loading={loading}
                onChange={this.handleChangeTable}
              />
            ) : (
@@ -457,7 +478,10 @@ class PaperList extends Component {
          )}
          {paperPreviewModal}
        </div>
-        <Route path={`${match.url}/paper-operate-page`} component={OperatePaper} />
+        <Route
+          path={`${match.url}/paper-operate-page`}
+          component={OperatePaper}
+        />
      </div>
    );
  }

--- a/src/modules/teach-tool/paper-manage/components/SelectQuestionList.jsx
+++ b/src/modules/teach-tool/paper-manage/components/SelectQuestionList.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-02-25 11:23:47
 * @LastEditors: yuananting
- * @LastEditTime: 2021-04-09 17:21:36
+ * @LastEditTime: 2021-04-10 09:34:35
 * @Description: 助学工具-新建试卷-选择题目列表
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -64,7 +64,7 @@ class SelectQuestionList extends Component {
      query: {
        current: 1,
        size: 10,
-        order: "ACCURACY_DESC",
+        order: "UPDATED_DESC",
        categoryId: null, // 当前题库分类Id
        questionName: null, // 题目名称
        questionType: null, // 题目类型
@@ -95,7 +95,7 @@ class SelectQuestionList extends Component {
      ...this.state.query,
      categoryId,
      current: 1,
-      order: "ACCURACY_DESC", // 排序规则
+      order: "UPDATED_DESC", // 排序规则
      questionName: null, // 题目名称
      questionType: null, // 题目类型
    };
@@ -107,7 +107,7 @@ class SelectQuestionList extends Component {
  // 排序
  handleChangeTable = (pagination, filters, sorter) => {
    const { columnKey, order } = sorter;
-    let sort = null;
+    let sort = "UPDATED_DESC";
    if (order === "ascend") {
      sort = "ACCURACY_ASC";
    }
@@ -115,7 +115,7 @@ class SelectQuestionList extends Component {
      sort = "ACCURACY_DESC";
    }
    const _query = this.state.query;
-    _query.order = sort || "ACCURACY_DESC";
+    _query.order = sort;
    _query.current = 1;
    this.setState({ query: _query }, () => this.queryQuestionModalList());
  };
@@ -132,7 +132,7 @@ class SelectQuestionList extends Component {
    const _query = {
      ...this.state.query,
      current: 1,
-      order: "ACCURACY_DESC", // 排序规则
+      order: "UPDATED_DESC", // 排序规则
      questionName: null, // 题目名称
      questionType: null, // 题目类型
    };