teachcloud-print-web/src/modules/admin/components/school/SchoolSetPaper.vue

<template>
  <div class="school-set-paper part-box part-box-pad">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="180px"
    >
      <el-form-item prop="pdfSize" label="允许上传试卷规格：">
        <el-checkbox-group v-model="modalForm.pdfSize">
          <el-checkbox v-for="item in sysPdfSize" :key="item" :label="item">{{
            item
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="cardSize" label="答题卡规格：">
        <el-radio-group v-model="modalForm.cardSize">
          <el-radio v-for="item in sysCardSize" :key="item" :label="item">
            <span>{{ item }}</span>
            <span v-if="item === '8K'" style="margin-left: 5px">(255*370)</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="confirm"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  sysPaperSizeList,
  schoolSetPaperInfo,
  schoolSetPaperUpdate,
} from "../../api";

export default {
  name: "school-set-paper",
  props: {
    school: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      modalForm: {
        pdfSize: [],
        cardSize: "",
      },
      sysPdfSize: [],
      sysCardSize: [],
      paperInfo: [],
      rules: {
        pdfSize: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value || !value.length) {
                return callback(new Error(`请选择允许上传试卷规格`));
              }

              callback();
            },
            trigger: "change",
          },
        ],
        cardSize: [
          {
            required: true,
            message: "请选择答题卡规格",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const paperData = await sysPaperSizeList();
      this.sysPdfSize = paperData.result[0].value;
      this.sysCardSize = paperData.result[1].value;
      const data = await schoolSetPaperInfo(this.school.id);
      this.paperInfo = data.result;
      this.modalForm.pdfSize = data.result[0]?.value || [];
      this.modalForm.cardSize = data.result[1]?.value
        ? data.result[1].value[0]
        : "";
    },
    async confirm() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

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

      this.paperInfo[0].value = this.modalForm.pdfSize;
      this.paperInfo[1].value = [this.modalForm.cardSize];
      let datas = { param: this.paperInfo, schoolId: this.school.id };
      const res = await schoolSetPaperUpdate(datas).catch(() => {});
      this.loading = false;

      if (!res) return;

      this.$message.success("修改成功！");
      this.initData();
    },
  },
};
</script>