seec-eval/src/views/components/ExamQuestionsInfo.vue

<template>
  <div>
    <div v-for="question in examQuestions" :key="question.id">
      <v-divider class="my-5"></v-divider>
      <v-row>
        <v-col class="d-flex justify-center align-center" cols="1">
          <v-chip label v-if="!analysis">
            {{ examQuestions.indexOf(question) + 1 }}
          </v-chip>
          <v-chip
            v-else
            :color="
              submitAnswers.get(question.id) ===
              question.answer.replace(/[;]/gi, '')
                ? 'success'
                : 'error'
            "
            label
          >
            {{ examQuestions.indexOf(question) + 1 }}
          </v-chip>
        </v-col>
        <v-col class="flex-grow-0 flex-shrink-0" cols="9">
          <markdown-text
            :raw="question.stem + mergeOptions(question.options)"
            style="height: 100%;width: 100%"
          ></markdown-text>
        </v-col>
        <v-col class="flex-shrink-1" cols="2">
          <v-card-text v-if="question.keyPoints">
            关键词: {{ question.keyPoints }}
          </v-card-text>
        </v-col>
      </v-row>
      <v-row class="px-10 d-block" v-if="analysis && question.type !== 'code'">
        <v-col class="grey lighten-3 py-1">
          <markdown-text
            :raw="question.analysis"
            style="height: 100%;width: 100%"
          ></markdown-text>
        </v-col>
        <v-col
          class="d-flex align-center justify-end"
          v-if="question.type !== 'short_answer'"
        >
          我的答案：
          <v-chip
            label
            :color="
              submitAnswers.get(question.id) ===
              question.answer.replace(/[;]/gi, '')
                ? 'success'
                : 'error'
            "
            class="ml-2 mr-4"
            v-if="submitAnswers.size > 0"
          >
            {{ submitAnswers.get(question.id) }}
          </v-chip>
          正确答案：
          <v-chip label color="success" class="ml-2">
            {{ question.answer.replace(/[;]/gi, '') }}
          </v-chip>
          <!--  简答题解析即为答案        -->
        </v-col>
      </v-row>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { TeacherQuestionSerializer, OptionSerializer, ID } from '@/api/types'
import MarkdownText from '@/views/exam/components/MarkdownText.vue'
import { getExamSubmitRecordsByUserId } from '@/api/record'

export default Vue.extend({
  name: 'ExamQuestionsInfo',
  props: {
    examQuestions: {
      type: Array as PropType<Array<TeacherQuestionSerializer>>,
      required: true
    },
    analysis: {
      type: Boolean,
      default: false
    }
  },
  components: {
    MarkdownText
  },

  data() {
    return {
      submitAnswers: {} as Map<ID, string>
    }
  },
  methods: {
    mergeOptions(options: OptionSerializer): string {
      if (!options) {
        return ''
      }

      let keys = Object.keys(options)
      let values = Object.values(options)
      let entries = []

      for (let i = 0; i < keys.length; i++) {
        entries.push(keys[i] + ' : ' + values[i])
      }
      return '\n' + entries.join(' ')
    },
    async fetchAnswers() {
      const examId = this.$route.params.examId
      getExamSubmitRecordsByUserId(examId).then(({ data }) => {
        let records = data.result
        if (records && records.length > 0) {
          this.submitAnswers = new Map()
          records.forEach((val) => {
            this.submitAnswers.set(
              val.questionId,
              val.submitAnswer === ''
                ? '无'
                : val.submitAnswer === 't'
                ? 'true'
                : val.submitAnswer === 'f'
                ? 'false'
                : val.submitAnswer.replace(/[;]/gi, '')
            )
          })
        } else {
          this.submitAnswers = new Map()
          this.examQuestions.forEach((val) => {
            this.submitAnswers.set(val.id, '无')
          })
        }
      })
    }
  },
  mounted() {
    if (this.analysis) {
      this.fetchAnswers()
    }
  }
})
</script>

<style scoped></style>