feat:导入联调，填空待修改

83229b62 · yuananting · 462c5b38 · 83229b62 · 83229b62 · 83229b62
Commit 83229b62 authored Mar 17, 2021 by yuananting
9 changed files
--- a/src/common/less/icon-font.less
+++ b/src/common/less/icon-font.less
 @font-face {
  font-family: 'iconfont';  /* project id 2223403 */
-  src: url('//at.alicdn.com/t/font_2223403_uxtdisq90ka.eot');
+  src: url('//at.alicdn.com/t/font_2223403_v302rtv070a.eot');
-  src: url('//at.alicdn.com/t/font_2223403_uxtdisq90ka.eot?#iefix') format('embedded-opentype'),
+  src: url('//at.alicdn.com/t/font_2223403_v302rtv070a.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_2223403_uxtdisq90ka.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_2223403_v302rtv070a.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_2223403_uxtdisq90ka.woff') format('woff'),
+  url('//at.alicdn.com/t/font_2223403_v302rtv070a.woff') format('woff'),
-  url('//at.alicdn.com/t/font_2223403_uxtdisq90ka.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_2223403_v302rtv070a.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_2223403_uxtdisq90ka.svg#iconfont') format('svg');
+  url('//at.alicdn.com/t/font_2223403_v302rtv070a.svg#iconfont') format('svg');
 }
 .iconfont{
  font-family:"iconfont" !important;

--- a/src/data-source/questionBank/request-apis.ts
+++ b/src/data-source/questionBank/request-apis.ts
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-03-03 15:13:12
 * @LastEditors: yuananting
- * @LastEditTime: 2021-03-16 15:11:25
+ * @LastEditTime: 2021-03-17 11:40:41
 * @Description: 助学工具接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -10,49 +10,49 @@
 import Service from "@/common/js/service";
 export function queryCategoryTree(params: object) {
-  return Service.Hades("anon/hades/category/queryCategoryTree", params);
+  return Service.Hades("public/hades/queryCategoryTree", params);
 }
 export function addCategory(params: object) {
-  return Service.Hades("anon/hades/category/addCategory", params);
+  return Service.Hades("public/hades/addCategory", params);
 }
 export function delCategory(params: object) {
-  return Service.Hades("anon/hades/category/delCategory", params);
+  return Service.Hades("public/hades/delCategory", params);
 }
 export function editCategory(params: object) {
-  return Service.Hades("anon/hades/category/editCategory", params);
+  return Service.Hades("public/hades/editCategory", params);
 }
 export function editCategoryTree(params: object) {
-  return Service.Hades("anon/hades/category/editCategoryTree", params);
+  return Service.Hades("public/hades/editCategoryTree", params);
 }
 export function queryQuestionCategoryTree(params: object) {
-  return Service.Hades("anon/hades/question/queryCategoryTree", params);
+  return Service.Hades("public/hades/queryQuestionCategoryTree", params);
 }
 export function queryQuestionPageList(params: object) {
-  return Service.Hades("anon/hades/question/queryQuestionPageList", params);
+  return Service.Hades("public/hades/queryQuestionPageList", params);
 }
 export function addQuestion(params: object) {
-  return Service.Hades("anon/hades/question/addQuestion", params);
+  return Service.Hades("public/hades/addQuestion", params);
 }
 export function deleteQuestion(params: object) {
-  return Service.Hades("anon/hades/question/deleteQuestion", params);
+  return Service.Hades("public/hades/deleteQuestion", params);
 }
 export function queryQuestionDetails(params: object) {
-  return Service.Hades("anon/hades/question/queryQuestionDetails", params);
+  return Service.Hades("public/hades/queryQuestionDetails", params);
 }
 export function editQuestion(params: object) {
-  return Service.Hades("anon/hades/question/editQuestion", params);
+  return Service.Hades("public/hades/editQuestion", params);
 }
 export function batchImport(params: object) {
-  return Service.Hades("anon/hades/question/batchImport", params);
+  return Service.Hades("public/hades/batchImport", params);
 }
\ No newline at end of file
--- a/src/modules/teach-tool/AddNewQuestion.jsx
+++ b/src/modules/teach-tool/AddNewQuestion.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-02-25 13:46:35
 * @LastEditors: yuananting
- * @LastEditTime: 2021-03-16 16:44:23
+ * @LastEditTime: 2021-03-17 10:45:10
 * @Description: 助学工具-题库-题目管理-新增题目
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -151,7 +151,7 @@ class AddNewQuestion extends Component {
        break;
      case "GAP_FILLING":
        if (this.gapRef.checkInput() === 0) {
-          // this.saveCurrentQuestion(gapFillingContent);
+          this.saveCurrentQuestion(gapFillingContent);
        }
        break;
      case "INDEFINITE_CHOICE":
@@ -251,8 +251,8 @@ class AddNewQuestion extends Component {
                }}
                questionInfo={gapFillingContent}
                onSetState={(newContent) => {
-                  console.log("gapFillingContent:", newContent);
                  Object.assign(gapFillingContent, newContent);
+                  console.log("gapFillingContent:", gapFillingContent);
                }}
              />
            </TabPane>

--- a/src/modules/teach-tool/components/QuestionEditor.jsx
+++ b/src/modules/teach-tool/components/QuestionEditor.jsx
 import React, { Component } from "react";
 import E from "wangeditor";
-import { message } from "antd";
+import { message, Button } from "antd";
 import UploadOss from "@/core/upload";
 import "./QuestionEditor.less";
 const MEDIA_MAP = [
@@ -37,7 +37,11 @@ class QuestionEditor extends Component {
      isShowSingleInput: true,
      contentLength: 0,
      errorInput: false,
-      detailInfo: props.detailInfo || {}
+      isGapFilling: props.isGapFilling,
+      contentType: props.contentType,
+      detailInfo: props.detailInfo || {},
+      gapFillingAnswer: props.gapFillingAnswer || [],
+      blanksList: props.blanksList || [],
    };
  }
@@ -48,9 +52,9 @@ class QuestionEditor extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { detailInfo } = nextProps;
    if (this.props.detailInfo !== detailInfo) {
-      this.setState({detailInfo: nextProps.detailInfo}, () => {
+      this.setState({ detailInfo: nextProps.detailInfo }, () => {
        this.renderEditor();
-      })
+      });
    }
    return true;
  }
@@ -83,7 +87,7 @@ class QuestionEditor extends Component {
  };
  renderEditor() {
-    const { editorId, detailInfo} = this.state;
+    const { editorId, detailInfo } = this.state;
    const { onChange, bindChangeContent } = this.props;
    const editorRoot = new E(
      `#editor${editorId}_tabbar`,
@@ -114,15 +118,16 @@ class QuestionEditor extends Component {
      str = str.replace(/<\/?[^>]*>/g, "");
      str = str.replace(/[ | ]*\n/g, "\n");
      str = str.replace(/\&nbsp\;/gi, " ");
-      str = str.replace(/[\r\n]/g,"");
+      str = str.replace(/[\r\n]/g, "");
      if (str.length > 1000) {
        str = str.substring(0, 1000);
        message.error("内容过长，不能超过1000字");
      }
-      return str
+      return str;
    };
    editorRoot.customConfig.onchange = (html) => {
+      console.log("触发：+——+++++++", this.state.blanksList);
      const { focusFlag } = this.state;
      const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
        .length;
@@ -137,7 +142,9 @@ class QuestionEditor extends Component {
      } else {
        this.setState({ isShowSingleInput: true });
      }
+      if (this.state.isGapFilling) {
+        this.props.changeBlankCount(this.state.blanksList);
+      }
      this.setState(
        { contentLength, visiblePlacehold: contentLength === 0 && !focusFlag },
        () => {
@@ -191,6 +198,18 @@ class QuestionEditor extends Component {
    bindChangeContent && bindChangeContent(this.handleChangeContent);
  }
+  insertBlank = (blanks) => {
+    var blanks = `<input class="add-fill-line" disabled answerTagList="" id=${window.random_string(
+      16
+    )} value="填空"/>`;
+    this.editorRoot.cmd.do("insertHTML", blanks);
+    document.getSelection().collapseToEnd();
+    var _blanksList = [];
+    _blanksList = document.getElementsByClassName("add-fill-line");
+    this.setState({ blanksList: _blanksList });
+    // this.props.changeBlankCount(_blanksList);
+  };
  render() {
    const {
      editorId,
@@ -201,6 +220,8 @@ class QuestionEditor extends Component {
      contentLength,
      isShowSingleInput,
      errorInput,
+      isGapFilling,
+      contentType,
    } = this.state;
    const {
      placehold,
@@ -229,7 +250,6 @@ class QuestionEditor extends Component {
          });
        }}
      >
        <div
          className="editor-box"
          id={`editor${editorId}_tabbar`}
@@ -255,6 +275,18 @@ class QuestionEditor extends Component {
            /{limitLength}
          </div>
        </div>
+        {isGapFilling && contentType === "QUESTION_STEM" && (
+          <div className="editor-fill-info">
+            在需要填写答案的地方
+            <Button
+              type="link"
+              className="editor-fill-info_icon icon iconfont"
+              onClick={this.insertBlank}
+            >
+              &#xe7fd; 插入占位符
+            </Button>
+          </div>
+        )}
        <div
          className={`editor-limit-tip${
            contentLength > limitLength ? " mt6" : ""

--- a/src/modules/teach-tool/components/QuestionEditor.less
+++ b/src/modules/teach-tool/components/QuestionEditor.less
@@ -2,7 +2,28 @@
  position: relative;
  z-index: 9;
  background-color: #ffffff;
+  .add-fill-line {
+    padding: 0 10px;
+    border-bottom: 1px solid !important;
+    margin: 0 4px;
+    text-align: center;
+    border: none;
+    width: 54px;
+  }
+  .editor-fill-info {
+    height: 20px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #999999;
+    margin-top: 8px;
+    .editor-fill-info_icon {
+      color: #5289fa;
+      font-size: 14px;
+      padding-left: 9px;
+      cursor: pointer;
+    }
+  }
  .editor-box-single {
    border-radius: 4px;
    padding: 4px 0;

--- a/src/modules/teach-tool/components/QuestionManageContent.jsx
+++ b/src/modules/teach-tool/components/QuestionManageContent.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-02-25 11:23:47
 * @LastEditors: yuananting
- * @LastEditTime: 2021-03-16 15:34:57
+ * @LastEditTime: 2021-03-17 12:43:53
 * @Description: 助学工具-题库-题目管理主页面列表数据
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -218,7 +218,8 @@ class QuestionManageContent extends Component {
        dataIndex: "questionStem",
        render: (val, record) => {
          var handleVal = val;
-          handleVal = handleVal.replace(/<(?!img).*?>/g, "");
+          handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
+          handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、");
          handleVal = handleVal.replace(/<\s?img[^>]*>/gi, "【图片】");
          handleVal = handleVal.replace(/\&nbsp\;/gi, " ");
          return (
@@ -351,27 +352,17 @@ class QuestionManageContent extends Component {
  };
  batchImportQuestion = () => {
-    const ImportQuestionModal = <BatchImportQuestionModal
+    const { categoryId } = this.state.query;
+    const ImportQuestionModal = (
+      <BatchImportQuestionModal
        close={() => {
          this.setState({ ImportQuestionModal: null });
        }}
-      onEdit={(record) => {
+        categoryId={categoryId}
-        this.handleEditRecord(record);
+      />
-      }}
+    );
-      showTip={() => {
-        Modal.confirm({
-          title: `提醒`,
-          content: '系统拼命处理中，为避免你等待时间过长，请前往“任务中心”查看导入结果',
-          onOk: () => {
-            RCHistory.push(`/download_center/import_record`);
-          },
-          okText: '前往任务中心',
-          cancelText: '关闭',
-        });
-      }}
-    />;
    this.setState({ ImportQuestionModal });
-  }
+  };
  render() {
    const { dataSource = [], total, query } = this.state;

--- a/src/modules/teach-tool/modal/BatchImportQuestionModal.jsx
+++ b/src/modules/teach-tool/modal/BatchImportQuestionModal.jsx
@@ -6,52 +6,98 @@
 */
 import React, { Component } from "react";
-import { Modal, Button, Upload, message } from "antd";
+import { Modal, Button, Upload, message, Spin, Progress } from "antd";
 import "./BatchImportQuestionModal.less";
 import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
+import User from "@/common/js/user";
+import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
+import { LoadingOutlined } from "@ant-design/icons";
 class BatchImportQuestionModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSelectFileModal: false, // 云盘列表弹窗显隐
      diskList: [], // 资料云盘文件列表
-      fileList: [], // 上传的文件列表
+      uploadFile: null, // 上传的文件
-      uploadBtnType: "add", // 上传按钮类型（上传文件 | 重新上传）
+      uploadResult: {
-      uploadBlob: null, // 上传的文件
+        elapsedTime: 0,
-      uploadProps: {
+        failCnt: 0,
-        accept: "application/vnd.ms-excel",
+        resourceUrl: null,
-        beforeUpload(file) {
+        successCnt: 0,
-          this.setState({ uploadBtnType: "reAdd" });
+      }, // 上传返回结果
-          this.setState({ uploadBlob: file });
+      message: null,
-          return false;
+      status: "init",
-        },
-        onChange(info) {
-          let fileList = [...info.fileList];
-          fileList = fileList.slice(-1);
-          this.setState({ fileList });
-        },
-        onRemove() {
-          this.setState({ uploadBtnType: "add" });
-        },
-      },
    };
  }
  // 下载题目模板
  handleDownTemplate = () => {
-    console.log("下载");
    const a = document.createElement("a");
    a.href = "https://image.xiaomaiketang.com/xm/question_template.xlsx";
    a.click();
  };
+  // 选择云盘资源
+  handleSelectExcel = (file) => {
+    console.log(file);
+    this.setState({ uploadFile: file });
+    this.setState({
+      showSelectFileModal: false,
+    });
+  };
+  // 导入
+  handleImport = async () => {
+    const { uploadFile } = this.state;
+    if (!uploadFile) {
+      message.warning("请选择要导入的文件");
+    } else {
+      let flag = false;
+      setTimeout(() => {
+        if (!flag) {
+          this.setState({ status: "uploading" });
+        }
+      }, 1000);
+      let params = {
+        categoryId: this.props.categoryId,
+        resourceId: this.state.uploadFile.resourceId,
+        source: 0,
+        tenantId: User.getStoreId(),
+        userId: User.getStoreUserId(),
+      };
+      const res = await QuestionBankService.batchImport(params);
+      const { result } = res;
+      const { bizSuccess, bizMessage } = result;
+      if (res) {
+        flag = true;
+        this.setState({ status: bizSuccess ? "success" : "fail" });
+        this.setState({ uploadResult: result });
+        this.setState({ message: bizMessage });
+      }
+    }
+  };
+  // 下载错误报告
+  downErrorReport = async () => {
+    const { uploadResult } = this.state;
+    const { resourceUrl } = uploadResult;
+    const a = document.createElement("a");
+    a.href = resourceUrl;
+    a.click();
+  };
  render() {
    const {
      diskList,
      showSelectFileModal,
-      uploadBtnType,
+      uploadFile,
-      uploadProps,
+      status,
+      uploadResult,
+      message,
    } = this.state;
+    const { failCnt, resourceUrl, successCnt } = uploadResult;
+    const loadingIcon = <LoadingOutlined style={{ fontSize: 76 }} spin />;
    return (
      <div>
        <Modal
@@ -60,16 +106,20 @@ class BatchImportQuestionModal extends Component {
          visible={true}
          width={560}
          maskClosable={false}
-          footer={[
+          footer={
+            status === "init" && [
              <Button onClick={this.props.close}>取消</Button>,
              <Button type="primary" onClick={this.handleImport}>
                导入
              </Button>,
-          ]}
+            ]
+          }
          onCancel={() => {
            this.props.close();
          }}
        >
+          {status === "init" && (
+            <div>
              <div className="step-section">
                <h4 className="step-title">1.下载导入模板，按要求填写信息</h4>
                <div
@@ -82,22 +132,123 @@ class BatchImportQuestionModal extends Component {
              </div>
              <div className="step-section">
                <h4 className="step-title">2.选择需要导入的Excel文件</h4>
-            <Button type="primary" className="add-btn" onClick={() => this.setState({showSelectFileModal: true})}>
+                <Button
-              {uploadBtnType == "reAdd" ? "重新添加" : "添加文件"}
+                  type="primary"
+                  className="add-btn"
+                  onClick={() => this.setState({ showSelectFileModal: true })}
+                >
+                  {uploadFile ? "重新添加" : "添加文件"}
                </Button>
+                {uploadFile && (
+                  <div className="file-box">
+                    <div>
+                      <img
+                        className="link-img"
+                        src="https://image.xiaomaiketang.com/xm/link.png"
+                      />
+                      <span>{uploadFile.folderName}</span>
+                      <img
+                        className="del-img"
+                        src="https://image.xiaomaiketang.com/xm/del.png"
+                        onClick={() => this.setState({ uploadFile: null })}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
            </div>
+          )}
+          {status === "uploading" && (
+            <div className="import-status-box">
+              <div className="status-content">
+                <Spin indicator={loadingIcon} />
+                <p className="status">题目导入中...</p>
+                <p className="status-tip">请勿关闭页面和此弹窗</p>
+                <p className="status-tip">
+                  <span>以防题目导入失败</span>
+                </p>
+              </div>
+            </div>
+          )}
+          {status === "success" && (
+            <div className="import-status-box">
+              <div className="status-content">
+                <img
+                  src="https://image.xiaomaiketang.com/xm/success.png"
+                  alt=""
+                />
+                <p className="status">导入完成</p>
+                <p className="status-tip">
+                  <span style={{ color: successCnt === 0 ? "" : "#FF9D14" }}>
+                    {successCnt}
+                  </span>
+                  个题目导入成功，
+                  <span style={{ color: failCnt === 0 ? "" : "#FF9D14" }}>
+                    {failCnt}
+                  </span>
+                  个题目导入失败。
+                </p>
+                {resourceUrl ? (
+                  <Button
+                    type="primary"
+                    className="down-btn"
+                    onClick={() => this.downErrorReport(resourceUrl)}
+                  >
+                    下载错误报告
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={() => {
+                      this.props.close();
+                    }}
+                  >
+                    关闭
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+          {status === "fail" && (
+            <div className="import-status-box">
+              <div className="status-content">
+                <img src="https://image.xiaomaiketang.com/xm/fail.png" alt="" />
+                <p className="status">导入失败</p>
+                <p className="status-tip">{message}</p>
+                {message ? (
+                  <Button
+                    type="primary"
+                    className="down-btn"
+                    // onClick={}
+                  >
+                    重新上传文件
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={() => {
+                      this.props.close();
+                    }}
+                  >
+                    关闭
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
        </Modal>
        <SelectPrepareFileModal
          operateType="select"
-          accept="image/jpeg,image/png,image/jpg"
+          accept="xls/xlsx"
-          selectTypeList={["JPG", "JPEG", "PNG"]}
+          selectTypeList={[
-          tooltip="支持文件类型：jpg、jpeg、png"
+            "vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            "vnd.ms-excel",
+          ]}
+          tooltip="支持文件类型：xls、xlsx"
          isOpen={showSelectFileModal}
          diskList={diskList}
          onClose={() => {
            this.setState({ showSelectFileModal: false });
          }}
-          onSelect={this.handleSelectImg}
+          onSelect={this.handleSelectExcel}
        />
      </div>
    );

--- a/src/modules/teach-tool/modal/BatchImportQuestionModal.less
+++ b/src/modules/teach-tool/modal/BatchImportQuestionModal.less
@@ -29,6 +29,32 @@
        font-weight: 400;
      }
    }
+    .file-box {
+      line-height: 20px;
+      color: #999999;
+      line-height: 20px;
+      margin-top: 10px;
+      span {
+        vertical-align: middle;
+        margin-right: 16px;
+      }
+      .link-img {
+        width: 14px;
+        vertical-align: middle;
+        margin-right: 4px;
+      }
+      .del-img {
+        width: 18px;
+        vertical-align: middle;
+        visibility: hidden;
+      }
+    }
+    .file-box :hover {
+      background-color: #FFF8E8;
+      .del-img {
+        visibility: visible !important;
+      }
+    }
    .remark-input {
      width: 304px;
      margin-bottom: 8px;

--- a/src/modules/teach-tool/modal/QuestionPreviewModal.less
+++ b/src/modules/teach-tool/modal/QuestionPreviewModal.less
@@ -214,7 +214,11 @@
 .question-preview-modal.ant-modal {
    max-height: 60% !important;
 }
-.fill-line {
+.add-fill-line {
  padding: 0 10px;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid !important;
+  margin: 0 4px;
+  text-align: center;
+  border: none;
+  width: 54px;
 }