lu-lowcode-package-form 0.11.16 → 0.11.18

package/package.json

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

package/src/App.jsx

@@ -197,7 +197,40 @@ function App() {
                   option_label="label"
                   option_value="value"
                   option_search="label" label="测试填充2" __id="fill_tianchong1_test" />
-              
+                  <Field.RadioGroup
+              buttonStyle="solid"
+              label="菜单类型"
+              __id="routeType"
+              defaultValue={2}
+              options={[{ label: "菜单分组", value: 999 }, { label: "URL", value: 1 }, { label: "绑定表单", value: 2 }]} />
+              <Layout.FormRow layout={'1'}>
+           <Field.Input label="测试 withVisible" __id="withVisible"
+            isRequired={true}
+              withIds={["routeType"]}
+              withVisible={{
+                "value": [
+                  {
+                    "insert": {
+                      "span": true
+                    },
+                    "attributes": {
+                      "id": "routeType",
+                      "color": "blue",
+                      "tagKey": "fieldsValue",
+                      "content": "当前表单.开关"
+                    }
+                  },
+                  {
+                    "insert": " == 1\n"
+                  }
+                ],
+                "version": 1734400834533,
+                "withData": [
+
+                ]
+              }} 
+            />
+            </Layout.FormRow>
             <Layout.FormRow layout={'1'}>
 
 
@@ -209,6 +242,26 @@ function App() {
                     console.log("request params", params)
                     return { code: 0, data: { list: [{ label: '选项1', value: '1', fill_tianchong1_test: "sdfsdf", fill_tianchong2: { label: '选项2', value: '2' }, fill_tcinput1: "1111", }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
                   }}
+                  
+                  withIds={["routeType"]}
+                  withVisible={{
+                    "value": [
+                      {
+                        "insert": {
+                          "span": true
+                        },
+                        "attributes": {
+                          "id": "routeType",
+                          "color": "blue",
+                          "tagKey": "fieldsValue",
+                          "content": "当前表单.开关"
+                        }
+                      },
+                      {
+                        "insert": "== 1"
+                      },
+                    ]
+                  }}
                   option_label="label"
                   option_value="value"
                   fillRules={[

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

@@ -69,13 +69,13 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
 
     const loadSelectOptions = async (loadValue) => {
         if (request && option_value) {
-            console.log(`[${props?.label}]loadSelectOptions loadValue`, loadValue);
-            console.log(`[${props?.label}]loadSelectOptions loadValue2`, loadValue);
+            // console.log(`[${props?.label}]loadSelectOptions loadValue`, loadValue);
+            // console.log(`[${props?.label}]loadSelectOptions loadValue2`, loadValue);
             callbackQueue.current.push((selectOptions) => {
                 if (selectOptions && selectOptions.length > 0) {
                     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);
+                        // console.log(`[${props?.label}]debounceFetchOptions new value /////`, item);
                         typeof onChange === 'function' && onChange(item);
                     }
                 }
@@ -107,7 +107,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
 
     const debounceFetchOptions = useCallback(debounce((params, ruleParams) => {
         fetchOptions(params, ruleParams).then(result => {
-            console.log(`[${props?.label}]debounceFetchOptions result`, result);
+            // console.log(`[${props?.label}]debounceFetchOptions result`, result);
             while (callbackQueue.current.length > 0) {
                 const callback = callbackQueue.current.shift();
                 if (typeof callback === 'function') {

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

@@ -33,11 +33,11 @@ const TableCol = ({ children, width, hidden, ...props }) => {
     </div>
 }
 
-const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, initializeFormRender, recordFieldsChange, getTableWithIds,removeLastFieldsValues, mode, isAllowCopy=false, isAllowAdd=true, ...props }) => {
+const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, initializeFormRender, recordFieldsChange, getTableWithIds,removeLastFieldsValues, mode, isAllowCopy=false, isAllowAdd=true,getDependencyMapItem, ...props }) => {
     useEffect(() => {
         // console.log("Table form reload", form)
     }, [form])
-
+    const tableComponentId = props.componentId || props.__id
     const newidRefs = useRef(React.Children.map(children, () => nanoid()));
     const [init, setInit] = useState(false);
     const name = props.componentId || props.__id
@@ -67,6 +67,15 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
         }
         return []
     }
+
+    const getDependencyMapShow = (identifier) => {
+        if (typeof getDependencyMapItem == "function") {
+            const dependencyMapItem = getDependencyMapItem(`${tableComponentId}.${identifier}`)
+            if (dependencyMapItem) return dependencyMapItem?.show
+        }
+        return true
+    }
+
     if (props.isRequired)
         rules.push({ required: true, message: `子表[${props.label}]必须填写` });
     return <Form.List name={name} rules={rules}>
@@ -76,7 +85,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                 <div className="fw-full frelative fmin-h-20 foverflow-x-auto" style={{ position: 'relative' }}>
                     {fields.length === 0 && <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
                         {React.Children.map(children, (child, childIndex) => {
-                            const hidden = child?.props?.calcHidden;
+                            const hidden = (child?.props?.calcHidden || !getDependencyMapShow(child?.props?.componentId || child?.props?.__id)) && mode != "desgin";
                             return <TableCol width={150} key={`row_${0}_col_${childIndex}`} hidden={hidden}>
                                 {hidden ? null : React.cloneElement(child, {
                                     key: `row_${0}_child_${childIndex}`,
@@ -112,7 +121,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                 const componentName = child.type?.displayName || _componentName;
                                 const identifier = componentId || __id;
 
-                                const hidden = props.calcHidden && mode != "desgin";
+                                const hidden = (props.calcHidden || !getDependencyMapShow(identifier) ) && mode != "desgin" ;
                                 return <TableCol width={150} key={`row_${field.key}_col_${childIndex}`} hidden={hidden}>
                                     <Form.Item
                                         style={{ margin: 0 }}

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

@@ -81,12 +81,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 添加节流后的 initializeFormRender
     const throttledInitializeFormRender = React.useCallback(
         throttle(async () => {
-            console.log("throttledInitializeFormRender")
+            // console.log("throttledInitializeFormRender")
             await initializeDependencyMap();
             requestAnimationFrame(() => {
                 setFormContent(renderChildren());
             })
-            console.log("throttledInitializeFormRender end")
+            // console.log("throttledInitializeFormRender end")
 
         }, 300),
         [children, cols]
@@ -159,11 +159,11 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 ...field
             });
         });
-        console.log("dependencyMap.current", dependencyMap.current)
+        // console.log("dependencyMap.current", dependencyMap.current)
         await initializeFieldVisibilityImmediate();
     };
     const initializeFieldVisibilityImmediate = async (reloadFields = false) => {
-        console.log("initializeFieldVisibility *************************************")
+        // console.log("initializeFieldVisibility *************************************")
         const fieldValues = form.getFieldsValue();
        
         await Promise.all(Array.from(dependencyMap.current.keys()).map(async (key) => {
@@ -351,23 +351,23 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         let withFillGroup = ""
         let childIdentifier = child.identifier;
 
-        if (parentIdentifier && Array.isArray(parentIdentifier) && parentIdentifier.length > 1) {
-            withFillGroup = parentIdentifier.filter(item => typeof item == "string").join(".")
-            withFillIndex = parentIdentifier[parentIdentifier.length - 1]
-            if (childIdentifier.startsWith(`${withFillGroup}.`)) {
-                childIdentifier = [...parentIdentifier, childIdentifier.replace(`${withFillGroup}.`, "")]
-            }
-        }
-        // 被依赖字段不是子表字段，依赖字段是子表字段的情况
-        else if (childIdentifier.indexOf(".") >= 0) {
-            childIdentifier = childIdentifier.split(".")
-            let table_values = getParamValue("fieldsValue", childIdentifier[0], fieldValues, [])
-            if (Array.isArray(table_values) && table_values.length > 0)
-                for (let index = 0; index < table_values.length; index++) {
-                    await handleFieldsVisible(fieldValues, child, [childIdentifier[0], index], componentName)
-                }
-            return
-        }
+        // if (parentIdentifier && Array.isArray(parentIdentifier) && parentIdentifier.length > 1) {
+        //     withFillGroup = parentIdentifier.filter(item => typeof item == "string").join(".")
+        //     withFillIndex = parentIdentifier[parentIdentifier.length - 1]
+        //     if (childIdentifier.startsWith(`${withFillGroup}.`)) {
+        //         childIdentifier = [...parentIdentifier, childIdentifier.replace(`${withFillGroup}.`, "")]
+        //     }
+        // }
+        // // 被依赖字段不是子表字段，依赖字段是子表字段的情况
+        // else if (childIdentifier.indexOf(".") >= 0) {
+        //     childIdentifier = childIdentifier.split(".")
+        //     let table_values = getParamValue("fieldsValue", childIdentifier[0], fieldValues, [])
+        //     if (Array.isArray(table_values) && table_values.length > 0)
+        //         for (let index = 0; index < table_values.length; index++) {
+        //             await handleFieldsVisible(fieldValues, child, [childIdentifier[0], index], componentName)
+        //         }
+        //     return
+        // }
         let withDatas = [];
         // 先处理依赖数据
         if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
@@ -428,9 +428,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             const childData = dependencyMap.current.get(childIdentifier);
             if (formula && formula.length > 0) {
                 const formulaResult = (evalFormula(formula) == "true");
-                console.log(`${childIdentifier} 计算公式:`, formula)
-                console.log(`${childIdentifier} 计算结果:`, formulaResult)
-                console.log(`${childIdentifier} childData.show:`, childData.show)
+                // console.log(`${childIdentifier} 计算公式:`, formula)
+                // console.log(`${childIdentifier} 计算结果:`, formulaResult)
+                // console.log(`${childIdentifier} childData.show:`, childData.show)
                 if (childData.show != formulaResult) {
                     childData.show = formulaResult;
                     dependencyMap.current.set(childIdentifier, childData);
@@ -443,8 +443,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 处理级联数据源
     // 处理级联填充
     const handleFieldsWithFill = async (fieldValues, child, parentIdentifier, componentName) => {
-        console.log("handleFieldsWithFill child.identifier", child.identifier)
-        console.log("handleFieldsWithFill parentIdentifier", parentIdentifier)
+        // console.log("handleFieldsWithFill child.identifier", child.identifier)
+        // console.log("handleFieldsWithFill parentIdentifier", parentIdentifier)
         const withFill = child?.component?.props.withFill;
         const withDataFetch = child?.component?.props.withDataFetch;
         let withFillIndex = 0
@@ -586,7 +586,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 let field = changedFieldsState.current[key];
                 if (!isEqual(field.value || "", getLastFieldValue(field.name) || "")) {
                     if (lockStatus_ != 1) {
-                        console.log("handleFieldsWith field.name", field.name)
+                        // console.log("handleFieldsWith field.name", field.name)
                         let needRefresh_ = await handleFieldsWith(field.name, fieldValues);
                         needRefresh = needRefresh || needRefresh_
 
@@ -649,8 +649,16 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }
 
     const shouldUpdateKey = React.useRef({})
+
+    const getDependencyMapItem = (identifier) => {
+        if (dependencyMap.current && dependencyMap.current.has(identifier)) {
+            return dependencyMap.current.get(identifier)
+        }
+        return null
+    }
     const renderChildren = () => {
         console.log("renderChildren")
+        const renderKey = nanoid()
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
             childrenArray,
@@ -696,7 +704,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 })
+                        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

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

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { nanoid } from 'nanoid';
 import { Form, Row, Col } from 'antd';
 
-const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form, initializeFormRender,recordFieldsChange, mode,getTableWithIds,removeLastFieldsValues }) => {
+const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form, initializeFormRender,recordFieldsChange, mode,getTableWithIds,removeLastFieldsValues,getDependencyMapItem,renderKey }) => {
   layout = layout || '1';
   const getColSpan = (layoutStr) => {
     const layoutArray = layoutStr.split(',').map(Number);
@@ -11,7 +11,13 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
   };
 
   const colSpans = useMemo(() => getColSpan(layout), [layout]);
-
+  const getDependencyMapShow = (identifier) => {
+    if (typeof getDependencyMapItem == "function") {
+        const dependencyMapItem = getDependencyMapItem(identifier)
+        if (dependencyMapItem) return dependencyMapItem?.show
+    }
+    return true
+}
 
   const shouldUpdateKey = React.useRef({})
   const formItems = useMemo(() => {
@@ -27,7 +33,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       if (!(identifier in shouldUpdateKey.current)) {
         shouldUpdateKey.current[identifier] = nanoid()
       }
-      const hidden = props?.calcHidden && mode != "desgin";
+      const hidden = (props?.calcHidden || !getDependencyMapShow(identifier)) && mode != "desgin";
       const rules = []
       if (props?.isRequired)
         rules.push({ required: true, message: `${props.label}必须填写` });
@@ -44,7 +50,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       }
       let childComponent = null
       if (componentName == 'Field.Table')
-        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: name, initializeFormRender, mode,recordFieldsChange ,getTableWithIds,removeLastFieldsValues })
+        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: name, initializeFormRender, mode,recordFieldsChange ,getTableWithIds,removeLastFieldsValues ,getDependencyMapItem,renderKey})
       else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
         childComponent = <Form.Item
           hidden={hidden}
@@ -94,6 +100,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
           key={`${name}-form-item`}
           name={name}
           rules={rules}
+          hidden={hidden}
         >
           {React.cloneElement(child, { form: form, fieldName: name, initializeFormRender,recordFieldsChange })}
         </Form.Item>
@@ -108,7 +115,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
 
 
     });
-  }, [children, colSpans]);
+  }, [children, colSpans,renderKey]);
 
   return <Row gutter={24}>{formItems}</Row>;
 };