lu-lowcode-package-form 0.11.9 → 0.11.11

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

@@ -90,7 +90,7 @@ const WithSingleSelect = ({ readItemRender, readonly, onChange, onCustomChange,v
         }
 
     }, [value])
-    if (readonly) return <div className=" fh-8 fflex fitems-center fgap-2">
+    if (readonly) return <div className=" fh-8 fflex fitems-center fgap-2 w-full fborder fborder-[#dadada] frounded fbox-border fpx-2 fpy-1 ">
         {value && value.label && <>{readItemRender && typeof readItemRender === "function" ? readItemRender(value) : <span key={`btn_${value?.value}`}>{value?.label}</span>}</>}
     </div>
     return (

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

@@ -80,17 +80,20 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     // 添加节流后的 initializeFormRender
     const throttledInitializeFormRender = React.useCallback(
-        throttle(() => {
+        throttle(async () => {
             console.log("throttledInitializeFormRender")
-            initializeDependencyMap();
-            setFormContent(renderChildren());
+            await initializeDependencyMap();
+            requestAnimationFrame(() => {
+                setFormContent(renderChildren());
+            })
+            console.log("throttledInitializeFormRender end")
+
         }, 300),
         [children, cols]
     );
 
 
     useEffect(() => {
-        console.log("children", children)
         throttledInitializeFormRender();
         return () => {
             throttledInitializeFormRender.cancel();
@@ -113,7 +116,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         // }
         // return current;
     }
-    const initializeDependencyMap = () => {
+    const initializeDependencyMap = async () => {
         const fields = [];
         function traverse(currentNode, parentNode = null) {
             var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
@@ -157,19 +160,26 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             });
         });
         console.log("dependencyMap.current", dependencyMap.current)
-        initializeFieldVisibility();
+        await initializeFieldVisibilityImmediate();
     };
-
-    // 初始化字段的级联关系
-    const initializeFieldVisibility = debounce(async (reloadFields = false) => {
+    const initializeFieldVisibilityImmediate = async (reloadFields = false) => {
         console.log("initializeFieldVisibility *************************************")
         const fieldValues = form.getFieldsValue();
-        for (let key of dependencyMap.current.keys()) {
-           await handleFieldsWith(key, fieldValues, true);
-        }
+       
+        await Promise.all(Array.from(dependencyMap.current.keys()).map(async (key) => {
+            await handleFieldsWith(key, fieldValues, true);
+        }))
+        // for (let key of dependencyMap.current.keys()) {
+        //    await handleFieldsWith(key, fieldValues, true);
+        // }
         if (reloadFields) setFormContent(renderChildren());
+    };
+    // 初始化字段的级联关系
+    const initializeFieldVisibility = debounce(async (reloadFields = false) => {
+        await initializeFieldVisibilityImmediate(reloadFields);
     }, 100);
 
+
     // 计算字段级联关系
     const handleFieldsWith = async (identifier, fieldValues, init = false) => {
         // console.log("handleFieldsWith identifier", identifier)