teachcloud-print-web/card/components/CardConfigPropEdit.vue

<template>
  <div class="card-config-prop-edit">
    <el-button @click="open" type="primary"> 配置题卡规则 </el-button>
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      append-to-body
      :close-on-press-escape="false"
      :size="820"
      class="card-config-drawer"
    >
      <div class="card-config-edit">
        <div class="card-config-header">
          <h2>配置题卡规则</h2>
        </div>
        <div class="card-config-body">
          <el-form
            ref="modalFormComp"
            label-width="130px"
            :rules="rules"
            :model="modalForm"
          >
            <el-form-item
              prop="examNumberStyle"
              label="考号版式："
              class="inline-block"
            >
              <el-select
                v-model="modalForm.examNumberStyle"
                style="width: 142px"
                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
              prop="fillNumber"
              label="考号位数："
              class="inline-block"
            >
              <el-input-number
                v-if="modalForm.examNumberStyle === 'FILL'"
                v-model="modalForm.fillNumber"
                :min="5"
                :max="15"
                :step="1"
                step-strictly
                :controls="false"
                style="width: 100px"
              ></el-input-number>
              <span v-else>
                {{ modalForm.fillNumber }}
              </span>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="modalForm.examAbsent"
                >启用“缺考填涂”</el-checkbox
              >
              <el-checkbox v-model="modalForm.discipline"
                >启用“违纪填涂”</el-checkbox
              >
              <el-checkbox
                v-model="modalForm.writeSign"
                :disabled="modalForm.examNumberStyle === 'FILL'"
                >启用“手写签名”</el-checkbox
              >
            </el-form-item>
            <div class="part-box part-box-pad part-box-border">
              <h4 class="part-box-tips">题卡版头变量印刷字段配置：</h4>
              <el-form-item label="必选字段：" label-width="115px" required>
                <el-checkbox
                  v-for="column in modalForm.requiredFields"
                  :key="column.code"
                  v-model="column.enable"
                  disabled
                  >{{ column.name }}</el-checkbox
                >
              </el-form-item>
              <el-form-item label="扩展字段：" label-width="115px">
                <el-checkbox
                  v-for="column in modalForm.extendFields"
                  :key="column.code"
                  v-model="column.enable"
                  >{{ column.name }}</el-checkbox
                >
              </el-form-item>
              <el-form-item
                v-if="
                  deletedField.requiredFields.length ||
                  deletedField.extendFields.length
                "
                label="通用规则已删除字段："
                label-width="160px"
              >
                <el-checkbox
                  v-for="column in deletedField.requiredFields"
                  :key="column.code"
                  v-model="column.enable"
                  >{{ column.name }}</el-checkbox
                >
                <el-checkbox
                  v-for="column in deletedField.extendFields"
                  :key="column.code"
                  v-model="column.enable"
                  >{{ column.name }}</el-checkbox
                >
              </el-form-item>
            </div>
            <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="modalForm.objectiveAttention"></el-input>
            </el-form-item>
            <el-form-item prop="subjectiveAttention" label="主观题注意事项：">
              <el-input v-model="modalForm.subjectiveAttention"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="card-config-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { objAssign } from "../plugins/utils";
import { EXAM_NUMBER_STYLE, PAPER_TYPE } from "@/constants/enumerate";
import { examRuleDetail, getEnums } from "@/modules/base/api";

const initModalForm = {
  examNumberStyle: "",
  fillNumber: 10,
  paperType: "PRINT",
  examAbsent: true,
  discipline: true,
  writeSign: true,
  requiredFields: [],
  extendFields: [],
  attention: "",
  objectiveAttention: "",
  subjectiveAttention: "",
};

export default {
  name: "card-config-prop-edit",
  data() {
    return {
      modalForm: { ...initModalForm },
      deletedField: {
        requiredFields: [],
        extendFields: [],
      },
      EXAM_NUMBER_STYLE,
      PAPER_TYPE,
      drawer: false,
      rules: {
        examNumberStyle: [
          {
            required: true,
            message: "请选择考号版式",
            trigger: "change",
          },
        ],
        fillNumber: [
          {
            required: true,
            message: "请输入考号位数",
            trigger: "change",
          },
        ],
        paperType: [
          {
            required: true,
            message: "请选择AB卷版式",
            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: 26,
            message: "客观题注意事项最多只能输入26个汉字",
            trigger: "change",
          },
        ],
        subjectiveAttention: [
          {
            required: false,
            message: "请输入主观题注意事项",
            trigger: "change",
          },
          {
            max: 26,
            message: "主观题注意事项最多只能输入26个汉字",
            trigger: "change",
          },
        ],
      },
      examRule: {},
    };
  },
  computed: {
    ...mapState("card", ["cardConfig"]),
  },
  mounted() {
    this.getExamRule();
  },
  methods: {
    ...mapMutations("card", ["setCardConfig"]),
    ...mapActions("card", ["rebuildPages"]),
    async getExamRule() {
      const examRequiredFields = await getEnums("REQUIRED_FIELDS");
      const cardRequiredFields = await getEnums("CARD_REQUIRED_FIELDS");
      const cardRequiredFieldCodes = cardRequiredFields.map(
        (item) => item.code
      );
      const extendFields = examRequiredFields
        .filter(
          (field) =>
            !cardRequiredFieldCodes.includes(field.code) && field.enable
        )
        .map((item) => {
          return {
            code: item.code,
            name: item.name,
          };
        });
      let examRule = await examRuleDetail();
      const cardExtendFields = [
        ...extendFields,
        ...JSON.parse(examRule.extendFields).filter((item) => item.enable),
      ];

      this.examRule = {
        requiredFields: cardRequiredFields.map((item) => {
          return {
            code: item.code,
            name: item.name,
            enable: true,
          };
        }),
        extendFields: cardExtendFields.map((item) => {
          return {
            code: item.code,
            name: item.name,
            enable: false,
          };
        }),
      };
    },
    initData() {
      this.modalForm = objAssign(initModalForm, this.cardConfig);
      this.updateField("requiredFields");
      this.updateField("extendFields");
    },
    updateField(type) {
      const examRuleFieldCodes = this.examRule[type].map((item) => item.code);
      this.deletedField[type] = this.modalForm[type].filter(
        (field) => !examRuleFieldCodes.includes(field.code)
      );
      this.modalForm[type] = this.modalForm[type].filter((field) =>
        examRuleFieldCodes.includes(field.code)
      );
      const modalFormFieldCodes = this.modalForm[type].map((item) => item.code);
      this.examRule[type].forEach((field) => {
        if (modalFormFieldCodes.includes(field.code)) return;
        this.modalForm[type].push({ ...field });
      });
    },
    open() {
      this.drawer = true;
      this.initData();
    },
    cancel() {
      this.drawer = false;
    },
    numStyleChange() {
      this.modalForm.writeSign = this.modalForm.examNumberStyle !== "FILL";
      if (this.modalForm.examNumberStyle !== "FILL") {
        this.modalForm.examNumberDigit = 10;
      }
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      const data = { ...this.modalForm };
      this.deletedField.requiredFields.forEach((item) => {
        if (item.enable) {
          data.requiredFields.push({ ...item });
        }
      });
      this.deletedField.extendFields.forEach((item) => {
        if (item.enable) {
          data.extendFields.push({ ...item });
        }
      });

      this.setCardConfig(data);
      this.cancel();

      this.$nextTick(() => {
        this.rebuildPages();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card-config-edit {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-config-header {
  padding: 15px 20px;
  line-height: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.card-config-body {
  flex: 1;
  padding: 15px 20px;
}
.card-config-footer {
  padding: 15px 20px;
  text-align: right;
}
</style>