选择声调录入

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

@@ -30,9 +30,7 @@
             <span class="question-number" @dblclick="changeOptionType(data)">
               {{ computedQuestionNumber(i, data.option_number_show_mode) }}.
             </span>
-            <div class="option-content">
-              <RichText v-model="item.content" placeholder="输入内容" :inline="true" />
-            </div>
+            <el-input v-model="item.content" placeholder="输入内容" @blur="handleItemAnswer(item)" />
             <UploadAudio
               v-if="data.property.audio_generation_method === 'upload'"
               :key="item.audio_file_id || i"
@@ -119,6 +117,7 @@
             :key="value"
             v-model="data.property.tone_type"
             :label="value"
+            @change="handleChangeType"
           >
             {{ label }}
           </el-radio>
@@ -190,6 +189,57 @@ export default {
       this.data.option_list[index].audio_wav = wav;
       this.data.option_list[index].audio_wav_time = time;
     },
+    // 答案
+    handleItemAnswer(item) {
+      const index = this.data.answer.select_list.findIndex((items) => items.mark === item.mark);
+      let content = item.content.trim();
+      let contentArr = content.split(' ');
+      let select_item = '';
+      let content_preview = '';
+      contentArr.forEach((items) => {
+        let items_trim = items.trim();
+        if (items_trim) {
+          let items_yuan = JSON.parse(JSON.stringify(items_trim)).replace(/0|1|2|3|4/, '');
+          let indexs = -1;
+          if (items.indexOf('0') > -1) {
+            indexs = items.indexOf('0');
+          } else if (items.indexOf('1') > -1) {
+            indexs = items.indexOf('1');
+          } else if (items.indexOf('2') > -1) {
+            indexs = items.indexOf('2');
+          } else if (items.indexOf('3') > -1) {
+            indexs = items.indexOf('3');
+          } else if (items.indexOf('4') > -1) {
+            indexs = items.indexOf('4');
+          }
+          if (this.data.property.tone_type === 'select') {
+            // 如果是选择声调 把声调放在拼音后面
+            select_item += `${items_yuan + items_trim.substring(indexs, indexs + 1)} `;
+          } else if (this.data.property.tone_type === 'dimension') {
+            // 如果是标注声调 把声调放在对应字母后面
+            select_item += `${items_trim} `;
+          }
+          content_preview += `${items_yuan} `;
+        }
+      });
+      if (index === -1) {
+        let obj = {
+          mark: item.mark,
+          select_item: select_item.trim(),
+        };
+        this.data.answer.select_list.push(obj);
+      } else {
+        this.data.answer.select_list[index].select_item = select_item.trim();
+      }
+      item.content_preview = content_preview.trim();
+      console.log(this.data);
+    },
+    // 改变类型
+    handleChangeType() {
+      this.data.option_list.forEach((item) => {
+        this.handleItemAnswer(item);
+      });
+    },
   },
 };
 </script>

src/views/exercise_questions/data/chooseTone.js

@@ -2,7 +2,15 @@ import { stemTypeList, questionNumberTypeList, scoreTypeList, optionTypeList } f
 import { getRandomNumber } from '@/utils/index';
 
 export function getOption(content = '') {
-  return { content, mark: getRandomNumber(), audio_file_id: '', tone: '', audio_wav: '', audio_wav_time: 0 };
+  return {
+    content,
+    mark: getRandomNumber(),
+    content_preview: '',
+    audio_file_id: '',
+    tone: '',
+    audio_wav: '',
+    audio_wav_time: 0,
+  };
 }
 
 export const toneList = [
@@ -40,7 +48,7 @@ export const ChooseToneData = {
   description: '', // 描述
   option_number_show_mode: optionTypeList[0].value, // 选项类型
   option_list: [getOption(), getOption(), getOption()], // 选项
-  answer: { score: 0, score_type: scoreTypeList[0].value, select_list: '' }, // 答案
+  answer: { score: 0, score_type: scoreTypeList[0].value, select_list: [] }, // 答案
   // 题型属性
   property: {
     stem_type: stemTypeList[0].value, // 题干类型

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -10,7 +10,7 @@
     <div class="option-list">
       <li v-for="(item, i) in data.option_list" :key="i" :class="['option-item', { active: isAnswer(item.mark) }]">
         <span>{{ computeOptionMethods[data.option_number_show_mode](i) }}. </span>
-        <AudioPlay :file-id="item.audio_file_id" />
+        <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
         <div class="option-content" v-html="sanitizeHTML(item.content)"></div>
         <span
           v-for="({ img, value }, j) in toneList"