@cloudbase/weda-ui 3.3.0 → 3.3.2

package/dist/web/components/form/userOrgSelect/userTreeSelect.pc.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { IUserTreeSelec } from './userTreeSelect.h5';
-import './userOrgSelect.less';
+import './userOrgSelect.css';
 export declare function UserTreeSelectPC({ id, className, modelClassName, modelStyle, //弹窗样式控制
 style, events, label, labelVisible, //标题显隐
-name, defaultValue, //默认值，支持数组
-confirmValue, placeholder, defaultValueType, disabled, layout, requiredFlag, size, multiple, //多选
+defaultValue, //默认值，支持数组
+confirmValue, placeholder, defaultValueType, disabled, layout, modelType, requiredFlag, size, multiple, //多选
 onChange, request, //接口请求
-getUserByIdRequest, decorator, relation, }: IUserTreeSelec): JSX.Element;
+decorator, matchButtonWidth, modelOpen, dropDownStyle, }: IUserTreeSelec): JSX.Element;

package/dist/web/components/form/userOrgSelect/userTreeSelect.pc.js

@@ -1,93 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { renderDecorator } from '../renderDecorator';
 import { isInIde, filterStrList } from '../../../utils/platform';
 import classNames from 'classnames';
-import { Dropdown, ConfigProvider, Text } from 'tea-component';
-import { getNode, getRelationData, dealOrgData } from './utils';
-import { getUserById, getUserInfo, defaultRequest, } from '../../../utils/getUserService';
-import './userOrgSelect.less';
+import { Dropdown, ConfigProvider, Text, Modal } from 'tea-component';
+import { getNode, getRelationData, dealOrgData, dealUserData, removeMarkString, } from './utils';
+import { getUserInfo, defaultRequest } from './getUserService';
+import './userOrgSelect.css';
 import { DimTreeContent } from './comTool';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { emptyArray, emptyObject } from '../../../utils/constant';
+const defaultDropDownStyle = { width: '100%' };
 export function UserTreeSelectPC({ id, className, modelClassName, modelStyle, //弹窗样式控制
 style, events = emptyObject, 
 // 组件属性
 label = '人员选择', labelVisible = true, //标题显隐
-name = 'formUserTreeSelect', defaultValue = emptyArray, //默认值，支持数组
-confirmValue = '', placeholder = '请选择人员', defaultValueType = 'noneUser', disabled = false, layout = 'horizontal', requiredFlag = false, size = 'l', multiple = false, //多选
+defaultValue = emptyArray, //默认值，支持数组
+confirmValue = '', placeholder = '请选择人员', defaultValueType = 'noneUser', disabled = false, layout = 'horizontal', modelType = 'dropdown', requiredFlag = false, size = 'l', multiple = false, //多选
 onChange = null, request = defaultRequest, //接口请求
-getUserByIdRequest = getUserById, decorator, relation, }) {
+decorator, matchButtonWidth = false, modelOpen = false, dropDownStyle = defaultDropDownStyle, }) {
     // 两次默认值不同, 需要刷新
     const prevDefaultRef = React.useRef(null);
     const prevConfirmRef = React.useRef(null);
     const [selectIds, setSelectIds] = useState([]);
-    const [selectUserIds, setSelectUserIds] = useState([]);
     // 用户单选
     const [curSelectData, setCurSelectData] = useState([]);
-    // 用户多选
-    const [userTreeData, setUserTreeData] = useState([]);
     //const { callWedaApi, showToast, showError } = useGlobalContext();
     const [orgsTreeData, setOrgsTreeData] = useState([]);
     // 节点高亮
     const [activeIds, setActiveIds] = useState([]);
-    const [userActiveIds, setUserActiveIds] = useState([]);
     const [open, setOpen] = useState(false);
     //鼠标移入移除输入框
     const [moveIn, setMoveIn] = useState(false);
     const [originalOrgData, setOriginalOrgData] = useState([]);
-    const [originalUsersData, setOriginalUsersData] = useState([]);
     const [errorInfo, setErrorInfo] = useState({
         errorStatus: false,
         errorMessage: null,
     });
-    useEffect(() => {
-        initOrgsData();
-    }, [defaultValueType]);
-    useEffect(() => {
-        if ((defaultValue &&
-            !isObjectEqual(prevDefaultRef.current !== defaultValue)) ||
-            (confirmValue &&
-                !isObjectEqual(prevConfirmRef.current !== confirmValue)) ||
-            defaultValueType === 'loginUser') {
-            getdefaultUser();
-            prevDefaultRef.current = defaultValue;
-            prevConfirmRef.current = confirmValue;
-        }
-    }, [defaultValueType, confirmValue, defaultValue]);
-    useEffect(() => {
-        var _a;
-        if (open) {
-            setErrorInfo({ errorStatus: false, errorMessage: null });
-            const userId = (_a = curSelectData[0]) === null || _a === void 0 ? void 0 : _a.userId;
-            const isOrgs = getNode(orgsTreeData, userId, 'userId');
-            if (!userId) {
-                setUserActiveIds([]);
-                setSelectUserIds([]);
-                setUserActiveIds([]);
-                setSelectUserIds([]);
-            }
-            if (isOrgs) {
-                setActiveIds([isOrgs.id]);
-                setSelectIds([isOrgs.id]);
-                setUserActiveIds([]);
-                setSelectUserIds([]);
-            }
-        }
-    }, [open]);
-    // 初始化数据
-    const initOrgsData = async () => {
-        try {
-            setErrorInfo({ errorStatus: false, errorMessage: null });
-            const resData = (await request('InitRootOrgs', {})) || [];
-            const data = dealOrgData(resData);
-            setOrgsTreeData(data);
-            setOriginalOrgData([...data]);
-        }
-        catch (e) {
-            setErrorInfo({ errorStatus: true, errorMessage: e });
-        }
-    };
-    const getdefaultUser = async () => {
+    const getDefaultUser = useCallback(async (defaultValue) => {
         var _a;
         try {
             setErrorInfo({ errorStatus: false, errorMessage: null });
@@ -115,32 +64,91 @@ getUserByIdRequest = getUserById, decorator, relation, }) {
             else if ((defaultValueType === 'confirmUser' && confirmValue.length !== 0) ||
                 defaultValue.length !== 0) {
                 const userIdList = filterStrList(confirmValue.length !== 0 ? confirmValue : defaultValue);
+                const userList = await request('getUserById', {
+                    idList: userIdList || [],
+                }, 'callDataSource');
                 const userSelectList = [];
-                userIdList.forEach(async (userId) => {
-                    const UserItem = await getUserByIdRequest({
-                        _id: userId,
-                    });
-                    userSelectList.push({ value: userId, data: { content: UserItem } });
-                    setCurSelectData([...userSelectList]);
+                userList.forEach((list) => {
+                    var _a;
+                    if (Array.isArray(list === null || list === void 0 ? void 0 : list.orgs)) {
+                        userSelectList.push({
+                            value: `${(_a = list === null || list === void 0 ? void 0 : list.orgs[0]) === null || _a === void 0 ? void 0 : _a.OrgId}-${list.value}`,
+                            data: list === null || list === void 0 ? void 0 : list.data,
+                        });
+                    }
+                    else {
+                        userSelectList.push(list);
+                    }
                 });
+                setCurSelectData([...userSelectList]);
             }
         }
         catch (e) {
             setErrorInfo({ errorStatus: true, errorMessage: e });
         }
-    };
-    const reset = (close) => {
+    }, [confirmValue, defaultValueType, events, request]);
+    useEffect(() => {
+        // 初始化数据
+        const initOrgsData = async () => {
+            try {
+                setErrorInfo({ errorStatus: false, errorMessage: null });
+                const resData = (await request('InitRootOrgs', {})) || [];
+                const pageNo = 1;
+                const noOrgUserData = await request('DescribeWedaUsersRuntime', {
+                    pageNo: pageNo,
+                    pageSize: 200,
+                    IsNoRelatedOrgFlag: true,
+                    UserType: 'internalUser',
+                });
+                const data = dealOrgData(resData).concat(dealUserData(noOrgUserData === null || noOrgUserData === void 0 ? void 0 : noOrgUserData.UserList));
+                setOrgsTreeData(data);
+                setOriginalOrgData([...data]);
+            }
+            catch (e) {
+                setErrorInfo({ errorStatus: true, errorMessage: e });
+            }
+        };
+        initOrgsData();
+    }, [defaultValueType, request]);
+    useEffect(() => {
+        setOpen(modelOpen);
+    }, [modelOpen]);
+    useEffect(() => {
+        if ((defaultValue &&
+            !isObjectEqual(prevDefaultRef.current !== defaultValue)) ||
+            (confirmValue &&
+                !isObjectEqual(prevConfirmRef.current !== confirmValue)) ||
+            defaultValueType === 'loginUser') {
+            getDefaultUser(defaultValue);
+            prevDefaultRef.current = defaultValue;
+            prevConfirmRef.current = confirmValue;
+        }
+    }, [defaultValueType, confirmValue, defaultValue, getDefaultUser]);
+    useEffect(() => {
+        if (open) {
+            setErrorInfo({ errorStatus: false, errorMessage: null });
+            const userIdList = curSelectData.map((d) => d === null || d === void 0 ? void 0 : d.value);
+            if (userIdList && userIdList.length > 0) {
+                setActiveIds(userIdList);
+                setSelectIds(userIdList);
+            }
+        }
+    }, [open, orgsTreeData, curSelectData]);
+    const reset = (close, value = '') => {
+        var _a;
         setSelectIds([]);
         setCurSelectData([]);
         setActiveIds([]);
         setErrorInfo({ errorStatus: false, errorMessage: null });
-        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
         close && setOpen(false);
     };
     // 外层组件类
     const cls = classNames({
         'weda-ui': true,
         'weda-user-tree-select': true,
+        'weda-user-model-select': modelType === 'model',
         [className]: className,
     });
     const modelCls = classNames({
@@ -148,52 +156,68 @@ getUserByIdRequest = getUserById, decorator, relation, }) {
         'dim-tree-select--user': true,
         [className]: modelClassName,
     });
+    const onActiveChange = (ids) => {
+        const selectedId = ids[0];
+        const node = getNode(orgsTreeData, selectedId, 'id');
+        if (node === null || node === void 0 ? void 0 : node.isUser) {
+            //多选情况，取消选中某元素时
+            if (multiple && activeIds.indexOf(selectedId) !== -1) {
+                activeIds.splice(activeIds.indexOf(selectedId), 1);
+                setActiveIds([...activeIds]);
+                setSelectIds([...activeIds]);
+            }
+            else {
+                setActiveIds(multiple ? [...activeIds, ...ids] : [...ids]);
+                setSelectIds(multiple ? [...activeIds, ...ids] : [...ids]);
+            }
+        }
+    };
+    const onConfirm = () => {
+        var _a, _b;
+        const nodeList = [];
+        const idList = [];
+        const selectItem = [];
+        removeMarkString(selectIds).forEach((selectId) => {
+            if (selectId) {
+                const node = getNode(orgsTreeData, selectId, 'userId');
+                nodeList.push(node);
+                idList.push((node === null || node === void 0 ? void 0 : node.userId) || selectId);
+                selectItem.push({
+                    value: node === null || node === void 0 ? void 0 : node.userId,
+                    data: node,
+                });
+            }
+        });
+        getDefaultUser([...idList]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? idList : (_a = selectItem[0]) === null || _a === void 0 ? void 0 : _a.value);
+        (_b = events === null || events === void 0 ? void 0 : events.change) === null || _b === void 0 ? void 0 : _b.call(events, multiple ? { value: idList, data: nodeList } : selectItem[0]);
+        setOpen(false);
+    };
     return renderDecorator(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
         React.createElement("div", { onMouseEnter: () => {
                 setMoveIn(true);
             }, onMouseLeave: () => {
                 setMoveIn(false);
             } },
-            React.createElement(Dropdown, { "data-testid": "userSelectDropdown", className: classNames('role-tree-select', `role-tree-select--depart`, `size-${size}`), destroyOnClose: false, open: open, onOpenChange: (open) => {
+            React.createElement(Dropdown, { "data-testid": "userSelectDropdown", className: classNames('role-tree-select', `role-tree-select--depart`, `size-${size}`), overlayStyle: modelType === 'model' ? { display: 'none' } : {}, destroyOnClose: false, open: open, onOpenChange: (open) => {
                     setOpen(open);
                     setErrorInfo({ errorStatus: false, errorMessage: null });
-                }, button: curSelectData.length === 0 ? (React.createElement(Text, { className: "placeholder" }, placeholder)) : (React.createElement(SelectViewContainer, { curSelectData: curSelectData, multiple: multiple, placeholder: placeholder, onChange: () => reset(true), moveIn: moveIn })), style: { width: '100%' }, appearance: 'button', clickClose: false, disabled: disabled }, (close) => (React.createElement("div", { className: modelCls, style: modelStyle },
-                React.createElement(DimTreeContent, { data: orgsTreeData, setTreeData: setOrgsTreeData, selectedIds: selectIds, activeIds: activeIds, needUser: true, request: request, onActive: (ids, context) => {
-                        const selectedId = ids[0];
-                        const node = getNode(orgsTreeData, selectedId, 'id');
-                        if (node === null || node === void 0 ? void 0 : node.isUser) {
-                            //多选情况，取消选中某元素时
-                            if (multiple && activeIds.indexOf(selectedId) !== -1) {
-                                activeIds.splice(activeIds.indexOf(selectedId), 1);
-                                setActiveIds([...activeIds]);
-                                setSelectIds([...activeIds]);
-                            }
-                            else {
-                                setActiveIds(multiple ? [...activeIds, ...ids] : [...ids]);
-                                setSelectIds(multiple ? [...activeIds, ...ids] : [...ids]);
-                            }
-                        }
-                    }, onReset: () => setOrgsTreeData(originalOrgData), onCancel: () => {
+                }, button: curSelectData.length === 0 ? (React.createElement(Text, { className: "placeholder" }, placeholder)) : (React.createElement(SelectViewContainer, { curSelectData: curSelectData, placeholder: placeholder, onChange: () => reset(true), moveIn: moveIn })), style: dropDownStyle, appearance: 'button', clickClose: false, disabled: disabled, matchButtonWidth: matchButtonWidth }, (close) => (React.createElement(React.Fragment, null, modelType === 'model' ? (React.createElement(Modal, { visible: open, onClose: close, className: "user_modal" },
+                React.createElement("div", { className: modelCls, style: modelStyle },
+                    React.createElement(DimTreeContent, { data: orgsTreeData, setTreeData: setOrgsTreeData, selectedIds: selectIds, activeIds: activeIds, needUser: true, request: request, errorInfo: errorInfo, onActive: (ids) => onActiveChange(ids), onReset: () => setOrgsTreeData(originalOrgData), onCancel: () => {
+                            setOpen(false);
+                            setErrorInfo({
+                                errorStatus: false,
+                                errorMessage: null,
+                            });
+                        }, onClear: () => reset(false), onConfirm: onConfirm })))) : (React.createElement("div", { className: modelCls, style: modelStyle },
+                React.createElement(DimTreeContent, { data: orgsTreeData, setTreeData: setOrgsTreeData, selectedIds: selectIds, activeIds: activeIds, needUser: true, request: request, errorInfo: errorInfo, onActive: (ids) => onActiveChange(ids), onReset: () => setOrgsTreeData(originalOrgData), onCancel: () => {
                         setOpen(false);
-                        setErrorInfo({ errorStatus: false, errorMessage: null });
-                    }, onClear: () => reset(false), onConfirm: () => {
-                        var _a, _b;
-                        const nodeList = [];
-                        const idList = [];
-                        const selectItem = [];
-                        selectIds.forEach((selectId) => {
-                            if (selectId) {
-                                const node = getNode(orgsTreeData, selectId, 'id');
-                                nodeList.push(node);
-                                idList.push(node.userId);
-                                selectItem.push({ value: node === null || node === void 0 ? void 0 : node.userId, data: node });
-                            }
+                        setErrorInfo({
+                            errorStatus: false,
+                            errorMessage: null,
                         });
-                        setCurSelectData(selectItem);
-                        onChange === null || onChange === void 0 ? void 0 : onChange((_a = selectItem[0]) === null || _a === void 0 ? void 0 : _a.value);
-                        setOpen(false);
-                        (_b = events === null || events === void 0 ? void 0 : events.change) === null || _b === void 0 ? void 0 : _b.call(events, multiple ? { value: idList, data: nodeList } : selectItem[0]);
-                    } })))))))({
+                    }, onClear: () => reset(false), onConfirm: onConfirm })))))))))({
         id,
         className: cls,
         style,
@@ -208,10 +232,11 @@ getUserByIdRequest = getUserById, decorator, relation, }) {
 const SelectViewContainer = (props) => {
     var _a;
     const { curSelectData, placeholder, onChange, moveIn } = props;
+    const data = curSelectData.map((e) => { var _a; return (_a = e.data) === null || _a === void 0 ? void 0 : _a.content; });
     if (!((_a = curSelectData[0]) === null || _a === void 0 ? void 0 : _a.value))
         return React.createElement(Text, { className: "placeholder1" }, placeholder);
     return (React.createElement(React.Fragment, null,
-        React.createElement(ViewCell, { data: curSelectData, showType: "tree", relation: undefined }),
+        React.createElement(ViewCell, { data: data, showType: "tree", relation: undefined }),
         moveIn && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "weda-select-user-dept__dialog-input-clear", onClick: (e) => {
                     e.stopPropagation();
@@ -220,9 +245,8 @@ const SelectViewContainer = (props) => {
                 React.createElement("p", { className: "weda-select-user-dept__dialog-input-clear-close" }))))));
 };
 const ViewCell = ({ data, showType, relation }) => {
-    const contentList = data.map((e) => { var _a; return (_a = e.data) === null || _a === void 0 ? void 0 : _a.content; });
     if (showType === 'tree') {
-        return (React.createElement(Text, { verticalAlign: "middle", "data-testid": "defaultValueText" }, contentList.join(',') || '-'));
+        return (React.createElement(Text, { verticalAlign: "middle", "data-testid": "defaultValueText", className: "dropdown-cell" }, data.join(',') || '-'));
     }
     const defaultValue = getRelationData(relation);
     return (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) ? (React.createElement(Text, { verticalAlign: "middle" }, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.content)) : (React.createElement(Text, null, "-"));

package/dist/web/components/form/userOrgSelect/utils.d.ts

@@ -17,8 +17,8 @@ export function dealOrgData(data?: any[]): {
     orgId: any;
     userId: any;
 }[];
-export function dealUserData(data: any[], isRole: any): {
-    id: string;
+export function dealUserData(data: any[], isRole: any, orgId?: string): {
+    id: any;
     expandable: boolean;
     selectable: boolean;
     content: any;
@@ -28,6 +28,7 @@ export function dealUserData(data: any[], isRole: any): {
     children: any;
     icon: () => JSX.Element;
 }[];
+export function removeMarkString(arr?: any[]): any[];
 export function getNode(nodes: any, id: any, key: any): any;
 export function getRelationData(relation: any): {
     content: any;

package/dist/web/components/form/userOrgSelect/utils.js

@@ -17,23 +17,31 @@ export const dealOrgData = (data = []) => data.map((i) => ({
     userId: (i === null || i === void 0 ? void 0 : i.UserId) || null,
 }));
 // 处理用户数据格式
-export const dealUserData = (data = [], isRole) => data.map((user) => {
-    var _a;
-    return ({
-        id: `${guidMod(7)}-${user.UserId}`,
-        expandable: false,
-        selectable: true,
-        content: (user === null || user === void 0 ? void 0 : user[user === null || user === void 0 ? void 0 : user.PrimaryColumn]) ||
-            ((user === null || user === void 0 ? void 0 : user.UserExtend)
-                ? ((_a = destr(user.UserExtend)) === null || _a === void 0 ? void 0 : _a[user === null || user === void 0 ? void 0 : user.PrimaryColumn]) || user.UserId
-                : user.UserId),
-        userId: user.UserId,
-        isUser: true,
-        orgId: (user === null || user === void 0 ? void 0 : user.OrgId) || null,
-        children: undefined,
-        icon: isRole ? roleIcon : departIcon,
+export const dealUserData = (data = [], isRole, orgId = '') => {
+    return data.map((user) => {
+        var _a, _b, _c, _d;
+        return ({
+            id: orgId ? `${orgId}-${user === null || user === void 0 ? void 0 : user.UserId}` : user === null || user === void 0 ? void 0 : user.UserId,
+            expandable: false,
+            selectable: true,
+            content: (user === null || user === void 0 ? void 0 : user[nameParse(user === null || user === void 0 ? void 0 : user.PrimaryColumn)]) ||
+                ((user === null || user === void 0 ? void 0 : user.UserExtend)
+                    ? ((_a = destr(user.UserExtend)) === null || _a === void 0 ? void 0 : _a[nameParse(user === null || user === void 0 ? void 0 : user.PrimaryColumn)]) ||
+                        ((_b = destr(user.UserExtend)) === null || _b === void 0 ? void 0 : _b[nameParse((_c = destr(user === null || user === void 0 ? void 0 : user.UserSchema)) === null || _c === void 0 ? void 0 : _c['x-primary-column'])]) ||
+                        (user === null || user === void 0 ? void 0 : user[nameParse((_d = destr(user === null || user === void 0 ? void 0 : user.UserSchema)) === null || _d === void 0 ? void 0 : _d['x-primary-column'])]) ||
+                        user.UserId
+                    : user.UserId),
+            userId: user === null || user === void 0 ? void 0 : user.UserId,
+            isUser: true,
+            orgId: (user === null || user === void 0 ? void 0 : user.OrgId) || null,
+            children: undefined,
+            icon: isRole ? roleIcon : departIcon,
+        });
     });
-});
+};
+//用户主列字段为name时，特殊处理
+const nameParse = (primaryColumn) => primaryColumn === 'name' ? 'Name' : primaryColumn;
+export const removeMarkString = (arr = []) => (arr || []).map((item) => item.indexOf('-') === -1 ? item : item.split('-')[1]);
 export function guidMod(bit) {
     const str = 'qwertyuiopasdfghjklmnbvcxz1234567890';
     let cont = '';

package/dist/web/components/formdetail/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState, } from 'react';
+import React, { useEffect, forwardRef, useImperativeHandle, useState, useCallback, } from 'react';
 import destr from 'destr';
 import classNames from '../../utils/classnames';
 import { usePlatform, randomStr } from '../../utils/platform';
@@ -60,12 +60,11 @@ export const changeHandle = ({ type, name, data, childFormItem, isPureArray, par
 };
 export default forwardRef(function FormDetail(props, ref) {
     const { className, id, style, children, events, name, value: initDetailValue, isPureArray, parent, } = props;
-    const observeRef = useRef(null); // 当前监听对象
     const [defaultValue, setDetailValue] = useState([]);
     const [contextData, setContextData] = useState([]);
     const [childFormItem, setCildFormItem] = useState([]);
     const platform = usePlatform();
-    const init = (defaultValue) => {
+    const init = useCallback((defaultValue) => {
         var _a;
         const formDetailItemValue = {};
         let childFormItem = defaultValue[0] ? Object.keys(defaultValue[0]) : [];
@@ -99,7 +98,7 @@ export default forwardRef(function FormDetail(props, ref) {
             });
         }
         catch (error) {
-            console.log(error);
+            console.error(error);
         }
         const mock = newContextItem(childFormItem, name, isPureArray);
         const data = (initialValues === null || initialValues === void 0 ? void 0 : initialValues.length) ? initialValues : [mock];
@@ -111,28 +110,32 @@ export default forwardRef(function FormDetail(props, ref) {
         // eslint-disable-next-line rulesdir/no-timer
         setTimeout(() => {
             if (!isObjectEqual(formDetailItemValue, {})) {
-                parent.setValue(formDetailItemValue);
+                if ((parent === null || parent === void 0 ? void 0 : parent.setValue) && typeof (parent === null || parent === void 0 ? void 0 : parent.setValue) === 'function') {
+                    parent === null || parent === void 0 ? void 0 : parent.setValue(formDetailItemValue);
+                }
             }
         }, 0);
-    };
+    }, [events, isPureArray, name, parent]);
     // 初始化context的值
     useEffect(() => {
         if (!isObjectEqual(initDetailValue, defaultValue)) {
             setDetailValue(initDetailValue);
             init(initDetailValue);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initDetailValue]);
     useEffect(() => {
         init(initDetailValue);
         setDetailValue(initDetailValue);
         // 组件卸载时触发
         return () => {
-            var _a, _b;
-            (_a = observeRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-            (_b = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _b === void 0 ? void 0 : _b.call(events, { data: [] });
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: [] });
         };
+        // 只执行一次;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const onChange = (type, params) => {
+    const onChange = useCallback((type, params) => {
         var _a;
         let data = destr(contextData);
         data = changeHandle({
@@ -145,7 +148,7 @@ export default forwardRef(function FormDetail(props, ref) {
         });
         setContextData(data);
         (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data });
-    };
+    }, [childFormItem, contextData, events, isPureArray, name]);
     useImperativeHandle(ref, () => {
         return {
             methods: {

package/dist/web/components/graphicCard/index.d.ts

@@ -1,11 +1,26 @@
 /// <reference types="react" />
 import './index.css';
 import type { CommonPropsType } from '../../types';
+export declare type INavOption = {
+    params: Array<{
+        key: string;
+        value: string;
+    }>;
+    paramObj?: any;
+    icon: string;
+    title: string;
+    des: string;
+    tapStatus: 'tap' | 'inside' | 'outer';
+    insideUrl?: string;
+    outerUrl?: string;
+    newPage?: boolean;
+    withParams?: boolean;
+};
 export interface IGraphicCardPropsType extends CommonPropsType {
     /**
      * 导航配置
      */
-    navOption?: Array<any>;
+    navOption?: Readonly<INavOption[]>;
     titleVisible: boolean;
     titleColor: string;
     titleFontWeight: string;

package/dist/web/components/graphicCard/index.js

@@ -1,49 +1,61 @@
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import './index.css';
 import classNames from '../../utils/classnames';
 import { Row, Col, ConfigProvider, Button, Text } from 'tea-component';
 import { usePlatform } from '../../utils/platform';
 import { IconFont } from 'tdesign-icons-react';
 import Image from '../image';
+import { useWindowSize } from '@react-hookz/web';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { emptyArray } from '../../utils/constant';
 const CLASS_PREFIX = 'weda-graphic-card';
-export default function GraphicCard({ navOption, ColMobile, ColPC, iconWidthSize, iconHeightSize, titleVisible, desVisible, buttonVisible, textAlign, className, titleColor, titleFontWeight, titleFontSize, titleLineHeight, titleMaxLines, desColor, desFontWeight, desFontSize, desLineHeight, desMaxLines, buttonText, style, }) {
+export default function GraphicCard({ navOption = emptyArray, ColMobile, ColPC, iconWidthSize, iconHeightSize, titleVisible, desVisible, buttonVisible, textAlign, className, titleColor, titleFontWeight, titleFontSize, titleLineHeight, titleMaxLines, desColor, desFontWeight, desFontSize, desLineHeight, desMaxLines, buttonText, style, }) {
     const platform = usePlatform();
     const isH5 = platform === 'h5';
     // 一个栅格的宽度
-    const [SingleGrid, setSingleGrid] = useState({ width: 10 });
-    const [colCount, setColCount] = React.useState(2);
+    const { width } = useWindowSize();
+    const singleGrid = useMemo(() => (width - 24 * 2) / 12, [width]);
+    // 两次默认值不同, 需要刷新
+    const prevNavOptionRef = React.useRef(null);
+    const prevColRef = React.useRef(0);
     const cls = classNames({
         [CLASS_PREFIX]: true,
         [className]: className,
         [`${CLASS_PREFIX}-mobile`]: isH5,
     });
-    const cardList = React.useMemo(() => {
-        const list = [];
+    const colCount = useMemo(() => {
         const col = isH5 ? ColMobile : ColPC;
-        setColCount(col);
-        list.length = Math.floor(navOption.length / colCount);
-        list.forEach((item, index) => {
-            list[index] = [];
-        });
-        //debugger;
-        navOption.forEach((item, index) => {
-            const _index = Math.floor(index / colCount);
-            if (!list[_index] || list[_index].length <= 0) {
-                // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
-                list[_index] = Array(colCount).fill(null);
-            }
-            const paramObj = {};
-            if (item === null || item === void 0 ? void 0 : item.params) {
-                for (const info of item.params) {
-                    paramObj[info.key] = info.value;
+        return col !== null && col !== void 0 ? col : 2;
+    }, [ColMobile, ColPC, isH5]);
+    const cardList = useMemo(() => {
+        const list = [];
+        if (prevColRef.current !== colCount ||
+            (navOption.length > 0 &&
+                !isObjectEqual(prevNavOptionRef.current !== navOption))) {
+            list.length = Math.floor(navOption.length / colCount);
+            list.forEach((item, index) => {
+                list[index] = [];
+            });
+            navOption.forEach((item, index) => {
+                const _index = Math.floor(index / colCount);
+                if (!list[_index] || list[_index].length <= 0) {
+                    // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+                    list[_index] = Array(colCount).fill(null);
                 }
-            }
-            item.paramObj = paramObj;
-            list[_index][index - _index * colCount] = item;
-            list[_index][index - _index * colCount] = item;
-        });
+                const paramObj = {};
+                if (item === null || item === void 0 ? void 0 : item.params) {
+                    for (const info of item.params) {
+                        paramObj[info.key] = info.value;
+                    }
+                }
+                item.paramObj = paramObj;
+                list[_index][index - _index * colCount] = item;
+                prevNavOptionRef.current = [...navOption];
+                prevColRef.current = colCount;
+            });
+        }
         return list;
-    }, [colCount, navOption, isH5]);
+    }, [colCount, navOption]);
     const elementStyle = document.createElement('body').style;
     const vendor = (() => {
         const transformNames = {
@@ -109,7 +121,7 @@ export default function GraphicCard({ navOption, ColMobile, ColPC, iconWidthSize
                 ? iconHeightSize
                 : (Number(height) * parseInt(iconHeightSize)) / 100 + 'px';
         return { width, height };
-    }, [iconWidthSize, iconHeightSize, ColMobile, ColPC, isH5]);
+    }, [platform, ColMobile, ColPC, iconWidthSize, iconHeightSize]);
     const tapTo = (colInfo = navOption[0]) => {
         switch (colInfo === null || colInfo === void 0 ? void 0 : colInfo.tapStatus) {
             case 'tap':
@@ -148,7 +160,7 @@ export default function GraphicCard({ navOption, ColMobile, ColPC, iconWidthSize
                             // 每列内容左右间距为0.1栅格列宽
                             React.createElement(Col, { style: {
                                     width: `${(1 / colCount) * 100}%`,
-                                    padding: `0 ${SingleGrid.width * 0.1}px`,
+                                    padding: `0 ${singleGrid * 0.1}px`,
                                     cursor: (col === null || col === void 0 ? void 0 : col.tapStatus) != 'tap' ? 'pointer' : 'auto',
                                 }, className: `${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${textAlign}`, key: colIndex },
                                 React.createElement("div", { className: "wedatea2td-grid__box", "data-testid": `${colIndex}_click`, onClick: () => tapTo(col) },