union-question-web/src/modules/paper-export/components/PaperBuildConfig.vue

<template>
  <div class="paper-build-config">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      size="small"
      inline
    >
      <el-form-item label="页数模式：">
        <el-radio-group v-model="modalForm.pageCountMode" style="width: 160px">
          <el-radio-button label="SIMPLE">单页</el-radio-button>
          <el-radio-button label="DOUBLE">双页</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="modalForm.showDetailNo"
          >是否显示大题序号</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="modalForm.showDetailScoreInfo"
          >是否显示大题分值说明</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="modalForm.showDetailScoreTable"
          >是否显示大题给分板</el-checkbox
        >
      </el-form-item>
      <br />

      <el-form-item
        v-for="item in sources"
        :key="item.field"
        :label="`${item.name}：`"
        :prop="item.field"
      >
        <el-radio-group
          v-if="item.options"
          v-model="modalForm[item.field]"
          style="width: 100px"
        >
          <el-radio-button
            v-for="option in item.options"
            :key="option"
            :label="option"
          ></el-radio-button>
        </el-radio-group>
        <el-input
          v-else
          v-model.trim="modalForm[item.field]"
          maxlength="5"
          :placeholder="`请输入${item.name}`"
        >
          <span v-if="item.unit" slot="append">{{ item.unit }}</span>
        </el-input>
      </el-form-item>
      <el-form-item v-if="showConfirmBtn">
        <el-button type="primary" @click="confirm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const initModalForm = {
  showDetailNo: true,
  showDetailScoreInfo: true,
  showDetailScoreTable: false,
  pageCountMode: "SIMPLE",
};

export default {
  name: "PaperBuildConfig",
  props: {
    configSources: {
      type: Array,
      default() {
        return [];
      },
    },
    showConfirmBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modalForm: {
        ...initModalForm,
      },
      rules: {},
      sources: [],
    };
  },
  watch: {
    configSources: {
      immediate: true,
      handler() {
        this.initModalForm();
      },
    },
  },
  methods: {
    initModalForm() {
      let modalForm = { ...initModalForm };
      let rules = {};
      this.sources = this.configSources.filter((item) => item.enable);
      this.sources.forEach((item) => {
        modalForm[item.field] = "";
        rules[item.field] = {
          required: true,
          message: `请设置${item.name}`,
          trigger: "change",
        };
      });
      this.modalForm = modalForm;
      this.rules = rules;
    },
    checkData() {
      return this.$refs.modalFormComp.validate();
    },
    getData() {
      return { ...this.modalForm };
    },
    async confirm() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;
      this.$emit("confirm", this.getData());
    },
  },
};
</script>