汉字练习调整数据格式

src/views/exercise_questions/create/components/exercises/ChineseQuestion.vue

@@ -26,7 +26,7 @@
       <div class="content">
         <label class="title-little">题目：</label>
         <ul>
-          <li v-for="(item, i) in data.option_list" :key="i" v-loading="item.loadings" class="content-item">
+          <li v-for="(item, i) in data.option_list" :key="i" v-loading="loading_list[i].loadings" class="content-item">
             <span
               v-if="data.property.learn_type === 'dictation'"
               class="question-number"
@@ -39,11 +39,12 @@
               v-model="item.content"
               :maxlength="data.property.learn_type === 'dictation' ? null : 1"
               :placeholder="data.property.learn_type === 'dictation' ? '输入汉字或词汇' : '输入一个汉字'"
-              @blur="handleChineseStrokes(item)"
+              @blur="handleChineseStrokes(item, i)"
             />
             <el-input
               v-model="item.pinyin"
               :placeholder="data.property.learn_type === 'dictation' ? '拼音间用空格隔开' : '输入拼音'"
+              @blur="handleSplitPy(item)"
             />
             <UploadAudio
               v-if="data.other.audio_generation_method === 'upload'"
@@ -56,7 +57,7 @@
             />
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-              <span v-loading="item.loading" class="auto-btn" @click="handleMatically(item)">{{
+              <span v-loading="loading_list[i].loading" class="auto-btn" @click="handleMatically(item, i)">{{
                 item.audio_file_id ? '已生成' : '自动生成'
               }}</span>
             </div>
@@ -195,11 +196,29 @@ export default {
       data: JSON.parse(JSON.stringify(chineseData)),
       changeOptionType,
       handleInputNumber,
+      loading_list: [
+        {
+          loading: false,
+          loadings: false,
+        },
+        {
+          loading: false,
+          loadings: false,
+        },
+        {
+          loading: false,
+          loadings: false,
+        },
+      ],
     };
   },
   methods: {
     addOption() {
       this.data.option_list.push(getOption());
+      this.loading_list.push({
+        loading: false,
+        loadings: false,
+      });
     },
     uploads(file_id, index) {
       this.data.option_list[index].audio_file_id = file_id;
@@ -219,27 +238,28 @@ export default {
         .then(() => {
           this.data.option_list.splice(i, 1);
           this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
+          this.loading_list.splice(i, 1);
         })
         .catch(() => {});
     },
     // 自动生成音频
-    handleMatically(item) {
+    handleMatically(item, i) {
       if (item.pinyin.trim()) {
-        this.$set(item, 'loading', true);
+        this.loading_list[i].loading = true;
         let MethodName = 'tool-PinyinToVoiceFile';
         let data = {
           pinyin: item.pinyin.trim(),
         };
         GetStaticResources(MethodName, data)
           .then((res) => {
-            item.loading = false;
+            this.loading_list[i].loading = false;
             if (res.status === 1) {
               item.audio_file_id = res.file_id;
               this.data.file_id_list.push(res.file_id);
             }
           })
           .catch(() => {
-            item.loading = false;
+            this.loading_list[i].loading = false;
           });
       }
     },
@@ -254,9 +274,9 @@ export default {
       }
     },
     // 生成汉字
-    handleChineseStrokes(item) {
+    handleChineseStrokes(item, i) {
       if (item.content.trim()) {
-        this.$set(item, 'loadings', true);
+        this.loading_list[i].loadings = true;
         let content_arr = item.content.trim().split('');
         let content_arrs = [];
         let content_arr_strokes = [];
@@ -279,11 +299,22 @@ export default {
             content_arr_strokes[indexc] = obj;
           });
         });
-        item.loadings = false;
+        this.loading_list[i].loadings = false;
 
         item.hz_strokes_list = content_arr_strokes;
       }
     },
+    // 切割拼音
+    handleSplitPy(item) {
+      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);
+      });
+    },
   },
 };
 </script>

src/views/exercise_questions/data/chinese.js

@@ -7,6 +7,7 @@ export function getOption(content = '') {
     mark: getRandomNumber(),
     audio_file_id: '',
     pinyin: '',
+    pinyin_item_list: [],
     definition: '',
     collocation: '',
     hz_strokes_list: [],

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -230,7 +230,7 @@ export default {
     // 初始化数据
     handleData() {
       this.writer_number = this.data.property.tian_number ? Number(this.data.property.tian_number) : 8;
-      let option_list = JSON.parse(JSON.stringify(this.data.option_list));
+      let option_list = JSON.parse(JSON.stringify(this.data)).option_list;
       option_list.forEach((item) => {
         let arr = [];
         if (this.data.property.learn_type === 'dictation') {