lu-lowcode-package-form 0.9.30 → 0.9.32

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

@@ -0,0 +1,268 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { Button } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import { isEqual, debounce } from 'lodash';
+import { evalFormula } from "../../../utils/formula";
+
+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="">
+        <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 ">
+                {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]);
+
+    useEffect(() => {
+        if (updateField && updateField.identifier) {
+            handleFieldsWith(updateField.identifier, updateField.value, updateField.rowIndex);
+        }
+    }, [updateField])
+
+
+    return (
+        <>
+            <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}>
+                        {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),
+                                })}
+                            </TableCol>
+                        })}
+                        <TableAction key={`row_${rowIndex}_action`} subTable={true} subTableIndex={rowIndex} label={"操作"}>
+                            <DeleteOutlined className="fcursor-pointer" onClick={() => handleDeleteRow(rowIndex)} />
+                        </TableAction>
+                    </div>
+                ))}
+            </div>
+            <Button onClick={addRow} className="fmy-2">新增一行</Button>
+        </>
+    );
+};
+
+export default Table;
+export { TableCol, TableAction };

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