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

<template>
  <section class="question-info">
    <el-form :model="quesModel" label-position="left" label-width="80px">
      <el-form-item label="题目">
        <rich-text
          class="paper-question-body padding-top-6"
          :text-json="quesModel.quesBody"
        ></rich-text>
      </el-form-item>
      <el-form-item
        v-for="(quesOption, optIndex) in quesModel.quesOptions"
        :key="optIndex"
      >
        <div class="paper-question-option">
          <span>{{ optIndex | optionOrderWordFilter }}. </span>
          <rich-text :text-json="quesOption.optionBody"></rich-text>
        </div>
      </el-form-item>

      <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="题目" label-width="50px">
            <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"
              label-width="50px"
            >
              <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="答案" label-width="50px">
            <question-answer
              class="paper-question-body"
              :data="subQuestionModel"
            ></question-answer>
            <!-- <rich-text
              class="paper-question-body"
              :text-json="subQuestionModel.quesAnswer"
            ></rich-text> -->
          </el-form-item>
        </div>
      </template>

      <el-form-item
        v-if="!quesModel.subQuestions || !quesModel.subQuestions.length"
        label="答案"
      >
        <question-answer
          class="paper-question-body padding-top-6"
          :data="quesModel"
        ></question-answer>
      </el-form-item>

      <div class="line-seperator"></div>

      <el-form-item label="录入时间">
        <span>{{ quesModel.creationTime }}</span>
      </el-form-item>
      <el-form-item label="题型">
        <span>{{ quesModel.questionType | questionType }}</span>
      </el-form-item>
      <div class="box-justify">
        <el-form-item label="预估难度">
          <span>{{ quesModel.difficulty || "-" }}</span>
        </el-form-item>
        <el-form-item label="计算难度" style="width: 120px">
          <span>{{ quesModel.calculateDifficultyDegree || "-" }}</span>
        </el-form-item>
      </div>
      <div class="box-justify">
        <el-form-item label="区分度">
          <span>{{ quesModel.discrimination || "-" }}</span>
        </el-form-item>
        <el-form-item label="标准差" style="width: 120px">
          <span>{{ quesModel.std || "-" }}</span>
        </el-form-item>
      </div>
      <div class="box-justify">
        <el-form-item label="信度">
          <span>{{ quesModel.reliability || "-" }}</span>
        </el-form-item>
        <el-form-item label="差异系数" style="width: 120px">
          <span>{{ quesModel.cv || "-" }}</span>
        </el-form-item>
      </div>
      <div class="box-justify">
        <el-form-item label="平均分值">
          <span>{{ quesModel.calculateAvgScore || "-" }}</span>
        </el-form-item>
        <el-form-item
          v-if="infoType === 'existed'"
          label="重复率"
          style="width: 120px"
        >
          <span>{{ quesModel.duplicateRate || "-" }}</span>
        </el-form-item>
      </div>

      <div class="line-seperator"></div>

      <el-form-item label="试题关联属性" label-width="100px">
        <el-tag
          v-for="(content, propIndex) in quesModel.quesProperties"
          :key="propIndex"
          type="primary"
          effect="dark"
          style="margin-right: 5px; margin-bottom: 5px"
        >
          {{ content.courseProperty && content.courseProperty.name }}
          <span style="margin: 0 3px">/</span>
          {{ content.firstProperty && content.firstProperty.name }}
          <span v-if="content.secondProperty" style="margin: 0 3px">/</span>
          {{ content.secondProperty && content.secondProperty.name }}
        </el-tag>
      </el-form-item>
    </el-form>
    <div :class="['info-type', `info-type-${infoType}`]">
      {{ infoType === "new" ? "新导入" : "已入库" }}
    </div>
  </section>
</template>
<script>
import { mapState } from "vuex";
import QuestionAnswer from "../../question/components/QuestionAnswer.vue";

export default {
  components: { QuestionAnswer },
  props: {
    question: {
      type: Object,
      default: () => {},
    },
    infoType: {
      type: String,
      default: "new",
    },
  },
  data() {
    return { quesModel: this.question };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  watch: {
    question: {
      immediate: false,
      handler(val) {
        this.quesModel = val;
      },
    },
  },
  //初始化查询
  created() {},
  methods: {
    isMatchingQuestion(questionType) {
      if (
        questionType == "PARAGRAPH_MATCHING" ||
        questionType == "BANKED_CLOZE"
      ) {
        return true;
      } else {
        return false;
      }
    },
    isNested(questionType) {
      if (
        questionType == "PARAGRAPH_MATCHING" ||
        questionType == "BANKED_CLOZE" ||
        questionType == "CLOZE" ||
        questionType == "READING_COMPREHENSION" ||
        questionType == "LISTENING_QUESTION"
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>