union-question-web/src/modules/card/components/ModifyCardRule.vue

<template>
  <div>
    <el-dialog
      class="modify-card-rule"
      :visible.sync="modalIsShow"
      :title="title"
      top="10px"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @open="visibleChange"
    >
      <el-form
        ref="modalFormComp"
        label-width="130px"
        :rules="rules"
        :model="modalForm"
        :key="modalForm.id"
      >
        <el-form-item prop="name" label="题卡规则名称：">
          <el-input
            v-model.trim="modalForm.name"
            placeholder="建议不超过30个字，规则名称不允许重复"
            style="width: 100%"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="modeType" label="模板选择：">
          <el-radio-group
            v-model="modalForm.modeType"
            :disabled="isEdit"
            @change="modeTypeChange"
          >
            <el-radio label="POSTGRADUATE">研究生题卡模板</el-radio>
            <el-radio label="EDUCATIONAL">教务处题卡模板A3</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="IS_EDUCATIONAL_MODE">
          <el-form-item
            prop="examNumberStyle"
            label="学号版式："
            class="inline-block"
          >
            <el-select
              v-model="modalForm.examNumberStyle"
              placeholder="请选择"
              @change="numStyleChange"
            >
              <el-option
                v-for="(val, key) in EXAM_NUMBER_STYLE"
                :key="key"
                :value="key"
                :label="val"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="modalForm.examNumberStyle === 'FILL'"
            prop="examNumberDigit"
            label="学号位数："
            class="inline-block"
          >
            <el-input-number
              v-model="modalForm.examNumberDigit"
              :min="5"
              :max="15"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="modalForm.examAbsent"
              >启用“缺考填涂”</el-checkbox
            >
            <el-checkbox v-model="modalForm.discipline"
              >启用“违纪填涂”</el-checkbox
            >
          </el-form-item>
          <el-form-item prop="studentFields" label="考生信息设置：">
            <el-input
              v-model.trim="modalForm.studentFields"
              clearable
            ></el-input>
            <p class="tips-info">
              提示：填写字段名，字段间用","隔开，例如：姓名,学号,班级。
            </p>
          </el-form-item>
        </template>
        <el-form-item prop="title" label="题卡正标题：">
          <el-input v-model.trim="modalForm.title" clearable></el-input>
        </el-form-item>
        <el-form-item prop="subTitle" label="题卡副标题：">
          <el-input v-model.trim="modalForm.subTitle" clearable></el-input>
        </el-form-item>
        <el-form-item prop="attention" label="注意事项：">
          <el-input
            type="textarea"
            :rows="4"
            v-model="modalForm.attention"
          ></el-input>
          <p class="tips-info">
            提示：换行之后，题卡注意事项会展示为多条内容，内容序号会被自动添加。
          </p>
        </el-form-item>
        <el-form-item prop="objectiveAttention" label="客观题注意事项：">
          <el-input v-model.trim="modalForm.objectiveAttention"></el-input>
        </el-form-item>
        <el-form-item prop="subjectiveAttention" label="主观题注意事项：">
          <el-input v-model.trim="modalForm.subjectiveAttention"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button type="primary" :disabled="isSubmit" @click="submit"
          >确认</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { EXAM_NUMBER_STYLE } from "../enumerate";
import { cardHeadDetailApi, cardHeadUpdateApi } from "../api";

const initModalForm = {
  id: null,
  name: "",
  modeType: "EDUCATIONAL",
  pageSize: "A3",
  examNumberStyle: "",
  examNumberDigit: 10,
  examAbsent: true,
  discipline: true,
  studentFields: "",
  title: "",
  subTitle: "",
  attention: "",
  objectiveAttention: "",
  subjectiveAttention: "",
};

export default {
  name: "modify-card-rule",
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    isEdit() {
      return !!this.instance.id;
    },
    title() {
      return (this.isEdit ? "编辑" : "新增") + "题卡规则";
    },
    IS_EDUCATIONAL_MODE() {
      return this.modalForm.modeType === "EDUCATIONAL";
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      modalForm: { ...initModalForm },
      EXAM_NUMBER_STYLE,
      rules: {
        name: [
          {
            required: true,
            message: "题卡规则名称不能超过30个字",
            max: 30,
            trigger: "change",
          },
        ],
        modeType: [
          {
            required: true,
            message: "请选择模板",
            trigger: "change",
          },
        ],
        examNumberStyle: [
          {
            required: true,
            message: "请选择学号版式",
            trigger: "change",
          },
        ],
        examNumberDigit: [
          {
            required: true,
            message: "请输入学号位数",
            trigger: "change",
          },
        ],
        studentFields: [
          {
            required: true,
            message: "请输入考生信息设置",
            trigger: "change",
          },
          {
            validator: (rule, value, callback) => {
              const vals = value.split(/,|，/);
              if (vals.length > 10) {
                return callback(new Error("最多只能输入10个字段名"));
              }
              if (vals.some((val) => val.length > 8)) {
                return callback(new Error("每个字段名最多只能输入8字符"));
              }
              return callback();
            },
            trigger: "change",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入题卡正标题",
            trigger: "change",
          },
          {
            message: "题卡正标题不能超过26个字",
            max: 26,
            trigger: "change",
          },
        ],
        subTitle: [
          {
            required: false,
            message: "题卡副标题不能超过40个字",
            max: 40,
            trigger: "change",
          },
        ],
        attention: [
          {
            required: true,
            message: "请输入注意事项",
            trigger: "change",
          },
          {
            validator: (rule, value, callback) => {
              const val = value.replace(/\n/g, "");
              if (val.length > 200) {
                callback(new Error("注意事项最多只能输入200个字符"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        objectiveAttention: [
          {
            required: false,
            message: "请输入客观题注意事项",
            trigger: "change",
          },
          {
            max: 40,
            message: "客观题注意事项最多只能输入40个汉字",
            trigger: "change",
          },
        ],
        subjectiveAttention: [
          {
            required: false,
            message: "请输入主观题注意事项",
            trigger: "change",
          },
          {
            max: 40,
            message: "主观题注意事项最多只能输入40个汉字",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    async initData(val) {
      if (val.id) {
        const res = await cardHeadDetailApi(val.id);
        this.modalForm = this.$objAssign(initModalForm, res.data);
      } else {
        this.modalForm = this.$objAssign(initModalForm, val);
      }
      this.modalForm.examNumberDigit =
        this.modalForm.examNumberDigit || initModalForm.examNumberDigit;
    },
    visibleChange() {
      this.initData(this.instance);

      this.$nextTick(() => {
        this.$refs.modalFormComp.clearValidate();
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    modeTypeChange(val) {
      if (val === "POSTGRADUATE") {
        this.modalForm.pageSize = "8K";
        this.modalForm.examAbsent = false;
        this.modalForm.discipline = false;
        this.modalForm.studentFields = "";
      } else {
        this.modalForm.pageSize = "A3";
        this.modalForm.examAbsent = true;
        this.modalForm.discipline = true;
      }
    },
    numStyleChange() {
      if (this.modalForm.examNumberStyle !== "FILL") {
        this.modalForm.examNumberDigit = 10;
      }
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await cardHeadUpdateApi(this.modalForm).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      this.$message.success("保存成功！");
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>