选择组件增加拼音

src/components/ExplanatoryNoteDialog.vue

@@ -17,6 +17,7 @@
 
 <script>
 import RichText from './RichText';
+
 export default {
   name: 'ExplanatoryNoteDialog',
   components: {
@@ -30,7 +31,7 @@ export default {
     },
     initData: {
       type: Object,
-      default: () => {},
+      default: () => ({}),
     },
   },
   data() {

src/components/PinyinText.vue

@@ -70,14 +70,13 @@ export default {
     },
     // 回填校对后的拼音
     fillTonePinyin(tonePinyin) {
-      this.$emit(
-        'fillCorrectPinyin',
-        this.selectContent,
+      this.$emit('fillCorrectPinyin', {
+        selectContent: this.selectContent,
         tonePinyin,
-        this.paragraph_index,
-        this.sentence_index,
-        this.word_index,
-      );
+        i: this.paragraph_index,
+        j: this.sentence_index,
+        k: this.word_index,
+      });
     },
   },
 };

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

@@ -14,8 +14,6 @@
           @crateParsedTextInfoPinyin="crateParsedTextInfoPinyin"
           @compareAnnotationAndSave="compareAnnotationAndSave"
         />
-        <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
-
         <el-button class="btn" @click="openMultilingual">多语言</el-button>
         <MultilingualFill
           :visible.sync="multilingualVisible"
@@ -23,6 +21,9 @@
           :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="richId + '_pinyin_text'"
@@ -101,14 +102,14 @@ export default {
       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;
+      CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then(({ parsed_text }) => {
+        if (parsed_text) {
+          this.data.paragraph_list = parsed_text.paragraph_list;
         }
       });
     },
     // 填充校对后的拼音
-    fillCorrectPinyin(selectContent, tonePinyin, i, j, k) {
+    fillCorrectPinyin({ selectContent, tonePinyin, i, j, k }) {
       this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
         paragraph_index: i,
         sentence_index: j,

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

@@ -32,7 +32,7 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { isEnable, viewMethodList, pinyinPositionList } from '@/views/book/courseware/data/common';
+import { isEnable, pinyinPositionList } from '@/views/book/courseware/data/common';
 import { getRichTextProperty } from '@/views/book/courseware/data/richText';
 
 export default {
@@ -41,7 +41,6 @@ export default {
   data() {
     return {
       isEnable,
-      viewMethodList,
       pinyinPositionList,
       labelPosition: 'left',
       property: getRichTextProperty(),

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

@@ -84,7 +84,7 @@ export default {
       });
     },
     // 填充校对后的拼音
-    fillCorrectPinyin(selectContent, tonePinyin, i, j, k) {
+    fillCorrectPinyin({ selectContent, tonePinyin, i, j, k }) {
       this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
         paragraph_index: i,
         sentence_index: j,

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

@@ -23,6 +23,17 @@
         <span class="add-button" @click="addOption">增加选项</span>
       </div>
 
+      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
+      <PinyinText
+        v-for="(item, i) in data.option_list"
+        v-show="isEnable(data.property.view_pinyin)"
+        :key="i"
+        ref="PinyinText"
+        :paragraph-list="item.paragraph_list"
+        :pinyin-position="data.property.pinyin_position"
+        @fillCorrectPinyin="fillCorrectPinyin($event, i)"
+      />
+
       <MultilingualFill
         v-if="curSelectIndex !== -1"
         :visible.sync="multilingualVisible"
@@ -36,11 +47,17 @@
 
 <script>
 import ModuleMixin from '../../common/ModuleMixin';
+import PinyinText from '@/components/PinyinText.vue';
 
 import { getSelectData, getOption, arrangeTypeList } from '@/views/book/courseware/data/select';
+import { isEnable } from '@/views/book/courseware/data/common';
+import { CrateParsedTextInfo_Pinyin } from '@/api/book';
 
 export default {
   name: 'SelectPage',
+  components: {
+    PinyinText,
+  },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -51,6 +68,18 @@ export default {
   watch: {
     'data.property.arrange_type': 'handlerMindMap',
     'data.answer.answer_list': 'handlerMindMap',
+    'data.property': {
+      handler({ view_pinyin }) {
+        if (!isEnable(view_pinyin)) return;
+        this.data.option_list.forEach((item, i) => {
+          const text = item.content.replace(/<[^>]+>/g, '');
+          if (!text) return;
+          item.paragraph_list_parameter.text = text;
+          this.crateParsedTextInfoPinyin(text, i);
+        });
+      },
+      deep: true,
+    },
   },
   methods: {
     // 将数字转换为小写字母
@@ -101,6 +130,35 @@ export default {
     handleMultilingualTranslation(translations) {
       this.$set(this.data.option_list[this.curSelectIndex], 'multilingual', translations);
     },
+    // 获取拼音解析文本
+    crateParsedTextInfoPinyin(text, i) {
+      const data = this.data.option_list[i];
+      if (text === '') {
+        data.paragraph_list_parameter.pinyin_proofread_word_list = [];
+        return;
+      }
+      data.paragraph_list_parameter.text = text;
+      CrateParsedTextInfo_Pinyin({
+        ...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,
+      }).then(({ parsed_text }) => {
+        if (parsed_text) {
+          data.paragraph_list = parsed_text.paragraph_list;
+        }
+      });
+    },
+    // 填充校对后的拼音
+    fillCorrectPinyin({ selectContent, tonePinyin, i, j, k }, index) {
+      this.data.option_list[index].paragraph_list_parameter.pinyin_proofread_word_list.push({
+        paragraph_index: i,
+        sentence_index: j,
+        word_index: k,
+        word: selectContent,
+        pinyin: tonePinyin,
+      });
+      this.data.option_list[index].paragraph_list[i][j][k].pinyin = tonePinyin;
+    },
   },
 };
 </script>

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

@@ -13,6 +13,30 @@
           {{ label }}
         </el-radio>
       </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 v-show="isEnable(property.view_pinyin)" 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 v-show="isEnable(property.view_pinyin)" 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>
@@ -21,6 +45,7 @@
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
 import { arrangeTypeList, getSelectProperty } from '@/views/book/courseware/data/select';
+import { isEnable, pinyinPositionList } from '@/views/book/courseware/data/common';
 
 export default {
   name: 'SelectSetting',
@@ -29,6 +54,8 @@ export default {
     return {
       arrangeTypeList,
       property: getSelectProperty(),
+      isEnable,
+      pinyinPositionList,
     };
   },
   methods: {},

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

@@ -3,6 +3,7 @@ import {
   serialNumberTypeList,
   serialNumberPositionList,
   arrangeTypeList,
+  pinyinPositionList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 
@@ -18,6 +19,9 @@ export function getSelectProperty() {
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[0].value,
     arrange_type: arrangeTypeList[0].value,
+    view_pinyin: 'false', // 显示拼音
+    pinyin_position: pinyinPositionList[0].value,
+    is_first_sentence_first_hz_pinyin_first_char_upper_case: displayList[0].value, // 句首大写
   };
 }
 
@@ -26,6 +30,12 @@ export function getOption() {
     content: '',
     mark: getRandomNumber(),
     multilingual: [], // 多语言
+    paragraph_list: [], // 段落列表
+    // 段落列表参数
+    paragraph_list_parameter: {
+      text: '',
+      pinyin_proofread_word_list: [],
+    },
   };
 }
 

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -1,4 +1,5 @@
 import SerialNumberPosition from './SerialNumberPosition.vue';
+import PinyinText from '@/components/PinyinText.vue';
 
 import { isEnable } from '@/views/book/courseware/data/common';
 import { ContentGetCoursewareComponentContent } from '@/api/book';
@@ -51,6 +52,7 @@ const mixin = {
   },
   components: {
     SerialNumberPosition,
+    PinyinText,
   },
   created() {
     // 这里分为 预览 和 编辑调整位置 两种情况

src/views/book/courseware/preview/components/select/SelectPreview.vue

@@ -9,7 +9,7 @@
         :style="{ flexDirection: data.property.arrange_type === arrangeTypeList[0].value ? 'column' : 'row' }"
       >
         <li
-          v-for="({ content, mark, multilingual }, i) in data.option_list"
+          v-for="({ content, mark, multilingual, paragraph_list }, i) in data.option_list"
           :key="mark"
           :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
           :class="['option-item', { active: isAnswer(mark) }, ...computedAnswerClass(mark)]"
@@ -21,7 +21,14 @@
           <span class="serial-number">
             {{ i + 1 }}
           </span>
-          <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
+          <PinyinText
+            v-if="isEnable(data.property.view_pinyin)"
+            class="content"
+            :paragraph-list="paragraph_list"
+            :pinyin-position="data.property.pinyin_position"
+            :is-preview="true"
+          />
+          <span v-else class="content rich-text" v-html="sanitizeHTML(content)"></span>
           <div v-if="showLang" class="lang">
             {{ multilingual.find((item) => item.type === getLang())?.translation }}
           </div>