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

<template>
  <div class="build-paper-auto">
    <div class="build-step-title">
      <h3><span>试卷结构设置</span></h3>
      <div>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-circle-plus-outline"
          @click="addDetail"
          >新增大题</el-button
        >
      </div>
    </div>

    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item
        v-for="(detail, index) in details"
        :key="detail.id"
        :name="detail.id"
      >
        <div slot="title" class="detail-header">
          <h3>{{ index + 1 }}、{{ detail.detailName }}</h3>
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              title="编辑"
              @click.stop="editDetail(detail)"
            ></el-button>
            <el-button
              class="btn-danger"
              size="mini"
              type="text"
              icon="el-icon-delete"
              title="删除"
              @click.stop="removeDetail(index)"
            ></el-button>
          </div>
        </div>
        <div v-if="!isAnEmptyRichText(detail.description)" class="detail-desc">
          <rich-text :text-json="detail.description"></rich-text>
        </div>
        <div class="detail-info">
          <div>
            <p>
              <span>题型：</span>
              <span>{{ detail.sourceDetailName }}</span>
            </p>
            <p v-if="detail.selective">
              <span>选做题：</span>
              <span
                :class="{
                  'color-danger': detail.questionCount < detail.selectiveCount,
                }"
                >{{ detail.questionCount }}选{{ detail.selectiveCount }}，{{
                  detail.selectiveRule | selectiveRuleTypeFilter
                }}</span
              >
            </p>
          </div>
          <div>
            <p>
              <span>小题数：</span>
              <span>{{ detail.questionCount }}</span>
            </p>
            <p>
              <span>总分：</span>
              <span>{{ detail.questionCount * detail.score }}</span>
            </p>
          </div>
        </div>
        <question-group-struct
          :ref="`QuestionStruct${detail.id}`"
          :filter-data="{
            courseId,
            sourceDetailId: detail.sourceDetailId,
          }"
          :data-source="detail"
          @count-change="(val) => structCountChange(val, detail)"
        ></question-group-struct>
      </el-collapse-item>
    </el-collapse>

    <!-- ModifyDetailStruct -->
    <modify-detail-struct
      ref="ModifyDetailStruct"
      :detail="curDetail"
      @modified="detailModified"
    ></modify-detail-struct>
  </div>
</template>

<script>
import ModifyDetailStruct from "./ModifyDetailStruct.vue";
import QuestionGroupStruct from "./QuestionGroupStruct.vue";
import { isAnEmptyRichText } from "@/utils/utils";
import { deepCopy } from "@/plugins/utils";
import { omit } from "lodash";

export default {
  name: "BuildPaperAuto",
  components: {
    ModifyDetailStruct,
    QuestionGroupStruct,
  },
  props: {
    courseId: {
      type: [String, Number],
      default: "",
    },
    detailSource: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      details: [],
      curDetail: {},
      activeNames: [],
    };
  },
  mounted() {
    if (this.detailSource) {
      this.details = deepCopy(this.detailSource);
    }
  },
  methods: {
    isAnEmptyRichText,
    setDetails(details) {
      this.details = [];
      this.activeNames = [];
      this.curDetail = {};
      this.$nextTick(() => {
        this.details = deepCopy(details);
      });
    },
    addDetail() {
      this.curDetail = { courseId: this.courseId };
      this.$refs.ModifyDetailStruct.open();
    },
    editDetail(curDetail) {
      this.curDetail = {
        ...curDetail,
        scorePerQuestion: curDetail.score,
        courseId: this.courseId,
      };
      this.$refs.ModifyDetailStruct.open();
    },
    async removeDetail(index) {
      const confirm = await this.$confirm(`确定要删除当前大题吗?`, "提示", {
        type: "warning",
      }).catch(() => {});
      if (confirm !== "confirm") return;

      this.details.splice(index, 1);
    },
    detailModified(data) {
      const index = this.details.findIndex((item) => item.id === data.id);
      if (index === -1) {
        this.details.push({
          ...data,
          questionCount: 0,
          score: data.scorePerQuestion,
        });
        if (!this.activeNames.includes(data.id)) this.activeNames.push(data.id);
      } else {
        this.$set(
          this.details,
          index,
          Object.assign({}, this.details[index], {
            ...data,
            score: data.scorePerQuestion,
          })
        );
      }
    },
    structCountChange(val, detail) {
      const index = this.details.findIndex((item) => item.id === detail.id);
      if (index === -1) return;
      this.details[index].questionCount = val;
    },
    getData() {
      let detailInfo = this.details.map((item) => {
        const structData =
          this.$refs[`QuestionStruct${item.id}`][0].getDataList();
        return {
          ...omit(item, ["id"]),
          ...structData,
        };
      });

      return { detailInfo };
    },
    validate() {
      if (!this.details.length) {
        this.$message.error("请设置大题！");
        return Promise.reject();
      }

      let hasNoQuestionDetail = this.details.some(
        (detail) => !detail.questionCount
      );
      if (hasNoQuestionDetail) {
        this.$message.error("有大题未设置小题！");
        return Promise.reject();
      }

      let selectiveUnvalid = this.details.some(
        (detail) =>
          detail.selective && detail.questionCount < detail.selectiveCount
      );
      if (selectiveUnvalid) {
        this.$message.error("有大题设置的小题数小于选做题数！");
        return Promise.reject();
      }

      const { detailInfo } = this.getData();
      let hasNoClassifyDetail = detailInfo.some(
        (detail) => detail.useClassify && !detail.classifyIdList.length
      );
      if (hasNoClassifyDetail) {
        this.$message.error("有大题指定了文件夹，却未选择文件夹！");
        return Promise.reject();
      }
      return Promise.resolve(true);
    },
  },
};
</script>