union-question-web/src/modules/paper/components/BuildPaperQuestionNested.vue

<template>
  <div class="detail-question-part">
    <div class="detail-question-header">
      <div>
        <el-tag size="mini" effect="dark" type="success">{{
          question.questionType | questionType
        }}</el-tag>
        <span class="inline-middle margin-left-10"
          >试题总分：{{ totalScore }}分，</span
        >
        <span class="inline-middle margin-left-10">每题分数：</span>
        <el-input-number
          v-model="score"
          size="mini"
          :step="0.1"
          :min="0.1"
          :max="999"
          :controls="false"
          :precision="1"
          step-strictly
          @change="scoreChange"
        >
        </el-input-number>
      </div>
      <div>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          title="编辑"
          @click.stop="editQuestion"
        ></el-button>
        <el-button
          class="btn-danger"
          size="mini"
          type="text"
          icon="el-icon-delete"
          title="删除"
          @click.stop="removeQuestion"
        ></el-button>
      </div>
    </div>
    <div v-if="quesBody" class="detail-question-body">
      <rich-text :text-json="quesBody"></rich-text>
    </div>
    <div class="detail-question-subqs">
      <template v-for="(subq, sindex) in question.subQuestions">
        <build-paper-question-base
          :key="subq.id"
          v-model="subq.score"
          :question="subq"
          :question-serialno="sindex + 1"
          :show-action="false"
          @change="updateTotalScore"
        ></build-paper-question-base>
      </template>
    </div>
  </div>
</template>

<script>
import BuildPaperQuestionBase from "./BuildPaperQuestionBase.vue";
import { calcSum, deepCopy } from "@/plugins/utils";

export default {
  name: "BuildPaperQuestionNested",
  components: { BuildPaperQuestionBase },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    questionSerialno: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      score: undefined,
      quesBody: null,
      totalScore: 0,
    };
  },
  created() {
    if (this.questionSerialno) {
      if (this.question.quesBody) {
        this.quesBody = deepCopy(this.question.quesBody);
        this.quesBody.sections[0].blocks.unshift({
          type: "text",
          value: this.questionSerialno + "、",
        });
      } else {
        this.quesBody = {
          sections: [
            {
              blocks: [
                {
                  type: "text",
                  value: this.questionSerialno + "、",
                },
              ],
            },
          ],
        };
      }

      this.updateTotalScore();
    }
  },
  methods: {
    scoreChange() {
      // 这里通过引用关系直接修改了小题分值
      this.question.subQuestions.forEach((subq) => {
        subq.score = this.score;
      });
      this.updateTotalScore();
    },
    updateTotalScore() {
      this.totalScore = calcSum(
        this.question.subQuestions.map((item) => item.score || 0)
      );
    },
    editQuestion() {
      this.$emit("on-edit", this.question);
    },
    removeQuestion() {
      this.$emit("on-remove", this.question);
    },
  },
};
</script>