<template> <div class="rule-sign part-box part-box-pad"> <h4 class="part-box-tips">签到表字段配置:</h4> <el-form ref="modalFormComp" :model="modalForm" :rules="rules" label-width="170px" > <el-form-item prop="basic" label="签到表表头字段:"> <rule-field-edit v-model="modalForm.basic" :data="basicSources" @change="validateField('basic')" ></rule-field-edit> </el-form-item> <el-form-item prop="table" label="签到表考生信息字段:"> <rule-field-edit v-model="modalForm.table" :data="tableSources" @change="validateField('table')" ></rule-field-edit> </el-form-item> <el-form-item> <el-button type="primary" :disabled="isSubmit" style="width: 140px" @click="submit" >保存</el-button > </el-form-item> </el-form> </div> </template> <script> import { examRuleDetail, saveExamRule } from "../api"; import RuleFieldEdit from "./RuleFieldEdit.vue"; export default { name: "rule-sign", components: { RuleFieldEdit }, data() { return { isSubmit: false, examRule: {}, basicSources: [], tableSources: [], modalForm: { basic: [], table: [] }, stdInfoCodes: [ "siteNumber", "studentName", "studentCode", "clazzName", "ticketNumber" ], rules: { basic: [ { required: true, validator: (rule, value, callback) => { if (!value || !value.length) { return callback(new Error(`请选择签到表表头字段`)); } callback(); }, trigger: "change" } ], table: [ { required: true, validator: (rule, value, callback) => { if (!value || !value.length) { return callback(new Error(`请选择签到表考生信息字段`)); } callback(); }, trigger: "change" } ] } }; }, mounted() { this.getFields(); }, methods: { async getFields() { const examRule = await examRuleDetail(); this.examRule = examRule; let fields = [...JSON.parse(examRule.requiredFields)]; if (!examRule.extendFields) fields.push(...JSON.parse(examRule.extendFields)); const fieldSources = fields .filter(item => item.enable) .map(item => { return { code: item.code, name: item.name }; }); this.basicSources = fieldSources.filter( item => !this.stdInfoCodes.includes(item.code) ); this.tableSources = fieldSources.filter(item => this.stdInfoCodes.includes(item.code) ); this.modalForm = examRule.signScope ? JSON.parse(examRule.signScope) : { basic: [], table: [] }; }, validateField(field) { this.$refs.modalFormComp.validateField(field, () => {}); }, async submit() { const valid = await this.$refs.modalFormComp.validate().catch(() => {}); if (!valid) return; if (this.isSubmit) return; this.isSubmit = true; this.examRule.signScope = JSON.stringify(this.modalForm); const data = await saveExamRule(this.examRule).catch(() => {}); this.isSubmit = false; if (!data) return; this.$message.success("保存成功!"); } } }; </script>