注释添加拼音字段

src/views/book/courseware/create/components/question/article/Notes.vue

@@ -21,6 +21,22 @@
             ref="richText"
             v-model="scope.row.con"
             :inline="true"
+            :item-index="scope.$index"
+            :font-size="data?.unified_attrib?.font_size"
+            :font-family="data?.unified_attrib?.font"
+            toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            @handleRichTextBlur="handleBlurCon"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isEnable(data.property.view_pinyin)" prop="con" label="拼音" width="150">
+        <template slot-scope="scope">
+          <RichText
+            ref="richText"
+            v-model="scope.row.pinyin"
+            :inline="true"
+            :font-size="data?.unified_attrib?.font_size"
+            :font-family="data?.unified_attrib?.font"
             toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
           />
         </template>
@@ -45,6 +61,17 @@
           />
         </template>
       </el-table-column>
+      <!-- <el-table-column prop="img_list" label="图片" width="300">
+        <template slot-scope="scope">
+          <UploadPicture
+            :file-info="scope.row.file_list[0]"
+            :item-index="scope.$index"
+            :show-upload="!scope.row.file_list[0]"
+            @upload="uploadPic"
+            @deleteFile="deletePic"
+          />
+        </template>
+      </el-table-column> -->
       <el-table-column label="操作" width="150">
         <template slot-scope="scope">
           <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
@@ -54,22 +81,65 @@
       </el-table-column>
     </el-table>
     <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
+    <el-form :model="data.property" label-width="72px" label-position="left">
+      <el-form-item label="拼音">
+        <el-switch v-model="data.property.view_pinyin" active-value="true" inactive-value="false" />
+      </el-form-item>
+      <el-form-item label="拼音位置">
+        <el-radio
+          v-for="{ value, label } in pinyinPositionLists"
+          :key="value"
+          v-model="data.property.pinyin_position"
+          :label="value"
+          :disabled="!isEnable(data.property.view_pinyin)"
+        >
+          {{ label }}
+        </el-radio>
+      </el-form-item>
+      <el-form-item label="">
+        <el-checkbox
+          v-model="data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case"
+          :disabled="!isEnable(data.property.view_pinyin)"
+          true-label="true"
+          false-label="false"
+          >句首大写</el-checkbox
+        >
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
 import RichText from '@/components/RichText.vue';
+import UploadPicture from '../new_word/components/UploadPicture.vue';
+import { pinyinPositionLists } from '@/views/book/courseware/data/notes';
+import { isEnable } from '@/views/book/courseware/data/common';
 export default {
   name: 'NotesPage',
   components: {
     RichText,
+    UploadPicture,
   },
   props: ['dataNotes'],
   data() {
     return {
       data: this.dataNotes,
+      pinyinPositionLists,
+      isEnable,
     };
   },
+  watch: {
+    'data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case': {
+      handler(val, oldVal) {
+        if (val === oldVal) return;
+
+        if (isEnable(this.data.property.view_pinyin)) {
+          this.handlePinyin();
+        }
+      },
+      deep: true,
+    },
+  },
   methods: {
     // 删除行
     handleDelete(index) {
@@ -110,6 +180,30 @@ export default {
       this.data.option[index].file_list[0] = '';
       this.data.file_id_list = this.data.file_id_list.filter((item) => item !== file_id);
     },
+    handleBlurCon(i) {
+      let text = this.data.option[i].con.replace(/<[^>]+>/g, '');
+      this.data.option[i].pinyin = cnchar
+        .spell(
+          text,
+          'array',
+          this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' ? 'high' : 'low',
+          'tone',
+        )
+        .join(' ');
+    },
+    handlePinyin() {
+      this.data.option.forEach((item) => {
+        let text = item.con.replace(/<[^>]+>/g, '');
+        item.pinyin = cnchar
+          .spell(
+            text,
+            'array',
+            this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' ? 'high' : 'low',
+            'tone',
+          )
+          .join(' ');
+      });
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/question/notes/NotesSetting.vue

@@ -2,13 +2,13 @@
   <div>
     <el-form :model="property" label-width="72px" label-position="left">
       <SerailNumber :property="property" />
-      <el-form-item label="预览展开">
+      <!-- <el-form-item label="预览展开">
         <el-radio-group v-model="property.is_word_show">
           <el-radio v-for="{ value, label } in wordShowList" :key="value" :label="value">
             {{ label }}
           </el-radio>
         </el-radio-group>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="拼音">
         <el-switch v-model="property.view_pinyin" active-value="true" inactive-value="false" />
       </el-form-item>

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

@@ -197,8 +197,13 @@ export function getArticleData() {
     notes_list: {
       title_con: '',
       option: [],
-      property: {},
       multilingual: [], // 多语言
+      file_id_list: [], // 文件 id
+      property: {
+        view_pinyin: 'false', // 显示拼音
+        pinyin_position: pinyinPositionLists[1].value, // top bottom
+        is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
+      }
     },
     sentence_list_mp: [], // 句子+分词数组
     pinyin_type: 'pinyin',

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

@@ -235,7 +235,13 @@ export function getArticleData() {
     notes_list: {
       title_con: '',
       option: [],
-      property: {},
+      multilingual: [], // 多语言
+      file_id_list: [], // 文件 id
+      property: {
+        view_pinyin: 'false', // 显示拼音
+        pinyin_position: pinyinPositionLists[1].value, // top bottom
+        is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
+      }
     },
     sentence_list_mp: [], // 句子+分词数组
     pinyin_type: 'pinyin', // 拼音类型