lu-lowcode-package-form 0.10.75 → 0.10.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.10.75",
+  "version": "0.10.77",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",
@@ -14,6 +14,7 @@
     "@wangeditor-next/editor-for-react": "^1.0.7",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
+    "ahooks": "^3.8.4",
     "antd": "^5.13.2",
     "dayjs": "^1.11.11",
     "eventemitter3": "^5.0.1",

package/src/App.jsx

@@ -1,9 +1,9 @@
 import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext, Show } from './components';
 import './App.css';
 import { Button, Input, Select } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
-import { throttle } from 'lodash';
+import { throttle , debounce} from 'lodash';
 import { SortList } from "./components"
 import { TinyMCEEditor } from './components'
 import { PrinterOutlined } from '@ant-design/icons';
@@ -81,7 +81,16 @@ function App() {
   const [testCalcHidden, setTestCalcHidden] = useState(false);
   const [readonly, setReadonly] = useState(true);
 
+  const testdebounce = useCallback( debounce((param1,param2)=>{
+    console.log("testdebounce param1",param1)
+    console.log("testdebounce param2",param2)
+  },200))
+
+
   useEffect(() => {
+    testdebounce(1,2)
+    testdebounce(11,22)
+    testdebounce(111,222)
     // console.log("testRef //////", testRef.current)
   }, [testRef.current])
   const [cols, setCols] = React.useState(3);
@@ -105,7 +114,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": JSON.stringify( [{ "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": "2222" }, { "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 = () => {
@@ -186,6 +195,133 @@ function App() {
 
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
+
+          <Field.WithSingleSelect
+                ref={testRef}
+                request={async (params) => {
+                  console.log("request params", params)
+                  return {
+                    code: 0, data: {
+                      list:
+                        [
+                          { label: '选项1', value: '1', table_fill: [{ fill_tianchong1:{ label: '选项1', value: '1'}, fill_tianchong2:{ label: '选项2', value: '2'} }] },
+                          { label: '选项2', value: '2' },
+                          { label: '选项3', value: '3' }
+                        ]
+                    }
+                  }
+                }}
+                option_label="label"
+                option_value="value"
+                fillRules={[
+                  {
+                    "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
+                    "type": 1,
+                    "source": "table_fill",
+                    "target": "table_fill",
+                    "subRules": [
+                      {
+                        "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
+                        "type": 0,
+                        "source": "fill_tianchong1",
+                        "target": "fill_tianchong1",
+                      },
+                    ]
+                  },
+
+                ]} label="子表填充数据源" __id="fill_datasource1" />
+            <Layout.FormRow layout={'1'}>
+              <Field.Table label="测试主子表填充" __id="table_fill" isAllowAdd={true} isAllowCopy={false} >
+
+                <Field.WithSingleSelect
+                  ref={testRef}
+                  request={async (params) => {
+                    console.log("request params", params)
+                    return { code: 0, data: { list: [{ label: '选项1', value: '1', fill_tianchong2: { label: '选项2', value: '2' }, fill_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": "fill_tianchong2",
+                      "target": "fill_tianchong2",
+                      "subRules": [
+                      ]
+                    },
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
+                      "type": 0,
+                      "source": "fill_tcinput1",
+                      "target": "fill_tcinput1",
+                      "subRules": [
+                      ]
+                    },
+
+                  ]} label="测试填充1" __id="fill_tianchong1" />
+                <Field.WithSingleSelect
+                  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', fill_tcinput1: "8989", fill_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": "fill_tcinput1",
+                      "target": "fill_tcinput1",
+                      "subRules": [
+                      ]
+                    },
+                    {
+                      "id": "636d3924-0298-4e9b-809a-26d4a10d7b29",
+                      "type": 0,
+                      "source": "fill_tcinput2",
+                      "target": "fill_tcinput2",
+                      "subRules": [
+                      ]
+                    },
+
+                  ]} label="测试填充2" __id="fill_tianchong2" />
+                <Field.Input label="测试被填充1" __id="fill_tcinput1" />
+                <Field.Input label="测试被填充2" __id="fill_tcinput2" />
+                <Field.Input label="测试被填充计算" __id="fill_tcinput3"
+                  withIds={["table_fill.fill_tcinput2"]}
+                  withFill={{
+                    "value": [
+                      {
+                        "insert": {
+                          "span": true
+                        },
+                        "attributes": {
+                          "id": "table_fill.fill_tcinput2",
+                          "color": "blue",
+                          "tagKey": "fieldsValue",
+                          "content": "当前表单.测试被填充2"
+                        }
+                      },
+                      {
+                        "insert": "* 0.5"
+                      },
+                      {
+                        "insert": "\n\n"
+                      }
+                    ],
+                    "version": 1719296886283,
+                    "withData": [
+
+                    ]
+                  }}
+                />
+
+              </Field.Table>
+            </Layout.FormRow>
             <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>

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

@@ -4,6 +4,8 @@ import { Input, Select as OriginalSelect, Spin } from 'antd';
 import React, { useEffect, useState, forwardRef, useCallback, useRef } from 'react';
 import { BaseWrapper } from "../base"
 import { debounce, isEqual } from 'lodash';
+import { createPromiseWrapper } from "../../../utils"
+import { useCreation } from 'ahooks';
 
 
 const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsValue, shouldUpdateKey, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIconRender, rightIcon, rightIconClick, recordFieldsChange, ...props }, ref) => {
@@ -14,7 +16,9 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
     const currentPageSize = 10
     const isAllLoadedRef = useRef(false)
     const isLoadingRef = useRef(false);
-    
+    const promiseRef = useCreation(() => {
+        return createPromiseWrapper();
+    }, []);
     useEffect(() => {
         // console.log("SearchSelect useEffect props", props)
         if (value) {
@@ -29,46 +33,46 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
             }
 
             // 没有找到与value相等的选项，说明该项数据可能尚未加载，此时需要重新加载数据 
-            if (!item) loadSelectOptions()
+            if (!item) loadSelectOptions(value)
         }
     }, [value])
 
-    // useEffect(() => {
-    //     initData(requestParams)
-    // }, [requestParams, fieldsValue])
+
 
     useEffect(() => {
-        // console.log("SearchSelect useEffect shouldUpdateKey", shouldUpdateKey)
-        // console.log("SearchSelect useEffect requestParams", requestParams)
         initData(requestParams)
     }, [shouldUpdateKey, requestParams])
-// }, [ requestParams])
-
-    // useEffect(() => {
-    //    console.log("SearchSelect useEffect requestParams", requestParams)
-    //     initData(requestParams)
-    // }, [requestParams])
-    // useEffect(()=>{
-    //     console.log("SearchSelect useEffect []")
-    // },[])
-    // useEffect(() => {
-    //     console.log("WithSingleSelect useEffect fieldsValue",fieldsValue)
-    //     if(fieldsValue)
-    //     {
-    //         form.setFieldValue(fieldName,value )
-    //         console.log("onChange undefined")
-    //         onChange(undefined)
+
+
+    // const loadSelectOptions = useCallback(debounce( async (loadValue) => {
+    //     if (request && option_value) {
+    //         console.log("loadSelectOptions debounceFetchOptions params" + props?.__id,loadValue)
+    //         await promiseRef.promise
+    //         debounceFetchOptions({ ...requestParams, [option_value]: loadValue?.value }, null,(selectOptions) => {
+    //             console.log("loadSelectOptions selectOptions", selectOptions) 
+    //             if (selectOptions && selectOptions.length > 0) {
+    //                 let item = selectOptions.find(item => item.value == loadValue?.value || item.value == loadValue)
+    //                 console.log("loadSelectOptions item", item)
+    //                 if (item && !isEqual(item, loadValue)) {
+    //                     console.log("new value /////", item)
+    //                     typeof onChange === 'function' && onChange(item)
+    //                 }
+    //             }
+    //         })
+
     //     }
-    // },[fieldsValue])
+    // },100), [])
 
-    const loadSelectOptions = async () => {
+
+
+    const loadSelectOptions = async (loadValue) => {
         if (request && option_value) {
-            debounceFetchOptions({ ...requestParams, [option_value]: value?.value }, null, (selectOptions) => {
-                console.log("loadSelectOptions selectOptions", selectOptions) 
+            // 等initData调用后，再调用loadSelectOptions，防止传入参数和回调被覆盖
+            await promiseRef.promise
+            debounceFetchOptions({ ...requestParams, [option_value]: loadValue?.value }, null, (selectOptions) => {
                 if (selectOptions && selectOptions.length > 0) {
-                    let item = selectOptions.find(item => item.value == value?.value || item.value == value)
-                    console.log("loadSelectOptions item", item)
-                    if (item && !isEqual(item, value)) {
+                    let item = selectOptions.find(item => item.value == loadValue?.value || item.value == loadValue)
+                    if (item && !isEqual(item, loadValue)) {
                         console.log("new value /////", item)
                         typeof onChange === 'function' && onChange(item)
                     }
@@ -77,6 +81,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
 
         }
     }
+
     const initData = async (params) => {
 
         let item = null
@@ -85,36 +90,13 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
         isAllLoadedRef.current = false
         if (request && typeof request === 'function') {
             debounceFetchOptions(params, ruleParams)
+            promiseRef?.resolve(true);
         }
-
         if (options && options.length > 0) {
             setNOptions(options)
         }
-
-
-
     }
 
-    // useEffect(() => {
-    //     console.log("useEffect SearchSelect value", value)
-    //     if (value && nOptions.length > 0) {
-    //         let item = value
-    //         if (Array.isArray(value)) {
-    //             item = nOptions.filter(item => {
-    //                 return value.filter(v => item.value == v?.value || item.value == v).length > 0
-    //             })
-    //         }
-    //         else {
-    //             item = nOptions.find(item => item.value == value?.value || item.value == value)
-    //         }
-
-    //         if (item && !isEqual(item, value)) {
-    //             onChange(item)
-    //             console.log("SearchSelect onChange value", item)
-    //         }
-
-    //     }
-    // }, [value, nOptions])
 
     const handleSearch = async (value) => {
         const params = { ...requestParams }

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

@@ -446,7 +446,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         const delay = lockStatus.current === 1 ? 500 : 100;
 
         timeoutRef.current = setTimeout(() => {
-            console.log("debounceHandleFieldsChange begin")
             const fieldValues = form.getFieldsValue();
             const lockStatus_ = lockStatus.current; 
             lockStatus.current = 0
@@ -471,7 +470,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }, []);
 
     const handleFieldsChange = (changedFields) => {
-        console.log("changedFields", changedFields)
         changedFields.filter(field => {
             if (field.name && field.name.length > 0) {
                 // const fieldKey = field.name.filter(item => typeof item == "string").join(".")

package/src/utils/index.jsx

@@ -201,3 +201,5 @@ export function debounce(func, wait, key = "default") {
   }
   return debouncers[key];
 }
+
+