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="题干">
        <rich-text
          class="paper-question-body"
          :text-json="quesModel.quesBody"
        ></rich-text>
      </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>
            <rich-text :text-json="quesOption.optionBody"></rich-text>
          </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="题目">
            <rich-text
              class="paper-question-body"
              :text-json="subQuestionModel.quesBody"
            ></rich-text>
          </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>
                <rich-text :text-json="subQuesOption.optionBody"></rich-text>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="答案">
            <question-answer
              class="paper-question-body"
              :data="subQuestionModel"
            ></question-answer>
          </el-form-item>
        </div>
      </template>

      <el-form-item
        v-if="!quesModel.subQuestions || !quesModel.subQuestions.length"
        label="答案"
      >
        <question-answer
          class="paper-question-body"
          :data="quesModel"
        ></question-answer>
      </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>