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 prop="genNumber" label="组卷套数">
          <el-input-number
            v-model="modalForm.genNumber"
            :min="1"
            :max="5"
            :step="1"
            step-strictly
          ></el-input-number>
        </el-form-item>
        <el-form-item style="border: none">
          <el-checkbox v-model="modalForm.topicRepeat"
            >多套试卷间试题不能重复</el-checkbox
          >
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="组卷模式" style="margin: 0">
          <el-radio-group
            v-model="modalForm.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";

export default {
  name: "BuildPaper",
  components: { BuildPaperAuto, BuildPaperManual, BuildPaperSimple },
  data() {
    return {
      loading: false,
      modalForm: {
        courseId: "",
        courseCode: "",
        courseName: "",
        paperName: "",
        genNumber: 1,
        topicRepeat: false,
        genModelType: "auto",
      },
      rules: {
        paperName: [
          {
            required: true,
            message: "请输入试卷名称",
            trigger: "change",
          },
          {
            max: 100,
            message: "试卷名称不能超过100个字",
            trigger: "change",
          },
        ],
        genNumber: [
          {
            required: true,
            message: "请输入组卷套数",
            trigger: "change",
          },
        ],
      },
      modelTypes: [
        {
          code: "simple",
          name: "简易成卷",
        },
        {
          code: "auto",
          name: "自动成卷",
        },
        {
          code: "manual",
          name: "手动组卷",
        },
      ],
    };
  },
  computed: {
    buildCompName() {
      return `build-paper-${this.modalForm.genModelType}`;
    },
  },
  created() {
    this.modalForm.courseId = this.$route.params.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 paperSet = this.$refs.BuildPaperDetail.getData();
      const datas = {
        ...this.modalForm,
        paperSet,
      };
      const res = await buildPaperApi(datas).catch(() => {});
      this.loading = false;
      if (!res) return;

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