union-question-web/src/modules/paper/views/BuildPaper.vue

<template>
  <div class="build-paper">
    <div class="part-box">
      <div class="part-box-header">
        <div class="part-box-header-left">
          <h1 class="part-box-title">组卷</h1>
          <span>课程代码：{{ modalForm.courseCode }}</span>
          <span>课程名称：{{ modalForm.courseName }}</span>
        </div>
        <div>
          <el-button
            type="primary"
            size="small"
            icon="icon icon-save-white"
            @click="confirm"
            >确定</el-button
          >
          <el-button
            type="danger"
            size="small"
            plain
            icon="icon icon-back"
            @click="toback"
            >返回</el-button
          >
        </div>
      </div>
      <el-form
        ref="modalFormComp"
        class="part-filter-form"
        :model="modalForm"
        :rules="rules"
        inline
      >
        <el-form-item prop="paperName" label="试卷名称">
          <el-input
            v-model="modalForm.paperName"
            placeholder="试卷名称"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="!IS_MANUAL_MODE" prop="paperCount" label="组卷套数">
          <el-input-number
            v-model="modalForm.paperCount"
            :min="1"
            :max="5"
            :step="1"
            step-strictly
          ></el-input-number>
        </el-form-item>
        <el-form-item v-if="!IS_MANUAL_MODE" style="border: none">
          <el-checkbox v-model="modalForm.checkRepeat"
            >校验试卷重复率</el-checkbox
          >
        </el-form-item>
        <el-form-item v-else></el-form-item>
      </el-form>
      <el-form>
        <template v-if="modalForm.checkRepeat && !IS_MANUAL_MODE">
          <el-form-item
            label="校验重复率的试卷范围："
            label-width="180px"
            style="margin-bottom: 10px"
          >
            <el-radio-group v-model="modalForm.storage" size="small">
              <el-radio-button :label="false">卷库列表试卷</el-radio-button>
              <el-radio-button :label="true">试卷仓库试卷</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="试卷间重复率不高于："
            label-width="180px"
            style="margin-bottom: 10px"
          >
            <el-input-number
              v-model="modalForm.maxLimit"
              style="width: 125px"
              :min="0"
              :max="100"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
            %
            <el-checkbox v-model="modalForm.topicOnly"
              >本次组的试卷间不允许重复</el-checkbox
            >
            <p class="tips-info">注：试卷间的重复率会小于等于设定值</p>
          </el-form-item>
          <el-form-item
            label="试卷重复率校验时间周期："
            label-width="180px"
            style="margin-bottom: 10px"
          >
            <el-input-number
              v-model="modalForm.timeLimit"
              style="width: 125px"
              :min="1"
              :max="100"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
            个月
            <p class="tips-info">注：月份按照自然月计数，当前月份记为第1个月</p>
          </el-form-item>
        </template>
        <el-form-item label="组卷模式" style="margin: 0">
          <el-radio-group v-model="genModelType" style="padding-left: 15px">
            <el-radio
              v-for="item in modelTypes"
              :key="item.code"
              :label="item.code"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <div class="part-box">
      <component
        :is="buildCompName"
        ref="BuildPaperDetail"
        :course-id="modalForm.courseId"
      ></component>
    </div>
  </div>
</template>

<script>
import BuildPaperAuto from "../components/BuildPaperAuto.vue";
import BuildPaperManual from "../components/BuildPaperManual.vue";
import BuildPaperSimple from "../components/BuildPaperSimple.vue";
import { buildPaperApi } from "../api";

const initModalForm = {
  courseId: "",
  courseCode: "",
  courseName: "",
  paperName: "",
  paperCount: 1,
  checkRepeat: false,
  storage: false,
  maxLimit: 0,
  topicOnly: false,
  timeLimit: 1,
};

export default {
  name: "BuildPaper",
  components: { BuildPaperAuto, BuildPaperManual, BuildPaperSimple },
  data() {
    return {
      loading: false,
      modalForm: {
        ...initModalForm,
      },
      rules: {
        paperName: [
          {
            required: true,
            message: "请输入试卷名称",
            trigger: "change",
          },
          {
            max: 100,
            message: "试卷名称不能超过100个字",
            trigger: "change",
          },
        ],
        paperCount: [
          {
            required: true,
            message: "请输入组卷套数",
            trigger: "change",
          },
        ],
      },
      genModelType: "auto",
      modelTypes: [
        {
          code: "simple",
          name: "简易成卷",
        },
        {
          code: "auto",
          name: "自动成卷",
        },
        {
          code: "manual",
          name: "手动组卷",
        },
      ],
    };
  },
  computed: {
    buildCompName() {
      return `build-paper-${this.genModelType}`;
    },
    IS_MANUAL_MODE() {
      return this.genModelType === "manual";
    },
  },
  created() {
    let genPaperInfo = sessionStorage.getItem("gen_paper");
    genPaperInfo = genPaperInfo ? JSON.parse(genPaperInfo) : {};
    this.modalForm.courseCode = genPaperInfo.courseCode;
    this.modalForm.courseName = genPaperInfo.courseName;
    this.modalForm.courseId = genPaperInfo.courseId;
  },
  methods: {
    async confirm() {
      let valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;
      valid = await this.$refs.BuildPaperDetail.validate().catch(() => {});
      if (!valid) return;

      if (this.loading) return;
      this.loading = true;

      let questionInfo = this.$refs.BuildPaperDetail.getData();
      const datas = {
        ...this.modalForm,
        ...questionInfo,
      };
      const res = await buildPaperApi(datas, this.genModelType).catch(() => {});
      this.loading = false;
      if (!res) return;

      this.$message.success("组卷成功！");
    },
    toback() {
      window.history.go(-1);
    },
  },
};
</script>