lu-lowcode-package-form 0.9.31 → 0.9.32

package/src/components/form-container/index.jsx

@@ -59,16 +59,26 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     const initializeDependencyMap = () => {
         const fields = [];
-        function traverse(currentNode) {
+        function traverse(currentNode,parentNode = null) {
             var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
             const { props } = currentNode;
             if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.'))) {
-                fields.push(currentNode);
+                let identifier = props?.componentId || props?.__id;
+                let withIds = []
+                if(parentNode && parentNode?.props) {
+                    identifier = `${parentNode?.props?.componentId || parentNode?.props?.__id}.${identifier}`
+                }
+                if (props?.withId) 
+                    withIds.push(props?.withId)
+                if (props?.withIds) 
+                    withIds = [...withIds,...props?.withIds]
+                
+                fields.push({identifier, withIds,component: currentNode});
             }
 
             if (props?.children) {
                 let children = React.Children.toArray(props?.children)
-                children.forEach(child => traverse(child));
+                children.forEach(child => traverse(child,(componentName && (componentName.startsWith('Field.')))?currentNode:null));
             }
         }
         dependencyMap.current = new Map();
@@ -77,13 +87,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             const element = childrenArray[index];
             traverse(element)
         }
-        fields.forEach(child => {
-            const { componentId, __id, ...props } = child?.props;
-            const identifier = componentId || __id;
+        console.log("fields", fields)
+        fields.forEach(field => {
+            const { identifier } = field;
             dependencyMap.current.set(identifier, {
-                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item => {
-                    return identifier == item || item.startsWith(identifier + '.')
-                })),
+                // children:  childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item => {
+                //     return identifier == item || item.startsWith(identifier + '.')
+                // })),
+                children: fields.filter(item=>item.withIds.some(item=>item == identifier)),
                 show: true,
             });
         });
@@ -103,15 +114,22 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 计算字段级联关系
     const handleFieldsWith = (identifier, fieldValues) => {
         let needRefresh = false;
+        let parentIdentifier = [];
+        if (Array.isArray(identifier)) {
+            parentIdentifier = [...(identifier.slice(0,-1))]
+            identifier = identifier.filter(item=>typeof item == "string").join(".")
+        }
         if (dependencyMap.current.has(identifier)) {
             const dependentChildren = dependencyMap.current.get(identifier).children;
+            console.log("dependentChildren", dependentChildren)
+            
             dependentChildren.forEach(child => {
-                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
-                    needRefresh = handleFieldsVisible(fieldValues, child)
+                if (child.component.props.withFunc && typeof child.component.props.withFunc === 'function') {
+                    needRefresh = handleFieldsVisible(fieldValues, child,parentIdentifier)
                 }
 
-                if (child.props.withFill)
-                    handleFieldsWithFill(fieldValues, child)
+                if (child.component.props.withFill)
+                    handleFieldsWithFill(fieldValues, child,parentIdentifier)
 
             });
         }
@@ -119,10 +137,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
 
     // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
-    const handleFieldsVisible = (fieldValues, child) => {
+    const handleFieldsVisible = (fieldValues, child,parentIdentifier) => {
         let needRefresh = false;
-        const childShouldBeVisible = child.props.withFunc(fieldValues);
-        const childIdentifier = child.props.componentId || child.props.__id;
+        const childShouldBeVisible = child?.component?.props?.withFunc(fieldValues);
+        const childIdentifier = child?.identifier;
         if (dependencyMap.current.has(childIdentifier)) {
             const childData = dependencyMap.current.get(childIdentifier);
             if (childData.show !== childShouldBeVisible) {
@@ -135,13 +153,19 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }
     // 处理级联数据源
     // 处理级联填充
-    const handleFieldsWithFill = async (fieldValues, child) => {
-        const withFill = child.props.withFill;
-        const withDataFetch = child.props.withDataFetch;
-        console.log("withFill", withFill)
-        console.log("fieldValues", fieldValues)
-        console.log("child", child)
-
+    const handleFieldsWithFill = async (fieldValues, child,parentIdentifier) => {
+        const withFill = child?.component?.props.withFill;
+        const withDataFetch = child?.component?.props.withDataFetch;
+        let withFillIndex = 0
+        let withFillGroup = ""
+        let childIdentifier = child.identifier;
+        if (parentIdentifier && Array.isArray(parentIdentifier) && parentIdentifier.length > 1){
+            withFillGroup = parentIdentifier.filter(item=>typeof item == "string").join(".")
+            withFillIndex = parentIdentifier[parentIdentifier.length-1]
+            if(childIdentifier.startsWith(`${withFillGroup}.`)) {
+                childIdentifier = [...parentIdentifier, childIdentifier.replace(`${withFillGroup}.`,"")]
+            }
+        }
         let withDatas = [];
         // 先处理依赖数据
         if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
@@ -174,8 +198,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 const { insert, attributes } = item
                 if (typeof insert !== "string") {
                     if (insert?.span && attributes && attributes.tagKey && attributes.id) {
+
                         result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas)
-                        if (Array.isArray(result)) result = JSON.stringify(result)
+                        if (Array.isArray(result)){
+                            if (Array.isArray(childIdentifier) && result.length > withFillIndex) {
+                                result = result[withFillIndex]
+                            }
+                            else result = JSON.stringify(result)
+                        }
                         else if (result) result = `"${result}"`
                     }
                 }
@@ -183,10 +213,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 return result
             })
         }
-        console.log("formula", formula)
         if (formula && formula.length > 0) {
-            const childIdentifier = child.props.componentId || child.props.__id;
-            form.setFieldValue(childIdentifier, evalFormula(formula))
+            const formulaResult = evalFormula(formula);
+            form.setFieldValue(childIdentifier,formulaResult)
+            handleFieldsWith(childIdentifier, form.getFieldsValue())
         }
     }
 
@@ -219,9 +249,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     const handleFieldsChange = debounce((changedFields, allFields) => {
         const fieldValues = form.getFieldsValue();
         let needRefresh = false;
+        console.log("changedFields",changedFields)
         changedFields.forEach(field => {
             if (field.name && field.name.length > 0) {
-                needRefresh = handleFieldsWith(field.name[0], fieldValues);
+                needRefresh = handleFieldsWith(field.name, fieldValues);
             }
         });
 
@@ -236,7 +267,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         const groupedChildren = batchElements(
             childrenArray.filter(child => {
                 const identifier = child.props.componentId || child.props.__id;
-                return dependencyMap.current.has(identifier) && dependencyMap.current.get(identifier).show;
+                return !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
             }),
             cols
         );
@@ -248,6 +279,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     const componentName = child.type?.displayName || _componentName;
                     const identifier = componentId || __id;
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
+                    const isTable = componentName && componentName == 'Field.Table';
                     const rules = []
                     if (props.isRequired)
                         rules.push({ required: true, message: `${props.label}必须填写` });
@@ -261,18 +293,17 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         }
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
-                            {isLayoutComponent ? (
-                                child
-                            ) : (
-                                <Form.Item
-                                    style={{ marginBottom: 0 }}
-                                    label=""
-                                    name={identifier}
-                                    rules={rules}
-                                >
-                                    {child}
-                                </Form.Item>
-                            )}
+                            {(isLayoutComponent || isTable) && child}
+                            {!isLayoutComponent && <Form.Item
+                                style={{ marginBottom: 0 }}
+                                label=""
+                                name={identifier}
+                                rules={rules}
+                            >
+                                {child}
+                            </Form.Item>
+                            }
+
                         </Col>
                     );
                 })}

package/src/components/form-container/layout/form-row.jsx

@@ -11,7 +11,6 @@ const LayoutFormRow = ({ children, layout }) => {
 
   const colSpans = useMemo(() => getColSpan(layout), [layout]);
 
-  console.log("colSpans", colSpans)
 
   const formItems = useMemo(() => {
     return React.Children.toArray(children).map((child, index) => {