From a0d9c602c7616a8ce76aab1fc120ed97b2846ae4 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Wed, 29 May 2024 16:55:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=90=E4=BE=9BSimpleForm=E7=9A=84?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=BC=8F=E5=86=99=E6=B3=95=E4=BB=A5=E4=BE=BF?=
 =?UTF-8?q?=E4=BA=8C=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/dev_readme.md                            |   7 +-
 .../SimpleForm/src/SimpleFormSetup.vue        | 696 ++++++++++++++++++
 2 files changed, 700 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SimpleForm/src/SimpleFormSetup.vue

diff --git a/docs/dev_readme.md b/docs/dev_readme.md
index 1be8d56..e0f128d 100644
--- a/docs/dev_readme.md
+++ b/docs/dev_readme.md
@@ -119,7 +119,8 @@ tabStore.closeTab(currentRoute, router);
 </template>
 
 <script>
-import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+// 注意，这里继承的是SimpleFormSetup，使用sciprt setup写法的组件无法继承，必须使用特别的版本
+import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
 import { Col, Form, Row } from 'ant-design-vue';
 import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
 
@@ -127,7 +128,7 @@ const FormItem = Form.Item;
 
 export default {
     components: { Form, Col, SimpleFormItem, Row, FormItem },
-    mixins: [SimpleForm],
+    mixins: [SimpleFormSetup],
     setup(props, ctx) {
         const ret = SimpleForm.setup(props, ctx);
         const schemaMap = {};
@@ -218,7 +219,7 @@ export default {
 <script>
 export default {
     setup(props, ctx) {
-        const ret = SimpleForm.setup(props, ctx);
+        const ret = SimpleFormSetup.setup(props, ctx);
         const schemaMap = {};
         const cascadeData = ref([]);
         const cascadeValue = ref([]);
diff --git a/src/components/SimpleForm/src/SimpleFormSetup.vue b/src/components/SimpleForm/src/SimpleFormSetup.vue
new file mode 100644
index 0000000..a63757c
--- /dev/null
+++ b/src/components/SimpleForm/src/SimpleFormSetup.vue
@@ -0,0 +1,696 @@
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
+            <Row v-bind="getRow">
+                <template v-for="schema in getSchemas" :key="schema.field">
+                    <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
+                        <div v-if="schema?.componentProps.respBreakLine" style="width: 100%; height: 1px"></div>
+                        <template v-if="showComponent(schema) && schema.type !== 'slot'">
+                            <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
+                        </template>
+                        <template v-if="schema.type === 'slot'">
+                            <slot :formModel="formModel" :name="schema.slotName" :schema="schema"></slot>
+                        </template>
+                    </Col>
+                </template>
+            </Row>
+
+            <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+</template>
+<script lang="ts">
+    import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
+    import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
+    import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted, onUnmounted } from 'vue';
+    import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
+    import SimpleFormItem from './components/SimpleFormItem.vue';
+    import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
+    import { arrayValueComponents, defaultValueComponents, staticDataComponents, noFieldComponent, noDefaultValueComponents, noShowWorkFlowComponents, noShowGenerateComponents } from '../../Form/src/helper';
+    import { deepMerge } from '/@/utils';
+    import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+    import type { ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
+    import { defHttp } from '/@/utils/http/axios';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { needDicDefaultValue } from '../../Designer/src/types';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import { camelCaseString } from '/@/utils/event/design';
+
+    const { t } = useI18n();
+    const { notification } = useMessage();
+
+    export default {
+        components: { Form, Row, Col, Modal, SimpleFormItem },
+        props: {
+            // 表单配置规则
+            formProps: {
+                type: Object as PropType<FormProps>
+            },
+            //表单数据
+            formModel: {
+                type: Object as PropType<Recordable>,
+                default: () => {}
+            },
+            //是否是工作流
+            isWorkFlow: {
+                type: Boolean,
+                default: false
+            },
+            //是否系统表单需要转驼峰，兼容旧系统表单
+            isCamelCase: {
+                type: Boolean,
+                default: false
+            },
+            // 自定义监听 用于以编码开发的形式替代json配置中的change事件
+            watches: {
+                type: Array
+            }
+        },
+        emits: ['submit'],
+        setup(props, { attrs, slots, emit, expose }) {
+            const formRef = ref<FormInstance>();
+            const formWrap = ref<HTMLElement>();
+            const wrapWidth = ref(960);
+            const propsRef = ref<Partial<FormProps>>({});
+            const schemaRef = ref<Nullable<FormSchema[]>>(null);
+
+            const getSchemas = computed<FormSchema[]>(() => {
+                return (unref(getProps).schemas as any) || unref(schemaRef);
+            });
+
+            // Get the basic configuration of the form
+            const getProps = computed((): FormProps => {
+                return { ...(props.formProps as FormProps), ...unref(propsRef) } as FormProps;
+            });
+
+            // Get uniform row style and Row configuration for the entire form
+            const getRow = computed((): Recordable => {
+                const { baseRowStyle = {}, rowProps } = props.formProps!;
+
+                return {
+                    style: baseRowStyle,
+                    ...rowProps
+                };
+            });
+
+            function getWrapSize() {
+                const rect = formWrap.value?.getBoundingClientRect();
+                wrapWidth.value = rect?.width || 960;
+            }
+
+            function getColWidth(schema: any) {
+                const compProps = schema.componentProps;
+                if (compProps?.responsive) {
+                    if (compProps.respNewRow) {
+                        return 24; // 响应式布局下独立成行
+                    } else {
+                        const wrapValue = wrapWidth.value;
+                        if (wrapValue > import.meta.env.VITE_RESP_LG_WIDTH) {
+                            return 8;
+                        } else if (wrapValue > import.meta.env.VITE_RESP_MD_WIDTH) {
+                            return 12;
+                        } else {
+                            return 24;
+                        }
+                    }
+                }
+                return schema.colProps?.span;
+            }
+
+            const debGetWrapSize = debounce(getWrapSize, 300);
+
+            onMounted(() => {
+                window.addEventListener('resize', debGetWrapSize);
+                getWrapSize();
+                nextTick(() => {
+                    //添加隐藏组件
+                    if (unref(getProps)?.hiddenComponent?.length) {
+                        unref(getProps)?.hiddenComponent?.forEach((component) => {
+                            formModel[component.bindField] = component.value;
+                        });
+                    }
+                });
+            });
+
+            onUnmounted(() => {
+                window.removeEventListener('resize', debGetWrapSize);
+            });
+
+            function showComponent(schema) {
+                return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
+            }
+
+            function getIsShow(schema: FormSchema, itemValue: any): boolean {
+                const { show } = schema;
+                const { showAdvancedButton } = getProps.value;
+                const itemIsAdvanced = showAdvancedButton ? (isBoolean(schema.isAdvanced) ? schema.isAdvanced : true) : true;
+
+                let isShow = true;
+
+                if (isBoolean(show)) {
+                    isShow = show;
+                }
+                if (isFunction(show)) {
+                    isShow = show({
+                        values: itemValue,
+                        model: formModel!,
+                        schema: schema,
+                        field: schema.field
+                    });
+                }
+
+                isShow = isShow && itemIsAdvanced;
+                return isShow;
+            }
+
+            function getIfShow(schema: FormSchema, itemValue: any): boolean {
+                const { ifShow } = schema;
+
+                let isIfShow = true;
+
+                if (isBoolean(ifShow)) {
+                    isIfShow = ifShow;
+                }
+                if (isFunction(ifShow)) {
+                    isIfShow = ifShow({
+                        values: itemValue,
+                        model: formModel!,
+                        schema: schema,
+                        field: schema.field
+                    });
+                }
+                return isIfShow;
+            }
+
+            const formModel = reactive<Recordable>(props.formModel);
+            const isCustom = inject<boolean>('isCustomForm', false);
+            provide('formModel', formModel);
+            provide('formProps', getProps);
+            provide('isCustomForm', isCustom || props.isWorkFlow);
+            provide('isCamelCase', props.isCamelCase);
+
+            const handleSubmit = async () => {
+                try {
+                    const { submitFunc } = unref(getProps);
+                    if (submitFunc && isFunction(submitFunc)) {
+                        await submitFunc();
+                        return;
+                    }
+                    const res = await formRef.value!.validate();
+                    emit('submit', res);
+                } catch (error) {}
+            };
+
+            const handleReset = () => {
+                resetFields();
+            };
+
+            const refreshFieldObj = ref<object>({});
+
+            getComponent(getSchemas.value);
+
+            function getComponent(component) {
+                const layoutComponents = ['tab', 'grid', 'card'];
+                component?.map((info) => {
+                    if (layoutComponents.includes(info.type!)) {
+                        info.children?.map((childInfo) => {
+                            childInfo.list.map((com) => {
+                                if (layoutComponents.includes(com.type) || com.type === 'table-layout') {
+                                    getComponent(childInfo.list);
+                                } else {
+                                    setComponentDefault(com);
+                                }
+                            });
+                        });
+                    } else if (info.type === 'table-layout') {
+                        info.children?.map((childInfo) => {
+                            childInfo.list.map((com) => {
+                                com.children.map((item) => {
+                                    if (layoutComponents.includes(item.type) || item.type === 'table-layout') {
+                                        getComponent(com.children);
+                                    } else {
+                                        setComponentDefault(item);
+                                    }
+                                });
+                            });
+                        });
+                    } else {
+                        setComponentDefault(info);
+                    }
+                });
+            }
+
+            function setComponentDefault(item) {
+                if ((staticDataComponents.includes(item.component) && (item.componentProps as any)?.datasourceType === 'staticData') || (needDicDefaultValue.includes(item.type) && (item.componentProps as any)?.datasourceType === 'dic')) {
+                    let { defaultSelect } = item.componentProps as any;
+                    formModel[item.field] = defaultSelect;
+                    return;
+                }
+                let { defaultValue } = item;
+                if (!!item.field && !noDefaultValueComponents.includes(item.component)) {
+                    if (item.component === 'OneForOne') {
+                        if (item.componentProps.childSchemas?.length) {
+                            const singleFormObj = {};
+                            item.componentProps.childSchemas.map((singleCom) => {
+                                if (
+                                    (staticDataComponents.includes(singleCom.component) && (singleCom.componentProps as any)?.datasourceType === 'staticData') ||
+                                    (needDicDefaultValue.includes(singleCom.type) && (singleCom.componentProps as any)?.datasourceType === 'dic')
+                                ) {
+                                    let { defaultSelect } = singleCom.componentProps as any;
+                                    singleFormObj[singleCom.field] = defaultSelect;
+                                } else {
+                                    singleFormObj[singleCom.field] = singleCom.defaultValue;
+                                }
+                            });
+                            formModel[item.field] = [singleFormObj];
+                        }
+                        return;
+                    } else {
+                        formModel[item.field] = item.component === 'SubForm' ? [] : defaultValue;
+                        return;
+                    }
+                }
+            }
+
+            /**
+             * 回车提交表单
+             */
+            function handleEnterPress(e: KeyboardEvent) {
+                const { autoSubmitOnEnter } = unref(getProps);
+                if (!autoSubmitOnEnter) return;
+                if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
+                    const target: HTMLElement = e.target as HTMLElement;
+                    if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
+                        handleSubmit();
+                    }
+                }
+            }
+
+            //调用表单验证
+            const validate = async (nameList?: NamePath[]): Promise<any> => formRef.value?.validate(nameList);
+
+            //清除表单验证
+            const clearValidate = async (name?: string | string[]): Promise<any> => formRef.value?.clearValidate(name);
+
+            //跳到某个字段
+            const scrollToField = async (name: NamePath, options?: ScrollOptions): Promise<any> => formRef.value?.scrollToField(name, options);
+
+            //验证某个字段
+            const validateFields = async (nameList?: NamePath[] | string, options?: ValidateOptions): Promise<any> => formRef.value?.validateFields(nameList, options);
+
+            const findSchema = (schemaArr, key) => {
+                let schema;
+                const formListComponent = ['tab', 'grid', 'card'];
+                schemaArr?.some((info) => {
+                    if (formListComponent.includes(info.type!)) {
+                        const hasComponent = info.children.some((childInfo) => {
+                            schema = childInfo.list.find((com) => com.field === key);
+                            if (!!schema) return true;
+                            schema = findSchema(childInfo.list, key);
+                            return !!schema;
+                        });
+                        return !!hasComponent;
+                    } else if (info.type === 'table-layout') {
+                        const hasComponent = info.children.some((childInfo) => {
+                            return childInfo.list.some((chil) => {
+                                schema = chil.children.find((com) => com.field === key);
+                                if (!!schema) return true;
+                                schema = findSchema(chil.children, key);
+                                return !!schema;
+                            });
+                        });
+                        return !!hasComponent;
+                    } else {
+                        schema = info.field === key ? info : null;
+                        return !!schema;
+                    }
+                });
+                return schema;
+            };
+
+            const setDefaultValue = async (): Promise<void> => {
+                getComponent(getSchemas.value);
+            };
+
+            // 重置表单所有数据
+            const resetFields = async (): Promise<void> => {
+                Object.keys(formModel).forEach((key) => {
+                    //没有绑定字段的组件不处理
+                    if (!key) return;
+                    const schema = findSchema(unref(getSchemas), key);
+
+                    const isInput = schema?.component && defaultValueComponents.includes(schema.component);
+                    const isSubForm = schema?.component && arrayValueComponents.includes(schema.component);
+                    const isRange = schema?.component && schema?.component.includes('Range');
+                    const isStatic = schema?.component && staticDataComponents.includes(schema.component) && schema?.componentProps.datasourceType === 'staticData';
+                    const isDic = schema?.type && needDicDefaultValue.includes(schema.type) && schema?.componentProps.datasourceType === 'dic';
+
+                    if (isSubForm) {
+                        if (schema.component === 'OneForOne') {
+                            if (schema.componentProps.childSchemas?.length) {
+                                const singleFormObj = {};
+                                schema.componentProps.childSchemas.map((singleCom) => {
+                                    if (
+                                        (staticDataComponents.includes(singleCom.component) && singleCom?.componentProps.datasourceType === 'staticData') ||
+                                        (needDicDefaultValue.includes(singleCom.type) && singleCom?.componentProps.datasourceType === 'dic')
+                                    ) {
+                                        singleFormObj[singleCom.field] = singleCom?.componentProps.defaultSelect;
+                                    } else {
+                                        singleFormObj[singleCom.field] = singleCom.defaultValue;
+                                    }
+                                });
+                                formModel[key] = [singleFormObj];
+                            }
+                        } else {
+                            formModel[key] = [];
+                        }
+                    } else if (isInput) {
+                        formModel[key] = schema?.defaultValue || '';
+                    } else if (isRange) {
+                        const startTimeKey = key.split(',')[0];
+                        const endTimeKey = key.split(',')[1];
+                        formModel[key] = schema?.defaultValue || [];
+                        formModel[startTimeKey] = schema?.defaultValue && schema?.defaultValue.length > 0 && schema?.defaultValue[0];
+                        formModel[endTimeKey] = schema?.defaultValue && schema?.defaultValue.length > 0 && schema?.defaultValue[1];
+                    } else if (isStatic || isDic) {
+                        formModel[key] = schema?.componentProps.defaultSelect;
+                    } else {
+                        formModel[key] = schema?.defaultValue || schema?.defaultValue === 0 ? schema?.defaultValue : '';
+                    }
+                });
+                nextTick(() => clearValidate());
+            };
+
+            // 更改formProps
+            const setProps = async (formProps: Partial<FormProps>): Promise<void> => {
+                propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+            };
+
+            //设定某个字段值  慎用  建议直接页面直接操作formModel数据
+            const setFieldsValue = async (values: Recordable): Promise<void> => {
+                Object.keys(values).forEach((key) => {
+                    if (!isNil(key)) {
+                        formModel[key] = values[key];
+                    }
+                });
+
+                executeEvent(getSchemas.value);
+            };
+
+            /**
+             * 执行schema中 所有change事件
+             * 修改bug #5090
+             * 为了保证表单赋值触发所有组件的change事件
+             */
+            const executeEvent = (allSchemas: FormSchema[]) => {
+                for (const schema of allSchemas) {
+                    //如果是这几个组件 需要查询子级
+                    if (['Card', 'Tab', 'Grid'].includes(schema.component)) {
+                        if (schema.component === 'Tab') {
+                            for (const child of schema.children as TabComponentProps[]) {
+                                executeEvent(child.list);
+                            }
+                        }
+
+                        if (schema.component === 'Card') {
+                            for (const child of schema.children as CardComponentProps[]) {
+                                executeEvent(child.list);
+                            }
+                        }
+
+                        if (schema.component === 'Grid') {
+                            for (const child of schema.children as GridComponentProps[]) {
+                                executeEvent(child.list);
+                            }
+                        }
+                    } else {
+                        if (schema.componentProps?.['events']) {
+                            for (const eventKey in schema.componentProps['events']) {
+                                if (eventKey !== 'change') return;
+                                try {
+                                    const event = new Function('schema', 'formModel', 'formActionType', `${schema.componentProps['events'][eventKey]}`);
+                                    event(schema, formModel, formApi);
+                                } catch (error) {
+                                    console.log('error', error);
+                                    notification.error({
+                                        message: 'Tip',
+                                        description: '触发事件填写有误！'
+                                    });
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+
+            //获取表单值  慎用  建议直接页面直接操作formModel数据
+            const getFieldsValue = (): Recordable => {
+                return toRaw(unref(formModel));
+            };
+
+            //更新schema
+            const updateSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> => {
+                let updateData: Partial<FormSchema>[] = [];
+                if (isObject(data)) {
+                    updateData.push(data as FormSchema);
+                }
+                if (isArray(data)) {
+                    updateData = [...data];
+                }
+                const hasField = updateData.every((item) => noFieldComponent.includes(item.component!) || (Reflect.has(item, 'field') && item.field));
+                if (!hasField) {
+                    throw new Error('All children of the form Schema array that need to be updated must contain the `field` field');
+                }
+                const schema: FormSchema[] = [];
+                updateData.forEach((item: FormSchema) => {
+                    unref(getSchemas).forEach((val: FormSchema) => {
+                        //如果当前组件是布局组件 需要去child 里面更新
+                        if (['Card', 'Tab', 'Grid'].includes(val.component)) {
+                            deepEachChild(val.children!, item);
+                        } else {
+                            if (val.key && item.key && val.key === item.key) {
+                                const newSchema = deepMerge(val, item);
+                                schema.push(newSchema as FormSchema);
+                            } else if (val.field === item.field) {
+                                const newSchema = deepMerge(val, item);
+                                schema.push(newSchema as FormSchema);
+                            } else {
+                                schema.push(val);
+                            }
+                        }
+                    });
+                });
+
+                schemaRef.value = uniqBy(schema, 'field');
+            };
+            const deepEachChild = (childs: GridComponentProps[] | TabComponentProps[] | CardComponentProps[], thisItem: FormSchema) => {
+                childs?.forEach((child: GridComponentProps | CardComponentProps | TabComponentProps) => {
+                    child.list.forEach((it: FormSchema) => {
+                        if (['Card', 'Tab', 'Grid'].includes(it.component)) {
+                            deepEachChild(it.children!, thisItem);
+                        }
+
+                        if (thisItem.key && it.key && thisItem.key === it.key) {
+                            it = deepMerge(it, thisItem);
+                        } else if (thisItem.field === it.field) {
+                            it = deepMerge(it, thisItem);
+                        }
+                    });
+                });
+            };
+
+            //重置schema
+            const resetSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> => {
+                let updateData: Partial<FormSchema>[] = [];
+                if (isObject(data)) {
+                    updateData.push(data as FormSchema);
+                }
+                if (isArray(data)) {
+                    updateData = [...data];
+                }
+
+                const hasField = updateData.every((item) => noFieldComponent.includes(item.component!) || (Reflect.has(item, 'field') && item.field));
+                if (!hasField) {
+                    throw new Error('All children of the form Schema array that need to be updated must contain the `field` field');
+                    return;
+                }
+
+                schemaRef.value = updateData as FormSchema[];
+            };
+            //移除schema
+            const removeSchemaByFiled = async (fields: string | string[]): Promise<void> => {
+                const schemaList: FormSchema[] = cloneDeep(unref(getSchemas));
+                if (!fields) {
+                    return;
+                }
+
+                let fieldList: string[] = isString(fields) ? [fields] : fields;
+                if (isString(fields)) {
+                    fieldList = [fields];
+                }
+                for (const field of fieldList) {
+                    if (isString(field)) {
+                        const index = schemaList.findIndex((schema) => schema.field === field);
+                        if (index !== -1) {
+                            delete formModel[field];
+                            schemaList.splice(index, 1);
+                        }
+                    }
+                }
+                schemaRef.value = schemaList;
+            };
+            //追加schema
+            const appendSchemaByField = async (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined): Promise<void> => {
+                const schemaList: FormSchema[] = cloneDeep(unref(getSchemas));
+
+                const index = schemaList.findIndex((schema) => schema.field === prefixField);
+                if (!prefixField || index === -1 || first) {
+                    first ? schemaList.unshift(schema) : schemaList.push(schema);
+                    schemaRef.value = schemaList;
+                    return;
+                }
+                if (index !== -1) {
+                    schemaList.splice(index + 1, 0, schema);
+                }
+
+                schemaRef.value = schemaList;
+            };
+
+            // 提交
+            const submit = async (e?: Event): Promise<void> => {
+                e && e.preventDefault();
+                const { submitFunc } = unref(getProps);
+                if (submitFunc && isFunction(submitFunc)) {
+                    await submitFunc();
+                    return;
+                }
+                const formEl = unref(formRef);
+                if (!formEl) return;
+                try {
+                    const values = await validate();
+                    emit('submit', values);
+                } catch (error: any) {
+                    throw new Error(error);
+                }
+            };
+
+            const showModal = async (modal: ModalFuncProps) => {
+                Modal.confirm({
+                    title: modal.title,
+                    icon: createVNode(ExclamationCircleOutlined),
+                    content: createVNode('div', { style: 'color:red;' }, modal.content),
+                    onOk: modal.onOk,
+                    onCancel: modal.onCancel,
+                    ...modal
+                });
+            };
+
+            const regTest = async (regular: regTestProps) => {
+                const regExpression = regular.regExpression;
+                const testRes = regExpression.test(regular.testValue);
+                testRes ? message.success(regular.successMessage) : message.error(regular.errorMessage);
+            };
+
+            const httpRequest = async (request: requestProps) => {
+                if (request.requestType.toLowerCase() === 'get') {
+                    return defHttp[request.requestType](
+                        {
+                            url: request.requestUrl,
+                            params: request.params
+                        },
+                        {
+                            errorMessageMode: request.errorMessageMode || 'none'
+                        }
+                    );
+                } else {
+                    return defHttp[request.requestType](
+                        {
+                            url: request.requestUrl,
+                            data: request.params
+                        },
+                        {
+                            errorMessageMode: request.errorMessageMode || 'none'
+                        }
+                    );
+                }
+            };
+
+            const refreshAPI = (field: string) => {
+                if (!field) return;
+                if (!Object.keys(unref(refreshFieldObj)).includes(field)) {
+                    unref(refreshFieldObj)[field] = 0;
+                }
+                unref(refreshFieldObj)[field]++;
+            };
+
+            const changeStyle = (schema, style, field?) => {
+                if (field) {
+                    const changeSchema = unref(getSchemas).filter((item) => {
+                        if (props.isCamelCase) {
+                            return camelCaseString(item.field) === field;
+                        } else {
+                            return item.field === field;
+                        }
+                    });
+                    schema = changeSchema[0];
+                }
+                schema.componentProps.style = { ...schema.componentProps.style, ...style };
+            };
+
+            const formApi: FormActionType = {
+                submit,
+                validate,
+                clearValidate,
+                scrollToField,
+                validateFields,
+                resetFields,
+                setProps,
+                updateSchema,
+                setFieldsValue,
+                getFieldsValue,
+                removeSchemaByFiled,
+                appendSchemaByField,
+                resetSchema,
+                showModal,
+                regTest,
+                httpRequest,
+                refreshAPI,
+                changeStyle,
+                setDefaultValue
+            };
+
+            //将表单方法  导出 给父组件使用。
+            expose({
+                ...formApi
+            });
+
+            return {
+                getRow,
+                getProps,
+                getSchemas,
+                getIfShow,
+                getIsShow,
+                getColWidth,
+                showComponent,
+                formApi,
+                refreshFieldObj,
+                handleSubmit,
+                t,
+                handleReset,
+                handleEnterPress,
+                formRef,
+                formWrap
+            };
+        }
+    };
+</script>