chore: 新增显示答案

src/api/base.js

@@ -21,8 +21,8 @@ export function sendExamInfo(data) {
 }
 
 // 获取试卷
-export function getTopic(examId) {
-  return httpRequest.get(`/api/xexam/v1/exam/sheet/${examId}`)
+export function getTopic(examId, params) {
+  return httpRequest.get(`/api/xexam/v1/exam/sheet/${examId}`, { params })
 }
 
 // 获取试卷缓存

src/components/QuestionListItem.vue

@@ -7,7 +7,7 @@
     <div class="question-item-bd">
       <!-- 单选题 || 判断题 -->
       <template v-if="questionType == 1 || questionType == 6">
-        <el-radio-group v-model="question.answer[0]" @change="$emit('changeNumber', question.q_number)">
+        <el-radio-group v-model="question.user_answer[0]" @change="$emit('changeNumber', question.q_number)">
           <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
             <el-radio :label="item.id">{{ item.abc_option }}</el-radio>
           </div>
@@ -15,7 +15,7 @@
       </template>
       <!-- 多选题 -->
       <template v-if="questionType == 2">
-        <el-checkbox-group v-model="question.answer" @change="$emit('changeNumber', question.q_number)">
+        <el-checkbox-group v-model="question.user_answer" @change="$emit('changeNumber', question.q_number)">
           <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
             <el-checkbox :label="item.id"> {{ item.abc_option }} </el-checkbox>
           </div>
@@ -23,7 +23,7 @@
       </template>
       <!-- 问答题 -->
       <template v-if="questionType == 3">
-        <el-input type="textarea" placeholder="请输入内容" v-model="question.answer[0]" :autosize="{ minRows: 6 }" @input="$emit('changeNumber', question.q_number)" />
+        <el-input type="textarea" placeholder="请输入内容" v-model="question.user_answer[0]" :autosize="{ minRows: 6 }" @input="$emit('changeNumber', question.q_number)" />
       </template>
     </div>
   </div>

src/components/QuestionNum.vue

@@ -19,7 +19,7 @@
               <li
                 v-for="item in group.question_list"
                 :key="item.id"
-                :class="{ stu1: !!item.answer.length, stu2: item.q_number === questionNumber, stu3: item.sign }"
+                :class="{ stu1: !!item.user_answer.length, stu2: item.q_number === questionNumber, stu3: item.sign, stu4: checkAnswer(item) }"
                 @click="handleChange(item)">
                 {{ item.q_number }}
               </li>
@@ -44,14 +44,7 @@ export default {
     questionNumber: { type: Number }
   },
   data() {
-    return {
-      tipsList: [
-        { className: 'circle1', title: '已答' },
-        { className: 'circle2', title: '未答' },
-        { className: 'circle3', title: '当前' },
-        { className: 'circle4', title: '标记' }
-      ]
-    }
+    return {}
   },
   computed: {
     questions() {
@@ -62,11 +55,36 @@ export default {
         }, [])
         return { ...group, question_list }
       })
+    },
+    pageOptions() {
+      const { show_answer = '0' } = this.$route.query
+      return {
+        showAnswer: show_answer == '1'
+      }
+    },
+    tipsList() {
+      const list = [
+        { className: 'circle1', title: '已答' },
+        { className: 'circle2', title: '未答' },
+        { className: 'circle3', title: '当前' },
+        { className: 'circle4', title: '标记' }
+      ]
+      if (this.pageOptions.showAnswer) {
+        list.push({ className: 'circle5', title: '答错' })
+      }
+      return list
     }
   },
   methods: {
     handleChange(item) {
       this.$emit('changeNumber', item.q_number)
+    },
+    checkAnswer(item) {
+      if (this.pageOptions.showAnswer && !!item.user_answer.length) {
+        return JSON.stringify(item.user_answer) !== item.answer
+      } else {
+        return false
+      }
     }
   }
 }
@@ -158,6 +176,12 @@ export default {
           border-radius: 50%;
         }
       }
+      &.stu4 {
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        border: 2px solid #c01540;
+      }
     }
   }
 }
@@ -210,6 +234,12 @@ export default {
         border-radius: 50%;
       }
     }
+    .circle5 {
+      width: 24px;
+      height: 24px;
+      border: 2px solid #c01540;
+      border-radius: 50%;
+    }
     .txt {
       margin-top: 5px;
       font-size: 12px;

src/views/Exam.vue

@@ -95,12 +95,13 @@ export default {
       return this.questionNumber < this.paper.total_question_count
     },
     pageOptions() {
-      const { has_time = '1', has_mark = '1', has_submit = '1', has_save = '0' } = this.$route.query
+      const { has_time = '1', has_mark = '1', has_submit = '1', has_save = '0', show_answer = '0' } = this.$route.query
       return {
-        hasTime: has_time != '0',
-        hasMark: has_mark != '0',
-        hasSubmit: has_submit != '0',
-        hasSave: has_save != '0'
+        hasTime: has_time == '1',
+        hasMark: has_mark == '1',
+        hasSubmit: has_submit == '1',
+        hasSave: has_save == '1',
+        showAnswer: show_answer == '1'
       }
     }
   },
@@ -116,7 +117,7 @@ export default {
     async fetchExam() {
       this.pageOptions.hasTime && this.setCountdownTimer()
       try {
-        const res = await api.getTopic(this.examId)
+        const res = await api.getTopic(this.examId, { show_answer: this.pageOptions.showAnswer ? '1' : undefined })
         this.paper = res
         this.questionItems = this.genQuestionList(res.question_items)
         this.setCacheExamTimer()
@@ -148,13 +149,13 @@ export default {
             const list = item.list.map(item => {
               qNumber++
               const questionAnswers = groupAnswers?.[item.id]
-              return { ...baseAttrs, ...item, sign: questionAnswers?.sign || false, answer: questionAnswers?.answer || [], q_number: qNumber }
+              return { ...baseAttrs, ...item, sign: questionAnswers?.sign || false, user_answer: questionAnswers?.answer || [], q_number: qNumber }
             })
             return { ...baseAttrs, ...item, list }
           } else {
             qNumber++
             const questionAnswers = groupAnswers?.[item.id]
-            return { ...baseAttrs, ...item, sign: questionAnswers?.sign || false, answer: questionAnswers?.answer || [], q_number: qNumber }
+            return { ...baseAttrs, ...item, sign: questionAnswers?.sign || false, user_answer: questionAnswers?.answer || [], q_number: qNumber }
           }
         })
         return { ...group, question_list }
@@ -166,11 +167,11 @@ export default {
         group.question_list.forEach(item => {
           if (item.list) {
             item.list.forEach(item => {
-              const data = { [item.question_item_type]: { [item.id]: { answer: item.answer, sign: item.sign } } }
+              const data = { [item.question_item_type]: { [item.id]: { answer: item.user_answer, sign: item.sign } } }
               result = merge(result, data)
             })
           } else {
-            const data = { [item.question_item_type]: { [item.id]: { answer: item.answer, sign: item.sign } } }
+            const data = { [item.question_item_type]: { [item.id]: { answer: item.user_answer, sign: item.sign } } }
             result = merge(result, data)
           }
         })
@@ -193,7 +194,9 @@ export default {
     async handleSubmitExam() {
       const count = parseInt(this.paper.total_question_count) - parseInt(this.getAnswerCount())
       const confirmText =
-        count === 0 ? '确定后要结束本次考试？还有作答时间，结束考试后，将不能返回本次考试！' : `确定要结束本次考试？还有${count}题未答，结束考试后，将不能返回本次考试`
+        count === 0
+          ? '确定后要结束本次考试？还有作答时间，结束考试后，将不能返回本次考试！'
+          : `确定要结束本次考试？还有${count}题未答，结束考试后，将不能返回本次考试`
       await this.$confirm(confirmText, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '关闭',