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

<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.missAndFill" @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,
        missAndFill: 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>