vue3中FormCreate封装

1.全局注册使用

2.

<template>

    <div class="dialog-form-wrap">

        <el-dialog :title="dialogTitle" v-model="dialogShow" @opened="openedDialog" @close="closeDialog" :width="width">

            <form-create v-model="formModelData" v-model:api="fApi" :rule="formModel.formItems" :option="formModel.formOption"></form-create>

            <template #footer>

                <div class="dialog-footer">

                    <el-button class="cancel_btn" @click="onCancel" size="small">{{ $t('message.form.cancel') }}</el-button>

                    <el-button class="search_btn" type="primary" @click="onSubmit" size="small">{{ $t('message.form.submit') }}</el-button>

                </div>

            </template>

        </el-dialog>

    </div>

</template>

<script lang="ts">

import { reactive, ref, toRefs, getCurrentInstance, computed } from 'vue';

import { useRoute } from 'vue-router';

import { ElMessage } from 'element-plus';

import { comApi } from '/@/api/common/index';

import { useStore } from '/@/store/index';

import _ from 'lodash';

export default {

    name: 'systemEditForm',

    components: {

        Editor,

    },

    props: {

        width: { type: String, default: '769px' },

        dialogShow: {

            type: Boolean,

            default: false,

        },

        formDisabled: {

            type: Boolean,

            default: false,

        },

        dialogFooterShow: {

            type: Boolean,

            default: true,

        },

        dialogTitle: {

            type: String,

            default: '表单操作',

        },

        formConfig: {

            type: Object,

        },

        formActionType: {

            type: String,

            default: '',

        },

        formModelData: {

            type: Object,

        },

    },

    emits: ['dialogOpened', 'dialogClose'],

    setup(props, { emit }) {

        const route = useRoute();

        const { proxy } = getCurrentInstance() as any;

        const formRef = ref();

        const projectRef = ref();

        const store = useStore();

        const state: any = reactive({

            //实例对象

            fApi: {},

            formModel: _.cloneDeep(props.formConfig),

            timer: '',

        });

        // 编辑

        const onSubmit = () => {

            console.log('操作类型', props.formActionType, state.fApi);

            state.fApi.validate((valid: Boolean) => {

                console.log('表单验证', valid);

                if (valid) {

                    state.fApi.submit((formData: Object) => {

                        console.log(formData, '编辑编辑');

                        formData.coverDescribe = props.formModelData.coverDescribe;

                        formData.projdesc = props.formModelData.projdesc;

                        formData.introduction = props.formModelData.introduction;

                        switch (props.formActionType) {

                            case 'add':

                                comApi({ url: props.formConfig.formApi.save.url, method: props.formConfig.formApi.save.method, data: formData })

                                    .then(async (res: any) => {

                                        ElMessage.success(res.message);

                                        proxy.mittBus.emit('onTagsViewRefreshRouterView', route.fullPath);

                                        closeDialog();

                                    })

                                    .catch((err) => {});

                                break;

                            case 'edit':

                                comApi({ url: props.formConfig.formApi.update.url, method: props.formConfig.formApi.update.method, data: formData })

                                    .then(async (res: any) => {

                                        ElMessage.success(res.message);

                                        proxy.mittBus.emit('onTagsViewRefreshRouterView', route.fullPath);

                                        closeDialog();

                                    })

                                    .catch((err) => {});

                                break;

                        }

                    });

                }

            });

        };

        //打开弹窗

        const openedDialog = () => {

            // console.log(props.formModelData, 13456);

            state.timer = new Date().getTime();

            //state.fApi.updateRules(state.formModel.formItems);

            emit('dialogOpened', state.fApi);

        };

        // 关闭弹窗

        const closeDialog = () => {

            //state.fApi.resetFields();

            state.fApi.clearValidateState();

            console.log('表单重设');

            state.timer = new Date().getTime();

            emit('dialogClose', false);

        };

        // 取消

        const onCancel = () => {

            closeDialog();

        };

        return {

            formRef,

            onSubmit,

            openedDialog,

            closeDialog,

            onCancel,

            projectRef,

            ...toRefs(state),

        };

    },

};

</script>