union-question-web/src/modules/questions/views/QuestionPreview.vue

<template>
  <el-dialog
    class="question-preview"
    title="试题预览"
    :visible.sync="dialogVisible"
    :modal="false"
    width="800"
    append-to-body
    custom-class="side-dialog"
  >
    <el-form label-position="right" label-width="65px">
      <el-form-item label="题型">
        <span>{{ quesModel.questionType | questionType }}</span>
      </el-form-item>
      <el-form-item label="题干">
        <div class="paper-question-body" v-html="quesModel.quesBody"></div>
      </el-form-item>

      <template v-if="quesModel.quesOptions && quesModel.quesOptions.length">
        <el-form-item
          v-for="(quesOption, optIndex) in quesModel.quesOptions"
          :key="`option-${optIndex}`"
        >
          <div class="paper-question-option">
            <span>{{ optIndex | optionOrderWordFilter }}. </span>
            <span v-html="quesOption.optionBody"></span>
          </div>
        </el-form-item>
      </template>

      <template v-if="quesModel.subQuestions && quesModel.subQuestions.length">
        <div
          v-for="(subQuestionModel, qindex) in quesModel.subQuestions"
          :key="`subq-${qindex}`"
          class="sub-question"
        >
          <div class="sub-question-no">{{ qindex + 1 }}</div>
          <el-form-item label="题目">
            <div
              class="paper-question-body"
              v-html="subQuestionModel.quesBody"
            ></div>
          </el-form-item>
          <template
            v-if="
              subQuestionModel.quesOptions &&
              subQuestionModel.quesOptions.length
            "
          >
            <el-form-item
              v-for="(subQuesOption, subIndex) in subQuestionModel.quesOptions"
              :key="subIndex"
            >
              <div class="paper-question-option">
                <span>{{ subIndex | optionOrderWordFilter }}. </span>
                <span v-html="subQuesOption.optionBody"></span>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="答案">
            <div
              class="paper-question-body"
              v-html="subQuestionModel.quesAnswer"
            ></div>
          </el-form-item>
        </div>
      </template>

      <el-form-item
        v-if="!quesModel.subQuestions || !quesModel.subQuestions.length"
        label="答案"
      >
        <div class="paper-question-body" v-html="quesModel.quesAnswer"></div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "QuestionPreview",
  props: {
    quesModel: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>