汉字录入调整

src/views/book/courseware/create/components/base/character_base/CharacterBase.vue

@@ -3,14 +3,17 @@
     <template #content>
       <!-- eslint-disable max-len -->
       <div class="fill-wrapper">
-        <RichText
+        <el-input
           v-model="data.content"
-          toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
-          :wordlimit-num="false"
-        />
+          placeholder="输入汉字"
+          @blur="handleChineseStrokes(data)"
+          v-if="isEnable(data.property.is_enable_pinyin)"
+        ></el-input>
         <el-input
           v-model="data.pinyin"
           placeholder="输入拼音"
+          @blur="handleSplitPy(data)"
+          @change="changePinyin(data)"
           v-if="isEnable(data.property.is_enable_pinyin)"
         ></el-input>
         <el-input v-model="data.definition" placeholder="输入释义或描述" type="textarea"></el-input>
@@ -48,7 +51,7 @@ import UploadAudio from '@/views/book/courseware/create/components/question/fill
 
 import { getCharacterBaseData } from '@/views/book/courseware/data/characterBase';
 import { addTone, handleToneValue } from '@/views/book/courseware/data/common';
-import { getRandomNumber } from '@/utils';
+
 import { GetStaticResources } from '@/api/app';
 
 export default {
@@ -61,77 +64,112 @@ export default {
   data() {
     return {
       data: getCharacterBaseData(),
+      matically_pinyin_obj: {}, // 存放转成声调的拼音
     };
   },
   methods: {
-    // 识别文本
-    identifyText() {
-      this.data.model_essay = [];
-      this.data.answer.answer_list = [];
-
-      this.data.content
-        .split(/<(p|div)[^>]*>(.*?)<\/(p|div)>/g)
-        .filter((s) => s && !s.match(/^(p|div)$/))
-        .forEach((item) => {
-          if (item.charCodeAt() === 10) return;
-          let str = item
-            // 去除所有的 font-size 样式
-            .replace(/font-size:\s*\d+(\.\d+)?px;/gi, '')
-            // 匹配 class 名为 rich-fill 的 span 标签和三个以上的_，并将它们组成数组
-            .replace(/<span class="rich-fill".*?>(.*?)<\/span>|([_]{3,})/gi, '###$1$2###');
-          this.data.model_essay.push(this.splitRichText(str));
+    // 生成汉字
+    handleChineseStrokes(item, i) {
+      if (item.content.trim()) {
+        let content_arr = item.content.trim().split('');
+        let content_arrs = [];
+        let content_arr_strokes = [];
+        content_arr.forEach((itemc) => {
+          if (itemc.trim()) {
+            content_arrs.push(itemc.trim());
+          }
         });
-    },
-    // 分割富文本
-    splitRichText(str) {
-      let _str = str;
-      let start = 0;
-      let index = 0;
-      let arr = [];
-      let matchNum = 0;
-      while (index !== -1) {
-        index = _str.indexOf('###', start);
-        if (index === -1) break;
-        matchNum += 1;
-        arr.push({ content: _str.slice(start, index), type: 'text' });
-        if (matchNum % 2 === 0 && arr.length > 0) {
-          arr[arr.length - 1].type = 'input';
-          let mark = getRandomNumber();
-          arr[arr.length - 1].mark = mark;
-          let content = arr[arr.length - 1].content;
-          // 设置答案数组
-          let isUnderline = /^_{3,}$/.test(content);
-          this.data.answer.answer_list.push({
-            value: isUnderline ? '' : content,
-            mark,
-            type: isUnderline ? 'any_one' : 'only_one',
+        content_arrs.forEach((itemc, indexc) => {
+          content_arr_strokes.push(null);
+          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+          let data = {
+            hz: itemc,
+          };
+          GetStaticResources(MethodName, data).then((res) => {
+            let obj = {
+              hz: itemc.trim(),
+              strokes: res,
+            };
+            content_arr_strokes[indexc] = obj;
           });
+        });
 
-          // 将 content 设置为空，为预览准备
-          arr[arr.length - 1].content = '';
-        }
-        start = index + 3;
+        item.hz_strokes_list = content_arr_strokes;
       }
-      let last = _str.slice(start);
-      if (last) {
-        arr.push({ content: last, type: 'text' });
+    },
+    // 切割拼音
+    handleSplitPy(item) {
+      let index = item.pinyin.search(/0|1|2|3|4/);
+      if (index > -1) {
+        this.handleItemPinyin(item.pinyin, item.mark);
+        setTimeout(() => {
+          if (this.matically_pinyin_obj[item.mark].indexOf(',') > -1) {
+            this.$message.warning('输入的拼音有误，请重新输入');
+            item.pinyin = '';
+            this.matically_pinyin_obj[item.mark] = '';
+          } else {
+            item.pinyin = this.matically_pinyin_obj[item.mark];
+          }
+        }, 10);
       }
-      return arr;
+      let pinyin_list = item.pinyin.trim().split(' ');
+      item.pinyin_item_list = [];
+      pinyin_list.forEach((itemp) => {
+        let obj = {
+          pinyin_item: itemp,
+        };
+        item.pinyin_item_list.push(obj);
+      });
     },
-    handleTone(value, i) {
-      if (!/^[a-zA-Z0-9\s]+$/.test(value)) return;
-      this.data.answer.answer_list[i].value = value
-        .trim()
-        .split(/\s+/)
-        .map((item) => {
-          return handleToneValue(item);
-        })
+    handleReplaceTone(value, mark) {
+      if (!value) return;
+      value.split(/\s+/).forEach((item) => {
+        this.handleValue(item);
+      });
+      this.matically_pinyin_obj[mark] = this.res_arr
         .map((item) =>
           item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
         )
         .filter((item) => item.length > 0)
         .join(' ');
     },
+    handleValue(valItem) {
+      let numList = [];
+      if (/[A-Za-zü]+\d/g.test(valItem)) {
+        valItem.split('').forEach((item, i) => {
+          if (/\d/.test(item)) {
+            let con = valItem.replace(/\d/g, '');
+            numList.push({
+              index: i,
+              number: item,
+              con,
+              isTran: true,
+            });
+          }
+        });
+      } else {
+        numList = [];
+      }
+
+      this.res_arr.push(numList.length === 0 ? [{ con: valItem }] : numList);
+    },
+    handleItemPinyin(content, mark) {
+      let content_arr = content.trim().split(' ');
+      this.res_arr = [];
+      this.$set(this.matically_pinyin_obj, mark, []);
+      content_arr.forEach((items, index) => {
+        let items_trim = items.trim();
+        if (items_trim) {
+          this.handleReplaceTone(items_trim, mark);
+        }
+      });
+    },
+    // 修改拼音
+    changePinyin(item) {
+      if (this.data.property.audio_generation_method === 'auto') {
+        item.audio_file_id = '';
+      }
+    },
     uploads(file_id) {
       this.data.audio_file_id = file_id;
     },

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

@@ -6,6 +6,7 @@ import {
   switchOption,
   isEnable,
 } from '@/views/book/courseware/data/common';
+import { getRandomNumber } from '@/utils';
 
 export { arrangeTypeList, switchOption, isEnable };
 
@@ -100,7 +101,8 @@ export function getCharacterBaseData() {
     pinyin: '',
     definition: '',
     audio_file_id: '',
-    model_essay: [],
+    hz_strokes_list: [],
+    mark: getRandomNumber(),
     answer: {
       answer_list: [],
     },

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -26,8 +26,10 @@
                   'item-con',
                   active_index_str === 0 + '-' + indexc ? 'active' : '',
                   isJudgingRightWrong && !con_preview[0].user_answer[indexc].is_right ? 'error' : '',
+                  data.property.fun_type === 'show' ? 'item-con-in' : '',
                 ]"
                 @click="
+                  if (data.property.fun_type === 'show') return;
                   con_preview[0].item_active_index = indexc;
                   active_index_str = 0 + '-' + indexc;
                 "
@@ -404,6 +406,10 @@ export default {
       return cons;
     },
     handleSelectItemTone(i, indexc, indexi, itemi) {
+      console.log(this.data.property.fun_type);
+      if (this.data.property.fun_type === 'show') {
+        return;
+      }
       this.con_preview[0].item_active_index = indexc;
       this.con_preview[0].user_answer[indexc].select_index = indexi;
       this.active_index_str = `${i}-${indexc}-${indexi}`;
@@ -553,6 +559,10 @@ export default {
     }
   }
 
+  .item-con-in {
+    cursor: initial;
+  }
+
   .tone-box {
     display: flex;
     column-gap: 8px;