mvue_fkl/src/components/form/element-ui/universal/index.vue

<template lang="pug">
  div.comp
    el-drawer(:title="title" :visible.sync="isShow"  direction="rtl" :size="sizeDrawer" @open="resetForm")
      el-form(size="small" :inline="true" :model="formData" :rules="formRules" ref="domForm" :label-width="wLabel")
        //- 表单录入组件规则, 动态 [字段, 占位符, ....]
        el-form-item(v-for="origin of originForm" :key="origin.prop" :label="origin.label" :prop="origin.prop")
          slot(v-if="origin.slot" :name="origin.slot")
          el-date-picker(v-else-if="origin.date" v-model="formData[origin.prop]" :disabled="origin.disabled" :type="origin.date.type" :value-format="origin.date.format" :placeholder="origin | formatPlaceholder('请选择')")
          el-select(v-else-if="origin.options" v-model="formData[origin.prop]" :disabled="origin.disabled" :placeholder="origin | formatPlaceholder('请选择')")
            el-option(v-for="option in origin.options" :key="option.value" :label="option.label" :value="option.value")
          el-input(v-else v-model="formData[origin.prop]" :type="origin.type"  :disabled="origin.disabled" :placeholder="origin | formatPlaceholder('请输入')")
            template(slot="append" v-if="origin.unit")
              span {{ origin.unit }}
        div.comp-form-oper
          el-button(type="primary" size="small" @click="submitForm") {{ editData ? "修改" : "新增" }}
          el-button(type="plain" size="small" @click="resetForm") 重置
</template>

<script>
export default {
  name: "drawer-form",
  props: {
    showForm: Boolean,
    title: String,
    // drawer 宽度
    sizeDrawer: {
      type: String,
      default: "50%"
    },
    // form 录入组件标题
    wLabel: {
      type: String,
      default: "140px"
    },
    // form 原始数据
    originForm: Array,
    // form 编辑对象
    editData: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      formData: {}, // 表单数据
      formRules: {}, // 验证规则
      resetData: {} // 重置对象
    };
  },
  computed: {
    isShow: {
      set(val) {
        this.$emit("update:showForm", val); // 只抛出不记录
      },
      get() {
        return this.showForm;
      }
    }
  },
  watch: {},
  filters: {
    formatPlaceholder(origin, preDef) {
      return origin.place ? origin.place : preDef + origin.label;
    }
  },
  created() {
    // 格式化数据源
    const formRules = {};
    const formReset = this.originForm.reduce((acc, cur) => {
      formRules[cur.prop] = cur.rule;
      acc[cur.prop] = cur.value;
      return acc;
    }, {});
    this.resetData = formReset;
    this.formRules = formRules;
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["domForm"].validate(valid => {
        if (!valid) return;
        this.isShow = false;
        this.$emit("handleSubmit", this.formData);
      });
    },
    resetForm() {
      if (this.$refs["domForm"]) {
        this.$refs["domForm"].resetFields();
      }
      this.formData = Object.assign({}, this.resetData, this.editData);
    }
  }
};
</script>

<style scoped lang="stylus">
.comp
  .el-input
    width 200px
  &-form-oper
    margin-top 70px
    text-align center
    .el-button
      margin 0 15px
      width: 40%
</style>