lu-lowcode-package-form 0.11.50 → 0.11.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.11.50",
+  "version": "0.11.53",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/App.jsx

@@ -575,7 +575,7 @@ function App() {
                   code: 0, data: {
                     list:
                       [
-                        { label: '选项1', value: '1', table_fill: [{ fill_shuilv:0.13, fill_tianchong1: { label: '选项1', value: '1' }, fill_tianchong2: { label: '选项2', value: '2' } }] },
+                        { label: '选项1', value: '1', table_fill: [{ fill_shuilv:0.13, fill_tianchong1: { label: '选项1', value: '1' }, fill_tianchong2: { label: '选项2', value: '2' } },{ fill_shuilv:0.13, fill_tianchong1: { label: '选项1', value: '1' }, fill_tianchong2: { label: '选项2', value: '2' } }] },
                         { label: '选项2', value: '2' },
                         { label: '选项3', value: '3' }
                       ]

package/src/components/field/select/search-select.jsx

@@ -79,18 +79,16 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
             //         console.log("callback loadValue", loadValue)
             //         let item = selectOptions.find(item => item.value == loadValue?.value || item.value == loadValue);
             //         if (item && !isEqual(item, loadValue)) {
-            //             console.log(`[${props?.label}]debounceFetchOptions new value /////`, item);
             //             typeof onChange === 'function' && onChange(item);
             //         }
             //     }
             // });
             debounceFetchOptions({ ...requestParams, [option_value]: loadValue?.value }, null, (selectOptions) => {
                 if (selectOptions && selectOptions.length > 0) {
-                    console.log(`[${props?.label}]callback selectOptions`, selectOptions)
-                    console.log(`[${props?.label}]callback loadValue`, loadValue)
+                    // console.log(`[${props?.label}]callback selectOptions`, selectOptions)
+                    // console.log(`[${props?.label}]callback loadValue`, loadValue)
                     let item = selectOptions.find(item => item.value == loadValue?.value || item.value == loadValue);
                     if (item && !isEqual(item, loadValue)) {
-                        console.log(`[${props?.label}]debounceFetchOptions new value /////`, item);
                         typeof onChange === 'function' && onChange(item);
                     }
                 }
@@ -124,11 +122,8 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
         if (debounceFetchOptionsRef.current) clearTimeout(debounceFetchOptionsRef.current);
         debounceFetchOptionsRef.current = setTimeout(() => {
             const callbacks = callbackQueue.current;
-            console.log(`[${props?.label}]debounceFetchOptions callbackQueue`, JSON.parse(JSON.stringify(callbacks)));
             callbackQueue.current = [];
             fetchOptions(params, ruleParams, fieldName).then(result => {
-                console.log(`[${props?.label}]debounceFetchOptions result`, result);
-                console.log(`[${props?.label}]debounceFetchOptions callbacks`, callbacks);
                 while (callbacks.length > 0) {
                     const callback = callbacks.shift();
                     if (typeof callback === 'function') {

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

@@ -8,7 +8,7 @@ import { nanoid } from 'nanoid';
 import { eventEmitter } from '../../utils/events'
 
 
-function batchElements(elements, groupSize,dmap) {
+function batchElements(elements, groupSize, dmap) {
     const groupedElements = [];
     let tempArray = [];
 
@@ -61,7 +61,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         if (!isEqual(formContentRef.current, newFormContent)) {
             formContentRef.current = newFormContent;
             setFormContent(newFormContent);
-          }
+        }
     }
     // 调用setFieldsValue时,进入锁定状态,阻止因字段值变化而触发级联处理
     const lockStatus = React.useRef(0);
@@ -73,32 +73,42 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         currentCycleId: 0,
         // 当前更新周期的依赖路径
         updatePath: [],
+        // 最大更新深度限制，避免过深的嵌套引起栈溢出
+        MAX_DEPTH: 30, 
         // 开始新的更新周期
-        startNewCycle: function() {
+        startNewCycle: function () {
             this.currentCycleId++;
             this.updatePath = [];
             return this.currentCycleId;
         },
         // 添加依赖路径
-        addToPath: function(fieldId) {
-            this.updatePath.push(fieldId);
+        addToPath: function (fieldId) {
+            // 限制依赖路径深度，防止栈溢出
+            if (this.updatePath.length >= this.MAX_DEPTH) {
+                console.warn(`依赖路径深度超过限制(${this.MAX_DEPTH})，可能存在过深嵌套`);
+                return;
+            }
+            if (fieldId) {
+                this.updatePath.push(fieldId);
+            }
         },
         // 检查是否形成循环
-        hasCircularDependency: function(targetFieldId) {
+        hasCircularDependency: function (targetFieldId) {
+            if (!targetFieldId) return false;
             return this.updatePath.includes(targetFieldId);
         },
         // 获取当前依赖路径
-        getCurrentPath: function() {
+        getCurrentPath: function () {
             return [...this.updatePath];
         },
         // 结束当前字段的处理
-        finishField: function() {
+        finishField: function () {
             if (this.updatePath.length > 0) {
                 this.updatePath.pop();
             }
         }
     });
-    
+
     React.useImperativeHandle(ref, () => ({
         formRef: form,
         setFieldsValue: (values) => {
@@ -164,7 +174,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         // return current;
     }
     const initializeDependencyMap = async () => {
-        
+
         const fields = [];
         function traverse(currentNode, parentNode = null) {
             var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
@@ -212,10 +222,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
     const initializeFieldVisibilityImmediate = async (reloadFields = false) => {
         console.log("initializeFieldVisibility *************************************")
-     
-        
+
+
         const fieldValues = form.getFieldsValue();
-       
+
         await Promise.all(Array.from(dependencyMap.current.keys()).map(async (key) => {
             await handleFieldsWith(key, fieldValues, true);
         }))
@@ -226,34 +236,37 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
     // 初始化字段的级联关系
     const initializeFieldVisibility = debounce(async (reloadFields = false) => {
-        console.log("initializeFieldVisibility begin",reloadFields)
         await initializeFieldVisibilityImmediate(reloadFields);
     }, 100);
 
 
     // 计算字段级联关系
     const handleFieldsWith = async (identifier, fieldValues, init = false, fieldId = null) => {
+        if (mode == "desgin") {
+            console.log("设计模式下不进行字段级联计算")
+            return false
+        }
         // console.log("handleFieldsWith identifier", identifier)
         let needRefresh = false;
         let parentIdentifier = [];
         if (Array.isArray(identifier)) {
             parentIdentifier = [...(identifier.slice(0, -1))]
             identifier = identifier.filter(item => typeof item == "string").join(".")
+
         }
-        
+
         // 将标识符标准化为字符串，用于依赖图谱
         const currentFieldId = fieldId || identifier;
-        
         // 检查是否在当前更新链路中已存在，避免循环依赖
         if (dependencyGraphRef.current.hasCircularDependency(currentFieldId)) {
             const currentPath = dependencyGraphRef.current.getCurrentPath();
             console.log(`检测到循环依赖链路: ${[...currentPath, currentFieldId].join(' -> ')}`);
             return false;
         }
-        
+
         // 将当前字段添加到依赖路径
         dependencyGraphRef.current.addToPath(currentFieldId);
-        
+
         try {
             if (dependencyMap.current.has(identifier)) {
                 const dependent = dependencyMap.current.get(identifier)
@@ -285,7 +298,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             // 在处理完毕后，从依赖路径中移除当前字段
             dependencyGraphRef.current.finishField();
         }
-        
+
         return needRefresh;
     };
     const removeLastFieldsValues = (name, isTable = false) => {
@@ -309,12 +322,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         changedFieldsState.current[fieldName] = fieldValue;
     }
     const recordFieldsChange = (changedFields, handleChange = false) => {
-        console.log("recordFieldsChange", changedFields,handleChange)
+        console.log("recordFieldsChange", changedFields, handleChange)
         var changedKeys = Object.keys(changedFields)
         if (changedKeys.length > 0) {
             changedKeys.forEach(key => {
                 recordFieldChange(key, changedFields[key])
-                
+
             })
             if (handleChange) debounceHandleFieldsChange();
         }
@@ -327,7 +340,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         let changedFields = {}
 
         // 将标识符标准化为字符串
-        const sourceFieldId = Array.isArray(current_identifier) 
+        const sourceFieldId = Array.isArray(current_identifier)
             ? current_identifier.filter(item => typeof item == "string").join(".")
             : current_identifier;
 
@@ -337,29 +350,29 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             let { source, target } = rule
             let source_value = current_value?.[source]
             let setValue = source_value
-            
+
             // 将sourceField格式化为字符串形式，用于依赖跟踪
-            const sourceField = Array.isArray(current_identifier) 
+            const sourceField = Array.isArray(current_identifier)
                 ? current_identifier.filter(item => typeof item == "string").join(".")
                 : current_identifier;
-            
+
             // 格式化目标字段
-            const targetField = Array.isArray(target) 
+            const targetField = Array.isArray(target)
                 ? target.filter(item => typeof item == "string").join(".")
                 : target;
-            
+
             // // 检查循环依赖 - 使用更高级的依赖图检测
             // if (dependencyGraphRef.current.hasCircularDependency(targetField)) {
             //     const currentPath = dependencyGraphRef.current.getCurrentPath();
             //     console.log(`检测到填充规则中的循环依赖链路: ${[...currentPath, targetField].join(' -> ')}`);
             //     continue; // 跳过这条规则
             // }
-            
-            
+
+
             //// 添加到依赖路径
             // dependencyGraphRef.current.addToPath(targetField);
-            
-            
+
+
             // 子表
             if (rule?.type == 1) {
                 if (dependencyMap.current.has(target)) {
@@ -409,7 +422,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 form.setFieldValue(target, undefined);
             }
             form.setFieldValue(target, setValue)
-            
+
             // 处理完当前字段后从依赖路径中移除
             // dependencyGraphRef.current.finishField();
         }
@@ -560,25 +573,25 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 for (let index = 0; index < table_values.length; index++) {
                     await handleFieldsWithFill(fieldValues, child, [childIdentifier[0], index], componentName, sourceFieldId)
                 }
-          
+
             return
         }
-        
+
         // 将目标字段ID标准化为字符串
-        const targetFieldId = Array.isArray(childIdentifier) 
-            ? childIdentifier.filter(item => typeof item == "string").join(".")
+        const targetFieldId = Array.isArray(childIdentifier)
+            ? childIdentifier.join(".")
             : childIdentifier;
-            
+
         // 检查是否在当前依赖链中已存在，避免循环依赖
         if (dependencyGraphRef.current.hasCircularDependency(targetFieldId)) {
             const currentPath = dependencyGraphRef.current.getCurrentPath();
             console.log(`检测到公式计算中的循环依赖链路: ${[...currentPath, targetFieldId].join(' -> ')}`);
             return;
         }
-        
+
         // // 将当前字段添加到依赖路径
         // dependencyGraphRef.current.addToPath(targetFieldId);
-        
+
         try {
             let withDatas = [];
             // 先处理依赖数据
@@ -654,8 +667,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 const formulaResult = evalFormula(formula);
                 console.log(`${childIdentifier} 计算公式:`, formula)
                 console.log(`${childIdentifier} 计算结果:`, formulaResult)
-                
-              
+
+
                 form.setFieldValue(childIdentifier, formulaResult)
                 await handleFieldsWith(childIdentifier, form.getFieldsValue(), false, targetFieldId)
             }
@@ -716,20 +729,19 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
             // 创建已处理字段集合，用于避免多次处理同一字段
             const processedFields = new Set();
-
             for (let key in changedFieldsState.current) {
                 let field = changedFieldsState.current[key];
                 if (!isEqual(field.value || "", getLastFieldValue(field.name) || "")) {
                     if (lockStatus_ != 1) {
                         // 获取字段标识符（字符串形式）
-                        const fieldId = Array.isArray(field.name) 
-                            ? field.name.filter(item => typeof item == "string").join(".")
+                        const fieldId = Array.isArray(field.name)
+                            ? field.name.map(item => typeof item == "string" ? item : item.toString()).join(".")
                             : field.name;
-                        
+
                         // 跳过已处理的字段
                         if (processedFields.has(fieldId)) continue;
                         processedFields.add(fieldId);
-                        
+
                         // 处理字段依赖关系，传递字段ID和依赖图谱
                         let needRefresh_ = await handleFieldsWith(field.name, fieldValues, false, fieldId);
                         needRefresh = needRefresh || needRefresh_;
@@ -746,16 +758,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }, []);
 
     const handleFieldsChange = React.useCallback((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;
-                
-               
-            }
-        })
+        setTimeout(() => {
+            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();
+
+                }
+            })
+            console.log("handleFieldsChange", changedFieldsState.current)
+            debounceHandleFieldsChange();
+        }, 0);
     }, []);
 
     const getTableWithIds = (ids) => {
@@ -773,7 +787,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         })
         return withAllIds
     }
-    const handleTableAddRow =  (ids) => {
+    const handleTableAddRow = (ids) => {
         let withAllIds = getTableWithIds(ids)
         const fieldValues = form.getFieldsValue();
         setTimeout(async () => {
@@ -807,7 +821,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             return renderChildren();
         }
         return null;
-      }
+    }
     const renderChildren = () => {
         console.log("renderChildren")
         const renderKey = nanoid()
@@ -824,7 +838,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         );
 
 
-        
+
 
 
 
@@ -860,7 +874,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
                     let childComponent
                     if (isTable || isLayoutComponent) {
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, getTableWithIds, onTableRemoveRow: handleTableRemoveRow, removeLastFieldsValues, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode, recordFieldsChange ,getDependencyMapItem,renderKey})
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, getTableWithIds, onTableRemoveRow: handleTableRemoveRow, removeLastFieldsValues, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode, recordFieldsChange, getDependencyMapItem, renderKey })
                     }
                     else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
@@ -925,7 +939,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             style={{ marginBottom: 0 }}
                         >
                             {childComponent}
-                        </Col> 
+                        </Col>
                     );
                 })}
             </Row>
@@ -934,26 +948,26 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     return (
         <ConfigProvider
-        theme={{
-          components: {
-            Table: {
-              rowHoverBg: '#ebebeb',
-              // "fontSize": 14,
-              // "cellPaddingBlock": 6
-            },
-          },
-          token: {
-            colorBgContainerDisabled: 'rgba(0, 0, 0, 0.02)', // 设置更浅的灰色背景
-            colorTextDisabled: '#333',
-          }
-        }}
-      >
-        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col " + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
-            <Form.Item name="__id" hidden={true}>
-                <input type="hidden" />
-            </Form.Item>
-            {formContent}
-        </Form>
+            theme={{
+                components: {
+                    Table: {
+                        rowHoverBg: '#ebebeb',
+                        // "fontSize": 14,
+                        // "cellPaddingBlock": 6
+                    },
+                },
+                token: {
+                    colorBgContainerDisabled: 'rgba(0, 0, 0, 0.02)', // 设置更浅的灰色背景
+                    colorTextDisabled: '#333',
+                }
+            }}
+        >
+            <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col " + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
+                <Form.Item name="__id" hidden={true}>
+                    <input type="hidden" />
+                </Form.Item>
+                {formContent}
+            </Form>
         </ConfigProvider>
     );
 });