填空组件拼音

src/components/RichText.vue

@@ -526,15 +526,15 @@ export default {
     replaceSpanString(str) {
       return str.replace(/<span\b[^>]*>(.*?)<\/span>/gi, '$1');
     },
-    crateParsedTextInfoPinyin(content) {
+    createParsedTextInfoPinyin(content) {
       let text = content.replace(/<[^>]+>/g, '');
-      this.$emit('crateParsedTextInfoPinyin', text);
+      this.$emit('createParsedTextInfoPinyin', text);
     },
     handleRichTextBlur() {
       this.$emit('handleRichTextBlur');
       let content = tinymce.get(this.id).getContent();
       if (this.isViewPinyin) {
-        this.crateParsedTextInfoPinyin(content);
+        this.createParsedTextInfoPinyin(content);
         return;
       }
 

src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -11,7 +11,7 @@
           :is-view-pinyin="isEnable(data.property.view_pinyin)"
           @view-explanatory-note="viewExplanatoryNote"
           @selectContentSetMemo="selectContentSetMemo"
-          @crateParsedTextInfoPinyin="crateParsedTextInfoPinyin"
+          @createParsedTextInfoPinyin="createParsedTextInfoPinyin"
           @compareAnnotationAndSave="compareAnnotationAndSave"
         />
         <el-button class="btn" @click="openMultilingual">多语言</el-button>
@@ -76,7 +76,7 @@ export default {
           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);
+          this.createParsedTextInfoPinyin(text);
         }
       },
       deep: true,
@@ -97,7 +97,7 @@ export default {
       });
     },
     // 获取拼音解析文本
-    crateParsedTextInfoPinyin(text) {
+    createParsedTextInfoPinyin(text) {
       const data = this.data.paragraph_list_parameter;
       if (text === '') {
         data.pinyin_proofread_word_list = [];

src/views/book/courseware/create/components/base/stem/Stem.vue

@@ -7,7 +7,7 @@
         :font-size="18"
         placeholder="输入题干"
         :is-view-pinyin="isEnable(data.property.view_pinyin)"
-        @crateParsedTextInfoPinyin="crateParsedTextInfoPinyin"
+        @createParsedTextInfoPinyin="createParsedTextInfoPinyin"
       />
       <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
       <PinyinText
@@ -50,7 +50,7 @@ export default {
           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);
+          this.createParsedTextInfoPinyin(text);
         }
       },
       deep: true,
@@ -68,7 +68,7 @@ export default {
       });
     },
     // 获取拼音解析文本
-    crateParsedTextInfoPinyin(text) {
+    createParsedTextInfoPinyin(text) {
       if (text === '') {
         this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
         return;

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -143,18 +143,19 @@ const mixin = {
     },
     /**
      * 获取并设置拼音解析文本
-     * @param {String} text
-     * @param {Number} i
-     * @param {Number} j
+     * @param {String} text 文本
+     * @param {Number} i 行索引
+     * @param {Number} j 列索引
+     * @param {String} attr 属性名
      */
-    crateParsedTextInfoPinyin(text, i = -1, j = -1) {
+    createParsedTextInfoPinyin(text, i = -1, j = -1, attr = 'option_list') {
       let data = null;
       if (i === -1) {
         data = this.data;
       } else if (i >= 0 && j === -1) {
-        data = this.data.option_list[i];
+        data = this.data[attr][i];
       } else if (i >= 0 && j >= 0) {
-        data = this.data.option_list[i][j];
+        data = this.data[attr][i][j];
       }
       if (text === '') {
         data.pinyin_proofread_word_list = [];
@@ -190,15 +191,21 @@ const mixin = {
      * @param {Object} param0 拼音参数
      * @param {Number} col 列索引
      * @param {Number} row 行索引
+     * @param {String} attr 属性名
      */
-    fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j, k }, row = -1, col = -1) {
+    fillCorrectPinyin(
+      { selectContent: { text, pinyin, activeTextStyle }, i, j, k },
+      row = -1,
+      col = -1,
+      attr = 'option_list',
+    ) {
       let data = null;
       if (row === -1) {
         data = this.data.paragraph_list_parameter;
       } else if (row >= 0 && col === -1) {
-        data = this.data.option_list[row].paragraph_list_parameter;
+        data = this.data[attr][row].paragraph_list_parameter;
       } else if (row >= 0 && col >= 0) {
-        data = this.data.option_list[row][col].paragraph_list_parameter;
+        data = this.data[attr][row][col].paragraph_list_parameter;
       }
 
       if (!Array.isArray(data.pinyin_proofread_word_list)) {
@@ -217,9 +224,9 @@ const mixin = {
       if (row === -1) {
         listItem = this.data.paragraph_list?.[i]?.[j]?.[k];
       } else if (row >= 0 && col === -1) {
-        listItem = this.data.option_list?.[row]?.paragraph_list?.[i]?.[j]?.[k];
+        listItem = this.data[attr]?.[row]?.paragraph_list?.[i]?.[j]?.[k];
       } else if (row >= 0 && col >= 0) {
-        listItem = this.data.option_list?.[row]?.[col]?.paragraph_list?.[i]?.[j]?.[k];
+        listItem = this.data[attr]?.[row]?.[col]?.paragraph_list?.[i]?.[j]?.[k];
       }
 
       if (listItem) {

src/views/book/courseware/create/components/question/fill/Fill.vue

@@ -57,6 +57,22 @@
         </div>
       </div>
 
+      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
+      <template v-if="isEnable(data.property.view_pinyin)">
+        <div v-for="(item, i) in data.model_essay" :key="i" class="pinyin-text-list">
+          <template v-for="(li, j) in item">
+            <PinyinText
+              v-if="li.type === 'text'"
+              :key="`${i}-${j}`"
+              ref="PinyinText"
+              :paragraph-list="li.paragraph_list"
+              :pinyin-position="data.property.pinyin_position"
+              @fillCorrectPinyin="fillCorrectPinyin($event, i, j, 'model_essay')"
+            />
+          </template>
+        </div>
+      </template>
+
       <MultilingualFill
         :visible.sync="multilingualVisible"
         :text="data.content"
@@ -71,6 +87,7 @@
 import ModuleMixin from '../../common/ModuleMixin';
 import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
 import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
+import PinyinText from '@/components/PinyinText.vue';
 
 import { getFillData, arrangeTypeList, fillFontList, fillTypeList } from '@/views/book/courseware/data/fill';
 import { addTone, handleToneValue } from '@/views/book/courseware/data/common';
@@ -82,6 +99,7 @@ export default {
   components: {
     SoundRecord,
     UploadAudio,
+    PinyinText,
   },
   mixins: [ModuleMixin],
   data() {
@@ -108,6 +126,20 @@ export default {
           });
       },
     },
+    'data.property': {
+      handler({ view_pinyin }) {
+        if (!this.isEnable(view_pinyin)) return;
+        this.data.model_essay.forEach((item, i) => {
+          item.forEach((option, j) => {
+            const text = option.content.replace(/<[^>]+>/g, '');
+            if (!text) return;
+            option.paragraph_list_parameter.text = text;
+            this.createParsedTextInfoPinyin(text, i, j, 'model_essay');
+          });
+        });
+      },
+      deep: true,
+    },
   },
   methods: {
     // 识别文本
@@ -139,7 +171,15 @@ export default {
         index = _str.indexOf('###', start);
         if (index === -1) break;
         matchNum += 1;
-        arr.push({ content: _str.slice(start, index), type: 'text' });
+        arr.push({
+          content: _str.slice(start, index),
+          type: 'text',
+          paragraph_list: [],
+          paragraph_list_parameter: {
+            text: '',
+            pinyin_proofread_word_list: [],
+          },
+        });
         if (matchNum % 2 === 0 && arr.length > 0) {
           arr[arr.length - 1].type = 'input';
           arr[arr.length - 1].audio_answer_list = [];
@@ -161,7 +201,15 @@ export default {
       }
       let last = _str.slice(start);
       if (last) {
-        arr.push({ content: last, type: 'text' });
+        arr.push({
+          content: last,
+          type: 'text',
+          paragraph_list: [],
+          paragraph_list_parameter: {
+            text: '',
+            pinyin_proofread_word_list: [],
+          },
+        });
       }
       return arr;
     },

src/views/book/courseware/create/components/question/judge/Judge.vue

@@ -85,7 +85,7 @@ export default {
           const text = item.content.replace(/<[^>]+>/g, '');
           if (!text) return;
           item.paragraph_list_parameter.text = text;
-          this.crateParsedTextInfoPinyin(text, i);
+          this.createParsedTextInfoPinyin(text, i);
         });
       },
       deep: true,

src/views/book/courseware/create/components/question/matching/Matching.vue

@@ -162,7 +162,7 @@ export default {
             const text = option.content.replace(/<[^>]+>/g, '');
             if (!text) return;
             option.paragraph_list_parameter.text = text;
-            this.crateParsedTextInfoPinyin(text, i, j);
+            this.createParsedTextInfoPinyin(text, i, j);
           });
         });
       },

src/views/book/courseware/create/components/question/select/Select.vue

@@ -73,7 +73,7 @@ export default {
           const text = item.content.replace(/<[^>]+>/g, '');
           if (!text) return;
           item.paragraph_list_parameter.text = text;
-          this.crateParsedTextInfoPinyin(text, i);
+          this.createParsedTextInfoPinyin(text, i);
         });
       },
       deep: true,

src/views/book/courseware/create/components/question/sort/Sort.vue

@@ -109,7 +109,7 @@ export default {
           const text = item.content.replace(/<[^>]+>/g, '');
           if (!text) return;
           item.paragraph_list_parameter.text = text;
-          this.crateParsedTextInfoPinyin(text, i);
+          this.createParsedTextInfoPinyin(text, i);
         });
       },
       deep: true,

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

@@ -200,7 +200,7 @@ export default {
           this.data.paragraph_list_parameter.text = text;
           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;
-          this.crateParsedTextInfoPinyin(text);
+          this.createParsedTextInfoPinyin(text);
         }
       },
       deep: true,
@@ -216,7 +216,7 @@ export default {
         if (text) {
           this.data.paragraph_list_parameter.text = text;
           this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case = val;
-          this.crateParsedTextInfoPinyin(text);
+          this.createParsedTextInfoPinyin(text);
         }
       },
       deep: true,
@@ -264,7 +264,7 @@ export default {
         });
       });
       if (isEnable(this.data.property.view_pinyin)) {
-        this.crateParsedTextInfoPinyin(text);
+        this.createParsedTextInfoPinyin(text);
       }
     },
     // 分割富文本
@@ -304,7 +304,7 @@ export default {
       return arr;
     },
     // 获取拼音解析文本
-    crateParsedTextInfoPinyin(text) {
+    createParsedTextInfoPinyin(text) {
       if (text === '') {
         this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
         return;

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -8,7 +8,17 @@
       <div class="fill-wrapper">
         <p v-for="(item, i) in modelEssay" :key="i">
           <template v-for="(li, j) in item">
-            <span v-if="li.type === 'text'" :key="j" v-html="convertText(sanitizeHTML(li.content))"></span>
+            <template v-if="li.type === 'text'">
+              <PinyinText
+                v-if="isEnable(data.property.view_pinyin)"
+                :key="`${i}-${j}`"
+                class="content"
+                :paragraph-list="li.paragraph_list"
+                :pinyin-position="data.property.pinyin_position"
+                :is-preview="true"
+              />
+              <span v-else :key="j" v-html="convertText(sanitizeHTML(li.content))"></span>
+            </template>
             <template v-if="li.type === 'input'">
               <template v-if="data.property.fill_type === fillTypeList[0].value">
                 <el-input
@@ -324,6 +334,10 @@ export default {
       margin: 0;
     }
 
+    .content {
+      display: inline-block;
+    }
+
     .record-box {
       display: inline-flex;
       align-items: center;