Browse Source

解决可配置表格问题,未考虑rowspan和colspan同时更改情况

dusenyao 1 year ago
parent
commit
f229e8b55f

+ 5 - 2
jsconfig.json

@@ -2,8 +2,11 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-        "@/*": ["src/*"]
+      "@/*": ["src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist"],
+  "vueCompilerOptions": {
+    "target": 2
+  }
 }

+ 19 - 19
src/common/font/font.css

@@ -1,41 +1,41 @@
 @font-face {
-    font-family: 'FZJCGFKTK';
-    src: url('FZJCGFKTK.TTF');
-    font-weight: normal;
-    font-style: normal;
+  font-family: "FZJCGFKTK";
+  src: url("FZJCGFKTK.TTF");
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'GB-PINYINOK-B';
-    src: url('FZPY_V1.10.TTF');
+  font-family: "GB-PINYINOK-B";
+  src: url("FZPY_V1.10.TTF");
 }
 
 @font-face {
-    font-family: 'GB pinyinok-B';
-    src: url('FZPY_V1.10.TTF');
+  font-family: "GB pinyinok-B";
+  src: url("FZPY_V1.10.TTF");
 }
 
 @font-face {
-    font-family: 'Sans-GBNPC';
-    src: url('FZPY_V1.10.TTF');
+  font-family: "Sans-GBNPC";
+  src: url("FZPY_V1.10.TTF");
 }
 
 @font-face {
-    font-family: 'iconFont';
-    src: url('iconfont.woff');
+  font-family: "iconFont";
+  src: url("iconfont.woff");
 }
 
 @font-face {
-    font-family: 'robot';
-    src: url('Roboto-Regular.ttf');
+  font-family: "robot";
+  src: url("Roboto-Regular.ttf");
 }
 
 @font-face {
-    font-family: 'sourceR';
-    src: url('SourceSansPro-Regular.ttf');
+  font-family: "sourceR";
+  src: url("SourceSansPro-Regular.ttf");
 }
 
 @font-face {
-    font-family: 'zhuan';
-    src: url('zhuan.ttf');
-}
+  font-family: "zhuan";
+  src: url("zhuan.ttf");
+}

+ 92 - 94
src/components/Adult/inputModules/ConfigurableTable/components/CellEdit.vue

@@ -56,7 +56,7 @@
         <el-input v-model="cellData.text">
           <template slot="prepend">内容</template>
         </el-input>
-         <el-input v-model="cellData.answer">
+        <el-input v-model="cellData.answer">
           <template slot="prepend">答案</template>
         </el-input>
       </template>
@@ -87,77 +87,75 @@
 
       <template v-else-if="cellData.type === 'mulText'">
         <div class="adult-book-input-item">
-            <span class="adult-book-lable">题干部分:</span>
-            <el-button type="primary" @click="setOptionDetail()"
-              >添加句子</el-button
-            >
-          </div>
-          <div
-            v-if="cellData.mulText.detail.length > 0"
-            style="padding: 10px 0px 10px 86px"
+          <span class="adult-book-lable">题干部分:</span>
+          <el-button type="primary" @click="setOptionDetail()">
+            添加句子
+          </el-button>
+        </div>
+        <div
+          v-if="cellData.mulText.detail.length > 0"
+          style="padding: 10px 0px 10px 86px"
+        >
+          <ul
+            v-for="(dItem, dIndex) in cellData.mulText.detail"
+            :key="'ddItem' + dIndex"
+            class="option-detail-detail"
           >
-            <ul
-              class="option-detail-detail"
-              v-for="(dItem, dIndex) in cellData.mulText.detail"
-              :key="'ddItem' + dIndex"
+            <li
+              v-for="(ddItem, ddIndex) in dItem.detail"
+              :key="'ddItem' + dIndex + ddIndex"
             >
-              <li
-                v-for="(ddItem, ddIndex) in dItem.detail"
-                :key="'ddItem' + dIndex + ddIndex"
+              <span
+                :class="[
+                  ddItem.config.wordPadding.indexOf('left') > -1 ? 'dleft' : '',
+                  ddItem.config.wordPadding.indexOf('right') > -1
+                    ? 'dright'
+                    : '',
+                  !ddItem.sentence ? 'placeholder' : '',
+                ]"
               >
-                <span
-                  :class="[
-                    ddItem.config.wordPadding.indexOf('left') > -1
-                      ? 'dleft'
-                      : '',
-                    ddItem.config.wordPadding.indexOf('right') > -1
-                      ? 'dright'
-                      : '',
-                    !ddItem.sentence ? 'placeholder' : '',
-                  ]"
-                  >{{ ddItem.sentence }}</span
-                >
-              </li>
-              <i
-                class="el-icon-edit"
-                @click.prevent="
-                  setOptionDetail('edit', dItem, dIndex)
-                "
-                style="margin-left: 14px"
-              ></i>
-              <i
-                class="el-icon-delete"
-                @click.prevent="deleteOptionDetail(cellData.mulText.detail, dIndex)"
-                style="margin-left: 14px"
-              ></i>
-            </ul>
-          </div>
-          <div class="correct-box">
-            <div
-              style="width: 600px"
-            >
-              <div style="padding-top: 10px">
-                <span style="display: block; margin-bottom: 10px"
-                  >句子填空答案:<b style="font-size: 12px"
-                    >请输入本题答案,答案用换行符隔开;如果有的输入框没有答案,答案请输入??</b
-                  ></span
-                >
-                <el-input
-                  class="adult-book-input"
-                  type="textarea"
-                  :autosize="{ minRows: 2 }"
-                  v-model="cellData.mulText.correct.completeInput"
-                  placeholder="请输入句子填空答案"
-                  @blur="onBlur"
-                  maxlength="1000"
-                ></el-input>
-              </div>
+                {{ ddItem.sentence }}
+              </span>
+            </li>
+            <i
+              class="el-icon-edit"
+              style="margin-left: 14px"
+              @click.prevent="setOptionDetail('edit', dItem, dIndex)"
+            />
+            <i
+              class="el-icon-delete"
+              style="margin-left: 14px"
+              @click.prevent="
+                deleteOptionDetail(cellData.mulText.detail, dIndex)
+              "
+            />
+          </ul>
+        </div>
+        <div class="correct-box">
+          <div style="width: 600px">
+            <div style="padding-top: 10px">
+              <span style="display: block; margin-bottom: 10px">
+                句子填空答案:
+                <b style="font-size: 12px">
+                  请输入本题答案,答案用换行符隔开;如果有的输入框没有答案,答案请输入??
+                </b>
+              </span>
+              <el-input
+                v-model="cellData.mulText.correct.completeInput"
+                class="adult-book-input"
+                type="textarea"
+                :autosize="{ minRows: 2 }"
+                placeholder="请输入句子填空答案"
+                maxlength="1000"
+                @blur="onBlur"
+              />
             </div>
           </div>
+        </div>
       </template>
       <template v-if="cellData.isCross">
         <div>勾叉答案</div>
-        <CrossTick :cellData="cellData" />
+        <CrossTick :cell-data="cellData" />
       </template>
     </div>
     <div slot="footer">
@@ -171,7 +169,11 @@
       :visible.sync="addStemVisible"
       width="50%"
     >
-      <SentenceSegTemp :detail="optionItemDetail" :segModel="'words'" :type="'config_table'" />
+      <SentenceSegTemp
+        :detail="optionItemDetail"
+        :seg-model="'words'"
+        :type="'config_table'"
+      />
       <span slot="footer" class="dialog-footer">
         <el-button @click="addStemVisible = false">取 消</el-button>
         <el-button type="primary" @click="saveOptionDetail">确 定</el-button>
@@ -246,20 +248,19 @@ export default {
     confirm() {
       this.$emit("close");
     },
-    //添加句子
-    setOptionDetail( type, dItem, dIndex) {
-      let _this = this;
-      _this.addStemVisible = true;
-      if (type == "edit") {
+    // 添加句子
+    setOptionDetail(type, dItem, dIndex) {
+      this.addStemVisible = true;
+      if (type === "edit") {
         this.optionItemDetail = JSON.parse(JSON.stringify(dItem));
       } else {
         let obj = {
           hengLeg: -1,
           detail: [
             {
-              pyPosition: "top", //top 拼音在上面;bottom 拼音在下面
-              sentence: "", //句子
-              segList: [], //分词结果
+              pyPosition: "top", // top 拼音在上面;bottom 拼音在下面
+              sentence: "", // 句子
+              segList: [], // 分词结果
               seg_words: "",
               wordsList: [],
               hengList: [],
@@ -268,9 +269,9 @@ export default {
                 fontColor: "#000",
                 fontFamily: "FZJCGFKTK",
                 wordPadding: [],
-                conAlign: 'center'
+                conAlign: "center",
               },
-              input_Isexample: false
+              input_Isexample: false,
             },
           ],
           fn_check_list: {
@@ -282,28 +283,25 @@ export default {
       this.datailIndex = dIndex;
       this.detailSelectType = type;
     },
-    //删除句子
+    // 删除句子
     deleteOptionDetail(detail, dIndex) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
-        .then(() => {
-            detail.splice(dIndex, 1);
-        })
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        detail.splice(dIndex, 1);
+      });
     },
-    //保存句子
+    // 保存句子
     saveOptionDetail() {
-      let _this = this;
-      _this.addStemVisible = false;
-      if (_this.detailSelectType == "edit") {
-        let optionItem = JSON.parse(JSON.stringify(_this.optionItemDetail));
-        _this.cellData.mulText.detail[_this.datailIndex] =
-          optionItem;
+      this.addStemVisible = false;
+      if (this.detailSelectType === "edit") {
+        let optionItem = JSON.parse(JSON.stringify(this.optionItemDetail));
+        this.cellData.mulText.detail[this.datailIndex] = optionItem;
       } else {
-        let optionItem = JSON.parse(JSON.stringify(_this.optionItemDetail));
-        _this.cellData.mulText.detail.push(optionItem);
+        let optionItem = JSON.parse(JSON.stringify(this.optionItemDetail));
+        this.cellData.mulText.detail.push(optionItem);
       }
     },
     onBlur(item, field) {
@@ -335,7 +333,7 @@ export default {
       &.dleft {
         padding-left: 4px;
       }
-      &.dright{
+      &.dright {
         padding-right: 4px;
       }
     }

+ 56 - 42
src/components/Adult/inputModules/ConfigurableTable/index.vue

@@ -54,17 +54,17 @@
         </caption>
         <thead>
           <tr>
-            <td></td>
+            <td />
             <td
               v-for="(item, k) in curQue.tableData.colsConfig.width"
               :key="`tfoot-${k}`"
             >
-              第{{k+1}}列
+              第{{ k + 1 }}列
             </td>
-            <td></td>
+            <td />
           </tr>
           <tr v-for="(item, i) in curQue.tableData.headers" :key="i">
-            <th></th>
+            <th />
             <th v-for="(header, j) in item.content" :key="j">
               <el-form :inline="true" :model="header">
                 <el-form-item label="内容">
@@ -95,32 +95,37 @@
         </thead>
         <tbody>
           <tr v-for="(row, i) in curQue.tableData.body" :key="`row-${i}`">
-            <td width="60">第{{i+1}}行</td>
+            <td width="60">第{{ i + 1 }}行</td>
             <td v-for="(col, j) in row.content" :key="`col-${j}`">
-              <p>{{col.prefix+' '+col.text+' '+col.sentence_data.sentence}}</p>
+              <p>
+                {{
+                  col.prefix + " " + col.text + " " + col.sentence_data.sentence
+                }}
+              </p>
               <template v-if="col.mulText">
                 <ul
-                class="option-detail-detail"
-                v-for="(dItem, dIndex) in col.mulText.detail"
-                :key="'ddItem' + dIndex"
+                  v-for="(dItem, dIndex) in col.mulText.detail"
+                  :key="'ddItem' + dIndex"
+                  class="option-detail-detail"
                 >
-                <li
+                  <li
                     v-for="(ddItem, ddIndex) in dItem.detail"
                     :key="'ddItem' + dIndex + ddIndex"
-                >
+                  >
                     <span
-                    :class="[
+                      :class="[
                         ddItem.config.wordPadding.indexOf('left') > -1
-                        ? 'dleft'
-                        : '',
+                          ? 'dleft'
+                          : '',
                         ddItem.config.wordPadding.indexOf('right') > -1
-                        ? 'dright'
-                        : '',
+                          ? 'dright'
+                          : '',
                         !ddItem.sentence ? 'placeholder' : '',
-                    ]"
-                    >{{ ddItem.sentence }}</span
+                      ]"
                     >
-                </li>
+                      {{ ddItem.sentence }}
+                    </span>
+                  </li>
                 </ul>
               </template>
               <el-button size="mini" @click="edit(i, j)">编辑</el-button>
@@ -130,17 +135,21 @@
             </td>
           </tr>
           <tr>
-            <td></td>
+            <td />
             <td
               v-for="(item, k) in curQue.tableData.colsConfig.width"
               :key="`tfoot-${k}`"
             >
-              <el-input v-model.number="item.val" size="mini">
+              <el-input
+                v-model.number="item.val"
+                size="mini"
+                class="input-width"
+              >
                 <template slot="prepend">宽度</template>
               </el-input>
               <el-button size="mini" @click="deleteCol(k)">删除列</el-button>
             </td>
-            <td></td>
+            <td />
           </tr>
         </tbody>
       </table>
@@ -200,13 +209,13 @@ export default {
                       seg_words: "",
                       wordsList: [],
                     },
-                    mulText:{
-                        correct: {
-                            completeInput: ""
-                        },
-                        detail: [],
-                        input_Isexample: false,
-                    }
+                    mulText: {
+                      correct: {
+                        completeInput: "",
+                      },
+                      detail: [],
+                      input_Isexample: false,
+                    },
                   },
                 ],
               },
@@ -300,12 +309,12 @@ export default {
             seg_words: "",
             wordsList: [],
           },
-          mulText:{
+          mulText: {
             correct: {
-                completeInput: ""
+              completeInput: "",
             },
             detail: [],
-          }
+          },
         });
       });
       this.curQue.tableData.headers.forEach(({ content }) => {
@@ -355,12 +364,12 @@ export default {
             seg_words: "",
             wordsList: [],
           },
-          mulText:{
+          mulText: {
             correct: {
-                completeInput: ""
+              completeInput: "",
             },
             detail: [],
-          }
+          },
         });
       }
       this.curQue.tableData.body.push({
@@ -396,6 +405,7 @@ export default {
   &-preview {
     border-top: 1px solid #ccc;
     padding-top: 12px;
+    overflow: auto;
 
     .preview-table {
       border-collapse: collapse;
@@ -407,6 +417,10 @@ export default {
 
       td {
         border: 1px solid #aaa;
+
+        .input-width {
+          min-width: 118px;
+        }
       }
 
       th {
@@ -424,19 +438,19 @@ export default {
     overflow: hidden;
     margin-bottom: 10px;
     > li {
-        float: left;
-        > span {
+      float: left;
+      > span {
         float: left;
         &.dleft {
-            padding-left: 4px;
-        }
-        &.dright{
-            padding-right: 4px;
+          padding-left: 4px;
         }
+        &.dright {
+          padding-right: 4px;
         }
+      }
     }
     > i {
-        float: left;
+      float: left;
     }
   }
 }

+ 57 - 57
src/components/Adult/inputModules/Tinydemo.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="Big-Book-Record" v-if="curQue">
+  <div v-if="curQue" class="Big-Book-Record">
     <!-- <img
       src="../../../assets/adult/maikefeng-red.png"
       class="Big-Book-Record-icon"
@@ -8,22 +8,22 @@
     <div class="adult-book-input-item">
       <span class="adult-book-lable">标题:</span>
       <el-input
+        v-model="curQue.title"
         class="adult-book-input"
         type="textarea"
         autosize
         placeholder="请输入标题"
-        v-model="curQue.title"
-        @blur="curQue.title = curQue.title.trim()"
         maxlength="500"
         show-word-limit
-      ></el-input>
+        @blur="curQue.title = curQue.title.trim()"
+      />
     </div>
     <div class="adult-book-input-item">
       <span class="adult-book-lable">图片:</span>
       <Upload
-        :changeFillId="changeImage"
-        :uploadType="'image'"
-        :filleNumber="999"
+        :change-fill-id="changeImage"
+        :upload-type="'image'"
+        :fille-number="999"
       />
     </div>
     <ul v-if="curQue.img_list.length > 0" class="uploadArt_list">
@@ -92,7 +92,53 @@ export default {
   },
   computed: {},
   watch: {},
-  //方法集合
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created() {
+    if (!this.curQue) {
+      this.changeCurQue(this.data_structure);
+    }
+    let lang_url = "";
+    let language = "";
+    let skin_url =
+      process.env.NODE_ENV == "development"
+        ? "/tinymce/skins/ui/oxide"
+        : window.g.zh_CN_URL + "/tinymce/skins/ui/oxide";
+
+    lang_url =
+      process.env.NODE_ENV == "development"
+        ? "/tinymce/langs/zh_CN.js"
+        : window.g.zh_CN_URL + "/tinymce/langs/zh_CN.js";
+    language = "zh_CN";
+
+    this.init = {
+      language_url: lang_url,
+      language,
+      skin_url,
+      height: 500,
+      plugins: "link lists image code table wordcount  preview",
+      toolbar:
+        "preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
+      branding: false,
+      ax_wordlimit_num: 50,
+      ax_wordlimit_callback(editor, txt, num) {
+        tipsJS("当前字数:" + txt.length + ",限制字数:" + num);
+      },
+    }; // 富文本初始化
+  },
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {
+    tinymce.init({
+      selector: `#tinydemo${this.number}`,
+    });
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
     copyHttp(id) {
       CopyToClipboard(id, this);
@@ -130,56 +176,10 @@ export default {
         return;
       }
     },
-  },
-  //生命周期 - 创建完成(可以访问当前this实例)
-  created() {
-    if (!this.curQue) {
-      this.changeCurQue(this.data_structure);
-    }
-    let lang_url = "";
-    let language = "";
-    let skin_url =
-      process.env.NODE_ENV == "development"
-        ? "/tinymce/skins/ui/oxide"
-        : window.g.zh_CN_URL + "/tinymce/skins/ui/oxide";
-
-    lang_url =
-      process.env.NODE_ENV == "development"
-        ? "/tinymce/langs/zh_CN.js"
-        : window.g.zh_CN_URL + "/tinymce/langs/zh_CN.js";
-    language = "zh_CN";
-
-    this.init = {
-        language_url: lang_url,
-        language: language,
-        skin_url: skin_url,
-        height: 500,
-        plugins: "link lists image code table wordcount  preview",
-        toolbar:
-            "preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
-        branding: false,
-        ax_wordlimit_num: 50,
-        ax_wordlimit_callback: function (editor, txt, num) {
-            tipsJS("当前字数:" + txt.length + ",限制字数:" + num);
-        },
-    }; //富文本初始化
-  },
-  //生命周期 - 挂载完成(可以访问DOM元素)
-  mounted() {
-    tinymce.init({
-      selector: `#tinydemo${this.number}`,
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+  }, // 如果页面有keep-alive缓存功能,这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .Big-Book-Record {
   &-icon {
@@ -219,4 +219,4 @@ export default {
     }
   }
 }
-</style>
+</style>

+ 37 - 17
src/components/Adult/preview/AudioLine.vue

@@ -1,6 +1,14 @@
 <template>
   <div :class="['Audio', mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '']">
-    <div v-if="!hideSlider" class="audioLine" :class="[ borderRadius && borderRadius == 'bottomNone' ? 'audioLine-bottomNone' : '']">
+    <div
+      v-if="!hideSlider"
+      class="audioLine"
+      :class="[
+        borderRadius && borderRadius == 'bottomNone'
+          ? 'audioLine-bottomNone'
+          : '',
+      ]"
+    >
       <div
         class="play"
         :class="[
@@ -70,7 +78,7 @@ export default {
     "bg",
     "audioId",
     "type",
-    "borderRadius"
+    "borderRadius",
   ],
   data() {
     // 这里存放数据
@@ -171,21 +179,29 @@ export default {
     PlayAudio() {
       let audioId = this.audioId;
       let audio = document.getElementsByTagName("audio");
-      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
+      if (
+        audio &&
+        audio.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
         audio.forEach((item) => {
-            if (item.src == this.mp3) {
+          if (item.src == this.mp3) {
             if (item.id !== audioId) {
-                item.pause();
+              item.pause();
             }
-            } else {
+          } else {
             item.pause();
-            }
+          }
         });
       }
       let video = document.getElementsByTagName("video");
-      if(video&&video.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
+      if (
+        video &&
+        video.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
         video.forEach((vItem) => {
-            vItem.pause();
+          vItem.pause();
         });
       }
       if (this.audio.playing) {
@@ -259,18 +275,22 @@ export default {
       }
     },
     onTimeupdateTime(res, playFlag) {
-      if (!res&&res!=0) return;
+      if (!res && res != 0) return;
       let audioId = this.audioId;
       this.$refs[audioId].currentTime = res;
       this.playValue = (res / this.audio.maxTime) * 100;
       if (playFlag) {
         let audio = document.getElementsByTagName("audio");
-        if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
-            audio.forEach((item) => {
+        if (
+          audio &&
+          audio.length > 0 &&
+          window.location.href.indexOf("GCLS-Learn") == -1
+        ) {
+          audio.forEach((item) => {
             if (item.id !== audioId) {
-                item.pause();
+              item.pause();
             }
-            });
+          });
         }
         this.$refs[audioId].play();
       }
@@ -335,8 +355,8 @@ export default {
     // box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    &-bottomNone{
-        border-radius: 8px 8px 0 0;
+    &-bottomNone {
+      border-radius: 8px 8px 0 0;
     }
     .play {
       margin-right: 12px;
@@ -412,7 +432,7 @@ export default {
     margin: 0;
     padding: 0;
     background: #e5e5e5;
-    border-radius: 0px;
+    border-radius: 0;
     height: 2px;
   }
   .el-slider {

+ 220 - 214
src/components/Adult/preview/ConfigurableTable.vue

@@ -54,7 +54,7 @@
         <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
           <template v-for="(col, j) in row.content">
             <td
-              v-if="tdIsShow(i, j)"
+              v-if="col.is_show_cell"
               :key="`td-${i}-${j}`"
               :colspan="col.colspan"
               :rowspan="col.rowspan"
@@ -72,7 +72,13 @@
               ]"
               :style="{ 'background-color': `${col.background}` }"
             >
-              <div class="cell-wrap" :class="[col.isCross?'cell-wrap-between':'','cell-wrap-'+curQue.textAlign]">
+              <div
+                class="cell-wrap"
+                :class="[
+                  col.isCross ? 'cell-wrap-between' : '',
+                  'cell-wrap-' + curQue.textAlign,
+                ]"
+              >
                 <template v-if="col.type === 'content'">
                   <span v-if="col.text.length > 0" class="content">
                     {{ col.text }}
@@ -80,7 +86,7 @@
                   <template v-else>
                     <el-input
                       v-model="
-                        judgeAnswer == 'standardAnswer'
+                        judgeAnswer === 'standardAnswer'
                           ? col.answer
                           : curQue.Bookanswer[i].content[j].answer
                       "
@@ -108,7 +114,7 @@
                   <template v-else>
                     <el-input
                       v-model="
-                        judgeAnswer == 'standardAnswer'
+                        judgeAnswer === 'standardAnswer'
                           ? col.answer
                           : curQue.Bookanswer[i].content[j].answer
                       "
@@ -230,61 +236,59 @@
                     </span>
                   </div>
                 </div>
-                
-                <div class="stem-content" v-else-if="col.type === 'mulText'">
-                    <div
-                        :class="[
-                            'sent-main',
-                        ]"
-                        v-for="(sdItem, sdIndex) in col.mulText.detail"
-                        :key="'sent-option-items' + j + sdIndex"
+
+                <div v-else-if="col.type === 'mulText'" class="stem-content">
+                  <div
+                    v-for="(sdItem, sdIndex) in col.mulText.detail"
+                    :key="'sent-option-items' + j + sdIndex"
+                    :class="['sent-main']"
+                  >
+                    <div class="sent-que-box">
+                      <div
+                        v-for="(sddItem, sddIndex) in sdItem.detail"
+                        :key="'sent-option-items' + j + sdIndex + sddIndex"
+                        class="sent-que"
+                        :style="{
+                          paddingLeft:
+                            sddItem.config.wordPadding.indexOf('left') > -1
+                              ? '4px'
+                              : '0px',
+                          paddingRight:
+                            sddItem.config.wordPadding.indexOf('right') > -1
+                              ? '4px'
+                              : '0px',
+                        }"
+                      >
+                        <!-- 补全句子 -->
+                        <OneSentenceTemp
+                          :detail="sddItem"
+                          :py-position="curQue.pinyinPosition"
+                          :task-model="TaskModel"
+                          :bookanswer="curQue.Bookanswer[i].content[j]"
+                          :judge-answer="judgeAnswer"
+                          :correct-answer="col.mulText.correct.complateArr"
+                          :is-input="true"
+                          :fn_check_list="[]"
+                          :py-number="col.pyNumber && col.pyNumber[sdIndex]"
+                          :heng-leg="sdItem.hengLeg"
+                          :max-fontsize="sdItem.maxFontsize"
+                        />
+                        <template
+                          v-if="
+                            sddItem.img_list &&
+                            sddItem.img_list.length > 0 &&
+                            sddItem.img_list[0].id
+                          "
                         >
-                        <div class="sent-que-box">
-                            <div
-                            class="sent-que"
-                            v-for="(sddItem, sddIndex) in sdItem.detail"
-                            :key="'sent-option-items' + j + sdIndex + sddIndex"
-                            :style="{
-                                paddingLeft:
-                                sddItem.config.wordPadding.indexOf('left') > -1
-                                    ? '4px'
-                                    : '0px',
-                                paddingRight:
-                                sddItem.config.wordPadding.indexOf('right') > -1
-                                    ? '4px'
-                                    : '0px',
-                            }"
-                            >
-                            <!-- 补全句子 -->
-                            <OneSentenceTemp
-                                :detail="sddItem"
-                                :pyPosition="curQue.pinyinPosition"
-                                :TaskModel="TaskModel"
-                                :Bookanswer="curQue.Bookanswer[i].content[j]"
-                                :judgeAnswer="judgeAnswer"
-                                :correctAnswer="col.mulText.correct.complateArr"
-                                :isInput="true"
-                                :fn_check_list="[]"
-                                :pyNumber="col.pyNumber && col.pyNumber[sdIndex]"
-                                :hengLeg="sdItem.hengLeg"
-                                :maxFontsize="sdItem.maxFontsize"
-                            />
-                            <template
-                                v-if="
-                                sddItem.img_list &&
-                                sddItem.img_list.length > 0 &&
-                                sddItem.img_list[0].id
-                                "
-                            >
-                                <img
-                                :src="sddItem.img_list[0].id"
-                                class="sddItem_img_list"
-                                :style="[imgStyle(sddItem)]"
-                                />
-                            </template>
-                            </div>
-                        </div>
+                          <img
+                            :src="sddItem.img_list[0].id"
+                            class="sddItem_img_list"
+                            :style="[imgStyle(sddItem)]"
+                          />
+                        </template>
+                      </div>
                     </div>
+                  </div>
                 </div>
                 <CrossTick
                   v-if="col.isCross"
@@ -328,16 +332,16 @@ export default {
     },
     TaskModel: {
       type: String,
-    }
+    },
   },
   data() {
     return {
       isAnswerMode: false,
       userError: false,
       userAnswer: {
-        completeInput: []
+        completeInput: [],
       },
-      userBookanswer:[],
+      userBookanswer: [],
       chsFhList: [",", "。", "”", ":", "》", "?", "!", ";"],
     };
   },
@@ -375,15 +379,15 @@ export default {
     }
     if (!this.curQue.Bookanswer) {
       let arr = [];
-      let flag = false // 是否含有多个句子类型
+      let flag = false; // 是否含有多个句子类型
       this.curQue.tableData.body.forEach((item, i) => {
         arr.push({
           content: [],
         });
         item.content.forEach((items) => {
-            if(items.type === 'mulText'){
-                flag = true
-            }
+          if (items.type === "mulText") {
+            flag = true;
+          }
           arr[i].content.push({
             answer: "",
             CrossAnswer: "",
@@ -392,26 +396,27 @@ export default {
           });
         });
       });
-      if(!flag){
+      if (!flag) {
         this.$set(this.curQue, "Bookanswer", arr);
       }
     } else {
       this.curQue.Bookanswer.forEach((item) => {
         item.content.forEach((item) => {
-          if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
+          if (item.userAnswerJudge === "[JUDGE##F##JUDGE]") {
             this.userError = true;
             return;
           }
         });
       });
     }
+    this.computedTableCellShow();
   },
   mounted() {
     this.handleData();
   },
   methods: {
     enterAnswer(i, j, type) {
-      if (type == "input") {
+      if (type === "input") {
         this.$forceUpdate();
         if (
           this.curQue.Bookanswer[i].content[j].answer.trim() ==
@@ -489,34 +494,37 @@ export default {
       });
       return colIndex === -1 && rowIndex === -1;
     },
-    // rowspan colspan 控制td是否生成
-    tdIsShow(i, j) {
-      let body = this.curQue.tableData.body;
-      let col = 1;
-      let colIndex = body[i].content.findIndex(({ colspan }, index) => {
-        if (index > j) return false;
-        let num = colspan === undefined ? 1 : Number(colspan);
-        if (num > 1) {
-          col = num;
-          return false;
-        }
-        if (index === j && col > 1) return true;
-        if (col > 0) col -= 1;
-        return false;
-      });
-      let row = 1;
-      let rowIndex = body.findIndex((item, index) => {
-        let rowspan = item.content[j].rowspan;
-        let num = rowspan === undefined ? 1 : Number(rowspan);
-        if (num > 1) {
-          row = num;
-          return false;
-        }
-        if (index === i && row > 1) return true;
-        if (row > 0) row -= 1;
-        return false;
+    // 计算单元格是否显示
+    computedTableCellShow() {
+      this.curQue.tableData.body.forEach(({ content }, i, arr) => {
+        content.forEach(({ colspan, rowspan, is_show_cell }, j, arr2) => {
+          let col = colspan === undefined ? 1 : Number(colspan);
+          let row = rowspan === undefined ? 1 : Number(rowspan);
+
+          if (col > 1 && row === 1) {
+            for (let k = 1; k < col; k++) {
+              this.$set(arr[i].content[j + k], "is_show_cell", false);
+            }
+          }
+          if (row > 1 && col === 1) {
+            for (let k = 1; k < row; k++) {
+              this.$set(arr[i + k].content[j], "is_show_cell", false);
+            }
+          }
+          if (row > 1 && col > 1) {
+            for (let k = 1; k < row; k++) {
+              this.$set(arr[i + k].content[j], "is_show_cell", false);
+              for (let l = 1; l < col; l++) {
+                this.$set(arr[i + k].content[j + l], "is_show_cell", false);
+                this.$set(arr[i].content[j + l], "is_show_cell", false);
+              }
+            }
+          }
+          if (is_show_cell === undefined) {
+            arr2[j].is_show_cell = true;
+          }
+        });
       });
-      return colIndex === -1 && rowIndex === -1;
     },
     handleData() {
       let Bookanswer = [];
@@ -525,105 +533,103 @@ export default {
       let option = JSON.parse(JSON.stringify(this.curQue.tableData.body));
       let completeImage = [];
       option.forEach((item, index) => {
-        Bookanswer.push({content: []});
+        Bookanswer.push({ content: [] });
         completeImage = [];
         itemLeg = item.length > itemLeg ? item.length : itemLeg;
         item.content.forEach((items, indexs) => {
-            if(items.mulText){
-                let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
-                let correct = JSON.parse(JSON.stringify(items.mulText.correct));
-                let complateArr = correct.completeInput.split("\n");
-                complateArr.forEach((itemI, indexI) => {
-                    if (itemI == "??" || itemI == "??") {
-                    complateArr[indexI] = "";
+          if (items.mulText) {
+            let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
+            let correct = JSON.parse(JSON.stringify(items.mulText.correct));
+            let complateArr = correct.completeInput.split("\n");
+            complateArr.forEach((itemI, indexI) => {
+              if (itemI == "??" || itemI == "??") {
+                complateArr[indexI] = "";
+              }
+            });
+            items.mulText.correct.complateArr = complateArr;
+            this.curQue.tableData.body[index].content[
+              indexs
+            ].mulText.correct.complateArr = complateArr;
+            Bookanswer[index].content.push(userAnswer);
+            let hengIndex = 0;
+            items.pyNumber = [];
+
+            items.mulText.detail.forEach((sdItem, sdIndex) => {
+              let isHasPY = 0;
+              let maxFontsize = 0;
+              sdItem.detail.forEach((sddItem) => {
+                if (sddItem.wordsList.length > 0) {
+                  sddItem.wordsList.forEach((sItem, sIndex) => {
+                    let reg = /_{2,}/g;
+                    if (reg.test(sItem.chs)) {
+                      sItem.index = sIndex;
+                      sItem.isHeng = true;
+                      sItem.hengIndex = hengIndex;
+                      hengIndex++;
                     }
-                });
-                items.mulText.correct.complateArr = complateArr;
-                this.curQue.tableData.body[index].content[indexs].mulText.correct.complateArr = complateArr;
-                Bookanswer[index].content.push(userAnswer);
-                let hengIndex = 0;
-                items.pyNumber = [];
-
-                items.mulText.detail.forEach((sdItem, sdIndex) => {
-                    let isHasPY = 0;
-                    let maxFontsize = 0;
-                    sdItem.detail.forEach((sddItem) => {
-                    if (sddItem.wordsList.length > 0) {
-                        sddItem.wordsList.forEach((sItem, sIndex) => {
-                        let reg = /_{2,}/g;
-                        if (reg.test(sItem.chs)) {
-                            sItem.index = sIndex;
-                            sItem.isHeng = true;
-                            sItem.hengIndex = hengIndex;
-                            hengIndex++;
+                    // 补全句子
+                    if (!this.curQue.Bookanswer) {
+                      let reg = /_{2,}/g;
+                      if (reg.test(sItem.chs)) {
+                        let bool = false;
+                        if (sddItem.hasOwnProperty("input_Isexample")) {
+                          bool = sddItem.input_Isexample;
+                        } else {
+                          bool = items.Isexample;
                         }
-                        //补全句子
-                        if (
-                            !this.curQue.Bookanswer 
-                        ) {
-                            let reg = /_{2,}/g;
-                            if (reg.test(sItem.chs)) {
-                            let bool = false;
-                            if (sddItem.hasOwnProperty("input_Isexample")) {
-                                bool = sddItem.input_Isexample;
-                            } else {
-                                bool = items.Isexample;
-                            }
-                            let obj = null;
-                            if (!sddItem.input_tian) {
-                                obj = {
-                                answer:
-                                    bool && complateArr[sItem.hengIndex]
-                                    ? complateArr[sItem.hengIndex]
-                                    : "",
-                                userAnswerJudge:
-                                    bool || !complateArr[sItem.hengIndex]
-                                    ? ""
-                                    : "[JUDGE##F##JUDGE]",
-                                input_Isexample: bool ? true : false,
-                                };
-                                Bookanswer[index].content[indexs].completeInput.push(
-                                JSON.parse(JSON.stringify(obj))
-                                );
-                            } else {
-                                if (sddItem.hengLeg == "-1") {
-                                completeImage.push(obj);
-                                } else {
-                                for (let i = 0; i < Number(sddItem.hengLeg); i++) {
-                                    completeImage.push(obj);
-                                }
-                                }
-                                Bookanswer[index].content[indexs].completeInput.push(
-                                JSON.parse(JSON.stringify(completeImage))
-                                );
-                            }
+                        let obj = null;
+                        if (!sddItem.input_tian) {
+                          obj = {
+                            answer:
+                              bool && complateArr[sItem.hengIndex]
+                                ? complateArr[sItem.hengIndex]
+                                : "",
+                            userAnswerJudge:
+                              bool || !complateArr[sItem.hengIndex]
+                                ? ""
+                                : "[JUDGE##F##JUDGE]",
+                            input_Isexample: Boolean(bool),
+                          };
+                          Bookanswer[index].content[indexs].completeInput.push(
+                            JSON.parse(JSON.stringify(obj))
+                          );
+                        } else {
+                          if (sddItem.hengLeg == "-1") {
+                            completeImage.push(obj);
+                          } else {
+                            for (let i = 0; i < Number(sddItem.hengLeg); i++) {
+                              completeImage.push(obj);
                             }
+                          }
+                          Bookanswer[index].content[indexs].completeInput.push(
+                            JSON.parse(JSON.stringify(completeImage))
+                          );
                         }
+                      }
+                    }
 
-                        this.mergeWordSymbol(sItem);
-                        if (sItem.pinyin) {
-                            isHasPY++;
-                            this.totalHasPy = true;
-                        }
-                        let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
-                        fontSize = Number(fontSize.replace("px", ""));
-                        maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
-                        });
-                    } else {
-                        if (sddItem.sentence) {
-                        let fontSize = JSON.parse(
-                            JSON.stringify(sddItem.config.fontSize)
-                        );
-                        fontSize = Number(fontSize.replace("px", ""));
-                        maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
-                        }
+                    this.mergeWordSymbol(sItem);
+                    if (sItem.pinyin) {
+                      isHasPY++;
+                      this.totalHasPy = true;
                     }
-                    });
-                    sdItem.maxFontsize = maxFontsize;
-                    items.pyNumber.push(isHasPY);
-                });
-            }
-          
+                    let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
+                    fontSize = Number(fontSize.replace("px", ""));
+                    maxFontsize =
+                      fontSize > maxFontsize ? fontSize : maxFontsize;
+                  });
+                } else if (sddItem.sentence) {
+                  let fontSize = JSON.parse(
+                    JSON.stringify(sddItem.config.fontSize)
+                  );
+                  fontSize = Number(fontSize.replace("px", ""));
+                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
+                }
+              });
+              sdItem.maxFontsize = maxFontsize;
+              items.pyNumber.push(isHasPY);
+            });
+          }
         });
       });
       if (!this.curQue.Bookanswer) {
@@ -646,44 +652,44 @@ export default {
       if (this.curQue.img_list && this.curQue.img_list.length > 0) {
         contentWidth = 780 - this.curQue.img_size;
       }
-      if(itemLeg==1){
-        this.itemsWidth = 780
-      }else{
+      if (itemLeg === 1) {
+        this.itemsWidth = 780;
+      } else {
         this.itemsWidth = Math.floor(contentWidth / itemLeg) - 16;
       }
-      
 
       // 把答错的挑出来
       if (this.judgeAnswer == "standardAnswer") {
         this.userErrorList = [];
         this.userBookanswer = [];
         this.curQue.tableData.body.forEach((item, index) => {
-            item.content.forEach((items, indexs) => {
-            if(items.mulText){
-                let flag = false;
-                // 句子填空
-                items.mulText.correct.complateArr.forEach((itemI, indexI) => {
+          item.content.forEach((items, indexs) => {
+            if (items.mulText) {
+              let flag = false;
+              // 句子填空
+              items.mulText.correct.complateArr.forEach((itemI, indexI) => {
                 if (
-                    itemI &&
-                    itemI !=
-                    this.curQue.Bookanswer[index].content[indexs].completeInput[indexI]
+                  itemI &&
+                  itemI !==
+                    this.curQue.Bookanswer[index].content[indexs].completeInput[
+                      indexI
+                    ]
                 ) {
-                    flag = true;
+                  flag = true;
                 }
-                });
+              });
 
-                if (flag) {
-                    this.userErrorList.push(items);
-                    this.userBookanswer.push(this.curQue.Bookanswer[index][indexs]);
-                    this.userError = true;
-                }
+              if (flag) {
+                this.userErrorList.push(items);
+                this.userBookanswer.push(this.curQue.Bookanswer[index][indexs]);
+                this.userError = true;
+              }
             }
-            
           });
         });
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(sItem) {
       if (this.chsFhList.indexOf(sItem.chs) > -1) {
         sItem.isShow = false;
@@ -747,14 +753,14 @@ export default {
         display: flex;
         align-items: center;
         column-gap: 4px;
-        &-center{
-            justify-content: center;
+        &-center {
+          justify-content: center;
         }
-        &-right{
-            justify-content: flex-end;
+        &-right {
+          justify-content: flex-end;
         }
-        &-between{
-            justify-content: space-between;
+        &-between {
+          justify-content: space-between;
         }
         .content {
           width: 100%;
@@ -817,9 +823,9 @@ export default {
           display: grid;
         }
       }
-    //   .stem-content {
-    //     flex: 1;
-    //   }
+      //   .stem-content {
+      //     flex: 1;
+      //   }
       .number-box {
         // &-hasPY {
         //   margin-top: 19px;

+ 63 - 62
vue.config.js

@@ -1,13 +1,12 @@
-
-const path = require('path');
-const defaultSettings = require('./src/settings.js');
-const CompressionPlugin = require('compression-webpack-plugin');
+const path = require("path");
+const defaultSettings = require("./src/settings.js");
+const CompressionPlugin = require("compression-webpack-plugin");
 
 function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
-const name = defaultSettings.title || '发展汉语'; // page title
+const name = defaultSettings.title || "发展汉语"; // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
@@ -16,7 +15,7 @@ const name = defaultSettings.title || '发展汉语'; // page title
 // port = 9528 npm run dev OR npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 9560; // dev port
 
-const webpack = require('webpack');
+const webpack = require("webpack");
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -27,9 +26,10 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book-Component-NPC',
-  outputDir: 'dist',
-  assetsDir: 'static',
+  publicPath:
+    process.env.NODE_ENV === "development" ? "/" : "/GCLS-Book-Component-NPC",
+  outputDir: "dist",
+  assetsDir: "static",
   lintOnSave: false,
   productionSourceMap: false,
   devServer: {
@@ -37,28 +37,28 @@ module.exports = {
     open: true,
     overlay: {
       warnings: false,
-      errors: true
+      errors: true,
     },
     proxy: {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `https://gcls.utschool.cn/`,
-        target: `https://gcls.helxsoft.cn/`,
-        // target: `https://chinesedu.blcup.com/`,
+        // target: `https://gcls.helxsoft.cn/`,
+        target: `https://chinesedu.blcup.com/`,
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
+          ["^" + process.env.VUE_APP_BASE_API]: "",
+        },
       },
       [process.env.VUE_APP_PDF]: {
-        target: 'https://file-kf.helxsoft.cn/',
+        target: "https://file-kf.helxsoft.cn/",
         // target: 'https://file-cs.helxsoft.cn/',
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_PDF]: ''
-        }
-      }
+          ["^" + process.env.VUE_APP_PDF]: "",
+        },
+      },
     },
 
     // after: require('./mock/mock-server.js')
@@ -69,87 +69,88 @@ module.exports = {
     name,
     resolve: {
       alias: {
-        '@': resolve('src')
-      }
+        "@": resolve("src"),
+      },
     },
     plugins: [
       new webpack.ProvidePlugin({
-        jQuery: 'jquery',
-        $: 'jquery'
+        jQuery: "jquery",
+        $: "jquery",
       }),
       new CompressionPlugin({
-        algorithm: 'gzip', // 使用gzip压缩
+        algorithm: "gzip", // 使用gzip压缩
         test: /\.js$|\.html$|\.css$/, // 匹配文件名
         minRatio: 0.8, // 压缩率小于0.8才会压缩
         threshold: 10240, // 对超过10k的数据压缩
-        deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
-      })
-    ]
+        deleteOriginalAssets: false, // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
+      }),
+    ],
   },
   chainWebpack(config) {
     // it can improve the speed of the first screen, it is recommended to turn on preload
-    config.plugin('preload').tap(() => [{
-      rel: 'preload',
-      // to ignore runtime.js
-      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-      include: 'initial'
-    }]);
+    config.plugin("preload").tap(() => [
+      {
+        rel: "preload",
+        // to ignore runtime.js
+        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
+        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
+        include: "initial",
+      },
+    ]);
 
     // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch');
+    config.plugins.delete("prefetch");
 
     // set svg-sprite-loader
+    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
     config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end();
-    config.module
-      .rule('icons')
+      .rule("icons")
       .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
+      .include.add(resolve("src/icons"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: "icon-[name]",
       })
       .end();
 
-    config.when(process.env.NODE_ENV !== 'development', config => {
+    config.when(process.env.NODE_ENV !== "development", (config) => {
       config
-        .plugin('ScriptExtHtmlWebpackPlugin')
-        .after('html')
-        .use('script-ext-html-webpack-plugin', [{
-          // `runtime` must same as runtimeChunk name. default is `runtime`
-          inline: /runtime\..*\.js$/
-        }])
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
+          {
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+            inline: /runtime\..*\.js$/,
+          },
+        ])
         .end();
       config.optimization.splitChunks({
-        chunks: 'all',
+        chunks: "all",
         cacheGroups: {
           libs: {
-            name: 'chunk-libs',
+            name: "chunk-libs",
             test: /[\\/]node_modules[\\/]/,
             priority: 10,
-            chunks: 'initial' // only package third parties that are initially dependent
+            chunks: "initial", // only package third parties that are initially dependent
           },
           elementUI: {
-            name: 'chunk-elementUI', // split elementUI into a single package
+            name: "chunk-elementUI", // split elementUI into a single package
             priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
           },
           commons: {
-            name: 'chunk-commons',
-            test: resolve('src/components'), // can customize your rules
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
             minChunks: 3, //  minimum common number
             priority: 5,
-            reuseExistingChunk: true
-          }
-        }
+            reuseExistingChunk: true,
+          },
+        },
       });
       // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-      config.optimization.runtimeChunk('single');
+      config.optimization.runtimeChunk("single");
     });
-  }
+  },
 };