修改答题报告

src/views/exercise_questions/answer/components/AnswerReport.vue

@@ -4,27 +4,32 @@
     <div class="answer-info">
       <div>
         <span>耗时</span>
-        <span>{{ secondFormatConversion(answer_record.answer_duration, 'chinese') }}</span>
+        <span>{{ secondFormatConversion(recordReport.answer_record.answer_duration, 'chinese') }}</span>
       </div>
       <div>
         <span>正确</span>
-        <span>{{ answer_record.right_count }}</span>
+        <span>{{ recordReport.answer_record.right_count }}</span>
       </div>
       <div>
         <span>错误</span>
-        <span>{{ answer_record.error_count }}</span>
+        <span>{{ recordReport.answer_record.error_count }}</span>
       </div>
     </div>
     <div
       v-if="
-        answer_record.answer_mode === 1 || (answer_record.answer_mode === 2 && answer_record.is_remarked === 'true')
+        recordReport.answer_record.answer_mode === 1 ||
+        (recordReport.answer_record.answer_mode === 2 && recordReport.answer_record.is_remarked === 'true')
       "
       class="answer-list"
     >
       <span
-        v-for="({ question_id, is_objective, answer_status }, i) in question_list"
+        v-for="({ question_id, is_objective, answer_status, is_remarked }, i) in recordReport.question_list"
         :key="question_id"
-        :class="['answer-list-item', { subjectivity: is_objective === 'false', error: answer_status === 2 }]"
+        :class="[
+          'answer-list-item',
+          { subjectivity: is_objective === 'false', error: answer_status === 2 },
+          { remarked: is_remarked === 'true' },
+        ]"
         @click="selectQuestion(i)"
       >
         {{ i + 1 }}
@@ -34,46 +39,25 @@
 </template>
 
 <script>
-import { GetAnswerRecordReport } from '@/api/exercise';
-
 import { secondFormatConversion } from '@/utils/transform';
 
 export default {
   name: 'AnswerReport',
   props: {
-    answerRecordId: {
-      type: String,
+    recordReport: {
+      type: Object,
       required: true,
     },
   },
   data() {
     return {
       secondFormatConversion,
-      answer_record: {
-        answer_duration: 0,
-        right_count: 0,
-        error_count: 0,
-      },
-      question_list: [],
     };
   },
-  created() {
-    this.getAnswerRecordReport();
-  },
   methods: {
     selectQuestion(i) {
       this.$emit('selectQuestion', i);
     },
-
-    // 获取答题报告
-    getAnswerRecordReport() {
-      GetAnswerRecordReport({ answer_record_id: this.answerRecordId })
-        .then(({ answer_record, question_list }) => {
-          this.answer_record = answer_record;
-          this.question_list = question_list;
-        })
-        .catch(() => {});
-    },
   },
 };
 </script>
@@ -126,6 +110,7 @@ export default {
     width: 770px;
 
     &-item {
+      position: relative;
       width: 56px;
       height: 40px;
       padding: 8px;
@@ -143,6 +128,20 @@ export default {
       &.subjectivity {
         background-color: #fef2a4;
       }
+
+      &.remarked {
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          content: '';
+          background-color: #f2555a;
+          border-radius: 50%;
+        }
+      }
     }
   }
 }

src/views/exercise_questions/answer/index.vue

@@ -24,7 +24,7 @@
         @startAnswer="startAnswer"
       />
 
-      <AnswerReport v-else-if="isSubmit" :answer-record-id="answer_record_id" @selectQuestion="selectQuestion" />
+      <AnswerReport v-else-if="isSubmit" :record-report="recordReport" @selectQuestion="selectQuestion" />
 
       <template v-for="({ id }, i) in questionList" v-else>
         <component
@@ -48,7 +48,13 @@
           <el-input v-model="annotations.remark" type="textarea" rows="6" resize="none" class="remark" />
           <div>图片/视频</div>
 
-          <el-upload action="no" accept="audio/*,video/*,image/*" :show-file-list="true" :http-request="upload">
+          <el-upload
+            action="no"
+            accept="audio/*,video/*,image/*"
+            :show-file-list="true"
+            :http-request="upload"
+            :on-remove="removeFile"
+          >
             <div class="upload">
               <i class="el-icon-plus avatar-uploader-icon"></i>
               <span>Upload</span>
@@ -111,6 +117,7 @@ import {
   SubmitAnswer,
   GetQuestionInfo_AnswerRecord,
   FillQuestionAnswerRemark,
+  GetAnswerRecordReport,
 } from '@/api/exercise';
 import { subjectiveQuestionList } from './answer';
 import { fileUpload } from '@/api/app';
@@ -163,6 +170,15 @@ export default {
         remark: '',
         file_id_list: [],
       }, // 批注
+      recordReport: {
+        answer_record: {
+          answer_duration: 0,
+          right_count: 0,
+          error_count: 0,
+          is_remarked: 'false',
+        },
+        question_list: [],
+      }, // 答题报告
     };
   },
   computed: {
@@ -208,12 +224,32 @@ export default {
             if (this.user_answer_record_info.is_exist_answer_record === 'true' && !this.isTeacher) {
               this.answer_record_id = this.user_answer_record_info.answer_record_id;
               this.answer_mode = answer_mode;
+              // 如果是考试模式，且已经存在答题记录，则直接显示答题报告
               if (this.answer_mode === 2) this.isSubmit = true;
             }
+            if (!this.isTeacher) {
+              this.getAnswerRecordReport();
+            }
           },
         );
       }
     },
+    // 获取答题报告
+    getAnswerRecordReport() {
+      if (!this.answer_record_id) return;
+      GetAnswerRecordReport({ answer_record_id: this.answer_record_id })
+        .then(({ answer_record, question_list }) => {
+          if (answer_record.is_remarked === 'true') {
+            this.isSubmit = true;
+            this.curQuestionIndex = 0;
+          }
+          this.recordReport = {
+            answer_record,
+            question_list,
+          };
+        })
+        .catch(() => {});
+    },
     getExerciseQuestionIndexList() {
       GetExerciseQuestionIndexList({ exercise_id: this.exercise_id }).then(({ index_list }) => {
         this.questionList = index_list.map((item) => ({
@@ -322,7 +358,6 @@ export default {
         question_id: this.questionList[this.curQuestionIndex].id,
       }).then(({ user_answer: { is_fill_answer, content }, remark }) => {
         this.remark = remark;
-        console.log(this.remark);
         if (is_fill_answer === 'false') return;
         this.$refs.exercise?.[0].showAnswer(
           this.answer_mode === 1 && !this.isTeacherAnnotations,
@@ -371,15 +406,21 @@ export default {
       fileUpload('Mid', file).then(({ file_info_list }) => {
         if (file_info_list.length > 0) {
           const { file_id } = file_info_list[0];
-          this.annotations.file_id_list.push(file_id);
+          this.annotations.file_id_list.push({ [file.file.uid]: file_id });
         }
       });
     },
+    removeFile(file) {
+      const index = this.annotations.file_id_list.findIndex((item) => Object.hasOwn(item, file.uid));
+      this.annotations.file_id_list.splice(index, 1);
+    },
     fillQuestionAnswerRemark() {
       FillQuestionAnswerRemark({
         answer_record_id: this.answer_record_id,
-        question_id: this.questionList[this.curQuestionIndex].id,
-        ...this.annotations,
+        file: this.questionList[this.curQuestionIndex].id,
+        file_id_list: this.annotations.file_id_list.map((item) => item[Object.keys(item)[0]]),
+        score: this.annotations.score,
+        remark: this.annotations.remark,
       }).then(() => {
         this.$message.success('批注成功');
         this.isPopover = false;