Element formDialog 二次封装

formDialog 封装没有那么多心路历程,需要注意的比如:select 获取后端返的数据时候赋值,可能需要注意

	axios("").then(res=>{
	this.roleList = res.data.data.role_list;
	      this.searchForm.forEach(item => {
        if (item.props && item.props.length === 0) {
          item.props = this.roleList;
        }
      });
    })

通过如上方式,获取到后端的 select 数组,从父组件 发给子组件.如下代码所示,

        {
          type: "Select",
          label: "管理协议",
          prop: "protocol",
          width: "120px",
          props: [],
          change: row => {
            this.selectVal(row);
          },
          isFormItemShow: true
        },

子组件:

<template>
  <div class="ces-search">
    <el-dialog
      :title="newFormEditType === 'edit' ? '编辑' :(newFormEditType === 'add' ? '添加' : '设置')"
      :visible.sync="dialogFormVisible"
      :before-close="handleFormModalCancel"
      :width="formEditType === 'set' ? '400px' : '760px'"
      customClass="modalClass roleClass"
    >
      <el-form
        :size="size"
        inline
        :label-width="labelWidth"
        :model="searchData"
        ref="searchData"
        :rules="rules"
        class="formClass"
      >
        <template v-for="item in searchForm">
          <el-form-item
            v-if="item.isFormItemShow"
            :label="item.label"
            :key="item.prop"
            :prop="item.prop"
            :label-width="item.width"
          >
            <!-- input -->
            <el-input
              v-if="item.type==='Input'"
              v-model="searchData[item.prop]"
              size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
            ></el-input>
            <!-- select -->
            <el-select
              v-if="item.type==='Select'"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder"
              size="small"
              @change="item.change(searchData[item.prop])"
            >
              <el-option
                v-for="op in item.props"
                :label="op.label"
                :value="op.value"
                :key="op.value"
              ></el-option>
            </el-select>
            <!-- textarea-->
            <el-input
              v-if="item.type==='TextArea'"
              v-model="searchData[item.prop]"
              type="textarea"
              size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
            ></el-input>
            <!--tree-->
            <el-tree
              v-if="item.type==='Tree'"
              ref="tree"
              :data="item.props"
              show-checkbox
              default-expand-all
              node-key="id"
              highlight-current
              :props="defaultProps"
              :default-checked-keys="checkedDedault"
              @check-change="getCheckedKeys"
            />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleFormModalCancel('searchData')">取 消</el-button>
        <el-button type="primary" @click="handleFormModalOk('searchData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    rules: {
      type: Object,
      default: {}
    },
    labelWidth: {
      type: String,
      default: "100px"
    },
    size: {
      type: String,
      default: "small"
    },
    searchForm: {
      type: Array,
      default: []
    },
    searchData: {
      type: Object,
      default: {}
    },
    formEditType: {
      type: String,
      default: "add"
    },
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    checkedDedault: {
      type: Array
    }
  },
  data() {
    return {
      newDialogFormVisible: false,
      newFormEditType: "",
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  watch: {
    formEditType: {
      handler(newVal, oldVal) {
        this.newFormEditType = newVal;
      }
    },

    dialogFormVisible: {
      handler(newVal, oldVal) {
        this.newDialogFormVisible = newVal;
      }
    }
  },

  methods: {
    handleFormModalOk(searchData) {
      this.$refs.searchData.validate(valid => {
        if (valid) {
          this.$emit("validateTrue", searchData);
          this.$refs.searchData.resetFields();
        } else {
          this.$emit("validateFalse", searchData);
        }
      });
    },
    handleFormModalCancel(searchData) {
      this.newDialogFormVisible = false;
      this.$refs.searchData.resetFields();
      this.$emit("closeDialogFunc", this.newDialogFormVisible);
    },
    getCheckedKeys(data, checked, indeterminate) {
      var roleTemp = [];
      var roleArr = this.$refs.tree[0]
        .getHalfCheckedKeys()
        .concat(this.$refs.tree[0].getCheckedKeys());

      for (var i = 0; i < roleArr.length; i++) {
        roleTemp.push({ id: roleArr[i] });
      }
      this.$emit("getCheckedKeys", roleTemp);
    }
  }
};
</script>
<style lang="scss">
.el-input__inner {
  width: 200px;
}
</style>

父组件:

<lllsjFormDialog
      :rules="rules"
      :dialogFormVisible="dialogFormVisible"
      :formEditType="formEditType"
      :searchData="authgroupForm"
      :searchForm="searchForm"
      @validateTrue="validateTrue"
      @validateFalse="validateFalse"
      @closeDialogFunc="closeDialog"
    ></lllsjFormDialog>
	rules: {
        auth_group_name: [
          { required: true, message: "请输入授权组名称", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        enable_password: [
          { required: true, message: "请输入管理名称", trigger: "blur" }
        ],
        protocol: [
          { required: true, message: "请选择管理协议", trigger: "blur" }
        ],
        port: [{ required: true, message: "请输入管理端口", trigger: "blur" }]
      },
      authgroupForm: {
        auth_group_name: "",
        enable_password: "",
        protocol: "",
        port: "",
        username: "",
        password: "",
        description: ""
      },
      searchForm: [
        {
          type: "Input",
          label: "授权组名称",
          prop: "auth_group_name",
          width: "120px",
          disabled: true,
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "姓名",
          prop: "username",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "密码",
          prop: "password",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "password",
          prop: "enable_password",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Select",
          label: "管理协议",
          prop: "protocol",
          width: "120px",
          props: [],
          change: row => {
            this.selectVal(row);
          },
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "管理端口",
          prop: "port",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "TextArea",
          label: "描述",
          prop: "description",
          width: "120px",
          isFormItemShow: true
        }
      ],
	validateTrue() {
      if (this.formEditType === "edit") {
        this._handleEdit();
      } else if (this.formEditType === "add") {
        this._handleAdd();
      }
      this.dialogFormVisible = false;
    },
    validateFalse() {
      this.dialogFormVisible = true;
    },
    closeDialog(newDialogFormVisible) {
      this.dialogFormVisible = newDialogFormVisible;
    },