vue3+element plus新增和编辑表单的封装

目前仅支持，input,select和日期选择器控件，后期如果想要加什么控件可自行添加

1.下面是子组件的js部分

<script setup lang="ts">

import { reactive, ref } from 'vue'
import { defineEmits, defineProps, computed } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const props = defineProps({
    //控制 dialog 显示
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    //标题内容
    title: {
        type: String,
        default: '弹出框标题'
    },
    modelValue: {
        type: Object,
        required: true,
    },
    rules: {
        type: Object,
        required: false,
    },
    formConfigefArr: {
        type: Array,
        required: true,
    },
})
const emit = defineEmits(['update:dialogFormVisible', 'update:modelValue', 'reset', 'onSubmit'])
const is_Show = computed({
    get: () => props.dialogFormVisible,
    set: (val) => {
        emit("update:dialogFormVisible", val);
    },
});
const formLabelWidth = '140px';
const formRef = ref<FormInstance>();
const formState = computed({
    get() {
        return new Proxy(props.modelValue, {
            set(obj, name, val) {
                console.log('emit', obj, name, val, props.modelValue)
                emit('update:modelValue', {
                    ...obj,
                    [name]: val
                })
                return true;
            }
        })
        // return props.modelValue
    },
    set(val) {
        emit('update:modelValue', val)
    }
})

const onSubmit = (formRef) => {
    if (!formRef) return
    formRef.validate().then(() => {
        console.log('提交的数据为', formState)
        emit('onSubmit')
    }).catch((e) => {
        console.log(e)
    })

}
const reset = () => {
    formRef.value.clearValidate();
    emit('reset')
}
</script>

2.下面是子组件的dom部分

<template>
    <client-only>
        <el-dialog v-model="is_Show" :title="props.title" width="500px">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.name" type="textarea" />
            </el-form-item>
            <el-form-item label="楼层数" :label-width="formLabelWidth">
                <el-input-number v-model="num" :control="false" />
            </el-form-item>
            <el-form-item label="最低楼层" :label-width="formLabelWidth">
                <el-input-number v-model="num" :control="false" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="is_Show = false">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    </client-only>
</template>

3.父组件中引用

<MyForm v-model:dialogFormVisible="isShowForm" title="新增用户"  v-model:modelValue="saveForm" :formConfigefArr="formConfigefArr" :rules="rules" @onSubmit="onSubmit"  @reset="resetForm" />

4.父组件中的js配置部分

const rules = reactive({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  
});
const saveForm = ref({
    name: 'sunyanting',
    account: 'ddd',
    password: 'rtrt',
    permissionCategory: '',
    dataCenterId:'1',
    userCenterIds:'',
})
const formConfigefArr = ref([
{
    key: 'name',
    title: '名称',
    type: 'input',
    placeholder: '请输入名称',
  },
  {
    key: 'account',
    title: '账号',
    type: 'input',
    placeholder: '请输入账号',
  },
  {
    key: 'password',
    title: '密码',
    type: 'input',
    placeholder: '请输入密码',
  },
  {
    key: 'permissionCategory',
    title: '权限类型',
    type: 'select',
    mode: 'multiple',
    placeholder: '请选择权限类型',
    options: [
    {label:'全县已',value:'1'},
    {label:'全县已2',value:'2'},
    {label:'全县已3',value:'3'},
    ],
  },
  {
    key: 'dataCenterId',
    title: '数据中心',
    type: 'select',
    // mode: '',
    placeholder: '请选择数据中心',
    options: [
    {label:'全县已',value:'1'},
    {label:'全县已2',value:'2'},
    {label:'全县已3',value:'3'},
    ],
  },
  {
    key: 'userCenterIds',
    title: '用户中心',
    type: 'select',
    // mode: '',
    placeholder: '请选择用户中心',
    options: [],
  },
])
// 重置
const resetForm = () => {
  saveForm.value.name = ''
  saveForm.value.account = ''
  saveForm.value.password = ''
  saveForm.value.permissionCategory = ''
  saveForm.value.dataCenterId = ''
  saveForm.value.userCenterIds = ''
};
const onSubmit=()=>{
  console.log('parent-----',saveForm)
  // TODO调用新增或者修改的接口
}