union-question-web/src/modules/question/components/QuestionAnswer.vue

<template>
  <div class="question-answer">
    <template v-if="quesAnswer">
      <div v-if="IS_SELECT_QUESTION || IS_BOOL_QUESTION">{{ quesAnswer }}</div>
      <div v-else-if="IS_FILL_QUESTION">
        <p v-for="(cont, cindex) in quesAnswer" :key="cindex">
          <span style="margin-right: 5px">({{ cindex + 1 }})</span>
          <rich-text :text-json="cont"></rich-text>
        </p>
      </div>
      <rich-text
        v-else-if="IS_TEXT_QUESTION"
        :text-json="quesAnswer"
      ></rich-text>
      <div v-else></div>
    </template>
  </div>
</template>

<script>
import { deepCopy } from "@/plugins/utils";

export default {
  name: "QuestionAnswer",
  props: {
    data: {
      type: Object,
      default() {
        return {
          questionType: "",
          quesAnswer: "",
        };
      },
    },
  },
  data() {
    return {
      optionNames: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      quesAnswer: "",
    };
  },
  computed: {
    IS_SELECT_QUESTION() {
      return (
        this.data.questionType === "SINGLE_ANSWER_QUESTION" ||
        this.data.questionType === "MULTIPLE_ANSWER_QUESTION"
      );
    },
    IS_BOOL_QUESTION() {
      return this.data.questionType === "BOOL_ANSWER_QUESTION";
    },
    IS_FILL_QUESTION() {
      return this.data.questionType === "FILL_BLANK_QUESTION";
    },
    IS_TEXT_QUESTION() {
      return this.data.questionType === "TEXT_ANSWER_QUESTION";
    },
  },
  watch: {
    "data.quesAnswer": {
      handler() {
        this.initData();
      },
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (!this.data.quesAnswer) return;

      if (this.IS_BOOL_QUESTION) {
        this.quesAnswer = this.data.quesAnswer === "true" ? "正确" : "错误";
        return;
      }

      let quesAnswer = null;
      try {
        quesAnswer = JSON.parse(this.data.quesAnswer);
      } catch (error) {
        console.error("答案格式错误");
      }

      if (!quesAnswer) return;

      if (this.IS_SELECT_QUESTION) {
        this.quesAnswer = quesAnswer
          .map((item) => this.optionNames[item - 1])
          .join("");
      } else if (this.IS_FILL_QUESTION) {
        this.quesAnswer = quesAnswer.map((item) => {
          let nitem = deepCopy(item);
          if (!nitem.sections || !nitem.sections.length) {
            nitem.sections = [
              {
                blocks: [
                  {
                    type: "text",
                    value: `（${item.index + 1}）`,
                  },
                ],
              },
            ];
          } else {
            nitem.sections[0].blocks.unshift({
              type: "text",
              value: `（${item.index + 1}）`,
            });
          }

          return nitem;
        });
      } else if (this.IS_TEXT_QUESTION) {
        this.quesAnswer = quesAnswer[0];
      }
    },
  },
};
</script>