student-client/src/features/OnlineExam/Examing/QuestionView.vue

<template>
  <div v-if="question && examQuestion" class="question-view">
    <div class="question-group">{{"大题占位"}}</div>
    <div class="question-group-progress">{{"大题进度占位"}}</div>
    <template v-if="question.questionType === 'SINGLE_ANSWER_QUESTION'">
      <single-question-view :question="question" :examQuestion="examQuestion" />
    </template>
    <template v-if="question.questionType === 'MULTIPLE_ANSWER_QUESTION'">
      <multiple-question-view :question="question" :examQuestion="examQuestion" />
    </template>
    <template v-if="question.questionType === 'BOOL_ANSWER_QUESTION'">
      <boolean-question-view :question="question" :examQuestion="examQuestion" />
    </template>
    <template v-if="question.questionType === 'FILL_BLANK_QUESTION'">
      <fill-blank-question-view :question="question" :examQuestion="examQuestion" />
    </template>
    <template v-if="question.questionType === 'TEXT_ANSWER_QUESTION'">
      <text-question-view :question="question" :examQuestion="examQuestion" />
    </template>
    <template v-if="examQuestion.parentQuestion">
      <nested-question-view :question="question" :examQuestion="examQuestion" />
    </template>
  </div>
</template>

<script>
import SingleQuestionView from "./SingleQuestionView";
import MultipleQuestionView from "./MultipleQuestionView";
import BooleanQuestionView from "./BooleanQuestionView";
import FillBlankQuestionView from "./FillBlankQuestionView";
import TextQuestionView from "./TextQuestionView";
import NestedQuestionView from "./NestedQuestionView";

export default {
  name: "QuestionView",
  data() {
    return {
      question: null
    };
  },
  props: {
    examQuestion: Object
  },
  methods: {
    async updateQuestion() {
      if (!this.examQuestion) {
        return;
      }
      const res = await this.$http.get(
        "/api/exam_question/question/?question_id=" +
          (this.examQuestion.questionId ||
            this.examQuestion.parentQuestion.questionId)
      );
      const question = res.data;
      // const examQuestion = this.examQuestion;

      const transferWellNumberAndTrustInBody = function(repQuestion) {
        //将题干中的三个#替换为下划线
        if (repQuestion.body) {
          //将题干里的&nbsp;换成空格
          repQuestion.body = repQuestion.body
            .toString()
            .replace(new RegExp("&nbsp;", "g"), " ");
          repQuestion.body = repQuestion.body
            .toString()
            .replace(new RegExp("###", "g"), "_______");
          //将题干中的两个##数字##替换为下划线
          // var baseIndex = examQuestion.orders - 1;
          repQuestion.body = repQuestion.body
            .toString()
            .replace(/##(\d+)##/g, function(a, b) {
              return "__" + parseInt(b) + "__";
            });
          // repQuestion.body = $sce.trustAsHtml(repQuestion.body);
        }
      };
      const initQuestion = function(repQuestion) {
        if (
          repQuestion.questionType === "SINGLE_ANSWER_QUESTION" ||
          repQuestion.questionType === "MULTIPLE_ANSWER_QUESTION"
        ) {
          for (var i = 0, imax = repQuestion.options.length; i < imax; i++) {
            // repQuestion.options[i].content = $sce.trustAsHtml(
            //   repQuestion.options[i].content
            // );
          }
        }
        if (repQuestion.questionType === "FILL_BLANK_QUESTION") {
          if (repQuestion.answer && repQuestion.answer.indexOf("##") > -1) {
            //优先使用##
            repQuestion.answerList = repQuestion.answer.split("##");
          } else {
            repQuestion.answerList = [repQuestion.answer];
          }
        }

        transferWellNumberAndTrustInBody(repQuestion);
      };

      //判断是否为套题
      if (question.nestedQuestion) {
        transferWellNumberAndTrustInBody(question);
        for (var j = 0, jmax = question.subQuestionList.length; j < jmax; j++) {
          initQuestion(question.subQuestionList[j]);
        }
        // 对子题进行排序
        if (question.subQuestionList && question.subQuestionList.length > 0) {
          question.subQuestionList.sort(function(a, b) {
            if (a.quesNumber > b.quesNumber) {
              return 1;
            } else if (a.quesNumber < b.quesNumber) {
              return -1;
            } else {
              return 0;
            }
          });
        }
      } else {
        initQuestion(question);
      }

      this.question = question;
    }
  },
  watch: {
    examQuestion: function() {
      this.updateQuestion();
    }
  },
  components: {
    SingleQuestionView,
    MultipleQuestionView,
    BooleanQuestionView,
    FillBlankQuestionView,
    TextQuestionView,
    NestedQuestionView
  }
};
</script>

<style scoped>
question-view {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>