@cloudbase/weda-ui 3.5.0 → 3.5.1

package/dist/web/components/wd-form/hooks/use-remote-value.js

@@ -1,8 +1,12 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { debug } from '../../../utils/console';
-import { usePlatform } from '../../../utils/platform';
-import { alertError } from '../../form/form';
+// import { usePlatform } from '../../../utils/platform';
+// import { alertError } from '../../form/form';
+import { useTimeoutEffect } from '@react-hookz/web';
 import useSWR from 'swr';
+import { emptyObject } from '../../../utils/constant';
+import { WdCompError } from '../../../utils/error';
+const LOADING_THRESHOLD = 1000;
 const formTypeWithInitValue = ['edit', 'read'];
 const logger = debug('wd-form:remote-values');
 /**
@@ -13,12 +17,12 @@ const logger = debug('wd-form:remote-values');
 export function useRemoteValue({ formType, _id, dataSourceName, 
 // methodCreate,
 // methodUpdate,
-methodGetItem, paramGetItem, appCloud, isDataModel, }) {
-    const platform = usePlatform();
+methodGetItem, paramGetItem, appCloud, isDataModel, allSelectFields = emptyObject, eventsRef, }) {
+    // const platform = usePlatform();
     const onInitialValuesError = useCallback((err) => {
         console.error(err);
-        alertError(platform, '表单容器数据查询失败');
-    }, [platform]);
+        // alertError(platform, '表单容器数据查询失败');
+    }, []);
     const { data: remoteValue, error, isLoading, mutate, } = useSWR(() => {
         if (!formTypeWithInitValue.includes(formType) || !dataSourceName) {
             logger.debug('formType没有初始值或者，没配数据源', {
@@ -41,6 +45,9 @@ methodGetItem, paramGetItem, appCloud, isDataModel, }) {
             logger.debug('是数据源但是没有配_id');
             return null;
         }
+        if (isDataModel && allSelectFields === null) {
+            return null;
+        }
         return {
             dataSourceName,
             _id,
@@ -48,20 +55,66 @@ methodGetItem, paramGetItem, appCloud, isDataModel, }) {
             isDataModel,
             methodGetItem,
             paramGetItem,
-            fetcher: appCloud.callConnector,
+            allSelectFields: Object.keys(allSelectFields).reduce((acc, key) => {
+                acc[key] = allSelectFields[key].reduce((fieldAcc, field) => {
+                    fieldAcc[field] = true;
+                    return fieldAcc;
+                }, {});
+                return acc;
+            }, {}),
+            fetcher: isDataModel ? appCloud.callDataSource : appCloud.callConnector,
         };
-    }, async ({ dataSourceName, _id, isDataModel }) => {
+    }, async ({ dataSourceName, _id, isDataModel, allSelectFields }) => {
+        var _a, _b, _c, _d;
+        const { querySuccess, queryEmpty, queryFail } = eventsRef.current;
         if (isDataModel) {
-            const initValue = await appCloud.callDataSource({
-                dataSourceName,
-                methodName: 'wedaGetItem',
-                params: { _id },
-            }, true);
-            if (Object.keys(initValue).length === 0) {
-                // 老逻辑迁移
-                throw new Error('表单容器数据查询失败');
+            try {
+                const initValue = await appCloud.callDataSource({
+                    dataSourceName,
+                    methodName: 'wedaGetItemV2',
+                    params: {
+                        select: {
+                            $master: true,
+                            ...allSelectFields,
+                        },
+                        filter: {
+                            where: {
+                                _id: {
+                                    $eq: _id,
+                                },
+                            },
+                        },
+                        version: 1,
+                    },
+                }, true);
+                if (Object.keys(initValue).length === 0) {
+                    queryEmpty === null || queryEmpty === void 0 ? void 0 : queryEmpty({
+                        data: initValue,
+                    });
+                    // 老逻辑迁移
+                    // throw new Error('表单容器数据查询失败');
+                }
+                else {
+                    querySuccess === null || querySuccess === void 0 ? void 0 : querySuccess({
+                        data: initValue,
+                    });
+                }
+                return initValue;
+            }
+            catch (error) {
+                const obj = {
+                    code: (error === null || error === void 0 ? void 0 : error.code) || 'WdForm.QueryError',
+                    requestId: (_b = (_a = error === null || error === void 0 ? void 0 : error.original) === null || _a === void 0 ? void 0 : _a.original) === null || _b === void 0 ? void 0 : _b.requestId,
+                    message: `${error === null || error === void 0 ? void 0 : error.message}`,
+                    original: error === null || error === void 0 ? void 0 : error.original,
+                };
+                queryFail === null || queryFail === void 0 ? void 0 : queryFail({ error: obj });
+                throw new WdCompError(`${error === null || error === void 0 ? void 0 : error.message}` || '', {
+                    code: (error === null || error === void 0 ? void 0 : error.code) || 'WdForm.QueryError',
+                    requestId: (_d = (_c = error === null || error === void 0 ? void 0 : error.original) === null || _c === void 0 ? void 0 : _c.original) === null || _d === void 0 ? void 0 : _d.requestId,
+                    original: error === null || error === void 0 ? void 0 : error.original,
+                });
             }
-            return initValue;
         }
         return await appCloud.callConnector({
             dataSourceName,
@@ -77,10 +130,108 @@ methodGetItem, paramGetItem, appCloud, isDataModel, }) {
             mutate();
         };
     }, [mutate]);
+    const [loadingStatus, setLoadingStatus] = useState(() => (isLoading ? 'hidden' : 'done'));
+    // 1 秒后仍在loading 才显示 loading
+    useTimeoutEffect(() => {
+        setLoadingStatus(isLoading ? 'loading' : 'done');
+    }, LOADING_THRESHOLD);
+    useEffect(() => {
+        if (isLoading === false) {
+            setLoadingStatus('done');
+        }
+    }, [isLoading]);
     return {
         remoteValue,
         error,
-        isLoading,
-        mutate,
+        loadingStatus,
     };
 }
+// father-son 是老的，新的叫many-one
+const SINGLE_SELECT_FORMATS = [
+    'many-one',
+    /**
+     * A 建立 1对1 到B
+     * 从A看 就是one-one
+     * 从B看 就是one-one-r
+     */
+    'one-one',
+    'one-one-r',
+];
+const MULTI_SELECT_FORMATS = ['many-many', 'one-many'];
+export function useInitValueFromRemote(dataSourceProfile, fetchedInitialValues) {
+    return useSWR(() => {
+        if (dataSourceProfile && fetchedInitialValues) {
+            logger.debug('datasourceProfile', dataSourceProfile, fetchedInitialValues);
+            return [
+                'useInitValueFromRemote',
+                dataSourceProfile,
+                fetchedInitialValues,
+            ];
+        }
+        return null;
+    }, () => {
+        logger.debug(dataSourceProfile, fetchedInitialValues);
+        const result = Object.keys(fetchedInitialValues).reduce((acc, field) => {
+            var _a, _b, _c;
+            const format = (_c = (_b = (_a = dataSourceProfile.schema) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[field]) === null || _c === void 0 ? void 0 : _c.format;
+            acc[field] = fetchedInitialValues[field];
+            if ([...SINGLE_SELECT_FORMATS, 'father-son'].includes(format) &&
+                fetchedInitialValues[field]['_id']) {
+                acc[field] = fetchedInitialValues[field]['_id'];
+            }
+            if (MULTI_SELECT_FORMATS.includes(format)) {
+                acc[field] = fetchedInitialValues[field].map((item) => item['_id']);
+            }
+            return acc;
+        }, {});
+        logger.debug('formInitValueFromRemote result', result);
+        return result;
+    }, {
+        onError(err) {
+            console.error(`计算初始值出错：接口取值 ${fetchedInitialValues}`, err);
+        },
+    });
+}
+export function useRemoteParamsFromValue({ dataSourceProfile, formData, formType, _id, }) {
+    const result = useSWR(() => {
+        if (!dataSourceProfile || !formData) {
+            return null;
+        }
+        return [
+            'useRemoteParamsFromValueParams',
+            dataSourceProfile,
+            formType,
+            formData,
+        ];
+    }, () => {
+        const data = Object.keys(formData).reduce((acc, cur) => {
+            var _a, _b, _c, _d;
+            const format = (_c = (_b = (_a = dataSourceProfile.schema) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[cur]) === null || _c === void 0 ? void 0 : _c.format;
+            acc[cur] = formData[cur];
+            if (SINGLE_SELECT_FORMATS.includes(format)) {
+                acc[cur] = { _id: formData[cur] };
+            }
+            if (MULTI_SELECT_FORMATS.includes(format)) {
+                acc[cur] = (_d = acc[cur]) === null || _d === void 0 ? void 0 : _d.map((_id) => ({ _id }));
+            }
+            return acc;
+        }, {});
+        const result = {
+            data,
+        };
+        if (formType !== 'create' && _id) {
+            const where = {
+                $and: [
+                    {
+                        _id: {
+                            $eq: _id,
+                        },
+                    },
+                ],
+            };
+            result.filter = { where };
+        }
+        return result;
+    });
+    return result.data;
+}

package/dist/web/components/wd-form/index.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType, EventsType } from '../../../configs/components/wd-form';
+import * as tcbAppCloud from '../../utils/tcb';
+import '../style';
+export type WdFromProps = CommonPropsType & DataType & EventsType & {
+    appCloud: typeof tcbAppCloud;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonPropsType & import("type-fest").Simplify<{
+    _id?: string;
+    formType: "create" | "edit" | "read";
+    contentSlot: React.ReactNode;
+    layout: "vertical" | "horizontal";
+    dataSourceName: string;
+    datasourceType: "connector" | "custom-connector" | "model";
+    methodGetItem: string;
+    paramGetItem: Record<string, unknown>;
+    methodCreate: string;
+    methodUpdate: string;
+    formType_bind: boolean;
+    fields: {
+        name: string;
+        componentType: string;
+    }[];
+    initialValues: Record<string, unknown>;
+}> & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<[{
+    readonly title: "提交";
+    readonly name: "submit";
+}, {
+    readonly title: "校验成功";
+    readonly name: "validateSuccess";
+    readonly detail: import("@sinclair/typebox").TObject<{
+        errors: import("@sinclair/typebox").TRecord<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">, import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+    }>;
+}, {
+    readonly title: "校验失败";
+    readonly name: "validateFail";
+    readonly detail: import("@sinclair/typebox").TObject<{
+        errors: import("@sinclair/typebox").TRecord<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">, import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+    }>;
+}, {
+    readonly title: "查询为空";
+    readonly name: "queryEmpty";
+    readonly detail: import("@sinclair/typebox").TObject<{
+        data: import("@sinclair/typebox").TRecord<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">, import("@sinclair/typebox").TAny>;
+    }>;
+}, {
+    readonly title: "查询成功";
+    readonly name: "querySuccess";
+    readonly detail: import("@sinclair/typebox").TObject<{
+        data: import("@sinclair/typebox").TRecord<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">, import("@sinclair/typebox").TAny>;
+    }>;
+}, {
+    readonly title: "查询失败";
+    readonly name: "queryFail";
+    readonly detail: import("@sinclair/typebox").TObject<{
+        error: import("@sinclair/typebox").TObject<{
+            requestid: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+            message: import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">;
+            code: import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">;
+        }>;
+    }>;
+}]>> & {
+    appCloud: typeof tcbAppCloud;
+} & React.RefAttributes<unknown>>>;
+export default _default;

package/dist/web/components/wd-form/index.js

@@ -1,27 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint max-lines: [error, 600] */
+/* eslint max-lines: [error, 800] */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, } from '@react-hookz/web';
+import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, useUnmountEffect, } from '@react-hookz/web';
 import { isInIde, usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import { debug } from '../../utils/console';
 import { useWedaAppContext } from '../../utils/widget-api';
 import { useLoopRenderDetect } from '../common/use-loop-render-detect';
-import { emptyObject, NOT_EXISTED_VALUE } from '../../utils/constant';
+import { emptyObject, noop, NOT_EXISTED_VALUE } from '../../utils/constant';
 import * as tcbAppCloud from '../../utils/tcb';
-import { useRemoteValue } from './hooks/use-remote-value';
+import { useRemoteValue, useInitValueFromRemote, useRemoteParamsFromValue, } from './hooks/use-remote-value';
 import { createSetStateForAuth, useAuthValue } from './hooks/use-auth-value';
-import lodashSet from 'lodash.set';
 import lodashGet from 'lodash.get';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { useDataSource } from '../../utils/hooks/useDataSource';
 import { WdForm as FormUi } from './wd-form';
+import EmptyContent from '../statusContent';
+import { deepClone } from '../../utils/tool';
 import '../style';
+import { getErrorObjectFromValidateResult, getFormDataFromItemMap, } from './form-utils';
+import { ConfigProvider, StatusTip } from 'tea-component';
+import { isNil } from '../../utils/lodash';
 const SET_VALUE_DEBOUNCE_TIMEOUT = 200;
 const logger = debug('wd-form');
+// eslint-disable-next-line tree-shaking/no-side-effects-in-initialization
 const WdForm = React.forwardRef(function WdForm(props, ref) {
     var _a;
-    const { className, id, style, contentSlot: contentSlotEl, layout, formType, _id, datasourceType, dataSourceName, methodGetItem, methodCreate, methodUpdate, paramGetItem, appCloud = tcbAppCloud, 
+    const { className, id, style, contentSlot: contentSlotEl, layout = 'horizontal', formType = 'create', _id, datasourceType = 'model', dataSourceName, methodGetItem, methodCreate, methodUpdate, paramGetItem, appCloud = tcbAppCloud, 
     // 兼容流程setValue调用，其他地方别用
     $node, } = props;
     const formItemMap = useMap([]);
@@ -31,7 +36,9 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
      * 所以要用它作useEffect deps的时候用下面这个string
      *  */
     const formItemMapKey = [...formItemMap.keys()].sort().join(',');
+    const formItemMapKeyRef = useRef(formItemMapKey);
     const platform = usePlatform();
+    const isH5 = platform === 'h5';
     const contentSlot = useMemo(() => contentSlotEl, [contentSlotEl]);
     const cls = classNames({
         'weda-ui': true,
@@ -42,21 +49,25 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         'wedatea2td-form': platform === 'pc',
     }, className);
     const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
+    useLoopRenderDetect();
+    const { ready } = useWedaAppContext();
     const hasSetInitValueRef = useRef(false);
     const [initialValues, setInitialValues] = useState((_a = props.initialValues) !== null && _a !== void 0 ? _a : emptyObject);
     const eventsRef = useSyncedRef(props.events);
     const validate = useCallback(async () => {
         const validatePromise = [];
         const validateKey = [];
+        const validateLabel = [];
         formItemMap.forEach((item) => {
             if (!item)
                 return;
             if (item.handleValidate) {
                 const validate = item.handleValidate();
-                const { name } = item;
+                const { name, label } = item;
                 if (validate) {
                     validatePromise.push(validate);
                     validateKey.push(name);
+                    validateLabel.push(label);
                 }
             }
         });
@@ -65,6 +76,10 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         errorArr = errorArr.filter((item, index) => {
             if ((item !== null && item !== void 0 ? item : []).length) {
+                // 加标题
+                item.forEach((val) => {
+                    val.label = validateLabel[index];
+                });
                 errObj[validateKey[index]] = item;
             }
             return (item === null || item === void 0 ? void 0 : item.length) > 0;
@@ -75,7 +90,31 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         return errObj;
     }, [formItemMap]);
     const [errors, setErrors] = useState(undefined);
-    const { remoteValue: fetchedInitialValues, isLoading: isLoadingInitValues, error: initValueFetchError, } = useRemoteValue({
+    const allSelectFields = useMemo(() => {
+        if (!ready) {
+            return null;
+        }
+        const fields = {};
+        formItemMap.forEach((item, name) => {
+            var _a;
+            if (!fields[name]) {
+                fields[name] = new Set();
+            }
+            ((_a = item.selectFields) !== null && _a !== void 0 ? _a : [])
+                .filter((t) => typeof t === 'string' && t.length > 0)
+                .forEach((field) => {
+                fields[name].add(field);
+            });
+        });
+        const result = Object.keys(fields).reduce((acc, k) => {
+            if (fields[k].size > 0) {
+                acc[k] = Array.from(fields[k]);
+            }
+            return acc;
+        }, {});
+        return result;
+    }, [formItemMap, ready]);
+    const { remoteValue: fetchedInitialValues, loadingStatus: initValueLoadingStatus, error: initValueFetchError, } = useRemoteValue({
         appCloud,
         formType,
         _id,
@@ -85,32 +124,38 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         paramGetItem,
         dataSourceName,
         isDataModel,
+        allSelectFields,
+        eventsRef,
     });
     const submit = useCallback(async () => {
-        const { submit } = eventsRef.current;
+        const { submit, validateSuccess, validateFail } = eventsRef.current;
         const errorObj = await validate();
         if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
-            const formData = getFormDataFromItemMap(formItemMap);
+            validateSuccess({ errors: {} });
+            const formData = getFormDataFromItemMap(formItemMap, formType);
             const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
-            submit && submit(JSON.parse(JSON.stringify({ ...extra, ...formData })));
+            submit && submit(deepClone({ ...extra, ...formData }));
             // 流程用了;
             return formData;
         }
         else {
             setErrors(errorObj);
+            validateFail({
+                errors: getErrorObjectFromValidateResult(errorObj),
+            });
         }
     }, [_id, eventsRef, formItemMap, formType, validate]);
     const updateFormContext = useCallback(() => {
         Promise.resolve().then(() => {
             var _a, _b;
-            const formData = getFormDataFromItemMap(formItemMap);
+            const formData = getFormDataFromItemMap(formItemMap, formType);
             if (!isObjectEqual(formData, preFormCtxRef.current, true)) {
                 (_b = (_a = eventsRef === null || eventsRef === void 0 ? void 0 : eventsRef.current) === null || _a === void 0 ? void 0 : _a.onDataChange) === null || _b === void 0 ? void 0 : _b.call(_a, { data: formData });
                 setFormData(formData);
                 preFormCtxRef.current = formData;
             }
         });
-    }, [eventsRef, formItemMap]);
+    }, [eventsRef, formItemMap, formType]);
     const setValue = useDebouncedCallback((data, setNull) => {
         if (typeof data !== 'object' || typeof data === null) {
             console.warn('setValue data need expect a object but got', data);
@@ -126,7 +171,9 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
                 item.setValue(value);
             }
             else {
-                setNull && item.setValue(null);
+                if (setNull) {
+                    item.setValue(null);
+                }
             }
         });
         updateFormContext();
@@ -141,8 +188,6 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         });
     }, [formItemMap]);
     // useWhatChanged([formItemMap, initialValues, submit, validate]);
-    useLoopRenderDetect();
-    const { ready } = useWedaAppContext();
     const [visible, setVisible] = React.useState(false);
     React.useEffect(() => {
         setVisible(true);
@@ -181,7 +226,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         logger.debug('formItemMap', formItemMap);
     });
     useEffect(() => {
-        if (isLoadingInitValues)
+        if (initValueLoadingStatus !== 'done')
             return;
         if (!initValueFetchError && fetchedInitialValues) {
             /*
@@ -197,7 +242,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             });
             setValue(fetchedInitialValues, true);
         }
-    }, [fetchedInitialValues, initValueFetchError, isLoadingInitValues, setValue]);
+    }, [fetchedInitialValues, initValueFetchError, initValueLoadingStatus, setValue]);
     const { data: dataSourceProfile } = useDataSource(dataSourceName);
     const authValue = useAuthValue({
         appCloud,
@@ -248,6 +293,20 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             console.error('init form setDataSourceFieldsWithAuth error', error);
         }
     }, [formItemMap]);
+    const { data: formInitValueToSet } = useInitValueFromRemote(dataSourceProfile, fetchedInitialValues);
+    useEffect(() => {
+        if (initValueLoadingStatus !== 'done')
+            return;
+        if (!initValueFetchError && fetchedInitialValues) {
+            /*
+            错误处理放在了 @link {onInitialValuesError}
+            下面是可以拿到data了
+            */
+            // TODO: 有哪些key可以暴露
+            setInitialValues(formInitValueToSet);
+            setValue(formInitValueToSet, true);
+        }
+    }, [fetchedInitialValues, formInitValueToSet, initValueFetchError, initValueLoadingStatus, setValue]);
     React.useEffect(() => {
         var _a, _b;
         // 兼容私有环境，新接口不存在的情况，产品策略完善后移除
@@ -268,12 +327,22 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
     ]);
     const initedItemMapRef = useRef({});
     const preFormCtxRef = useRef(null);
-    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap));
-    React.useImperativeHandle(ref, () => {
-        return {
+    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap, formType));
+    const submitParams = useRemoteParamsFromValue({
+        dataSourceProfile,
+        formData,
+        formType,
+        _id,
+    });
+    React.useLayoutEffect(() => {
+        const r = {
             formType,
             addFormItem(name, formItem) {
                 var _a;
+                if (isNil(name) || (typeof name === 'string' && name.length === 0)) {
+                    // name 没设置或为空串的时候不受表单容器控制
+                    return noop;
+                }
                 if (((_a = formItemMap.get(name)) === null || _a === void 0 ? void 0 : _a.id) !== formItem.id) {
                     logger.log('addFormItem', formItem, formItem.id, formItem.name);
                     formItemMap.set(name, formItem);
@@ -282,10 +351,14 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
                     formItemMap.delete(name);
                 };
             },
+            submitParams,
             setValue,
             reset() {
                 setValue({}, true);
             },
+            clearValue() {
+                setValue({}, true);
+            },
             validate() {
                 return validate();
             },
@@ -312,6 +385,12 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             methodUpdate,
             methodGetItem,
         };
+        if (typeof ref === 'function') {
+            ref(r);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = r;
+        }
     }, [
         authValue,
         dataSourceName,
@@ -332,13 +411,32 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         methodCreate,
         methodUpdate,
         methodGetItem,
+        ref,
+        submitParams,
     ]);
+    useUnmountEffect(() => {
+        if (typeof ref === 'function') {
+            ref(null);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = null;
+        }
+    });
     const setInitValue = useDebouncedCallback(() => {
-        var _a;
+        var _a, _b, _c;
+        // 获取子表单初始值
+        const formDetailInitValue = {};
+        for (const [name, formItem] of formItemMap.entries()) {
+            if (((_b = (_a = formItem === null || formItem === void 0 ? void 0 : formItem.getConfig) === null || _a === void 0 ? void 0 : _a.call(formItem)) === null || _b === void 0 ? void 0 : _b.componentType) === 'formdetail') {
+                formDetailInitValue[name] = formItem === null || formItem === void 0 ? void 0 : formItem.value;
+            }
+        }
         for (const [name, formItem] of formItemMap.entries()) {
-            const value = lodashGet(initialValues, name);
+            // 合并子表单初始值与表单初始值
+            const initValues = { ...formDetailInitValue, ...initialValues };
+            const value = lodashGet(initValues, name);
             if (initedItemMapRef.current[name] !== true && value !== undefined) {
-                (_a = formItem.setValue) === null || _a === void 0 ? void 0 : _a.call(formItem, value);
+                (_c = formItem.setValue) === null || _c === void 0 ? void 0 : _c.call(formItem, value);
                 initedItemMapRef.current[name] = true;
             }
         }
@@ -346,7 +444,8 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
     }, [formItemMap, initialValues, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
     const lastInitValueRef = useRef(null);
     React.useEffect(() => {
-        if (isObjectEqual(lastInitValueRef.current, initialValues)) {
+        if (isObjectEqual(lastInitValueRef.current, initialValues) &&
+            isObjectEqual(formItemMapKeyRef.current, formItemMapKey)) {
             return;
         }
         // 单向 Form向下设置值
@@ -369,6 +468,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         };
         setValueUntilReady();
         lastInitValueRef.current = initialValues;
+        formItemMapKeyRef.current = formItemMapKey;
         return () => {
             if (id) {
                 clearTimeout(id);
@@ -404,16 +504,12 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         }
         return 'vertical-left';
     }, [layout]);
-    return (_jsx(FormUi, { layout: layout, className: cls, style: style, id: id, labelPosition: labelPosition, children: visible && contentSlot }));
+    if (initValueLoadingStatus === 'hidden') {
+        return null;
+    }
+    if (initValueLoadingStatus === 'loading' && !fetchedInitialValues) {
+        return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(StatusTip, { status: "loading", loadingText: "\u6570\u636E\u52A0\u8F7D\u4E2D..." }) }));
+    }
+    return (_jsx(FormUi, { layout: layout, className: cls, style: style, id: id, labelPosition: labelPosition, children: initValueFetchError ? (_jsx(EmptyContent, { emptyText: '数据加载失败', errorObj: initValueFetchError, icon: 'error', isH5: isH5 })) : (visible && contentSlot) }));
 });
-function getFormDataFromItemMap(formItemMap) {
-    const formData = {};
-    formItemMap.forEach((item, name) => {
-        var _a, _b, _c;
-        if (((_b = (_a = item.getConfig) === null || _a === void 0 ? void 0 : _a.call(item)) === null || _b === void 0 ? void 0 : _b.componentType) !== 'formdetail') {
-            lodashSet(formData, name, (_c = item === null || item === void 0 ? void 0 : item.getValue) === null || _c === void 0 ? void 0 : _c.call(item));
-        }
-    });
-    return formData;
-}
 export default React.memo(WdForm);

package/dist/web/components/wd-form/style.d.ts

@@ -0,0 +1,3 @@
+import './wd-form.css';
+import '../form/form/style';
+import '../style';

package/dist/web/components/wd-form/style.js

@@ -0,0 +1,3 @@
+import './wd-form.css';
+import '../form/form/style';
+import '../style';