表格模拟作答

src/views/book/courseware/create/components/question/table/Table.vue

@@ -283,7 +283,7 @@ export default {
                       value: '',
                       type: 'input',
                       mark: getRandomNumber(),
-                      inputIndex,
+                      inputIndex: inputIndex,
                       write_base64: '',
                       audio_answer_list: [],
                     });

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

@@ -112,5 +112,6 @@ export function getTableData() {
       node_list: [{ name: '表格' }],
     },
     multilingual: [], // 多语言
+    parse: '', // 解析
   };
 }

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -62,6 +62,7 @@
                             :key="index"
                             v-model="item.value"
                             :disabled="disabled"
+                            :class="[...computedAnswerClass(item, i, j)]"
                             :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
                           />
                         </template>
@@ -82,7 +83,7 @@
                               slot="reference"
                               v-model="item.value"
                               :readonly="true"
-                              :class="[data.property.fill_font, ...computedAnswerClass(item.mark)]"
+                              :class="[...computedAnswerClass(item, i, j)]"
                               :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
                             />
                           </el-popover>
@@ -135,6 +136,7 @@
                             :key="index"
                             v-model="item.value"
                             :disabled="disabled"
+                            :class="[...computedAnswerClass(item, i, j)]"
                             :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
                           />
                         </template>
@@ -155,7 +157,7 @@
                               slot="reference"
                               v-model="item.value"
                               :readonly="true"
-                              :class="[data.property.fill_font, ...computedAnswerClass(item.mark)]"
+                              :class="[...computedAnswerClass(item, i, j)]"
                               :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
                             />
                           </el-popover>
@@ -184,9 +186,13 @@
                             @handleWav="handleMiniWav($event, item)"
                           />
                         </template>
-                        <!-- <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${indexs}`" class="right-answer">
-                {{ computedAnswerText(li.mark) }}
-              </span> -->
+                        <span
+                          v-show="computedAnswerText(item, i, j).length > 0"
+                          :key="`answer-${j}`"
+                          class="right-answer"
+                        >
+                          {{ computedAnswerText(item, i, j) }}
+                        </span>
                       </template>
                     </p>
                   </template>
@@ -257,6 +263,19 @@ export default {
         this.handleData();
       },
     },
+    isJudgingRightWrong(val) {
+      if (!val) return;
+
+      // this.answer.answer_list.forEach(({ mark, value }) => {
+      //   this.modelEssay.forEach((item) => {
+      //     item.forEach((li) => {
+      //       if (li.mark === mark) {
+      //         li.content = value;
+      //       }
+      //     });
+      //   });
+      // });
+    },
   },
   created() {
     this.handleData();
@@ -286,35 +305,35 @@ export default {
         });
       }
     },
-    computedAnswerText(mark) {
+    computedAnswerText(item, i, j) {
       if (!this.isShowRightAnswer) return '';
-      let selectOption = this.answer.answer_list.find((item) => item.mark === mark);
-      let answerOption = this.data.answer.answer_list.find((item) => item.mark === mark);
-      if (!selectOption) return '';
-      let selectValue = selectOption.value;
-      let answerValue = answerOption.value;
-      let isRight = selectValue === answerValue;
-      if (isRight) return '';
-      return `（${answerValue}）`;
+      let answerOption =
+        this.data.answer_list[i] && this.data.answer_list[i][j] ? this.data.answer_list[i][j].answer : '';
+      let answerOptionList = answerOption.split('\n');
+      if (!item) return '';
+      let selectValue = item.value;
+      let answerValue = answerOptionList[item.inputIndex] ? answerOptionList[item.inputIndex].split('/') : '';
+      let isRight = answerValue && answerValue.includes(selectValue);
+      if (isRight || !answerValue) return '';
+      return `（${answerValue.join('/')}）`;
     },
     /**
      * 计算答题对错选项字体颜色
      * @param {string} mark 选项标识
      */
-    computedAnswerClass(mark) {
+    computedAnswerClass(item, i, j) {
       if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
         return '';
       }
-      let selectOption = this.answer.answer_list.find((item) => item.mark === mark);
-      let answerOption = this.data.answer.answer_list.find((item) => item.mark === mark);
-      if (!selectOption) return '';
-      let selectValue = selectOption.value;
-      let answerValue = answerOption.value;
-      let answerType = answerOption.type;
+      let answerOption =
+        this.data.answer_list[i] && this.data.answer_list[i][j] ? this.data.answer_list[i][j].answer : '';
+      let answerOptionList = answerOption.split('\n');
+      if (!item) return '';
+      let selectValue = item.value;
+      let answerValue = answerOptionList[item.inputIndex] ? answerOptionList[item.inputIndex].split('/') : '';
       let classList = [];
-      let isRight =
-        answerType === 'only_one' ? selectValue === answerValue : answerValue.split('/').includes(selectValue);
-      if (this.isJudgingRightWrong) {
+      let isRight = answerValue && answerValue.includes(selectValue);
+      if (this.isJudgingRightWrong && answerValue) {
         isRight ? classList.push('right') : classList.push('wrong');
       }
 
@@ -339,7 +358,7 @@ export default {
      * @param {Object} li 当前输入框对象
      */
     handleSelectWord(content, mark, li) {
-      if (!content || !mark || !li) return;
+      if (!content || !mark || !li || this.disabled) return;
 
       li.value = content;
       this.selectedWordList.push(mark);
@@ -418,6 +437,7 @@ $border-color: #e6e6e6;
         align-items: center;
         width: 120px;
         margin: 0 2px;
+        font-size: 16px;
 
         &.pinyin :deep input.el-input__inner {
           font-family: 'PINYIN-B', sans-serif;
@@ -495,4 +515,15 @@ $border-color: #e6e6e6;
     }
   }
 }
+
+.word-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+
+  .word-item {
+    cursor: pointer;
+  }
+}
 </style>