lu-lowcode-package-form 0.9.76 → 0.9.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.76",
+  "version": "0.9.77",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@testing-library/jest-dom": "^5.17.0",
@@ -13,6 +13,7 @@
     "@wangeditor/editor-for-react": "^1.0.6",
     "antd": "^5.13.2",
     "dayjs": "^1.11.11",
+    "nanoid": "^5.0.7",
     "postcss-modules": "^6.0.0",
     "quill": "^2.0.2",
     "react-draggable": "^4.4.6",

package/src/App.jsx

@@ -180,7 +180,31 @@ function App() {
           ]} label="测试关联单选" options={[{ label: '选项1', value: '1', name: "1111", table: "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, { label: '选项2', value: '2' }]} __id="remark11" />
           <Layout.FormRow layout={'1'}>
             <Field.Table label="子表格" __id="table"  >
+            <Field.Number label="税率（%）" __id="shuilv_table"   withIds={[
+                  "shuilv"
+                ]}
+                withFill={{
+                  "value": [
+                      {
+                          "insert": {
+                              "span": true
+                          },
+                          "attributes": {
+                              "id": "shuilv",
+                              "color": "blue",
+                              "tagKey": "fieldsValue",
+                              "content": "当前表单.税率（%）"
+                          }
+                      },
+                     
+                  ],
+                  "version": 1723016911807,
+                  "withData": [
+
+                  ]
+              }}/>
               <Field.DatePicker defaultNow={true} label="日期时间" prompt="" datetype="date" __id="datetime2" />
+
               <Field.WithSingleSelect ref={testRef} fillRules={[
                 {
                   "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
@@ -191,15 +215,6 @@ function App() {
 
                   ]
                 },
-                {
-                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
-                  "type": 0,
-                  "source": "product_price12",
-                  "target": "product_price12",
-                  "subRules": [
-
-                  ]
-                },
                 {
                   "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
                   "type": 0,
@@ -210,7 +225,7 @@ function App() {
                   ]
                 },
 
-              ]} label="测试关联单选" options={[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项2', value: '2' }]} __id="remark11" />
+              ]} label="测试关联单选" options={[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }]} __id="remark11" />
 
               <Field.Switch label="开关" __id="switch_table"></Field.Switch>
               <Field.Input defaultValue={3} isRequired={true} label="含税单价" __id="product_price11" />

package/src/App.test.js

@@ -6,3 +6,4 @@ test('renders learn react link', () => {
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });
+

package/src/components/field/base.jsx

@@ -33,7 +33,7 @@ export const BaseWrapper = ({
 }) => {
     useEffect(()=>{
         if (defaultValue && typeof onChange === "function" && !value) {
-            console.log("defaultValue changed", defaultValue)
+            // console.log("defaultValue changed", defaultValue)
             onChange(defaultValue)
         }
     },[])
@@ -41,7 +41,7 @@ export const BaseWrapper = ({
     // 不接管只读属性的组件
     const ignoreReadonly = ["UploadImage", "UploadFile", "Table", "WithMultipleSelect", "WithSingleSelect"]
     if (readonly) {
-        console.log("children?.type?.displayName", children?.type?.displayName)
+        // console.log("children?.type?.displayName", children?.type?.displayName)
     }
     if (ignoreReadonly.includes(children?.type?.displayName) && readonly) readonly = false
     const formWarpper = (

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

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Button, Form, Input } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
 import { BaseWrapper } from "../base.jsx"
+import { type } from "@testing-library/user-event/dist/type/index.js";
+import { nanoid } from "nanoid";
 
 const TableAction = ({ label, subTableIndex, children, subTableHead = false, ...props }) => {
     //fsticky fright-0 
@@ -26,14 +28,16 @@ const TableCol = ({ children, width, ...props }) => {
     </div>
 }
 
-const Table = ({ children, ...props }) => {
+const Table = ({ children, onTableAddRow, ...props }) => {
     const [init, setInit] = useState(false);
     const name = props.componentId || props.__id
+    const childrenIds = React.Children.map(children, (child) => `${name}.${child.props.componentId || child.props.__id}`)
     const rules = []
-    const handleAdd = (add)=>{
+    const handleAdd = (add) => {
         if (!init) setInit(true);
         typeof add === "function" && add();
     }
+
     if (props.isRequired)
         rules.push({ required: true, message: `子表[${props.label}]必须填写` });
     return <Form.List name={name} rules={rules}>
@@ -41,7 +45,7 @@ const Table = ({ children, ...props }) => {
             if (fields.length === 0 && !init) handleAdd(add);
             return <div className="fw-full ">
                 <div className="fw-full frelative fmin-h-20 foverflow-x-auto">
-                  {fields.length === 0  && <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
+                    {fields.length === 0 && <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, {
@@ -52,16 +56,16 @@ const Table = ({ children, ...props }) => {
                                 })}
                             </TableCol>
                         })}
-                       {!props?.readonly && <TableAction subTableHead={true} key={`row_${0}_action`} subTable={true} subTableIndex={0} label={"操作"}>
-                        </TableAction>} 
+                        {!props?.readonly && <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 ">
-
+                            {/* {console.log("field",field)} */}
                             {React.Children.map(children, (child, childIndex) => {
                                 let { props } = child;
                                 const col_id = child?.props?.componentId || child?.props?.__id || childIndex;
-                                if (field?.[col_id] === undefined) field[col_id] = "";
+                                // if (field?.[col_id] === undefined) field[col_id] = "";
                                 const rules = []
                                 if (props.isRequired)
                                     rules.push({ required: true, message: `${props.label}必须填写` });
@@ -74,15 +78,16 @@ const Table = ({ children, ...props }) => {
                                         rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
                                     }
 
-                                return <TableCol width={150} key={`row_${index}_col_${childIndex}`}>
+                                return <TableCol width={150} key={`row_${field.key}_col_${childIndex}`}>
                                     <Form.Item
                                         style={{ marginBottom: 0 }}
                                         label=""
                                         name={[field.name, col_id]}
                                         rules={rules}
+                                        
                                     >
                                         {React.cloneElement(child, {
-                                            key: `row_${index}_child_${childIndex}`,
+                                            key: `row_${field.key}_child_${childIndex}`,
                                             subTable: true,
                                             subTableIndex: index,
                                             subTableHead: index == 0,
@@ -90,13 +95,16 @@ const Table = ({ children, ...props }) => {
                                     </Form.Item>
                                 </TableCol>
                             })}
-                            {!props?.readonly && <TableAction subTableHead={index ==0} key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
+                            {!props?.readonly && <TableAction subTableHead={index == 0} key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
                                 <DeleteOutlined className="fcursor-pointer" onClick={() => remove(index)} />
                             </TableAction>}
                         </div>
                     ))}
                 </div>
-                <Button onClick={() => add()} className="fmy-2">新增一行</Button>
+                <Button onClick={() => {
+                    add({ key: nanoid() }) 
+                    typeof onTableAddRow === "function" && onTableAddRow(childrenIds);
+                }} className="fmy-2">新增一行</Button>
             </div>
         }}
     </Form.List>
@@ -110,5 +118,6 @@ const TableWrapper = (props) => {
         </BaseWrapper>
     );
 }
+TableWrapper.displayName = "Table"
 export default TableWrapper;
 export { TableCol, TableAction };

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

@@ -3,6 +3,7 @@ import { Form, Row, Col, message } from "antd";
 
 import { debounce, isEqual } from 'lodash';
 import { evalFormula } from '../../utils/formula'
+import { nanoid } from 'nanoid';
 
 
 function batchElements(elements, groupSize) {
@@ -45,7 +46,7 @@ function batchElements(elements, groupSize) {
 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, () => ({
@@ -60,15 +61,16 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
 
     const lastFormValues = React.useRef(null);
-    const  getLastFieldValue = (path) => {
-        let current = lastFormValues.current;
-        for (let i = 0; i < path.length; i++) {
-            if (current == null) {
-                return undefined;
-            }
-            current = current[path[i]];
-        }
-        return current;
+    const getLastFieldValue = (path) => {
+        return lastFormValues.current?.[path]
+        // let current = lastFormValues.current;
+        // for (let i = 0; i < path.length; i++) {
+        //     if (current == null) {
+        //         return undefined;
+        //     }
+        //     current = current[path[i]];
+        // }
+        // return current;
     }
     const initializeDependencyMap = () => {
         const fields = [];
@@ -95,6 +97,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             }
         }
         dependencyMap.current = new Map();
+
         const childrenArray = React.Children.toArray(children);
         for (let index = 0; index < childrenArray.length; index++) {
             const element = childrenArray[index];
@@ -111,7 +114,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 ...field
             });
         });
-        // console.log("dependencyMap", dependencyMap.current)
+
         initializeFieldVisibility();
     };
 
@@ -127,6 +130,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 计算字段级联关系
     const handleFieldsWith = (identifier, fieldValues, init = false) => {
         let needRefresh = false;
+
         let parentIdentifier = [];
         if (Array.isArray(identifier)) {
             parentIdentifier = [...(identifier.slice(0, -1))]
@@ -135,8 +139,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         if (dependencyMap.current.has(identifier)) {
             const dependent = dependencyMap.current.get(identifier)
             const dependentChildren = dependent.children;
-            // console.log("identifier", identifier)
-            // console.log("dependentChildren", dependentChildren)
+
+
             if (!init && dependent?.fillRules && Array.isArray(dependent?.fillRules) && dependent?.fillRules.length > 0) {
                 handleFillRules(identifier, parentIdentifier, fieldValues, dependent?.fillRules)
             }
@@ -151,12 +155,16 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             });
         }
         return needRefresh;
+
     };
 
     // 处理填充规则
     const handleFillRules = (current_identifier, parentIdentifier, fieldValues, fillRules) => {
         // 获取当前变更的字段数据
         let current_value = getParamValue("fieldsValue", current_identifier, fieldValues, null)
+        let changedFields = {}
+
+        let ids = []
         for (let index = 0; index < fillRules.length; index++) {
             const rule = fillRules[index];
             let { source, target } = rule
@@ -164,21 +172,28 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             let setValue = source_value
             // 子表
             if (rule?.type == 1) {
+                if (dependencyMap.current.has(target)) {
+                    let tableChildren = dependencyMap.current.get(target)?.component?.props?.children
+                    if (Array.isArray(tableChildren) && tableChildren.length > 0) ids = tableChildren.map(item => `${source}.${item?.props?.componentId || item?.props?.__id}`)
+                    
+                }
                 if (source_value && typeof source_value == "string") {
                     try {
                         source_value = JSON.parse(source_value)
                     } catch (error) {
-                        console.log("error end", error)
+                        console.error("error end", error)
                     }
                 }
 
                 if (!Array.isArray(source_value)) return
-                let target_value = source_value.map(item => {
+                let target_value = source_value.map((item, value_index) => {
                     let target_item_value = {}
                     if (rule?.subRules && Array.isArray(rule?.subRules) && rule?.subRules.length > 0)
                         for (let index = 0; index < rule?.subRules.length; index++) {
                             const { source: subSource, target: subTarget } = rule?.subRules[index];
                             target_item_value[subTarget] = item?.[subSource]
+                            let changedField = { name: [target, value_index, subTarget], value: item?.[subSource] }
+                            changedFields[changedField.name] = changedField;
                         }
                     return target_item_value
                 })
@@ -197,10 +212,31 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     }
                 }
             }
-            form.setFieldValue(target, setValue)
-            handleFieldsWith(target, form.getFieldsValue())
+            if (rule?.type == 1) {
+                form.setFieldValue(target, undefined);
+            }
+
+            setTimeout(() => {
+                form.setFieldValue(target, setValue)
+                handleFieldsWith(target, form.getFieldsValue())
+                if (ids.length > 0) onTableAddRow(ids)
+            }, 0);
+
         }
-        // console.log("current value", current_value)
+
+        setTimeout(() => {
+            var changedKeys = Object.keys(changedFields)
+            if (changedKeys.length > 0) {
+                changedKeys.forEach(key => {
+                    changedFieldsState.current[key] = changedFields[key];
+                })
+                debounceHandleFieldsChange();
+            }
+
+
+            if (ids.length > 0) handleTableAddRow(ids)
+        }, 100)
+
     }
     // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
     const handleFieldsVisible = (fieldValues, child, parentIdentifier) => {
@@ -220,10 +256,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 处理级联数据源
     // 处理级联填充
     const handleFieldsWithFill = async (fieldValues, child, parentIdentifier, componentName) => {
-        // console.log("handleFieldsWithFill fieldValues", fieldValues)
-        // console.log("handleFieldsWithFill child", child)
-        // console.log("handleFieldsWithFill parentIdentifier", parentIdentifier)
-        // console.log("handleFieldsWithFill componentName", componentName)
+
+
+
+
         const withFill = child?.component?.props.withFill;
         const withDataFetch = child?.component?.props.withDataFetch;
         let withFillIndex = 0
@@ -240,7 +276,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         else if (childIdentifier.indexOf(".") >= 0) {
             childIdentifier = childIdentifier.split(".")
             let table_values = getParamValue("fieldsValue", childIdentifier[0], fieldValues, [])
-            // console.log("table_values", table_values)
             if (Array.isArray(table_values) && table_values.length > 0)
                 for (let index = 0; index < table_values.length; index++) {
                     await handleFieldsWithFill(fieldValues, child, [childIdentifier[0], index], componentName)
@@ -294,18 +329,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             }
                             else result = JSON.stringify(result)
                         }
-                        else if (result) result = `"${result}"`
+                        else if (result.length > 0) result = `"${result}"`
                     }
                 }
                 else result = insert
                 return result
             })
         }
-        // console.log("formula", formula)
+
         if (formula && formula.length > 0) {
             const formulaResult = evalFormula(formula);
-            // console.log("formulaResult", formulaResult)
-            // console.log("setFieldValue setFieldValue", childIdentifier)
+
+
             form.setFieldValue(childIdentifier, formulaResult)
             handleFieldsWith(childIdentifier, form.getFieldsValue())
         }
@@ -320,38 +355,72 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 const parentValue = fieldValues?.[parentKey] || [];
                 if (Array.isArray(parentValue))
                     result = parentValue.map(item => {
-                        return item?.[childKey] || ""
+                        return item?.[childKey] ?? ""
                     })
-                else result = parentValue?.[childKey] || ""
+                else result = parentValue?.[childKey] ?? ""
             }
-            else result = fieldValues?.[id] || ""
+            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] || ""
+                result = withData.data[0]?.[id] ?? ""
             }
         }
         return result
     }
 
-    const handleFieldsChange = debounce((changedFields, allFields) => {
+    const changedFieldsState = React.useRef({});
+    const debounceHandleFieldsChange = debounce(() => {
         const fieldValues = form.getFieldsValue();
         let needRefresh = false;
-        changedFields.forEach(field => {
-            if (field.name && field.name.length > 0 && !isEqual(field.value, getLastFieldValue(field.name))) {
+        if (!lastFormValues.current) lastFormValues.current = {}
+        for (let key in changedFieldsState.current) {
+            let field = changedFieldsState.current[key];
+            if (!isEqual(field.value, getLastFieldValue(field.name))) {
                 needRefresh = handleFieldsWith(field.name, fieldValues);
+                lastFormValues.current[field.name] = field.value;
             }
-        });
-
+        }
         if (needRefresh) {
             setFormContent(renderChildren());
         }
-        lastFormValues.current = form.getFieldsValue();
+        // lastFormValues.current = form.getFieldsValue();
+        changedFieldsState.current = {};
     }, 200);
 
+    const handleFieldsChange = (changedFields) => {
+        changedFields.filter(field => {
+            if (field.name && field.name.length > 0) {
+                // const fieldKey = field.name.filter(item => typeof item == "string").join(".")
+                changedFieldsState.current[field.name] = field;
+            }
+        })
+
+        debounceHandleFieldsChange();
+    }
+    const handleTableAddRow = (ids) => {
+        let withAllIds = []
+        ids.forEach(id => {
+            if (!dependencyMap.current.has(id)) return
+            let component = dependencyMap.current.get(id)
+            if (component.withIds.length <= 0) return
+            withAllIds.push(...(component.withIds.filter(withid => !withAllIds.includes(withid))))
+        })
+        withAllIds = withAllIds.filter(item => {
+            var withValue = form.getFieldValue(item)
+            if (typeof withValue != "number" && !withValue) return false
+            return true
+        })
+        const fieldValues = form.getFieldsValue();
+        setTimeout(() => {
+            withAllIds.forEach(withid => {
+                handleFieldsWith(withid, fieldValues);
+            })
+        }, 0);
+    }
     const renderChildren = () => {
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
@@ -381,15 +450,19 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         else {
                             rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
                         }
+                    let childComponent = child;
+                    if (isTable || isLayoutComponent) {
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow })
+                    }
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
-                            {(isLayoutComponent || isTable) ? child : <Form.Item
+                            {(isLayoutComponent || isTable) ? childComponent : <Form.Item
                                 style={{ marginBottom: 0 }}
                                 label=""
                                 name={identifier}
                                 rules={rules}
                             >
-                                {child}
+                                {childComponent}
                             </Form.Item>}
                         </Col>
                     );

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Form, Row, Col } from 'antd';
 
-const LayoutFormRow = ({ children, layout }) => {
+const LayoutFormRow = ({ children, layout, onTableAddRow}) => {
   layout = layout || '1';
   const getColSpan = (layoutStr) => {
     const layoutArray = layoutStr.split(',').map(Number);
@@ -16,7 +16,12 @@ const LayoutFormRow = ({ children, layout }) => {
     return React.Children.toArray(children).map((child, index) => {
       const props = child.props;
       const name = props?.componentId || props?.__id;
-
+      var componentName = child.type?.displayName || child.props?._componentName;
+      // console.log("initializeDependencyMap componentName", componentName)
+      let childComponent = child;
+      if (componentName  == 'Field.Table') 
+          childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow })
+     
       if (name) {
         return (
           colSpans?.[index] && <Col span={colSpans[index]} key={index}>
@@ -27,14 +32,14 @@ const LayoutFormRow = ({ children, layout }) => {
               name={name}
               rules={[{ required: props.isRequired, message: `${props.title}不能为空！` }]}
             >
-              {child}
+              {childComponent}
             </Form.Item>
           </Col>
         );
       } else {
         return (
           colSpans?.[index] && <Col span={colSpans[index]} key={index}>
-            {child}
+            {childComponent}
           </Col>
         );
       }

package/src/components/index.jsx

@@ -42,6 +42,8 @@ Object.keys(Field).forEach(key => {
     Field[key].displayName = `Field.${key}`;
 });
 
+console.log("Field",Field)
+
 const Layout = {
     FormRow: LayoutFormRow,
     FormGroupTitle: LayoutFormGroupTitle,

package/src/utils/formula.js

@@ -12,3 +12,4 @@ const evalFormula =(formula) => {
 };
 
 export {evalFormula};
+

package/src/utils/index.jsx

@@ -1,5 +1,6 @@
 import { DeleteFilled, EditFilled, FileAddFilled } from "@ant-design/icons";
 import { Tooltip } from "antd";
+import _ from "lodash";
 
 export const createPromiseWrapper = () => {
   let resolve, reject;
@@ -8,7 +9,7 @@ export const createPromiseWrapper = () => {
     resolve = res;
     reject = rej;
   });
-  
+
   return { promise, resolve, reject };
 };
 
@@ -85,7 +86,7 @@ export function handleTreeEdit(
   children,
   title,
   rootId,
-  handle = { New: () => {}, Edit: () => {}, Del: () => {} },
+  handle = { New: () => { }, Edit: () => { }, Del: () => { } },
   moduleName = "节点"
 ) {
   const newNode = (node) => ({
@@ -184,3 +185,19 @@ function constructTree(
     return father[parentId] === rootId;
   });
 }
+
+
+const debouncers = {};
+/**
+ * 一个带key的防抖函数
+ * @param {*} key  
+ * @param {*} func 
+ * @param {*} wait 
+ * @returns 
+ */
+export function debounce(func, wait, key = "default") {
+  if (!debouncers[key]) {
+    debouncers[key] = _.debounce(func, wait);
+  }
+  return debouncers[key];
+}