frontend-admin/src/features/examwork/StudentExamDetail/spins/TopicAnswer.vue

<template>
  <div class="cont-item-detail">
    <h4 class="cont-part-title">
      {{ data.answerType === "student" ? "学生答案" : "答案" }}
    </h4>
    <div
      v-if="data.structType === STRUCT_TYPES.BOOLEAN_CHOICE"
      class="cont-part-body"
    >
      {{ data.answer ? "对" : "错" }}
    </div>
    <div
      v-else-if="data.structType === STRUCT_TYPES.FILL_BLANK"
      class="cont-part-body"
    >
      <p v-for="(cont, cindex) in data.body" :key="cindex">
        <rich-text :text-json="cont"></rich-text>
      </p>
    </div>
    <div
      v-else-if="data.structType === STRUCT_TYPES.TEXT"
      class="cont-part-body"
    >
      <p v-for="(cont, cindex) in data.body" :key="cindex">
        <rich-text :text-json="cont"></rich-text>
      </p>
    </div>
    <div v-else class="cont-part-body">
      {{ answer }}
    </div>
  </div>
</template>

<script>
import RichText from "./RichText.vue";

export default {
  name: "topic-answer",
  components: { RichText },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      STRUCT_TYPES: {
        SINGLE_CHOICE: 1,
        MULTIPLE_CHOICE: 2,
        BOOLEAN_CHOICE: 3,
        FILL_BLANK: 4,
        TEXT: 5,
        NESTED: 6,
        LISTENING: 7,
        MATCHES: 8,
      },
      optionNames: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    };
  },
  computed: {
    answer() {
      const SELECT_TYPES = [
        this.STRUCT_TYPES.SINGLE_CHOICE,
        this.STRUCT_TYPES.MULTIPLE_CHOICE,
      ];
      return SELECT_TYPES.includes(this.data.structType)
        ? this.data.body.map((item) => this.optionNames[item - 1]).join("")
        : "";
    },
  },
  methods: {},
};
</script>