<template> <div class="card-config-prop-edit"> <el-button @click="drawer = true" type="primary"> 配置题卡信息 </el-button> <el-drawer title="配置题卡信息" :visible.sync="drawer" :with-header="false" append-to-body > <div style="padding: 20px"> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="学校名称"> <el-input v-model="form.schoolName" @change="editChange"> </el-input> </el-form-item> <el-form-item label="考号类型"> <el-select v-model="form.examNumberStyle" placeholder="请选择学生考号类型" @change="editChange" > <el-option v-for="item in examNumberStyleOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> <el-form-item label="AB卷类型"> <el-select v-model="form.aOrBType" placeholder="请选择AB卷类型" @change="editChange" > <el-option v-for="item in aOrBTypeOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> <el-form-item> <el-checkbox v-model="form.aOrB" @change="editChange" >启用AB卷</el-checkbox > </el-form-item> <el-form-item> <el-checkbox v-model="form.examAbsent" @change="editChange" >启用缺考和涂填提示</el-checkbox > </el-form-item> <el-form-item> <el-checkbox v-model="form.writeSign" @change="editChange" >启用手写签名</el-checkbox > </el-form-item> <el-form-item> <el-checkbox v-model="form.showForbidArea" @change="editChange" >启用禁填区</el-checkbox > </el-form-item> </el-form> </div> </el-drawer> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import { objAssign } from "../plugins/utils"; export default { name: "card-config-prop-edit", data() { return { examNumberStyleOptions: [ { label: "自动条码", value: "auto" }, { label: "手动条码", value: "empty" }, { label: "手动涂填", value: "fill" } ], aOrBTypeOptions: [ { label: "自动条码", value: "auto" }, { label: "手动涂填", value: "fill" } ], drawer: false, form: { schoolName: "河南财经政法大学", examNumberStyle: "fill", aOrBType: "auto", aOrB: true, examAbsent: true, writeSign: true, showForbidArea: true } }; }, computed: { ...mapState("card", ["cardConfig"]) }, watch: { cardConfig(val) { this.form = objAssign(this.form, val); } }, methods: { ...mapMutations("card", ["setCardConfig"]), editChange() { this.setCardConfig({ ...this.form }); } } }; </script> <style lang="scss"> .card-config-prop-edit { display: inline-block; } </style>