表头分离表格增加 前后缀 + 拼音

src/components/Adult/inputModules/ConfigurableTable/index.vue

@@ -233,21 +233,21 @@ export default {
       this.curQue.tableData.colsConfig.width.push({ val: 100 });
     },
     deleteCol(k) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
         .then(() => {
-            if (this.cols <= 1) return this.$message.warning("必须留一列");
-            this.curQue.tableData.body.forEach(({ content }) => {
-                content.splice(k, 1);
-            });
-            this.curQue.tableData.headers.forEach(({ content }) => {
-                content.splice(k, 1);
-            });
-            this.curQue.tableData.colsConfig.width.splice(k, 1);
-        })
+          if (this.cols <= 1) return this.$message.warning("必须留一列");
+          this.curQue.tableData.body.forEach(({ content }) => {
+            content.splice(k, 1);
+          });
+          this.curQue.tableData.headers.forEach(({ content }) => {
+            content.splice(k, 1);
+          });
+          this.curQue.tableData.colsConfig.width.splice(k, 1);
+        });
     },
 
     addRow() {
@@ -273,15 +273,15 @@ export default {
       });
     },
     deleteRow(i) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
         .then(() => {
-            if (this.rows <= 1) return this.$message.warning("必须留一行");
-            this.curQue.tableData.body.splice(i, 1);
-        })
+          if (this.rows <= 1) return this.$message.warning("必须留一行");
+          this.curQue.tableData.body.splice(i, 1);
+        });
     }
   }
 };

src/components/Adult/inputModules/HeaderSeparate/components/CellEdit.vue

@@ -25,6 +25,31 @@
         :is-hide-py-position="true"
       />
 
+      <template v-else-if="cellData.type === 'prePinyin'">
+        <el-input v-model="cellData.message">
+          <template slot="prepend">
+            <el-select v-model="cellData.prefixOrSuffix">
+              <el-option
+                key="prefix"
+                label="前缀"
+                value="prefix"
+              />
+              <el-option
+                key="suffix"
+                label="后缀"
+                value="suffix"
+              />
+            </el-select>
+          </template>
+        </el-input>
+
+        <sentence-segword-chs
+          :cur-que="cellData.sentence_data"
+          type="adultinput"
+          :is-hide-py-position="true"
+        />
+      </template>
+
     </div>
     <div slot="footer">
       <el-button type="primary" @click="confirm">确定</el-button>
@@ -61,6 +86,10 @@ export default {
         {
           label: "拼音",
           value: "pinyin"
+        },
+        {
+          label: '前后缀 + 拼音',
+          value: 'prePinyin'
         }
       ]
     };
@@ -85,6 +114,10 @@ export default {
 <style lang="scss" scoped>
 ::v-deep .dialog-container {
   margin-top: 12px;
+
+  .el-input-group__prepend {
+    width: 80px;
+  }
 }
 </style>
 

src/components/Adult/inputModules/HeaderSeparate/index.vue

@@ -128,6 +128,8 @@ export default {
                   {
                     type: "content",
                     text: "",
+                    message: '',
+                    prefixOrSuffix: 'prefix', // 前缀或后缀
                     sentence_data: {
                       type: "sentence_segword_chs",
                       name: "句子分词",
@@ -141,6 +143,8 @@ export default {
                   {
                     type: "content",
                     text: "",
+                    message: '',
+                    prefixOrSuffix: 'prefix',
                     sentence_data: {
                       type: "sentence_segword_chs",
                       name: "句子分词",
@@ -154,6 +158,8 @@ export default {
                   {
                     type: "content",
                     text: "",
+                    message: '',
+                    prefixOrSuffix: 'prefix',
                     sentence_data: {
                       type: "sentence_segword_chs",
                       name: "句子分词",
@@ -209,6 +215,8 @@ export default {
         content.push({
           type: "content",
           text: "",
+          message: '',
+          prefixOrSuffix: 'prefix',
           sentence_data: {
             type: "sentence_segword_chs",
             name: "句子分词",
@@ -227,19 +235,19 @@ export default {
       this.curQue.tableData.colsConfig.width.push({ val: 100 });
     },
     deleteCol(i) {
-        this.$confirm("确定要删除此列吗?", "提示", {
+      this.$confirm("确定要删除此列吗?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-            if (this.cols <= 3) return this.$message.warning("必须留三列");
-            this.curQue.tableData.body.forEach(({ content }) => {
-                content.splice(i, 1);
-            });
-            this.curQue.tableData.headers.splice(i, 1);
-            this.curQue.tableData.colsConfig.width.splice(i, 1);
-        })
+          if (this.cols <= 3) return this.$message.warning("必须留三列");
+          this.curQue.tableData.body.forEach(({ content }) => {
+            content.splice(i, 1);
+          });
+          this.curQue.tableData.headers.splice(i, 1);
+          this.curQue.tableData.colsConfig.width.splice(i, 1);
+        });
     },
 
     addRow() {
@@ -248,6 +256,8 @@ export default {
         content.push({
           type: "content",
           text: "",
+          message: '', // 内容
+          prefixOrSuffix: 'prefix',
           sentence_data: {
             type: "sentence_segword_chs",
             name: "句子分词",
@@ -264,15 +274,15 @@ export default {
       });
     },
     deleteRow(i) {
-        this.$confirm("确定要删除此行吗?", "提示", {
+      this.$confirm("确定要删除此行吗?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-            if (this.rows <= 1) return this.$message.warning("必须留一行");
-            this.curQue.tableData.body.splice(i, 1);
-        })
+          if (this.rows <= 1) return this.$message.warning("必须留一行");
+          this.curQue.tableData.body.splice(i, 1);
+        });
     },
 
     edit(i, j) {

src/components/Adult/preview/AudioLine.vue

@@ -43,7 +43,7 @@
       :id="audioId"
       :ref="audioId"
       :src="mp3"
-      preload="meta"
+      preload="metadata"
       @loadedmetadata="onLoadedmetadata"
       @timeupdate="onTimeupdate"
       @canplaythrough="oncanplaythrough"
@@ -234,6 +234,7 @@ export default {
     },
     // 音频加载完之后
     onLoadedmetadata(res) {
+      console.log(res.target.duration);
       this.audio.maxTime = parseInt(res.target.duration);
       this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
     },

src/components/Adult/preview/HeaderSeparate.vue

@@ -116,6 +116,35 @@
                 </span>
               </div>
             </div>
+
+            <div
+              v-else-if="col.type === 'prePinyin'"
+              :style="{
+                'flex-direction': col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse'
+              }"
+              class="pre-pinyin"
+            >
+              <span>{{ col.message }}</span>
+              <div class="right-pinyin">
+                <div>
+                  <span
+                    v-for="({ pinyin }, k) in col.sentence_data.wordsList"
+                    :key="`pre-pinyin-${k}`"
+                    class="pinyin"
+                  >
+                    {{ pinyin }}
+                  </span>
+                </div>
+                <div>
+                  <span
+                    v-for="({ pinyin, chs }, k) in col.sentence_data.wordsList"
+                    :key="`pre-chs-${k}`"
+                  >
+                    {{ chs }}
+                  </span>
+                </div>
+              </div>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -254,6 +283,19 @@ export default {
       .sentence {
         display: flex;
       }
+
+      // 前缀 + 拼音
+      .pre-pinyin {
+        display: flex;
+        align-items: flex-end;
+
+        .right-pinyin {
+          row-gap: 2px;
+          flex-direction: column;
+          text-align: center;
+          display: flex;
+        }
+      }
     }
 
     .pinyin {

src/components/Adult/preview/VoiceMatrix.vue

@@ -290,11 +290,23 @@
                 @click="matrixCellClick(i, j)"
               >
                 <span>
-                  <span :class="[getBracketsOuterTypeClass(column.text_brackets.brackets_outer_type)]">
+                  <span
+                    :class="[
+                      getBracketsOuterTypeClass(
+                        column.text_brackets.brackets_outer_type
+                      ),
+                    ]"
+                  >
                     {{ column.text_brackets.brackets_outer }}
                   </span>
                   <span class="brackets">&nbsp;[&nbsp;</span>
-                  <span :class="[column.text_brackets.brackets_inner_type === 'pinyin' ? 'pinyin' : 'english']">
+                  <span
+                    :class="[
+                      column.text_brackets.brackets_inner_type === 'pinyin'
+                        ? 'pinyin'
+                        : 'english',
+                    ]"
+                  >
                     {{ column.text_brackets.brackets_inner }}
                   </span>
                   <span class="brackets">&nbsp;]</span>
@@ -336,7 +348,7 @@
     </div>
     <!-- 录音 -->
     <div class="voice-luyin">
-      <soundrecord
+      <Soundrecord
         v-if="refresh"
         ref="luyin"
         type="promax"
@@ -351,7 +363,7 @@
         @sentPause="sentPause"
         @handleWav="handleWav"
       />
-      <audio-compare
+      <AudioCompare
         :style="{ flex: 1 }"
         :theme-color="themeColor"
         :wavblob="wavblob"
@@ -370,7 +382,7 @@
       </span>
     </div>
     <div :id="`screen-${cid}`" class="voice-full-screen">
-      <voice-fullscreen
+      <VoiceFullscreen
         v-if="isFull"
         :theme-color="themeColor"
         :cur-que="curQue"
@@ -494,13 +506,12 @@ export default {
       this.handleParentPlay();
     },
     isFull: {
-      handler (newVal, oldVal) {
-        let _this = this;
-        _this.refresh = false;
+      handler(newVal, oldVal) {
+        this.refresh = false;
         if (!newVal) {
-          _this.$nextTick(() => {
+          this.$nextTick(() => {
             // 重新渲染组件
-            _this.refresh = true;
+            this.refresh = true;
           });
         }
       },
@@ -508,13 +519,11 @@ export default {
     },
   },
   created() {
-    let _this = this;
     Bus.$on("audioPause", id => {
-      if (_this.cid === id) return;
-      _this.$nextTick(() => {
-        console.log(_this.$refs.luyin);
-        if (_this.$refs.luyin.microphoneStatus) _this.$refs.luyin.microphone();
-        _this.handleParentPlay();
+      if (this.cid === id) return;
+      this.$nextTick(() => {
+        if (this.$refs.luyin.microphoneStatus) this.$refs.luyin.microphone();
+        this.handleParentPlay();
       });
     });
     if (!this.curQue.Bookanswer) {
@@ -526,9 +535,6 @@ export default {
   },
 
   mounted() {
-    document
-      .querySelector("body")
-      .addEventListener("click", this.restoreAudioStatus);
     // 如果一行内有两个语音矩阵，隐藏 全屏模式 文字
     if (
       Number(
@@ -538,11 +544,7 @@ export default {
       this.$refs.fullscreen.children[0].hidden = true;
     }
   },
-  beforeDestroy() {
-    document
-      .querySelector("body")
-      .removeEventListener("click", this.restoreAudioStatus);
-  },
+  beforeDestroy() {},
   methods: {
     // 鼠标移入移出
     matrixCellMouseenter(i, j, type) {
@@ -589,32 +591,6 @@ export default {
       }
     },
 
-    // 判断 click 点击是否语音矩阵可操作区域
-    restoreAudioStatus(event) {
-      const whitePath = [
-        "column-green",
-        "column-red",
-        "column-brown",
-        "matrix-checkbox-column-",
-        "matrix-checkbox-row-",
-        "audio-simple-image",
-        "audio-simple-repeat",
-        "luyin-box",
-      ];
-
-      let operable = event.path.some(item => {
-        let className = item.className;
-        if (!className) return false;
-        return whitePath.some(path => className.includes(path));
-      });
-      if (!operable) {
-        this.selectedLine = { type: "", index: -1 };
-        this.selectCell = { row: -1, column: -1 };
-        if (this.playing) this.handleParentPlay();
-        if (this.unWatch) this.unWatch();
-      }
-    },
-
     checkboxMouseenter(isSelected, type) {
       if (!isSelected) return this.clearSelectCell();
       if (type === "row") this.selectColumn = -1;
@@ -646,10 +622,10 @@ export default {
     },
 
     getBracketsOuterTypeClass(type) {
-      if (type === 'pinyin') return 'pinyin';
-      if (type === 'chs') return 'chs';
-      if (type === 'english') return 'english';
-      return 'chs';
+      if (type === "pinyin") return "pinyin";
+      if (type === "chs") return "chs";
+      if (type === "english") return "english";
+      return "chs";
     },
 
     playAudio() {
@@ -1296,7 +1272,7 @@ $select-color-brown-active: #a37557;
           }
 
           .english {
-            font-family: 'robot';
+            font-family: "robot";
           }
 
           .brackets {