校对拼音版

src/views/book/courseware/create/components/question/table/Table.vue

@@ -123,7 +123,6 @@
                 :inline="true"
                 :item-index="i + '#' + j"
                 toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright image media link"
-                @handleRichTextBlur="handleBlurCon"
               />
               <el-input v-else v-model="li.content" @blur="handleBlurCon" />
               <el-button size="mini" @click="editCell(li.cell)">设置</el-button>
@@ -148,7 +147,7 @@
           placeholder="请输入词汇，用于选词填空"
         />
         <p class="tips">在需要作答的单元格内输入三个以上下划线“___”</p>
-        <el-button @click="identifyText()">识别</el-button>
+        <el-button @click="handleViewPinyin()">识别</el-button>
         <el-button @click="handleMultilingual">多语言</el-button>
         <template v-if="isEnable(data.has_identify)">
           <p class="tips">
@@ -196,10 +195,10 @@
             icon="el-icon-refresh"
             title="刷新"
             class="refresh-pinyin-btn"
-            @click.native="identifyText()"
+            @click.native="handleViewPinyin(true)"
         /></el-divider>
         <template v-if="isEnable(data.property.view_pinyin)">
-          <template v-for="(item, index) in data.option_list">
+          <!-- <template v-for="(item, index) in data.option_list">
             <PinyinText
               v-for="(items, indexs) in item"
               :id="'table_pinyin_text_' + index + '_' + indexs"
@@ -212,7 +211,32 @@
               :font-family="data?.unified_attrib?.font"
               @fillCorrectPinyin="fillCorrectPinyin"
             />
-          </template>
+          </template> -->
+
+          <table class="proofread-table">
+            <tbody>
+              <template v-for="(row, i) in data.option_list">
+                <tr v-for="(item, j) in row" :key="item.mark">
+                  <td class="pinyin-cell">
+                    <PinyinText
+                      ref="PinyinText"
+                      :paragraph-list="item.paragraph_list"
+                      :rich-text-list="item.rich_text_list"
+                      :pinyin-position="data.property.pinyin_position"
+                      @fillCorrectPinyin="fillCorrectPinyin($event, i, j)"
+                    />
+                  </td>
+                  <td class="proofread-cell">
+                    <WordProofread
+                      button-text="分词校对"
+                      :word-data="getOptionWordData(item)"
+                      @save="saveOptionWord($event, i, j)"
+                    />
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
         </template>
       </div>
       <el-dialog
@@ -253,6 +277,8 @@ import { PinyinBuild_OldFormat } from '@/api/book';
 
 import { getRandomNumber } from '@/utils';
 import PinyinText from '@/components/PinyinText.vue';
+import WordProofread from '@/views/book/courseware/create/components/common/WordProofread.vue';
+import { buildWordProofreadData } from '@/views/book/courseware/create/components/common/wordProofread';
 
 import {
   getTableData,
@@ -267,6 +293,7 @@ export default {
   name: 'TablePage',
   components: {
     PinyinText,
+    WordProofread,
   },
   mixins: [ModuleMixin],
   data() {
@@ -284,6 +311,10 @@ export default {
       statusList: ['normal', 'tick', 'cross'],
       editContentIndex: '', // 编辑内容的单元格索引
       loading: false,
+      optionWordDataMap: {},
+      optionWordDataSourceMap: {},
+      loading: false,
+      inited: false,
     };
   },
   watch: {
@@ -334,12 +365,15 @@ export default {
     },
     'data.property.view_pinyin': {
       handler(val) {
+        if (this.property.isSilentPropertyWatch) return;
         let text = '';
         this.data.option_list.forEach((item) => {
           item.forEach((items) => {
             text += `${items.content.replace(/<[^>]+>/g, '')}\n`;
           });
         });
+        this.optionWordDataMap = {};
+        this.optionWordDataSourceMap = {};
         if (!isEnable(val)) {
           this.data.paragraph_list = [];
           return;
@@ -354,6 +388,9 @@ export default {
             });
           });
         }
+        this.handleViewPinyin().finally(() => {
+          this.inited = true;
+        });
       },
       deep: true,
     },
@@ -409,6 +446,16 @@ export default {
       deep: true,
       immediate: true,
     },
+    'data.option_list': {
+      handler(newVal) {
+        if (this.loading) return;
+        if (this.inited || !Array.isArray(newVal) || newVal.length <= 0) return;
+        if (!this.isEnable(this.data.property.view_pinyin)) return;
+        this.ensureOptionWordProofreadData();
+        this.inited = true;
+      },
+      deep: true,
+    },
   },
   methods: {
     toggle(status) {
@@ -425,6 +472,36 @@ export default {
         richText.setRichFormat(text, val, true);
       });
     },
+    ensureOptionWordProofreadData() {
+      this.data.option_list.forEach((row) => {
+        row.forEach((option) => {
+          if (!option?.mark) return;
+          const wordData = { detail: [{ sentences: [], segList: [] }] };
+          option.rich_text_list?.forEach((item) => {
+            const sentence = (item.word_list || []).reduce((acc, itemss) => `${acc + itemss.text}`, '');
+            const seg = (item.word_list || []).map((itemss) => itemss.text);
+            wordData.detail[0].sentences.push(sentence);
+            wordData.detail[0].segList.push(seg);
+          });
+          this.$set(this.optionWordDataMap, option.mark, wordData);
+          this.$set(this.optionWordDataSourceMap, option.mark, option.content);
+        });
+      });
+    },
+    async handleViewPinyin(isPrompt = false) {
+      if (isPrompt) {
+        try {
+          await this.$confirm('刷新将会重置分词和拼音，是否刷新？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          });
+        } catch (e) {
+          return;
+        }
+      }
+      this.identifyText();
+    },
     // 识别文本
     identifyText(editIndex) {
       let text = '';
@@ -581,18 +658,18 @@ export default {
         }
       });
     },
-    // 填充校对后的拼音
-    fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j, k }) {
-      this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
-        paragraph_index: i,
-        sentence_index: j,
-        word_index: k,
-        word: text,
-        pinyin,
-      });
-      if (pinyin) this.data.paragraph_list[i][j][k].pinyin = pinyin;
-      if (activeTextStyle) this.data.paragraph_list[i][j][k].activeTextStyle = activeTextStyle;
-    },
+    // // 填充校对后的拼音
+    // fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j, k }) {
+    //   this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
+    //     paragraph_index: i,
+    //     sentence_index: j,
+    //     word_index: k,
+    //     word: text,
+    //     pinyin,
+    //   });
+    //   if (pinyin) this.data.paragraph_list[i][j][k].pinyin = pinyin;
+    //   if (activeTextStyle) this.data.paragraph_list[i][j][k].activeTextStyle = activeTextStyle;
+    // },
     // 思维导图数据
     handleMindMap() {
       let node_list = [];
@@ -620,6 +697,23 @@ export default {
       });
       this.multilingualVisible = true;
     },
+    getOptionWordData(option) {
+      if (!option || !option.mark) return { detail: [] };
+      return this.optionWordDataMap[option.mark] || { detail: [] };
+    },
+    async saveOptionWord(saveArr, rowIndex, colIndex) {
+      const option = this.data.option_list[rowIndex]?.[colIndex];
+      if (!option) return;
+      const { parsed_text } = await this.createParsedTextInfoPinyin(
+        option.content,
+        rowIndex,
+        colIndex,
+        'option_list',
+        saveArr,
+      );
+      this.$set(this.optionWordDataMap, option.mark, buildWordProofreadData(parsed_text?.paragraph_list || []));
+      this.$set(this.optionWordDataSourceMap, option.mark, option.content || '');
+    },
   },
 };
 </script>
@@ -724,4 +818,25 @@ export default {
   padding: 0;
   text-align: center;
 }
+
+.proofread-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    padding: 8px;
+    vertical-align: top;
+    border: 1px solid #ebeef5;
+  }
+
+  .pinyin-cell {
+    width: calc(100% - 140px);
+  }
+
+  .proofread-cell {
+    width: 140px;
+    text-align: center;
+    white-space: nowrap;
+  }
+}
 </style>