lu-lowcode-package-form 0.9.31 → 0.9.32

package/src/components/field/table/index.jsx

@@ -1,268 +1,101 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
-import { Button } from "antd";
+import React, { useEffect, useState } from "react";
+import { Button, Form, Input } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import { isEqual, debounce } from 'lodash';
-import { evalFormula } from "../../../utils/formula";
+import { BaseWrapper } from "../base.jsx"
 
-const TableCol = ({ children, width, ...props }) => {
-    const [sWidth, setSWidth] = useState(0);
-    useEffect(() => {
-        setSWidth(width);
-    }, [width]);
-    return <div className="fflex-1" style={{ minWidth: `${sWidth}px` }} {...props}>
-        {children}
-    </div>
-}
-
-const TableAction = ({ label, subTableIndex, children, ...props }) => {
-    return <div className="">
+const TableAction = ({ label, subTableIndex, children, subTableHead = false, ...props }) => {
+    return <div className="fw-12">
         <div className="frelative fw-full fh-full fflex fflex-col foverflow-hidden">
-            {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fflex-nowrap ftext-nowrap fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
-            <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border ">
+            {label && subTableHead && <div className='fh-12 ffont-semibold fbg-[#fafafa] ftext-sm fflex fflex-nowrap ftext-nowrap fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
+            {!subTableHead && <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border ">
                 {children}
             </div>
+            }
         </div>
     </div>
 }
 
-const Table = ({ children, value, onChange, ...props }) => {
-    const [rows, setRows] = useState([{}]);
-    const prevRowsRef = useRef(rows);
-    const dependencyMap = useRef(new Map());
-    const [updateField, setUpdateField] = useState({});
-    const tableId = props.componentId || props.__id;
-    const setPrevRows = (newValue) => {
-        setRows(newValue);
-        prevRowsRef.current = newValue;
-      }
-    
-    useEffect(() => {
-        console.log("value useEffect ", JSON.stringify(value));
-        if (value && typeof value === "string") {
-            try {
-                value = JSON.parse(value);
-                onChange(value);
-            } catch (error) { }
-        }
-        if (value && Array.isArray(value) && !isEqual(prevRowsRef.current, value)) {
-            console.log("useEffect setRows");
-            setPrevRows(value);
-        }
-    }, [value]);
-
-    useEffect(() => {
-        console.log("children useEffect ",children);
-        initializeDependencyMap();
-    }, [children]);
-
-    const initializeDependencyMap = useCallback(() => {
-        dependencyMap.current.clear();
-        const childrenArray = React.Children.toArray(children);
-        childrenArray.forEach(child => {
-            const { componentId, __id, ...props } = child.props;
-            const identifier = `${tableId}.${(componentId || __id)}`;
-
-            dependencyMap.current.set(identifier, {
-                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
-                show: true,
-            });
-        });
-        initializeFieldVisibility();
-    }, [children, tableId]);
-
-    const handleRowValues = useCallback((rowValues) => {
-        const result = {};
-        for (let key in rowValues) {
-            result[`${tableId}.${key}`] = rowValues[key] || '';
-        }
-        return result;
-    }, [tableId]);
-
-    const initializeFieldVisibility = useCallback(() => {
-        rows.forEach((row, rowIndex) => {
-            const fieldValues = handleRowValues(row);
-            for (let key of dependencyMap.current.keys()) {
-                handleFieldsWith(key, fieldValues, rowIndex);
-            }
-        });
-    }, [rows, handleRowValues]);
-
-    const handleFieldsWith = useCallback((identifier, fieldValues, rowIndex) => {
-        let needRefresh = false;
-        const fullIdentifier = `${tableId}.${identifier}`;
-        if (dependencyMap.current.has(fullIdentifier)) {
-            const dependentChildren = dependencyMap.current.get(fullIdentifier).children;
-            dependentChildren.forEach(child => {
-                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
-                    needRefresh = handleFieldsVisible(fieldValues, child);
-                }
-
-                if (child.props.withFill) {
-                    handleFieldsWithFill(fieldValues, child, rowIndex);
-                }
-            });
-        }
-        return needRefresh;
-    }, [tableId, rows]);
-
-    const handleFieldsVisible = useCallback((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 = useCallback(async (fieldValues, child, rowIndex) => {
-        const withFill = child.props.withFill;
-        const withDataFetch = child.props.withDataFetch;
-
-        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(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;
-            const formulaResult = evalFormula(formula);
-            console.log("formulaResult", formulaResult);
-            console.log("handleFieldsWithFill setRows");
-            const newRows = [...rows]
-            newRows[rowIndex][childIdentifier] = formulaResult;
-            setPrevRows(newRows)
-        }
-    }, [rows])
-
-    const getParamValue = useCallback((tagKey, id, fieldValues, withDatas) => {
-        let result = "";
-        if (tagKey === "fieldsValue") result = fieldValues?.[id] || "";
-        else {
-            let withData = withDatas.find(item => item.id === tagKey);
-            if (withData && withData.data && withData.data.length > 0) {
-                result = withData.data[0]?.[id] || "";
-            }
-        }
-        return result;
-    }, []);
-
-
-
-    const handleInputChange = useCallback((rowIndex, childIndex, e) => {
-        console.log(e)
-        const newRows = [...rows];
-        newRows[rowIndex] = {
-            ...newRows[rowIndex],
-            [childIndex]: e?.target?.value ||  e || '',
-        };
-        console.log("handleInputChange setRows")
-        setPrevRows(newRows);
-
-        setUpdateField({
-            rowIndex: rowIndex,
-            identifier: childIndex,
-            value: handleRowValues(newRows[rowIndex]),
-        });
-
-    }, [rows, handleFieldsWith, handleRowValues, onChange]);
-
-
-    const handleDeleteRow = (rowIndex) => {
-        const newRows = [...rows];
-        newRows.splice(rowIndex, 1);
-        console.log("handleDeleteRow setRows")
-        setPrevRows(newRows);
-    }
-
-    const addRow = () => {
-        console.log("addRow setRows")
-        setPrevRows([...rows, {}]);
-    }
-
-    useEffect(() => {
-        console.log("rows changed rows", JSON.stringify(prevRowsRef.current));
-        console.log("rows changed value", JSON.stringify(value));
-        if (isEqual(prevRowsRef.current, value)) return;
-        console.log("noreq")
-        typeof onChange === "function" && onChange(prevRowsRef.current);
-    }, [rows]);
 
+const TableCol = ({ children, width, ...props }) => {
+    const [sWidth, setSWidth] = useState(0);
     useEffect(() => {
-        if (updateField && updateField.identifier) {
-            handleFieldsWith(updateField.identifier, updateField.value, updateField.rowIndex);
-        }
-    }, [updateField])
-
+        setSWidth(width);
+    }, [width]);
+    return <div className="fflex-1 fpx-1" style={{ minWidth: `${sWidth}px` }} {...props}>
+        {children}
+    </div>
+}
 
-    return (
-        <>
+const Table = ({ children, ...props }) => {
+    const name = props.componentId || props.__id
+    const rules = []
+    if (props.isRequired)
+        rules.push({ required: true, message: `子表[${props.label}]必须填写` });
+    return <Form.List name={name} rules={rules}>
+        {(fields, { add, remove }) => (
             <div className="fw-full frelative fmin-h-20 foverflow-x-auto">
-                
-                {rows.map((row, rowIndex) => (
-                    <div className="fborder-b fflex flex-nowrap fmin-w-full" key={rowIndex}>
+                <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
+                    {React.Children.map(children, (child, childIndex) => {
+                        return <TableCol width={150} key={`row_${0}_col_${childIndex}`}>
+                            {React.cloneElement(child, {
+                                key: `row_${0}_child_${childIndex}`,
+                                subTable: true,
+                                subTableHead: true
+                            })}
+                        </TableCol>
+                    })}
+                    <TableAction subTableHead={true} key={`row_${0}_action`} subTable={true} subTableIndex={0} label={"操作"}>
+                    </TableAction>
+                </div>
+                {fields.map((field, index) => (
+                    <div key={field.key} className="fborder-b fflex flex-nowrap fmin-w-full ">
                         {React.Children.map(children, (child, childIndex) => {
-                            const col_id = child?.props?.__id || childIndex;
-                            if (row?.[col_id] === undefined) row[col_id] = "";
-                            return <TableCol width={150} key={`row_${rowIndex}_col_${childIndex}`}>
-                                {React.cloneElement(child, {
-                                    key: `row_${rowIndex}_child_${childIndex}`,
-                                    subTable: true,
-                                    subTableIndex: rowIndex,
-                                    value: row[col_id] || '',
-                                    onChange: (e) => handleInputChange(rowIndex, col_id, e),
-                                })}
+                            let { props } = child;
+                            const col_id = child?.props?.componentId || child?.props?.__id || childIndex;
+                            if (field?.[col_id] === undefined) field[col_id] = "";
+                            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 <TableCol width={150} key={`row_${index}_col_${childIndex}`}>
+                                <Form.Item
+                                    style={{ marginBottom: 0 }}
+                                    label=""
+                                    name={[field.name, col_id]}
+                                    rules={rules}
+                                >
+                                    {React.cloneElement(child, {
+                                        key: `row_${index}_child_${childIndex}`,
+                                        subTable: true,
+                                        subTableIndex: index,
+                                    })}
+                                </Form.Item>
                             </TableCol>
                         })}
-                        <TableAction key={`row_${rowIndex}_action`} subTable={true} subTableIndex={rowIndex} label={"操作"}>
-                            <DeleteOutlined className="fcursor-pointer" onClick={() => handleDeleteRow(rowIndex)} />
+                        <TableAction key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
+                            <DeleteOutlined className="fcursor-pointer" onClick={() => remove(index)} />
                         </TableAction>
                     </div>
                 ))}
+                <Button onClick={() => add()} className="fmy-2">新增一行</Button>
             </div>
-            <Button onClick={addRow} className="fmy-2">新增一行</Button>
-        </>
+        )}
+    </Form.List>
+}
+const TableWrapper = (props) => {
+    return (
+        <BaseWrapper  {...props} higLabel={true} >
+            <Table {...props} />
+        </BaseWrapper>
     );
-};
-
-export default Table;
-export { TableCol, TableAction };
+}
+export default TableWrapper;
+export { TableCol, TableAction };

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 };