lu-lowcode-package-form 0.11.5 → 0.11.7

package/package.json

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

package/src/App.jsx

@@ -244,6 +244,32 @@ function App() {
                       "content": "当前表单.开关"
                     }
                   },
+                  {
+                    "insert": " == 1\n"
+                  }
+                ],
+                "version": 1734400834533,
+                "withData": [
+
+                ]
+              }} 
+            />
+            <Field.Input label="测试 withVisible2" __id="withVisible2"
+            isRequired={true}
+              withIds={["routeType"]}
+              withVisible={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
+                    },
+                    "attributes": {
+                      "id": "routeType",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "当前表单.开关2"
+                    }
+                  },
                   {
                     "insert": " == 2\n"
                   }
@@ -254,7 +280,32 @@ function App() {
                 ]
               }} 
             />
+            <Field.Input label="测试 withVisible21" __id="withVisible21"
+            isRequired={true}
+              withIds={["routeType"]}
+              withVisible={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
+                    },
+                    "attributes": {
+                      "id": "routeType",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "当前表单.开关2"
+                    }
+                  },
+                  {
+                    "insert": " == 2\n"
+                  }
+                ],
+                "version": 1734400834533,
+                "withData": [
 
+                ]
+              }} 
+            />
             <Field.Select label="绑定表单"
               option_label={"formTitle"}
               __id="menuFormTemplateId"
@@ -267,6 +318,9 @@ function App() {
               }} />
 
 
+            <Field.Input label="隐藏字段" __id="hidden1"
+            calcHidden={true}
+            />
 
             <Field.Input label="菜单URL" __id="route"
               withIds={["routeType"]}

package/src/components/field/base.jsx

@@ -39,7 +39,7 @@ export const BaseWrapper = ({
         {
             console.log(label+" calcHiddenRef.current", calcHiddenRef.current)
             console.log(label+" calcHiddenRef.current", calcHidden)
-            typeof initializeFormRender == "function" && initializeFormRender();
+            // typeof initializeFormRender == "function" && initializeFormRender();
             calcHiddenRef.current = calcHidden;
         }
     },[calcHidden])

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

@@ -7,7 +7,7 @@ import { nanoid } from 'nanoid';
 import { eventEmitter } from '../../utils/events'
 
 
-function batchElements(elements, groupSize) {
+function batchElements(elements, groupSize,dmap) {
     const groupedElements = [];
     let tempArray = [];
 
@@ -29,7 +29,11 @@ function batchElements(elements, groupSize) {
             groupedElements.push([element]);
         } else {
             tempArray.push(element);
-            const visibleElementsCount = tempArray.filter(el => !el?.props?.calcHidden).length;
+            const visibleElementsCount = tempArray.filter(el => {
+                const identifier = el.props?.componentId || el.props?.__id;
+                const isShow = !dmap.has(identifier) || dmap.get(identifier)?.show;
+                return isShow && !el?.props?.calcHidden
+            }).length;
             if (visibleElementsCount === groupSize) {
                 groupedElements.push(tempArray);
                 tempArray = [];
@@ -41,7 +45,6 @@ function batchElements(elements, groupSize) {
         fillWithReactElement(groupSize, tempArray);
         groupedElements.push(tempArray);
     }
-
     return groupedElements;
 }
 
@@ -78,6 +81,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 添加节流后的 initializeFormRender
     const throttledInitializeFormRender = React.useCallback(
         throttle(() => {
+            console.log("throttledInitializeFormRender")
             initializeDependencyMap();
             setFormContent(renderChildren());
         }, 300),
@@ -157,18 +161,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
 
     // 初始化字段的级联关系
-    const initializeFieldVisibility = async (reloadFields = false) => {
-        console.log("initializeFieldVisibility")
+    const initializeFieldVisibility = debounce(async (reloadFields = false) => {
+        console.log("initializeFieldVisibility *************************************")
         const fieldValues = form.getFieldsValue();
         for (let key of dependencyMap.current.keys()) {
-             handleFieldsWith(key, fieldValues, true);
+           await handleFieldsWith(key, fieldValues, true);
         }
         if (reloadFields) setFormContent(renderChildren());
-    };
+    }, 100);
 
     // 计算字段级联关系
     const handleFieldsWith = async (identifier, fieldValues, init = false) => {
-        console.log("handleFieldsWith identifier", identifier)
+        // console.log("handleFieldsWith identifier", identifier)
         let needRefresh = false;
         let parentIdentifier = [];
         if (Array.isArray(identifier)) {
@@ -639,11 +643,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         console.log("renderChildren")
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
-            childrenArray.filter(child => {
-                const identifier = child.props.componentId || child.props.__id;
-                return !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
-            }),
-            cols
+            childrenArray,
+            // childrenArray.filter(child => {
+            //     const identifier = child.props.componentId || child.props.__id;
+            //     return !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
+            // }),
+            cols,
+            dependencyMap.current
         );
 
 
@@ -660,7 +666,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     }
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
                     const isTable = componentName && componentName == 'Field.Table';
-                    const hidden = props.calcHidden && mode != "desgin";
+                    const isShow = !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
+                    const hidden = (props.calcHidden || !isShow) && mode != "desgin";
 
                     const rules = []
                     if (props.isRequired)
@@ -740,7 +747,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     return (
                         <Col
                             key={identifier || `col-${index}`}
-                            span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
+                            span={hidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
                             style={{ marginBottom: 0 }}
                         >
                             {childComponent}