修改对话题数据格式

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

@@ -21,7 +21,7 @@
               {{ data.property.role_list.find((item) => item.mark === role).name }}
             </span>
 
-            <div v-if="type === 'text'" class="text">{{ text }}</div>
+            <div v-if="type === 'text' || type === 'input'" class="text">{{ text }}</div>
 
             <div v-else-if="type === 'image'" class="image">
               <img :src="file_map_list[file_id]" />
@@ -97,9 +97,11 @@
 
       <el-button @click="identifyText">识别</el-button>
       <div v-if="data.answer.answer_list.length > 0" class="correct-answer">
-        <el-input v-for="(item, i) in data.answer.answer_list" :key="item.mark" v-model="item.value">
-          <span slot="prefix">{{ i + 1 }}.</span>
-        </el-input>
+        <template v-for="{ content_list } in data.answer.answer_list">
+          <el-input v-for="(item, i) in content_list" :key="item.mark" v-model="item.value">
+            <span slot="prefix">{{ i + 1 }}.</span>
+          </el-input>
+        </template>
       </div>
     </template>
 
@@ -206,6 +208,7 @@ export default {
     },
     'data.property.role_list': {
       handler(val) {
+        // 如果当前角色（curRole）不在角色列表中，将当前角色（curRole）设置为角色列表中的第一个角色
         if (val.find((item) => item.mark === this.curRole) === undefined && val.length > 0) {
           this.curRole = val[0].mark;
         }
@@ -238,15 +241,18 @@ export default {
     // 识别
     identifyText() {
       let answer_list = [];
-      this.data.option_list.forEach(({ type, content_list }) => {
-        if (type !== 'text') return;
+      this.data.option_list.forEach(({ type, mark, content_list }) => {
+        if (type !== 'input') return;
+        let answer = { mark, content_list: [] };
         content_list.forEach(({ type, mark }) => {
           if (type !== 'input') return;
-          answer_list.push({
+          answer.content_list.push({
             mark,
             value: this.data.answer.answer_list.find((item) => item.mark === mark)?.value || '',
+            type: 'any_one',
           });
         });
+        answer_list.push(answer);
       });
       this.data.answer.answer_list = answer_list;
     },
@@ -326,7 +332,7 @@ export default {
         mark: getRandomNumber(),
         file_id: '',
         content_list,
-        type: 'text',
+        type: hasFill ? 'input' : 'text',
       });
       this.textInput = '';
     },
@@ -339,8 +345,8 @@ export default {
     deleteOption(i) {
       let type = this.data.option_list[i].type;
       this.data.option_list.splice(i, 1);
-      // 如果删除的是文本，需要重新识别
-      if (type === 'text') {
+      // 如果删除的是 input，需要重新识别
+      if (type === 'input') {
         this.identifyText();
       }
     },

src/views/exercise_questions/preview/DialoguePreview.vue

@@ -20,7 +20,7 @@
           {{ data.property.role_list.find(({ mark }) => mark === item.role).name }}
         </span>
 
-        <div v-if="item.type === 'text'" class="text-wrapper">
+        <div v-if="item.type === 'text' || item.type === 'input'" class="text-wrapper">
           <div class="text">
             <template v-for="(li, j) in item.content_list">
               <span v-if="li.type === 'text'" :key="j">{{ li.content }}</span>
@@ -29,23 +29,21 @@
                   :key="j"
                   v-model="li.content"
                   :disabled="disabled"
-                  :class="[...computedAnswerClass(li.mark, li.content)]"
+                  :class="[...computedAnswerClass(item.mark, li.mark, li.content)]"
                   :style="[{ width: Math.max(80, li.content.length * 16) + 'px' }]"
                 />
                 <span
-                  v-show="computedAnswerText(li.mark, li.content).length > 0"
+                  v-show="computedAnswerText(item.mark, li.mark, li.content).length > 0"
                   :key="`answer-${j}`"
                   class="right-answer"
                 >
-                  {{ computedAnswerText(li.mark, li.content) }}
+                  {{ computedAnswerText(item.mark, li.mark, li.content) }}
                 </span>
               </template>
             </template>
           </div>
           <SoundRecordPreview
-            v-if="
-              isEnable(data.property.is_enable_voice_answer) && item.content_list.some(({ type }) => type === 'input')
-            "
+            v-if="isEnable(data.property.is_enable_voice_answer) && item.type === 'input'"
             :wav-blob.sync="item.file_id"
             :disabled="disabled"
             type="small"
@@ -109,20 +107,20 @@ export default {
       handler(val) {
         this.answer.answer_list = [];
         val.forEach(({ type, content_list, mark, file_id }) => {
-          if (type !== 'text') return;
+          if (type !== 'input') return;
           let list = content_list
             .map(({ type, mark, content }) => {
               if (type !== 'input') return;
               return {
                 mark,
-                content,
+                value: content,
               };
             })
             .filter((item) => item);
           if (list.length <= 0) return;
           this.answer.answer_list.push({
             content_list: list,
-            file_id,
+            audio_file_id: file_id,
             mark,
           });
         });
@@ -132,13 +130,13 @@ export default {
     },
     isJudgingRightWrong(val) {
       if (!val) return;
-      this.answer.answer_list.forEach(({ mark, file_id, content_list }) => {
-        let find = this.optionList.find((item) => item.mark === mark);
-        find.file_id = file_id;
-        find.content_list.forEach((item) => {
+      this.answer.answer_list.forEach(({ mark, audio_file_id, content_list }) => {
+        let findOption = this.optionList.find((item) => item.mark === mark);
+        findOption.file_id = audio_file_id;
+        findOption.content_list.forEach((item) => {
           if (item.type === 'text') return;
           let find = content_list.find((li) => li.mark === item.mark);
-          item.content = find.content;
+          item.content = find.value;
         });
       });
     },
@@ -146,16 +144,19 @@ export default {
   methods: {
     /**
      * 计算答题对错选项字体颜色
+     * @param {string} optionMark 选项标识
      * @param {string} mark 选项标识
      * @param {string} content 选项内容
      */
-    computedAnswerClass(mark, content) {
+    computedAnswerClass(optionMark, mark, content) {
       if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
         return '';
       }
-      let rightValue = this.data.answer.answer_list.find((item) => item.mark === mark)?.value || '';
+      let rightValue = this.data.answer.answer_list
+        .find((item) => item.mark === optionMark)
+        .content_list.find((item) => item.mark === mark).value;
       let classList = [];
-      let isRight = rightValue === content;
+      let isRight = rightValue.split('/').includes(content);
 
       if (this.isJudgingRightWrong) {
         isRight ? classList.push('right') : classList.push('wrong');
@@ -166,11 +167,19 @@ export default {
       }
       return classList;
     },
-    computedAnswerText(mark, content) {
+    /**
+     * 计算答题对错选项内容
+     * @param {string} optionMark 选项标识
+     * @param {string} mark 选项标识
+     * @param {string} content 选项内容
+     */
+    computedAnswerText(optionMark, mark, content) {
       if (!this.isShowRightAnswer) return '';
       if (content.length === 0) return '';
-      let find = this.data.answer.answer_list.find((item) => item.mark === mark);
-      if (find.value === content) return '';
+      let find = this.data.answer.answer_list
+        .find((item) => item.mark === optionMark)
+        .content_list.find((item) => item.mark === mark);
+      if (find.value.split('/').includes(content)) return '';
       if (!find) return '';
       return `（${find.value}）`;
     },