lu-lowcode-package-form 0.11.83 → 0.11.85

package/package.json

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

package/src/App.jsx

@@ -109,7 +109,7 @@ function App() {
     }
   }
   const setFormFields = () => {
-    formRef?.current?.setFieldsValue({ "__id": 1, "userselect": "1213131", "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table2": [{}], "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "", "tianchong1": { "label": "选项1", "value": "1", "tianchong2": { "label": "选项2", "value": "2" }, "tcinput1": "1111" }, "tianchong2": { "label": "选项2", "value": "2", "tcinput1": "8989", "tcinput2": "2222" }, "tcinput1": "8989", "tcinput2": "2222", "tcinput3": "2222" }, { "product_num1": "213", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "datetime2": "2024-08-22 11:09:07", "product_price13": 1, "product_price14": 2, "product_price12": "", "remark11": { "label": "选项3", "value": "3" }, "product_price11": 3 }], "product_total_price": "0.00", "DeptSelect": ["leaf11"], "PostSelect": ["parent 1-1", "leaf11"], "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }], "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false, "datetime": "2024-08-25", "datetime2": "2024-08-25", "datetime3": "", "datetime4": "2024-08-22 11:09:04", "remark12": JSON.stringify([{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }]) })
+    formRef?.current?.setFieldsValue({ "__id": 1, "routeType":1, "userselect": "1213131", "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table2": [{}], "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "", "tianchong1": { "label": "选项1", "value": "1", "tianchong2": { "label": "选项2", "value": "2" }, "tcinput1": "1111" }, "tianchong2": { "label": "选项2", "value": "2", "tcinput1": "8989", "tcinput2": "2222" }, "tcinput1": "8989", "tcinput2": "2222", "tcinput3": "2222" }, { "product_num1": "213", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "datetime2": "2024-08-22 11:09:07", "product_price13": 1, "product_price14": 2, "product_price12": "", "remark11": { "label": "选项3", "value": "3" }, "product_price11": 3 }], "product_total_price": "0.00", "DeptSelect": ["leaf11"], "PostSelect": ["parent 1-1", "leaf11"], "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }], "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false, "datetime": "2024-08-25", "datetime2": "2024-08-25", "datetime3": "", "datetime4": "2024-08-22 11:09:04", "remark12": JSON.stringify([{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }]) })
     // formRef?.current?.setFieldsValue({"tianchong1":{"label":"选项1","value":"1"}, })
   }
   const handleCols = () => {
@@ -189,7 +189,7 @@ function App() {
         <div className='fw-[960px] frounded  fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
 
 
-          <FormContainerWrapper cols={cols} key={"formc"} className="" ref={formRef} >
+          <FormContainerWrapper denyEdit={true}  cols={cols} key={"formc"} className="" ref={formRef} >
 
           <Field.WithSingleSelect
               ref={testRef}

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

@@ -50,7 +50,7 @@ function batchElements(elements, groupSize, dmap) {
 }
 
 
-const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) => {
+const FormContainer = forwardRef(({ cols = 1, children, mode = "view", denyEdit = false }, ref) => {
     const [form] = Form.useForm();
     const formContentRef = React.useRef(null);
     const [formContent, setFormContent] = React.useState(null);
@@ -114,6 +114,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         setFieldsValue: (values) => {
             lockStatus.current = 1;
             let formData = { ...values, __id: values?.id }
+            
+            // denyEdit 模式下仍需要记录字段变化用于显示/隐藏逻辑
             for (let key in values) {
                 changedFieldsState.current[key] = { name: key, value: values[key] }
                 if (dependencyMap.current.has(key) && dependencyMap.current.get(key).componentName == "Field.Table" && Array.isArray(values[key])) {
@@ -126,12 +128,19 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 }
             }
             form.setFieldsValue(formData)
-            debounceHandleFieldsChange()
+            
+            // denyEdit 模式下跳过复杂的级联处理，但保留简单的显示/隐藏处理
+            if (denyEdit) {
+                // 只处理显示/隐藏逻辑，不处理填充和数据获取
+                debounceHandleFieldsChange_ReadOnly()
+            } else {
+                debounceHandleFieldsChange()
+            }
         },
         initializeFieldVisibility: (reloadFields) => {
             initializeFieldVisibility(reloadFields);
         },
-    }), []);
+    }), [denyEdit]);
 
     // 添加节流后的 initializeFormRender
     const throttledInitializeFormRender = React.useCallback(
@@ -162,8 +171,15 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }
 
     const lastFormValues = React.useRef(null);
+    // 统一使用点分隔的字符串格式
+    const normalizeFieldPath = (fieldPath) => {
+        if (Array.isArray(fieldPath)) {
+            return fieldPath.map(item => typeof item === "string" ? item : item.toString()).join(".");
+        }
+        return fieldPath;
+    };
     const getLastFieldValue = (path) => {
-        return lastFormValues.current?.[path]
+        return lastFormValues.current?.[normalizeFieldPath(path)]
         // let current = lastFormValues.current;
         // for (let i = 0; i < path.length; i++) {
         //     if (current == null) {
@@ -303,6 +319,54 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
         return needRefresh;
     };
+
+    // denyEdit 模式专用函数 - 只处理显示/隐藏逻辑
+    const handleFieldsWithVisibleOnly = async (identifier, fieldValues, init = false, fieldId = null) => {
+        if (mode == "desgin") {
+            console.log("设计模式下不进行字段级联计算")
+            return false
+        }
+        
+        console.log("handleFieldsWithVisibleOnly 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;
+        
+        try {
+            if (dependencyMap.current.has(identifier)) {
+                const dependent = dependencyMap.current.get(identifier)
+                const dependentChildren = dependent.children;
+
+                // 只处理显示/隐藏逻辑，跳过填充规则
+                for (let index = 0; index < dependentChildren.length; index++) {
+                    const child = dependentChildren[index];
+                    
+                    // 处理 withVisibleFunc
+                    if (child.component.props.withVisibleFunc && typeof child.component.props.withVisibleFunc === 'function') {
+                        let needRefresh_ = handleFieldsVisibleFunc(fieldValues, child, parentIdentifier)
+                        needRefresh = needRefresh || needRefresh_
+                    }
+
+                    // 处理 withVisible（但跳过数据获取部分）
+                    if (child.component.props.withVisible) {
+                        let needRefresh_ = await handleFieldsVisibleReadOnly(fieldValues, child, parentIdentifier, dependent?.componentName)
+                        needRefresh = needRefresh || needRefresh_
+                    }
+
+                    // 跳过 withFill 处理
+                }
+            }
+        } catch (error) {
+            console.log("handleFieldsWithVisibleOnly error", error)
+        }
+
+        return needRefresh;
+    };
     const removeLastFieldsValues = (name, isTable = false) => {
         if (!lastFormValues.current) return
         if (isTable) {
@@ -310,11 +374,11 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             for (let index = 0; index < lastFormValuesKeys.length; index++) {
                 const key = lastFormValuesKeys[index];
                 if (key.includes(`${name},`)) {
-                    delete lastFormValues.current[key]
+                    delete lastFormValues.current[normalizeFieldPath(key)]
                 }
             }
         }
-        else delete lastFormValues.current[name]
+        else delete lastFormValues.current[normalizeFieldPath(name)]
     }
 
     const recordFieldChange = (fieldName, fieldValue) => {
@@ -421,8 +485,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 changedFields[target] = { name: Array.isArray(target) ? target : [target], value: setValue };
             }
             if (rule?.type == 1) {
+                console.log("rule?.type == 1", target)
+                console.log("rule?.type == 1", setValue)
+                console.log("rule?.type == 1 current_identifier", current_identifier)
                 form.setFieldValue(target, undefined);
             }
+            console.log("form.setFieldValue(target, setValue) " +target, setValue)
             form.setFieldValue(target, setValue)
 
             // 处理完当前字段后从依赖路径中移除
@@ -549,6 +617,61 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         return needRefresh
     }
+    
+    // denyEdit 模式专用 - 处理级联显示隐藏（跳过数据获取）
+    const handleFieldsVisibleReadOnly = async (fieldValues, child, parentIdentifier, componentName) => {
+        let needRefresh = false;
+        const withFill = child?.component?.props.withVisible;
+        let withFillIndex = 0
+        let withFillGroup = ""
+        let childIdentifier = child.identifier;
+
+        // 跳过数据获取部分，使用空数组作为 withDatas
+        let withDatas = [];
+
+        // 构造计算公式（但不获取远程数据）
+        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)) {
+                            if (Array.isArray(childIdentifier) && result.length > withFillIndex) {
+                                result = result[withFillIndex]
+                            }
+                            if (typeof result === "object" && result !== null)
+                                result = JSON.stringify(result)
+                        }
+                        else if (typeof result === "object" && result !== null) {
+                            result = JSON.stringify(result)
+                        }
+                        else if (result.length > 0) result = `"${result}"`
+                    }
+                }
+                else result = insert
+                return result
+            })
+        }
+        
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (formula && formula.length > 0) {
+                const formulaResult = (evalFormula(formula) == "true");
+                console.log(`${childIdentifier} 只读模式计算公式:`, formula)
+                console.log(`${childIdentifier} 只读模式计算结果:`, formulaResult)
+                if (childData.show != formulaResult) {
+                    childData.show = formulaResult;
+                    dependencyMap.current.set(childIdentifier, childData);
+                    needRefresh = true;
+                }
+            }
+        }
+        return needRefresh
+    }
+    
     // 处理级联数据源
     // 处理级联填充
     const handleFieldsWithFill = async (fieldValues, child, parentIdentifier, componentName, sourceFieldId) => {
@@ -725,10 +848,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             dependencyGraphRef.current.startNewCycle();
 
             // 创建当前变更的快照，避免处理过程中的并发修改
-            const currentChanges = {...changedFieldsState.current};
+            const currentChanges = { ...changedFieldsState.current };
             // 立即重置变更状态，为新的变更做准备
             changedFieldsState.current = {};
-            
+
             const fieldValues = form.getFieldsValue();
             const lockStatus_ = lockStatus.current;
             lockStatus.current = 0
@@ -758,7 +881,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             let needRefresh_ = await handleFieldsWith(field.name, fieldValues, false, fieldId);
                             needRefresh = needRefresh || needRefresh_;
                         }
-                        lastFormValues.current[field.name] = field.value;
+                        lastFormValues.current[normalizeFieldPath(field.name)] = field.value;
                     }
                 } catch (error) {
                     console.log("debounceHandleFieldsChange error", error)
@@ -769,25 +892,77 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 updateFormContent();
             }
         }, delay);
-    }, []);
+    }, [denyEdit]);
+
+    // denyEdit 模式专用的防抖处理函数 - 只处理显示/隐藏，不处理填充和数据获取
+    const debounceHandleFieldsChange_ReadOnly = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        // 只读模式使用更短的延迟
+        const delay = 50;
+
+        timeoutRef.current = setTimeout(async () => {
+            const currentChanges = { ...changedFieldsState.current };
+            changedFieldsState.current = {};
+
+            const fieldValues = form.getFieldsValue();
+            let needRefresh = false;
+            if (!lastFormValues.current) lastFormValues.current = {}
+
+            // 创建已处理字段集合，用于避免多次处理同一字段
+            const processedFields = new Set();
+            for (let key in currentChanges) {
+                try {
+                    let field = currentChanges[key];
+                    if (!isEqual(field.value || "", getLastFieldValue(field.name) || "")) {
+                        // 获取字段标识符（字符串形式）
+                        const fieldId = Array.isArray(field.name)
+                            ? field.name.map(item => typeof item == "string" ? item : item.toString()).join(".")
+                            : field.name;
+
+                        // 跳过已处理的字段
+                        if (processedFields.has(fieldId)) {
+                            console.log("跳过已处理的字段 processedFields", fieldId)
+                            continue;
+                        }
+                        processedFields.add(fieldId);
+
+                        // 只处理显示/隐藏逻辑，不处理填充和数据获取
+                        let needRefresh_ = await handleFieldsWithVisibleOnly(field.name, fieldValues, false, fieldId);
+                        needRefresh = needRefresh || needRefresh_;
+                        
+                        lastFormValues.current[normalizeFieldPath(field.name)] = field.value;
+                    }
+                } catch (error) {
+                    console.log("debounceHandleFieldsChange_ReadOnly error", error)
+                }
+            }
+            if (needRefresh) {
+                console.log("needRefresh (ReadOnly mode)", needRefresh)
+                updateFormContent();
+            }
+        }, delay);
+    }, [denyEdit]);
 
     const handleFieldsChange = React.useCallback((changedFields) => {
-        console.log("handleFieldsChange (disabled, using handleValuesChange instead)", JSON.stringify(changedFields))
+        // console.log("handleFieldsChange (disabled, using handleValuesChange instead)", JSON.stringify(changedFields))
         // 已禁用，改为使用 handleValuesChange 来处理字段变更
         // 这样可以避免重复处理和多余的触发
     }, []);
     const handleValuesChange = React.useCallback((changedValues, allValues) => {
         console.log("handleValuesChange changedValues", JSON.stringify(changedValues))
-        console.log("handleValuesChange allValues", JSON.stringify(allValues))
-        
+        // console.log("handleValuesChange allValues", JSON.stringify(allValues))
+
         // 将 changedValues 转换为类似 handleFieldsChange 的格式
         const convertToFieldsFormat = (values, parentPath = []) => {
             const fieldsArray = [];
-            
+
             for (let fieldName in values) {
                 const fieldValue = values[fieldName];
                 const currentPath = [...parentPath, fieldName];
-                
+
                 // 处理数组类型（如table字段）
                 if (Array.isArray(fieldValue)) {
                     fieldValue.forEach((item, index) => {
@@ -822,14 +997,14 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     });
                 }
             }
-            
+
             return fieldsArray;
         };
-        
+
         // 转换为类似 handleFieldsChange 的格式
         const convertedFields = convertToFieldsFormat(changedValues);
         console.log("handleValuesChange converted to fields format", JSON.stringify(convertedFields));
-        
+
         // 使用转换后的数据，复用原有的处理逻辑
         if (convertedFields.length > 0) {
             convertedFields.forEach(field => {
@@ -837,12 +1012,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     changedFieldsState.current[field.name] = field;
                 }
             });
+
+            console.log("handleValuesChange changedFieldsState", JSON.parse(JSON.stringify(changedFieldsState.current)));
             
-            console.log("handleValuesChange changedFieldsState",JSON.parse(JSON.stringify(changedFieldsState.current)));
-            debounceHandleFieldsChange();
+            // denyEdit 模式下使用专用的处理函数
+            if (denyEdit) {
+                debounceHandleFieldsChange_ReadOnly();
+            } else {
+                debounceHandleFieldsChange();
+            }
         }
-    }, []);
-  
+    }, [denyEdit]);
+
     const getTableWithIds = (ids) => {
         let withAllIds = []
         ids.forEach(id => {