表格 增加拼音

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

@@ -100,6 +100,15 @@
         :translations="data.multilingual"
         @SubmitTranslation="handleMultilingualTranslation"
       />
+      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
+      <PinyinText
+        v-if="isEnable(data.property.view_pinyin)"
+        :id="'table_pinyin_text'"
+        ref="PinyinText"
+        :paragraph-list="data.paragraph_list"
+        :pinyin-position="data.property.pinyin_position"
+        @fillCorrectPinyin="fillCorrectPinyin"
+      />
     </template>
   </ModuleBase>
 </template>
@@ -107,8 +116,10 @@
 <script>
 import { isEnable } from '@/views/book/courseware/data/common';
 import ModuleMixin from '../../common/ModuleMixin';
+import { CrateParsedTextInfo_Pinyin } from '@/api/book';
 
 import { getRandomNumber } from '@/utils';
+import PinyinText from '@/components/PinyinText.vue';
 
 import {
   getTableData,
@@ -120,7 +131,9 @@ import {
 
 export default {
   name: 'Table',
-  components: {},
+  components: {
+    PinyinText,
+  },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -129,6 +142,8 @@ export default {
       tableTypeList,
       fontFamilyList,
       multilingualText: '',
+      isViewExplanatoryNoteDialog: false,
+      oldRichData: {},
     };
   },
   watch: {
@@ -173,10 +188,28 @@ export default {
         });
       },
     },
+    'data.property.view_pinyin': {
+      handler(val) {
+        let text = '';
+        this.data.option_list.forEach((item) => {
+          item.forEach((items) => {
+            text += items.content.replace(/<[^>]+>/g, '') + '\n';
+          });
+        });
+        if (isEnable(val) && text) {
+          this.data.paragraph_list_parameter.text = text;
+          this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
+            val.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+          this.crateParsedTextInfoPinyin(text);
+        }
+      },
+      deep: true,
+    },
   },
   methods: {
     // 识别文本
     identifyText() {
+      let text = '';
       this.data.has_identify = 'true';
       this.data.option_list.forEach((item, index) => {
         item.forEach((items, indexs) => {
@@ -208,8 +241,12 @@ export default {
                 // .replace(/<span class="rich-fill".*?>(.*?)<\/span>|([_]{3,})/gi, '###$1$2###');
               });
           }
+          text += items.content.replace(/<[^>]+>/g, '') + '\n';
         });
       });
+      if (isEnable(this.data.property.view_pinyin)) {
+        this.crateParsedTextInfoPinyin(text);
+      }
     },
     // 分割富文本
     splitRichText(str) {
@@ -247,6 +284,32 @@ export default {
       }
       return arr;
     },
+    // 获取拼音解析文本
+    crateParsedTextInfoPinyin(text) {
+      if (text === '') {
+        this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
+        return;
+      }
+      this.data.paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '');
+      this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
+        this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+      CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then((res) => {
+        if (res.parsed_text) {
+          this.data.paragraph_list = res.parsed_text.paragraph_list;
+        }
+      });
+    },
+    // 填充校对后的拼音
+    fillCorrectPinyin(selectContent, tonePinyin, i, j, k) {
+      this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
+        paragraph_index: i,
+        sentence_index: j,
+        word_index: k,
+        word: selectContent,
+        pinyin: tonePinyin,
+      });
+      this.data.paragraph_list[i][j][k].pinyin = tonePinyin;
+    },
     // 思维导图数据
     handleMindMap() {
       let node_list = [];

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

@@ -33,6 +33,29 @@
       <el-form-item label="装饰颜色">
         <el-color-picker v-model="property.decoration_color" />
       </el-form-item>
+      <el-form-item label="拼音">
+        <el-switch v-model="property.view_pinyin" active-value="true" inactive-value="false" />
+      </el-form-item>
+      <el-form-item label="拼音位置">
+        <el-radio
+          v-for="{ value, label } in pinyinPositionList"
+          :key="value"
+          v-model="property.pinyin_position"
+          :label="value"
+          :disabled="!isEnable(property.view_pinyin)"
+        >
+          {{ label }}
+        </el-radio>
+      </el-form-item>
+      <el-form-item label="">
+        <el-checkbox
+          v-model="property.is_first_sentence_first_hz_pinyin_first_char_upper_case"
+          :disabled="!isEnable(property.view_pinyin)"
+          true-label="true"
+          false-label="false"
+          >句首大写</el-checkbox
+        >
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -41,6 +64,7 @@
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
 import { getTableProperty, switchOption, alignTypeList } from '@/views/book/courseware/data/table';
+import { isEnable, pinyinPositionList } from '@/views/book/courseware/data/common';
 
 export default {
   name: 'TableSetting',
@@ -50,6 +74,8 @@ export default {
       property: getTableProperty(),
       switchOption,
       alignTypeList,
+      pinyinPositionList,
+      isEnable,
     };
   },
   methods: {},

src/views/book/courseware/data/table.js

@@ -3,6 +3,7 @@ import {
   serialNumberTypeList,
   serialNumberPositionList,
   switchOption,
+  pinyinPositionList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 export { switchOption };
@@ -38,6 +39,10 @@ export function getTableProperty() {
     first_column_color: '', // 首列颜色
     border_color: '#e6e6e6', // 边框颜色
     decoration_color: '#e7b576', // 装饰颜色
+
+    view_pinyin: 'false', // 显示拼音
+    pinyin_position: pinyinPositionList[0].value, // top bottom
+    is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
   };
 }
 
@@ -85,7 +90,13 @@ export function getTableData() {
       }
     ], // 列宽
     property: getTableProperty(),
-    has_identify:'false', // 是否已识别
+    has_identify: 'false', // 是否已识别
+    paragraph_list: [],
+    paragraph_list_parameter: {
+      text: '',
+      is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true',
+      pinyin_proofread_word_list: [],
+    },
     mind_map: {
       node_list: [{ name: '表格' }],
     },

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -111,15 +111,14 @@
                         <span
                           class="NPC-word-tab-common"
                           :style="{ width: data.col_width[0].value + 'px' }"
-                          v-if="showLang"
-                        >
-                          {{
+                          v-if="
+                            showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][0]
-                              ? multilingualTextList[getLang()][index][0]
-                              : ''
-                          }}
+                          "
+                        >
+                          {{ multilingualTextList[getLang()][index][0] }}
                         </span>
                       </div>
                       <span :style="{ width: data.col_width[2].value + 'px' }">
@@ -128,26 +127,30 @@
                           :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
                           v-html="sItem.cixing"
                         ></p>
-                        <span class="NPC-word-tab-common" v-if="showLang">
-                          {{
+                        <span
+                          class="NPC-word-tab-common"
+                          v-if="
+                            showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][1]
-                              ? multilingualTextList[getLang()][index][1]
-                              : ''
-                          }}
+                          "
+                        >
+                          {{ multilingualTextList[getLang()][index][1] }}
                         </span>
                       </span>
                       <span :style="{ width: data.col_width[3].value + 'px' }">
                         <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
-                        <span class="NPC-word-tab-common" v-if="showLang">
-                          {{
+                        <span
+                          class="NPC-word-tab-common"
+                          v-if="
+                            showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][2]
-                              ? multilingualTextList[getLang()][index][2]
-                              : ''
-                          }}
+                          "
+                        >
+                          {{ multilingualTextList[getLang()][index][2] }}
                         </span>
                       </span>
                     </template>
@@ -164,15 +167,14 @@
                         <span
                           class="NPC-word-tab-common"
                           :style="{ width: data.col_width[0].value + 'px' }"
-                          v-if="showLang"
-                        >
-                          {{
+                          v-if="
+                            showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][0]
-                              ? multilingualTextList[getLang()][index][0]
-                              : ''
-                          }}
+                          "
+                        >
+                          {{ multilingualTextList[getLang()][index][0] }}
                         </span>
                       </span>
                       <span
@@ -189,26 +191,30 @@
                           v-html="sItem.cixing"
                         ></p>
 
-                        <span class="NPC-word-tab-common" v-if="showLang">
-                          {{
+                        <span
+                          class="NPC-word-tab-common"
+                          v-if="
+                            showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][1]
-                              ? multilingualTextList[getLang()][index][1]
-                              : ''
-                          }}
+                          "
+                        >
+                          {{ multilingualTextList[getLang()][index][1] }}
                         </span>
                       </span>
                       <span :style="{ width: data.col_width[3].value + 'px' }">
                         <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
-                        <span class="NPC-word-tab-common" v-if="showLang">
-                          {{
+                        <span
+                          class="NPC-word-tab-common"
+                          v-if="
+                            showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][2]
-                              ? multilingualTextList[getLang()][index][2]
-                              : ''
-                          }}
+                          "
+                        >
+                          {{ multilingualTextList[getLang()][index][2] }}
                         </span>
                       </span>
                     </template>