lu-lowcode-package-form 0.10.70 → 0.10.72

package/package.json

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

package/src/App.jsx

@@ -105,7 +105,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":"1111"},{"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":[{"label":"选项1","value":"1"},{"label":"选项2","value":"2"}]})
+    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": "1111" }, { "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 = () => {
@@ -135,7 +135,7 @@ function App() {
         }}>testwithref</Button>
         <Button type="primary" onClick={handleCols}>UpdateCol</Button>
         <Button type="primary" onClick={handleUpdateReadonly}>UpdateReadonly</Button>
-        </div>
+      </div>
 
       <div className=" fflex fflex-col fitems-center fflex-1 foverflow-y-auto">
         <DraggableBtn />
@@ -186,11 +186,11 @@ function App() {
 
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
-          <Field.MultipleSelect mode="multiple" option_label={"label"} option_value={"value"} label="测试过滤条件" __id="selecta1" request={async (params) => {
+            <Field.MultipleSelect mode="multiple" option_label={"label"} option_value={"value"} label="测试过滤条件" __id="selecta1" request={async (params) => {
               return { code: 0, data: { list: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] } }
             }}></Field.MultipleSelect>
             <Layout.FormRow layout={'1'}>
-              
+
               <Show.WithTable label="测试关联子表" __id="withtable1"
                 filterRules={[
                   {
@@ -212,7 +212,7 @@ function App() {
             </Layout.FormRow>
             <Field.Number label="测试" __id="aa2" isRequired={true} />
             <Field.Number label="测试" __id="aa3" readonly={readonly} />
-            <Field.Number label="测试" __id="aa1"  calcHidden={true} readonly={readonly} />
+            <Field.Number label="测试" __id="aa1" calcHidden={true} readonly={readonly} />
             <Field.Number label="测试" __id="aa4" readonly={readonly} />
             <Field.UserSelect label="选择用户" __id="userselect" defaultValue={[{ id: 1, username: "十天" }]} readonly={readonly} />
             <Layout.FormGroupTitle title={"基本信息"} />
@@ -222,7 +222,7 @@ function App() {
                 // console.log("rightIconRender fieldName", fieldName)
                 return <><PrinterOutlined /></>
               }}
-               ref={testRef} fillRules={[
+              ref={testRef} fillRules={[
                 {
                   "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
                   "type": 0,
@@ -236,7 +236,7 @@ function App() {
 
             <Field.Number label="税率（%）" __id="shuilv" calcHidden={true} />
 
-            <Field.WithSingleSelect  ref={testRef} fillRules={[
+            <Field.WithSingleSelect ref={testRef} fillRules={[
               {
                 "id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
                 "type": 0,
@@ -269,71 +269,71 @@ 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="测试规则"  __id="ceshi_rule1" />
+              <Field.Number label="测试规则" __id="ceshi_rule1" />
             </Layout.FormRow>
             <Layout.FormRow layout={'1'}>
               <Field.Table label="子表格" __id="table2" isAllowCopy={true}  >
-                <Field.Number label="测试规则2"  __id="ceshi_rule2" />
+                <Field.Number label="测试规则2" __id="ceshi_rule2" />
               </Field.Table>
             </Layout.FormRow>
-            
+
             <Field.WithSingleSelect
-                   ref={testRef}
-                  request={async (params) => {
-                    console.log("request params", params);
-                    const { page = 1 ,pageSize = 10} = params; // 获取当前页码，默认为1
-                  
-            
-                    // 模拟数据集
-                    const allData = [
-                        { label: '选项1', value: '1' },
-                        { label: '选项2', value: '2' },
-                        { label: '选项3', value: '3' },
-                        { label: '选项4', value: '4' },
-                        { label: '选项5', value: '5' },
-                        { label: '选项6', value: '6' },
-                        { label: '选项7', value: '7' },
-                        { label: '选项8', value: '8' },
-                        { label: '选项9', value: '9' },
-                        { label: '选项10', value: '10' },
-                        { label: '选项11', value: '11' },
-                        { label: '选项12', value: '12' },
-                        { label: '选项13', value: '13' },
-                        { label: '选项14', value: '14' },
-                        { label: '选项15', value: '15' },
-                        { label: '选项16', value: '16' },
-                        { label: '选项17', value: '17' },
-                        { label: '选项18', value: '18' },
-                        { label: '选项19', value: '19' },
-                        { label: '选项20', value: '20' },
-                        { label: '选项21', value: '21' },
-                        { label: '选项22', value: '22' },
-                        { label: '选项23', value: '23' },
-                        { label: '选项24', value: '24' }
-                    ];
-            
-                    // 根据页码和每页数据量计算当前页的数据
-                    const startIndex = (page - 1) * pageSize;
-                    const endIndex = startIndex + pageSize;
-                    let pageData = []
-                    if (startIndex < allData.length) {
-                      pageData = allData.slice(startIndex, endIndex);
-                    }
-            
-                    let result =  { code: 0, data: { list: pageData } };
-                    console.log("request result", result)
-                    await new Promise(resolve => setTimeout(resolve, 200))
-                    return result
-                  }}
-                  option_label="label"
-                  option_value="value"
-                 label="测试请求" __id="ceshirequest" />
+              ref={testRef}
+              request={async (params) => {
+                console.log("request params", params);
+                const { page = 1, pageSize = 10 } = params; // 获取当前页码，默认为1
+
+
+                // 模拟数据集
+                const allData = [
+                  { label: '选项1', value: '1' },
+                  { label: '选项2', value: '2' },
+                  { label: '选项3', value: '3' },
+                  { label: '选项4', value: '4' },
+                  { label: '选项5', value: '5' },
+                  { label: '选项6', value: '6' },
+                  { label: '选项7', value: '7' },
+                  { label: '选项8', value: '8' },
+                  { label: '选项9', value: '9' },
+                  { label: '选项10', value: '10' },
+                  { label: '选项11', value: '11' },
+                  { label: '选项12', value: '12' },
+                  { label: '选项13', value: '13' },
+                  { label: '选项14', value: '14' },
+                  { label: '选项15', value: '15' },
+                  { label: '选项16', value: '16' },
+                  { label: '选项17', value: '17' },
+                  { label: '选项18', value: '18' },
+                  { label: '选项19', value: '19' },
+                  { label: '选项20', value: '20' },
+                  { label: '选项21', value: '21' },
+                  { label: '选项22', value: '22' },
+                  { label: '选项23', value: '23' },
+                  { label: '选项24', value: '24' }
+                ];
+
+                // 根据页码和每页数据量计算当前页的数据
+                const startIndex = (page - 1) * pageSize;
+                const endIndex = startIndex + pageSize;
+                let pageData = []
+                if (startIndex < allData.length) {
+                  pageData = allData.slice(startIndex, endIndex);
+                }
+
+                let result = { code: 0, data: { list: pageData } };
+                console.log("request result", result)
+                await new Promise(resolve => setTimeout(resolve, 200))
+                return result
+              }}
+              option_label="label"
+              option_value="value"
+              label="测试请求" __id="ceshirequest" />
 
             <Layout.FormRow layout={'1'}>
               <Field.Table label="子表格" __id="table" isAllowAdd={true} isAllowCopy={false} >
 
                 <Field.WithSingleSelect
-                   ref={testRef}
+                  ref={testRef}
                   request={async (params) => {
                     console.log("request params", 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' }] } }
@@ -360,7 +360,7 @@ function App() {
 
                   ]} label="测试填充1" __id="tianchong1" />
                 <Field.WithSingleSelect
-                   ref={testRef}
+                  ref={testRef}
                   request={async (params) => {
                     if (!params?.value) return { code: 0, data: { list: [{ label: '选项1', value: '1', }] } }
                     await new Promise(resolve => setTimeout(resolve, 200))
@@ -419,7 +419,7 @@ function App() {
                   }}
                 />
 
-                <Field.Number label="税率（%）"  calcHidden={true} __id="shuilv_table" withIds={[
+                <Field.Number label="税率（%）" calcHidden={true} __id="shuilv_table" withIds={[
                   "shuilv"
                 ]}
                   withFill={{
@@ -493,8 +493,8 @@ function App() {
                   ]} label="测试关联单选" __id="remark11" />
 
                 <Field.Switch label="开关" __id="switch_table"></Field.Switch>
-                <Field.Input defaultValue={3}  label="含税单价" __id="product_price11" />
-                <Field.Input  label="未税单价" __id="product_price12"
+                <Field.Input defaultValue={3} label="含税单价" __id="product_price11" />
+                <Field.Input label="未税单价" __id="product_price12"
                   withIds={[
                     "table.product_price11",
                     "shuilv"
@@ -539,10 +539,10 @@ function App() {
                     ]
                   }}
                 />
-                <Field.Input  defaultValue={1} label="商品价格" __id="product_price13" />
-                <Field.Input  defaultValue={2} label="商品价格" __id="product_price14" />
-                <Field.Input  label="商品价格" __id="product_price1" />
-                <Field.Input  label="商品个数" __id="product_num1" />
+                <Field.Input defaultValue={1} label="商品价格" __id="product_price13" />
+                <Field.Input defaultValue={2} label="商品价格" __id="product_price14" />
+                <Field.Input label="商品价格" __id="product_price1" />
+                <Field.Input label="商品个数" __id="product_num1" />
                 <Field.Input disabled={true} label="商品总价" __id="product_sum1"
                   withIds={["table.product_price1", "table.product_num1"]}
                   withFill={{
@@ -637,7 +637,7 @@ function App() {
               ],
             },]}></Field.PostSelect>
             <Field.SearchSelect mode='multiple' label="搜组件" __id="searchuser" request={searchSelectRequest} option_search={"name"} option_label="name" option_value="id"></Field.SearchSelect>
-            <Field.Input  label="商品价格" __id="product_price" defaultValue={"12"} disabled={true} />
+            <Field.Input label="商品价格" __id="product_price" defaultValue={"12"} disabled={true} />
             <Field.Input label="商品数量" __id="product_num" rules={"^(1[3-9]\\d{9})$"} />
             <Field.NumberRange label="数量范围" __id="product_num_range" />
             <Field.Input rules={["^(1[3-9]\\d{9})$", "^\\d+$"]} label="商品总价" __id="product_sum"
@@ -702,7 +702,7 @@ function App() {
               }}>1111</div>
             <Field.DatePicker defaultNow={true} label="datetime" prompt="" datetype="month" value='2022-10-22' __id="datetime" />
             <Field.DatePicker label="datetime2" prompt="" datetype="date" __id="datetime2" />
-            <Field.DatePicker  disabled={true} defaultNow={true} label="datetime3" prompt="" datetype="datetime" value={'2022-10-22'} __id="datetime3" />
+            <Field.DatePicker disabled={true} defaultNow={true} label="datetime3" prompt="" datetype="datetime" value={'2022-10-22'} __id="datetime3" />
             <Field.DatePicker defaultNow={true} label="datetime4" prompt="" datetype="year" value={'2022-10-22'} __id="datetime4" />
             <Field.Input label="角色名称" __id="name" />
             <Layout.FormRow layout={'1,1'}>

package/src/components/field/base.jsx

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

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

@@ -58,11 +58,20 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         setFieldsValue: (values) => {
             lockStatus.current = 1;
             let formData = { ...values, __id: values?.id }
-            form.setFieldsValue(formData)
             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])   ) {
+                    for (let index = 0; index < values[key].length; index++) {
+                        const element = values[key][index];
+                        for (let elem_key in element) {
+                            changedFieldsState.current[[key,index,elem_key]] = { name: [key,index,elem_key], value: element[elem_key] }
+                        }
+                    }
+                } 
             }
-            debounceHandleFieldsChange()
+            console.log("changedFieldsState", changedFieldsState.current)
+            form.setFieldsValue(formData)
+            // setTimeout(()=>{debounceHandleFieldsChange()},0)
         },
         initializeFieldVisibility,
     }), []);
@@ -428,6 +437,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     const changedFieldsState = React.useRef({});
     const debounceHandleFieldsChange = debounce(() => {
+        console.log("debounceHandleFieldsChange")
         const fieldValues = form.getFieldsValue();
         const lockStatus_ = lockStatus.current;
         lockStatus.current = 0
@@ -440,6 +450,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                 console.log("!isEqual field.name", field.name)
                 console.log("field.value", field.value)
                 console.log("getLastFieldValue(field.name)", getLastFieldValue(field.name))
+                console.log("lockStatus_",lockStatus_)
                 if (lockStatus_ != 1) {
                     needRefresh = handleFieldsWith(field.name, fieldValues);
                 }
@@ -496,6 +507,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
     const shouldUpdateKey = React.useRef({})
     const renderChildren = () => {
+        console.log("renderChildren")
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
             childrenArray.filter(child => {
@@ -564,6 +576,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                                 }
                                 if (result) {
                                     shouldUpdateKey.current[identifier] = nanoid()
+                                    console.log(identifier, nanoid())
                                 }
                                 return result;
                             }}
@@ -610,10 +623,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     };
 
     return (
-        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onValuesChange={(changedValues, allValues) => {
-            // console.log("changedValues", changedValues)
-            // console.log("allValues", allValues)
-        }} onFieldsChange={handleFieldsChange}>
+        <Form form={form} className={"form-container fp-0 fw-full fh-full box-border  fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
             <Form.Item name="__id" hidden={true}>
                 <input type="hidden" />
             </Form.Item>