lu-lowcode-package-form 0.9.30 → 0.9.32

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

@@ -0,0 +1,302 @@
+import React, { forwardRef, useEffect } from "react";
+import { Form, Row, Col, message } from "antd";
+
+import { debounce } from 'lodash';
+import { evalFormula } from '../../utils/formula'
+
+
+function batchElements(elements, groupSize) {
+    const groupedElements = [];
+    let tempArray = [];
+
+    const fillWithReactElement = (size, array) => {
+        const missingElementsCount = size - array.length;
+        array.push(...new Array(missingElementsCount).fill(React.createElement('div')));
+    };
+
+    for (const element of elements) {
+        const { _componentName } = element?.props || {};
+        const componentName = element.type?.displayName || _componentName;
+        if (componentName && componentName.startsWith('Layout.')) {
+            if (tempArray.length > 0) {
+                fillWithReactElement(groupSize, tempArray);
+                groupedElements.push(tempArray);
+                tempArray = [];
+            }
+            groupedElements.push([element]);
+        } else {
+            tempArray.push(element);
+            if (tempArray.length === groupSize) {
+                groupedElements.push(tempArray);
+                tempArray = [];
+            }
+        }
+    }
+
+    if (tempArray.length > 0) {
+        fillWithReactElement(groupSize, tempArray);
+        groupedElements.push(tempArray);
+    }
+
+    return groupedElements;
+}
+
+
+const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) => {
+    const [form] = Form.useForm();
+    const [formContent, setFormContent] = React.useState(null);
+    const dependencyMap = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => ({
+        formRef: form,
+        initializeFieldVisibility,
+    }), []);
+
+    useEffect(() => {
+        initializeDependencyMap();
+        setFormContent(renderChildren());
+    }, [children, cols]);
+
+    const initializeDependencyMap = () => {
+        const fields = [];
+        function traverse(currentNode) {
+            var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
+            const { props } = currentNode;
+            if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.'))) {
+                fields.push(currentNode);
+            }
+
+            if (props?.children) {
+                let children = React.Children.toArray(props?.children)
+                children.forEach(child => traverse(child));
+            }
+        }
+        dependencyMap.current = new Map();
+        const childrenArray = React.Children.toArray(children);
+        for (let index = 0; index < childrenArray.length; index++) {
+            const element = childrenArray[index];
+            traverse(element)
+        }
+        fields.forEach(child => {
+            const { componentId, __id, ...props } = child?.props;
+            const identifier = componentId || __id;
+            dependencyMap.current.set(identifier, {
+                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item => {
+                    return identifier == item || item.startsWith(identifier + '.')
+                })),
+                show: true,
+            });
+        });
+        console.log("dependencyMap", dependencyMap.current)
+        initializeFieldVisibility();
+    };
+
+    // 初始化字段的级联关系
+    const initializeFieldVisibility = (reloadFields = false) => {
+        const fieldValues = form.getFieldsValue();
+        for (let key of dependencyMap.current.keys()) {
+            handleFieldsWith(key, fieldValues);
+        }
+        if (reloadFields) setFormContent(renderChildren());
+    };
+
+    // 计算字段级联关系
+    const handleFieldsWith = (identifier, fieldValues) => {
+        let needRefresh = false;
+        if (dependencyMap.current.has(identifier)) {
+            const dependentChildren = dependencyMap.current.get(identifier).children;
+            dependentChildren.forEach(child => {
+                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
+                    needRefresh = handleFieldsVisible(fieldValues, child)
+                }
+
+                if (child.props.withFill)
+                    handleFieldsWithFill(fieldValues, child)
+
+            });
+        }
+        return needRefresh;
+    };
+
+    // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
+    const handleFieldsVisible = (fieldValues, child) => {
+        let needRefresh = false;
+        const childShouldBeVisible = child.props.withFunc(fieldValues);
+        const childIdentifier = child.props.componentId || child.props.__id;
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (childData.show !== childShouldBeVisible) {
+                childData.show = childShouldBeVisible;
+                dependencyMap.current.set(childIdentifier, childData);
+                needRefresh = true;
+            }
+        }
+        return needRefresh
+    }
+    // 处理级联数据源
+    // 处理级联填充
+    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)
+
+        let withDatas = [];
+        // 先处理依赖数据
+        if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
+            for (let index = 0; index < withFill?.withData.length; index++) {
+                const element = withFill?.withData[index];
+                let params = {}
+                params.tableName = element.withTable.table_name
+                params.filter = {}
+                for (let index = 0; index < element.withCondition.length; index++) {
+                    const { value: condition_value, column: condition_column } = element.withCondition[index];
+                    params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas)
+                }
+
+                // 访问接口获取数据
+                const response = await withDataFetch(params)
+                if (response.code === 0 && response.data.list) {
+                    withDatas.push({
+                        id: element.id,
+                        data: response.data.list
+                    })
+                }
+            }
+        }
+
+        // 构造计算公式
+        let formula;
+        if (withFill.value && withFill.value.length > 0) {
+            formula = withFill.value.map(item => {
+                let result = "";
+                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)
+                        else if (result) result = `"${result}"`
+                    }
+                }
+                else result = insert
+                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 getParamValue = (tagKey, id, fieldValues, withDatas) => {
+        let result = "";
+        // 从当前表单字段取值
+        if (tagKey == "fieldsValue") {
+            if (id.indexOf(".") >= 0) {
+                const [parentKey, childKey] = id.split(".");
+                const parentValue = fieldValues?.[parentKey] || [];
+                if (Array.isArray(parentValue))
+                    result = parentValue.map(item => {
+                        return item?.[childKey] || ""
+                    })
+                else result = parentValue?.[childKey] || ""
+            }
+            else result = fieldValues?.[id] || ""
+        }
+        // 从依赖数据取值
+        else {
+            let withData = withDatas.find(item => item.id === tagKey)
+            if (withData && withData.data && withData.data.length > 0) {
+                // 暂时只取一条数据，后续再想 sum 函数等问题
+                result = withData.data[0]?.[id] || ""
+            }
+        }
+        return result
+    }
+
+    const handleFieldsChange = debounce((changedFields, allFields) => {
+        const fieldValues = form.getFieldsValue();
+        let needRefresh = false;
+        changedFields.forEach(field => {
+            if (field.name && field.name.length > 0) {
+                needRefresh = handleFieldsWith(field.name[0], fieldValues);
+            }
+        });
+
+        if (needRefresh) {
+            setFormContent(renderChildren());
+        }
+    }, 200);
+
+    const renderChildren = () => {
+        const childrenArray = React.Children.toArray(children);
+        console.log("childrenArray", childrenArray)
+        const groupedChildren = batchElements(
+            childrenArray.filter(child => {
+                const identifier = child.props.componentId || child.props.__id;
+                return dependencyMap.current.has(identifier) && dependencyMap.current.get(identifier).show;
+            }),
+            cols
+        );
+
+        return groupedChildren.map((group, index) => (
+            <Row key={`row-${index}`} gutter={[24, 24]}>
+                {group.map((child, index) => {
+                    const { componentId, __id, _componentName, ...props } = child.props;
+                    const componentName = child.type?.displayName || _componentName;
+                    const identifier = componentId || __id;
+                    const isLayoutComponent = componentName && componentName.startsWith('Layout.');
+                    const rules = []
+                    if (props.isRequired)
+                        rules.push({ required: true, message: `${props.label}必须填写` });
+                    if (props.rules)
+                        if (Array.isArray(props.rules)) {
+                            const pattern = props.rules.join("|")
+                            rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
+                        }
+                        else {
+                            rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
+                        }
+                    return (
+                        <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
+                            {isLayoutComponent && child}
+                            {!isLayoutComponent && <Form.Item
+                                style={{ marginBottom: 0 }}
+                                label=""
+                                name={identifier}
+                                rules={rules}
+                            >
+                                {child}
+                            </Form.Item>
+                            }
+
+                        </Col>
+                    );
+                })}
+            </Row>
+        ));
+    };
+
+    return (
+        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
+            {formContent}
+        </Form>
+    );
+});
+
+export function withWrap(Component) {
+    return forwardRef((props, ref) => <Component {...props} ref={ref} forwardedRef={ref} />);
+}
+
+export class FormContainerClass extends React.PureComponent {
+    render() {
+        const { forwardedRef, ...otherProps } = this.props;
+        return <FormContainer {...otherProps} ref={forwardedRef} />
+    }
+}
+const FormContainerWrapper = withWrap(({ forwardedRef, ...props }) => <FormContainer {...props} ref={forwardedRef} />);
+
+export { LayoutFormRow, LayoutFormGroupTitle } from './layout';
+export { FormContainer, FormContainerWrapper };

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) => {