lu-lowcode-package-form 0.10.37 → 0.10.39

package/package.json

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

package/src/App copy.jsx

@@ -601,8 +601,8 @@ function App() {
             <Field.UploadImage label="上传图片" __id="UploadImage" ></Field.UploadImage>
 
           </FormContainerWrapper>
-          <div class="fgroup">11111
-            <div class="fbg-red-500 group-hover:fbg-blue-500">
+          <div className="fgroup">11111
+            <div className="fbg-red-500 group-hover:fbg-blue-500">
               Hover over me or my parent!
             </div>
           </div>

package/src/App.jsx

@@ -103,7 +103,7 @@ function App() {
     }
   }
   const setFormFields = () => {
-    formRef?.current?.setFieldsValue({ "userselect": "1213131","tianchong1":{"label":"选项1","value":"1"}, "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2, \"remark11\":\"{ label: '选项3', value: '3' }\"},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "" }, { "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_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": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }] })
+    formRef?.current?.setFieldsValue({ "id": 1, "userselect": "1213131", "tianchong1": { "label": "选项1", "value": "1" }, "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2, \"remark11\":\"{ label: '选项3', value: '3' }\"},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "" }, { "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_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": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }] })
     // formRef?.current?.setFieldsValue({"tianchong1":{"label":"选项1","value":"1"}, })
   }
   const handleCols = () => {
@@ -117,7 +117,7 @@ function App() {
   return (
     <div className='fflex fflex-col fitems-center fh-screen '>
       <div className='fflex fgap-2 fitems-center fjustify-center  fw-full'>
-        <Button type="primary" onClick={()=>{
+        <Button type="primary" onClick={() => {
           setTestCalcHidden(!testCalcHidden)
         }}>testCalcHidden</Button>
         <Button type="primary" onClick={validateFields}>validateFields</Button>
@@ -178,30 +178,30 @@ function App() {
 
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
-          <Layout.FormRow layout={'1'}>
-            <Show.WithTable label="测试关联子表" __id="withtable1" 
-                  filterRules={[
-                    {
-                      "value": {
-                        "parent": "",
-                        "field_key": "aa2",
-                        "group_key": "fieldsValue",
-                        "field_name": "当前表单.测试"
-                      },
-                      "valueType": "variable",
-                      "column": {
-                        "label": "库存表.所在仓库",
-                        "value": "node_ocm009lpxt2",
-                        "column_name": "node_ocm009lpxt2",
-                        "column_type": ""
-                      }
+            <Layout.FormRow layout={'1'}>
+              <Show.WithTable label="测试关联子表" __id="withtable1"
+                filterRules={[
+                  {
+                    "value": {
+                      "parent": "",
+                      "field_key": "aa2",
+                      "group_key": "fieldsValue",
+                      "field_name": "当前表单.测试"
+                    },
+                    "valueType": "variable",
+                    "column": {
+                      "label": "库存表.所在仓库",
+                      "value": "node_ocm009lpxt2",
+                      "column_name": "node_ocm009lpxt2",
+                      "column_type": ""
                     }
-                  ]} />
+                  }
+                ]} />
             </Layout.FormRow>
-          <Field.Number label="测试" __id="aa2" />
-          <Field.Number label="测试" __id="aa3" />
-          <Field.Number label="测试" __id="aa1" isRequired={true} calcHidden={true} />
-          <Field.Number label="测试" __id="aa4" />
+            <Field.Number label="测试" __id="aa2" />
+            <Field.Number label="测试" __id="aa3" />
+            <Field.Number label="测试" __id="aa1" isRequired={true} calcHidden={true} />
+            <Field.Number label="测试" __id="aa4" />
             <Field.UserSelect label="选择用户" __id="userselect" defaultValue={[{ id: 1, username: "十天" }]} />
             <Layout.FormGroupTitle title={"基本信息"} />
             <Field.WithSingleSelect
@@ -257,70 +257,97 @@ function App() {
               }
             ]} label="测试关联单选" options={[{ label: '选项1', value: '1', name: "1111", table: "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, { label: '选项2', value: '2' }]} __id="remark11" />
             <Layout.FormRow layout={'1'}>
-            <Field.Number label="测试规则" isRequired={true} __id="ceshi_rule1" />
+              <Field.Number label="测试规则" isRequired={true} __id="ceshi_rule1" />
             </Layout.FormRow>
-         
+
             <Layout.FormRow layout={'1'}>
               <Field.Table label="子表格" __id="table"  >
-                   
-            <Field.WithSingleSelect
-              isRequired={true} ref={testRef}
-              request={async (params) => {
-                return { code: 0, data: { list: [{ label: '选项1', value: '1', tianchong2: { label: '选项2', value: '2'} ,tcinput1: "1111" ,  }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
-              }}
-              option_label="label"
-              option_value="value"
-              fillRules={[
-                {
-                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
-                  "type": 0,
-                  "source": "tianchong2",
-                  "target": "tianchong2",
-                  "subRules": [
-                  ]
-                },
-                {
-                  "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
-                  "type": 0,
-                  "source": "tcinput1",
-                  "target": "tcinput1",
-                  "subRules": [
-                  ]
-                },
 
-              ]} label="测试填充1" __id="tianchong1" />
-              <Field.WithSingleSelect
-                isRequired={true} ref={testRef}
-                request={async (params) => {
-                  console.log("WithSingleSelect params", params)
-                  if (!params?.value) return { code: 0, data: { list:  [{ label: '选项1', value: '1', }] } }
-                  await new Promise(resolve => setTimeout(resolve, 200))
-                  return { code: 0, data: { list: [{ label: '选项1', value: '1', }, { label: '选项2', value: '2' ,tcinput1: "8989",tcinput2: "2222" }, { label: '选项3', value: '3' }] } }
-                }}
-                option_label="label"
-                option_value="value"
-                option_search="label"
-                fillRules={[
-                  {
-                    "id": "636d3924-0298-4e9b-809a-16d4a10d7b29",
-                    "type": 0,
-                    "source": "tcinput1",
-                    "target": "tcinput1",
-                    "subRules": [
-                    ]
-                  },
-                  {
-                    "id": "636d3924-0298-4e9b-809a-26d4a10d7b29",
-                    "type": 0,
-                    "source": "tcinput2",
-                    "target": "tcinput2",
-                    "subRules": [
+                <Field.WithSingleSelect
+                  isRequired={true} ref={testRef}
+                  request={async (params) => {
+                    return { code: 0, data: { list: [{ label: '选项1', value: '1', tianchong2: { label: '选项2', value: '2' }, tcinput1: "1111", }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
+                  }}
+                  option_label="label"
+                  option_value="value"
+                  fillRules={[
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
+                      "type": 0,
+                      "source": "tianchong2",
+                      "target": "tianchong2",
+                      "subRules": [
+                      ]
+                    },
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
+                      "type": 0,
+                      "source": "tcinput1",
+                      "target": "tcinput1",
+                      "subRules": [
+                      ]
+                    },
+
+                  ]} label="测试填充1" __id="tianchong1" />
+                <Field.WithSingleSelect
+                  isRequired={true} ref={testRef}
+                  request={async (params) => {
+                    if (!params?.value) return { code: 0, data: { list: [{ label: '选项1', value: '1', }] } }
+                    await new Promise(resolve => setTimeout(resolve, 200))
+                    return { code: 0, data: { list: [{ label: '选项1', value: '1', }, { label: '选项2', value: '2', tcinput1: "8989", tcinput2: "2222" }, { label: '选项3', value: '3' }] } }
+                  }}
+                  option_label="label"
+                  option_value="value"
+                  option_search="label"
+                  fillRules={[
+                    {
+                      "id": "636d3924-0298-4e9b-809a-16d4a10d7b29",
+                      "type": 0,
+                      "source": "tcinput1",
+                      "target": "tcinput1",
+                      "subRules": [
+                      ]
+                    },
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b29",
+                      "type": 0,
+                      "source": "tcinput2",
+                      "target": "tcinput2",
+                      "subRules": [
+                      ]
+                    },
+
+                  ]} label="测试填充2" __id="tianchong2" />
+                <Field.Input label="测试被填充1" __id="tcinput1" />
+                <Field.Input label="测试被填充2" __id="tcinput2" />
+                <Field.Input label="测试被填充计算" __id="tcinput3"
+                  withIds={["table.tcinput2"]}
+                  withFill={{
+                    "value": [
+                      {
+                        "insert": {
+                          "span": true
+                        },
+                        "attributes": {
+                          "id": "table.tcinput2",
+                          "color": "blue",
+                          "tagKey": "fieldsValue",
+                          "content": "当前表单.测试被填充2"
+                        }
+                      },
+                      {
+                        "insert": "* 0.5"
+                      },
+                      {
+                        "insert": "\n\n"
+                      }
+                    ],
+                    "version": 1719296886283,
+                    "withData": [
+
                     ]
-                  },
-  
-                ]} label="测试填充2" __id="tianchong2" />
-            <Field.Input label="测试被填充1" __id="tcinput1" />
-            <Field.Input label="测试被填充2" __id="tcinput2" />
+                  }}
+                />
 
                 <Field.Number label="税率（%）" isRequired={true} calcHidden={true} __id="shuilv_table" withIds={[
                   "shuilv"
@@ -349,7 +376,6 @@ function App() {
 
                 <Field.WithSingleSelect ref={testRef}
                   request={async (params) => {
-                    console.log("WithSingleSelect params", params)
                     if (params?.ruleParams?.node_ocm009lpxt2 == 111)
                       return { code: 0, data: { list: [{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
                     else return { code: 0, data: { list: [{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' },] } }
@@ -582,11 +608,10 @@ function App() {
 
                 ]
               }} />
-            
-            <Field.SingleSelect mode="single"  option_value={"id"} label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
+
+            <Field.SingleSelect mode="single" option_value={"id"} label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
             <Field.MultipleSelect mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
-            <Field.MultipleSelect mode="multiple"  option_label={"label"} option_value={"value"} label="测多选2"  __id="select2222" request={async (params) => {
-              console.log("MultipleSelect params", params)
+            <Field.MultipleSelect mode="multiple" option_label={"label"} option_value={"value"} label="测多选2" __id="select2222" request={async (params) => {
               return { code: 0, data: { list: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] } }
             }}></Field.MultipleSelect>
             <Field.TreeSelect label="分组名" __id="title11"></Field.TreeSelect>
@@ -599,9 +624,9 @@ function App() {
               }}
             />
 
-          <div className=' fh-10 fw-full fbg-green-300' __id="div1111"  
-          _componentName="Field.div"
-          withIds={["switch"]}
+            <div className=' fh-10 fw-full fbg-green-300' __id="div1111"
+              _componentName="Field.div"
+              withIds={["switch"]}
               withFunc={(fieldsValue) => {
                 return fieldsValue?.switch ? true : false
               }}>1111</div>
@@ -648,8 +673,8 @@ function App() {
             <Field.UploadImage label="上传图片" __id="UploadImage" ></Field.UploadImage>
 
           </FormContainerWrapper>
-          <div class="fgroup">11111
-            <div class="fbg-red-500 group-hover:fbg-blue-500">
+          <div className="fgroup">11111
+            <div className="fbg-red-500 group-hover:fbg-blue-500">
               Hover over me or my parent!
             </div>
           </div>

package/src/components/field/base.jsx

@@ -35,9 +35,6 @@ export const BaseWrapper = ({
 }) => {
     const calcHiddenRef = useRef(false);
     useEffect(()=>{
-        console.log("typeof initializeFormRender", typeof initializeFormRender)
-        console.log("calcHidden", calcHidden)
-        console.log("calcHiddenRef.current", calcHiddenRef.current)
         if (calcHiddenRef.current != calcHidden)
         {
             typeof initializeFormRender == "function" && initializeFormRender();

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

@@ -12,7 +12,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
     useEffect(() => {
         // console.log("SearchSelect useEffect props", props)
         if (value) {
-            console.log(`SearchSelect ${fieldName} value`, value)
+            // console.log(`SearchSelect ${fieldName} value`, value)
             let item = null 
             if (Array.isArray(nOptions) && nOptions.length > 0) {
                 item = nOptions.find(item => item.value == value?.value || item.value == value)
@@ -36,7 +36,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
     // }, [fieldsValue])
 
     useEffect(() => {
-        console.log("SearchSelect useEffect requestParams", requestParams)
+        // console.log("SearchSelect useEffect requestParams", requestParams)
         initData(requestParams)
     }, [requestParams])
     // useEffect(()=>{

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

@@ -32,7 +32,7 @@ const TableCol = ({ children, width, hidden, ...props }) => {
 
 const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, initializeFormRender, mode, ...props }) => {
     useEffect(() => {
-        console.log("Table form reload", form)
+        // console.log("Table form reload", form)
     }, [form])
 
     const newidRefs = useRef(React.Children.map(children, () => nanoid()));

package/src/components/field/upload/upload-image.jsx

@@ -33,7 +33,6 @@ const UploadImage = ({ maxCount, value, multiple, onChange, ...props }) => {
     }, [value]);
     maxCount = maxCount || 99;
     multiple = multiple || true;
-    console.log("maxCount",maxCount)
     const [fileList, setFileList] = React.useState([]);
     const [previewImage, setPreviewImage] = useState('');
     const [previewImageIndex, setPreviewImageIndex] = useState(0);
@@ -115,7 +114,7 @@ const UploadImage = ({ maxCount, value, multiple, onChange, ...props }) => {
                                    {file.status == "done" && <EyeOutlined onClick={() => { handlePreview(file, index) }} className="hover:ftext-gray-200" />}
                                     <DeleteOutlined onClick={() => { handleDelete(file, index) }} className="hover:ftext-gray-200" />
                                 </div>
-                                <img src={file.url || file.base64} alt="Example Image" class="fmax-w-full fmax-h-full fobject-contain " />
+                                <img src={file.url || file.base64} alt="Example Image" className="fmax-w-full fmax-h-full fobject-contain " />
                             </div>
                         </>
                     )
@@ -135,7 +134,7 @@ const UploadImage = ({ maxCount, value, multiple, onChange, ...props }) => {
 
                                         </div>
                                         {file.status == "uploading" && <div className=" fw-full fh-full fflex fitems-center fjustify-center fabsolute ftop-0 fleft-0 "><Spin></Spin></div>}
-                                        <img src={file.url || file.thumbUrl} alt="Example Image" class="fmax-w-full fmax-h-full fobject-contain " />
+                                        <img src={file.url || file.thumbUrl} alt="Example Image" className="fmax-w-full fmax-h-full fobject-contain " />
                                     </div>
                                 </>
                             )

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

@@ -1,11 +1,11 @@
 import React, { forwardRef, useEffect } from "react";
 import { Form, Row, Col, message } from "antd";
 
-import { debounce, isEqual } from 'lodash';
+import { debounce, isEqual, throttle } from 'lodash';
 import { evalFormula } from '../../utils/formula'
 import { nanoid } from 'nanoid';
-import {eventEmitter} from '../../utils/events'
- 
+import { eventEmitter } from '../../utils/events'
+
 
 function batchElements(elements, groupSize) {
     const groupedElements = [];
@@ -14,7 +14,7 @@ function batchElements(elements, groupSize) {
     const fillWithReactElement = (size, array) => {
         const missingElementsCount = size - array.length;
         if (missingElementsCount > 0)
-        array.push(...new Array(missingElementsCount).fill(React.createElement('div')));
+            array.push(...new Array(missingElementsCount).fill(React.createElement('div')));
     };
 
     for (const element of elements) {
@@ -57,18 +57,29 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         formRef: form,
         setFieldsValue: (values) => {
             lockStatus.current = 1;
-            form.setFieldsValue(values)
+            form.setFieldsValue({...values,__id: values?.id })
         },
         initializeFieldVisibility,
     }), []);
 
+    // 添加节流后的 initializeFormRender
+    const throttledInitializeFormRender = React.useCallback(
+        throttle(() => {
+            initializeDependencyMap();
+            setFormContent(renderChildren());
+        }, 300),
+        []
+    );
+
     useEffect(() => {
-        initializeFormRender();
+        throttledInitializeFormRender();
+        return () => {
+            throttledInitializeFormRender.cancel();
+        };
     }, [children, cols]);
 
-    const initializeFormRender = ()=>{
-        initializeDependencyMap();
-        setFormContent(renderChildren());
+    const initializeFormRender = () => {
+        throttledInitializeFormRender();
     }
 
     const lastFormValues = React.useRef(null);
@@ -126,7 +137,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 ...field
             });
         });
-        console.log(" dependencyMap.current", dependencyMap.current)
+        console.log("dependencyMap.current", dependencyMap.current)
         initializeFieldVisibility();
     };
 
@@ -224,7 +235,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                         setValue = current_value[withFillIndex]?.[source]
                     }
                 }
-                changedFields[target] =  { name: [target], value: setValue};
+                changedFields[target] = { name: Array.isArray(target) ? target : [target], value: setValue };
             }
             if (rule?.type == 1) {
                 form.setFieldValue(target, undefined);
@@ -232,9 +243,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             form.setFieldValue(target, setValue)
             // handleFieldsWith(target, form.getFieldsValue())
             // setTimeout(() => {
-                // form.setFieldValue(target, setValue)
-                // handleFieldsWith(target, form.getFieldsValue())
-                // if (idGroups.length > 0) handleTableAddRow(idGroups)
+            // form.setFieldValue(target, setValue)
+            // handleFieldsWith(target, form.getFieldsValue())
+            // if (idGroups.length > 0) handleTableAddRow(idGroups)
             // }, 0);
 
 
@@ -247,7 +258,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 changedKeys.forEach(key => {
                     changedFieldsState.current[key] = changedFields[key];
                 })
-                // console.log("changedFieldsState",changedFieldsState.current)
+                
                 debounceHandleFieldsChange();
             }
             // console.log("idGroups", idGroups)
@@ -273,10 +284,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     // 处理级联数据源
     // 处理级联填充
     const handleFieldsWithFill = async (fieldValues, child, parentIdentifier, componentName) => {
-
-
-
-
         const withFill = child?.component?.props.withFill;
         const withDataFetch = child?.component?.props.withDataFetch;
         let withFillIndex = 0
@@ -400,7 +407,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             // console.log("field",field.value)
             // console.log("getLastFieldValue(field.name)",getLastFieldValue(field.name))
             if (!isEqual(field.value, getLastFieldValue(field.name))) {
-                if (lockStatus_ !=1){
+                if (lockStatus_ != 1) {
                     needRefresh = handleFieldsWith(field.name, fieldValues);
                 }
                 lastFormValues.current[field.name] = field.value;
@@ -471,7 +478,7 @@ 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 rules = []
                     if (props.isRequired)
                         rules.push({ required: true, message: `${props.label}必须填写` });
@@ -488,13 +495,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     }
                     let childComponent
                     if (isTable || isLayoutComponent)
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange,initializeFormRender,mode })
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode })
                     else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
                             hidden={hidden}
                             style={{ margin: 0 }}
                             shouldUpdate={(prevValues, curValues) => {
-                                console.log(`componentName:${componentName}; identifier:${identifier};`,props.filterRules)
                                 let result = false;
                                 if (Array.isArray(props.filterRules) &&
                                     props.filterRules.length > 0
@@ -507,19 +513,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                                         prevFieldValue = prevValues?.[rule.value.field_key];
                                         curFieldValue = curValues?.[rule.value.field_key];
                                         if (prevFieldValue !== curFieldValue) {
-                                            result = true; 
+                                            result = true;
                                             break;
                                         }
                                     }
                                 }
-                                
-                                console.log(`componentName:${componentName}; identifier:${identifier}; result:`, result)
+
                                 return result;
                             }}
                         >
-                            {({getFieldsValue}) => {
+                            {({ getFieldsValue }) => {
                                 const fieldsValue = getFieldsValue();
-                                let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue,initializeFormRender })
+                                let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })
                                 return componentName === "show.WithTable" ? <>{element}</> : <Form.Item
                                     style={{ marginBottom: 0 }}
                                     label=""
@@ -538,17 +543,17 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             name={identifier}
                             rules={rules}
                         >
-                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange,initializeFormRender })}
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender })}
                         </Form.Item>
                     }
                     return (
                         <Col
-                        key={identifier || `col-${index}`}
-                        span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
-                        style={{ marginBottom: 0 }}
-                    >
-                        {childComponent}
-                    </Col>
+                            key={identifier || `col-${index}`}
+                            span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
+                            style={{ marginBottom: 0 }}
+                        >
+                            {childComponent}
+                        </Col>
                     );
                 })}
             </Row>
@@ -560,6 +565,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             // console.log("changedValues", changedValues)
             // console.log("allValues", allValues)
         }} onFieldsChange={handleFieldsChange}>
+            <Form.Item name="__id" hidden={true}>
+                <input type="hidden" />
+            </Form.Item>
             {formContent}
         </Form>
     );