录入说明

package.json

@@ -19,6 +19,7 @@
     "bootstrap": "^4.6.0",
     "core-js": "^3.8.3",
     "crypto-js": "^4.1.1",
+    "docx-preview": "^0.3.2",
     "element-ui": "2.15.6",
     "html2canvas": "^1.4.1",
     "js-md5": "^0.7.3",
@@ -34,6 +35,8 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
@@ -52,9 +55,7 @@
     "svgo-loader": "^4.0.0",
     "vue-cli-plugin-axios": "0.0.4",
     "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.6.14",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0"
+    "vue-template-compiler": "^2.6.14"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -65,4 +66,4 @@
       "git add"
     ]
   }
-}
+}

src/assets/styles/icons.scss

@@ -2,7 +2,7 @@
 @mixin icon-12 {
   width: 12px;
   height: 12px;
-  margin-top: -1px;
+  margin-top: -2px;
 }
 @mixin icon-14 {
   width: 14px;
@@ -212,4 +212,8 @@
     background-image: url(../images/icon-export-prop.png);
     @include icon-12;
   }
+  &-edit-warning {
+    background-image: url(../images/paper_edit_warning.png);
+    @include icon-12;
+  }
 }

src/modules/question/components/QuestionImportEdit.vue

@@ -12,6 +12,23 @@
       @opened="visibleChange"
       @closed="initData"
     >
+      <el-dialog
+        title="录入说明"
+        :visible.sync="showIframeDialog"
+        append-to-body
+        width="900px"
+        top="30px"
+      >
+        <div
+          style="width: 100%; height: calc(100vh - 250px); overflow: auto"
+          id="doc-box"
+        ></div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="showIframeDialog = false"
+            >关闭</el-button
+          >
+        </span>
+      </el-dialog>
       <div slot="title" class="box-justify">
         <div>
           <h2>文件上传</h2>
@@ -41,11 +58,23 @@
         <div class="qe-part qe-part-edit">
           <div class="qe-part-main">
             <div class="qe-part-head">
-              <h3>题目编辑</h3>
-              <div>
-                <i class="icon icon-tips"></i>
-                提示：若识别有误，可点击左侧题目按格式进行修改后重新识别
-              </div>
+              <h3>
+                题目编辑
+                <div
+                  style="color: #9a9dab; font-size: 14px; font-weight: normal"
+                >
+                  <i class="icon icon-tips"></i>
+                  提示：若识别有误，可点击左侧题目按格式进行修改后重新识别
+                </div>
+              </h3>
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                icon="icon icon-edit-warning"
+                @click="showDocx"
+                >录入说明</el-button
+              >
             </div>
             <div class="qe-part-body">
               <div id="qe-part-richtext-list">
@@ -162,6 +191,7 @@ import { downloadByApi } from "@/plugins/download";
 import { richTextToJSON, renderRichText } from "./import-edit/richText";
 import scrollMixins from "./import-edit/scrollMixins";
 import timeMixin from "@/mixins/timeMixin";
+import { renderAsync } from "docx-preview";
 
 const questionInfoField = [
   "courseId",
@@ -226,9 +256,31 @@ export default {
       importFileTypes: ["docx", "doc"],
       uploadData: {},
       uploadUrl: `${QUESTION_API}/word/parse/struct`,
+      showIframeDialog: false,
     };
   },
+
   methods: {
+    urlToBlob(url, callback) {
+      let xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.responseType = "blob";
+      xhr.onload = function () {
+        if (xhr.status == 200) {
+          callback(xhr.response);
+        }
+      };
+      xhr.send();
+    },
+    showDocx() {
+      this.showIframeDialog = true;
+      this.$nextTick(() => {
+        this.urlToBlob("/admin/inputDesc.docx", (data) => {
+          let box = document.getElementById("doc-box");
+          renderAsync(data, box);
+        });
+      });
+    },
     async visibleChange() {
       await this.getCourseProperty();
 

yarn.lock

@@ -3110,6 +3110,13 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+docx-preview@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmmirror.com/docx-preview/-/docx-preview-0.3.2.tgz#83ef3db1e67f6ebbcdc592cab01689003ef82a41"
+  integrity sha512-YRsyiiejdauCQ2boKNHKjJMiIhOCXs643+NCHnmbCM31e7JWqmPiobtzlmHOnv4i+ft9w+ajPEK1hK7VymyRXQ==
+  dependencies:
+    jszip ">=3.0.0"
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -4302,6 +4309,11 @@ image-size@^0.5.1:
   resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 immutable@^4.0.0:
   version "4.3.5"
   resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
@@ -4681,6 +4693,16 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jszip@>=3.0.0:
+  version "3.10.1"
+  resolved "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -4740,6 +4762,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 lilconfig@^2.0.3:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -5445,6 +5474,11 @@ p-try@^2.0.0:
   resolved "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pako@~1.0.2:
+  version "1.0.11"
+  resolved "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 param-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
@@ -6031,7 +6065,7 @@ read-pkg@^5.1.1, read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.0.1:
+readable-stream@^2.0.1, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
   integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@@ -6416,6 +6450,11 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
 setprototypeof@1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"