lu-lowcode-package-form 0.10.57 → 0.10.59

package/package.json

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

package/src/App.jsx

@@ -276,12 +276,66 @@ function App() {
                 <Field.Number label="测试规则2"  __id="ceshi_rule2" />
               </Field.Table>
             </Layout.FormRow>
+            
+            <Field.WithSingleSelect
+                  isRequired={true} 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={false} isAllowCopy={true} >
 
                 <Field.WithSingleSelect
                   isRequired={true} 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' }] } }
                   }}
                   option_label="label"

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

@@ -1,22 +1,23 @@
 
 
 import { Input, Select as OriginalSelect, Spin } from 'antd';
-import React, { useEffect, useState, forwardRef, useCallback ,useRef} from 'react';
+import React, { useEffect, useState, forwardRef, useCallback, useRef } from 'react';
 import { BaseWrapper } from "../base"
 import { debounce, isEqual } from 'lodash';
 
 
-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) => {
+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) => {
     const [nOptions, setNOptions] = React.useState([])
     const [fetching, setFetching] = useState(false);
-    
+
     const currentPageRef = useRef(1);
+    const currentPageSize = 10
     const [isAllLoaded, setIsAllLoaded] = useState(false)
     useEffect(() => {
         // console.log("SearchSelect useEffect props", props)
         if (value) {
             // console.log(`SearchSelect ${fieldName} value`, value)
-            let item = null 
+            let item = null
             if (Array.isArray(nOptions) && nOptions.length > 0) {
                 item = nOptions.find(item => item.value == value?.value || item.value == value)
                 if (item && !isEqual(item, value)) {
@@ -24,9 +25,9 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
                     typeof onChange === 'function' && onChange(item)
                 }
             }
-             
+
             // 没有找到与value相等的选项，说明该项数据可能尚未加载，此时需要重新加载数据 
-            if (!item) loadSelectOptions() 
+            if (!item) loadSelectOptions()
         }
     }, [value])
 
@@ -38,7 +39,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
         console.log("SearchSelect useEffect shouldUpdateKey", shouldUpdateKey)
         console.log("SearchSelect useEffect requestParams", requestParams)
         initData(requestParams)
-    }, [shouldUpdateKey,requestParams])
+    }, [shouldUpdateKey, requestParams])
 
     // useEffect(() => {
     //    console.log("SearchSelect useEffect requestParams", requestParams)
@@ -74,7 +75,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
         }
     }
     const initData = async (params) => {
-        
+
         let item = null
         const ruleParams = {}
         currentPageRef.current = 1
@@ -125,38 +126,45 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
         });
     }, 200), [])
 
-    const fetchOptions = async (params, ruleParams) => {
-        try {
-            let list = []
-            if (!(ruleParams && Object.values(ruleParams).some(value => value === "##norequest##"))) {
-                setFetching(true)
-                const response = await request({ ...params, ruleParams  }, form, fieldName);
-                setFetching(false)
-                if (response.code > 0) {
-                    callError && typeof callError === 'function' && callError(response.message);
-                }
-                else list = response.data?.list || response.data
+    const fetchList = async (params, ruleParams) => {
+        let list = []
+        if (!(ruleParams && Object.values(ruleParams).some(value => value === "##norequest##"))) {
+            setFetching(true)
+            const response = await request({ ...params, ruleParams }, form, fieldName);
+            setFetching(false)
+            if (response.code > 0) {
+                callError && typeof callError === 'function' && callError(response.message);
             }
-
-            if (Array.isArray(list)) {
-                for (let index = 0; index < list.length; index++) {
-                    const item = list[index];
-                    if (typeof subRequest == "function") {
-                        let subList = []
-                        const { data } = await subRequest(item)
-                        if (data?.list && Array.isArray(data.list)) {
-                            subList = data.list.map(subItem => ({ label: `${item[option_label]}-${subItem[sub_option_label]}`, value: `${item[option_value]}-${subItem[sub_option_value]}` }))
-                        }
-                        list[index] = { ...item, label: item[option_label], title: item[option_label], options: subList }
+            else list = response.data?.list || response.data
+        }
+        return list
+    }
+    const handleOptions = async (list) => {
+        if (Array.isArray(list)) {
+            for (let index = 0; index < list.length; index++) {
+                const item = list[index];
+                if (typeof subRequest == "function") {
+                    let subList = []
+                    const { data } = await subRequest(item)
+                    if (data?.list && Array.isArray(data.list)) {
+                        subList = data.list.map(subItem => ({ label: `${item[option_label]}-${subItem[sub_option_label]}`, value: `${item[option_value]}-${subItem[sub_option_value]}` }))
                     }
-                    list[index] = { ...item, label: item[option_label], value: item[option_value] }
+                    list[index] = { ...item, label: item[option_label], title: item[option_label], options: subList }
                 }
-                if (nOptions.length > 0 && !isEqual(nOptions, list)) {
-                    typeof onChange === 'function' && onChange(undefined)
-                }
-                setNOptions(list)
+                list[index] = { ...item, label: item[option_label], value: item[option_value] }
+            }
+            if (nOptions.length > 0 && !isEqual(nOptions, list)) {
+                typeof onChange === 'function' && onChange(undefined)
             }
-            else setNOptions([])
+        }
+        return list
+    }
+
+    const fetchOptions = async (params, ruleParams) => {
+        try {
+            let list = await fetchList(params, ruleParams)
+            list = await handleOptions(list)
+            setNOptions(Array.isArray(list) ? list : [])
             return list
         } catch (error) {
             console.error("fetchOptions", error)
@@ -177,21 +185,18 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
 
     const handleScroll = (event) => {
         const { target } = event;
-        if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
+        if (target.scrollTop + target.clientHeight >= target.scrollHeight - 50) {
             // 滚动到底部，加载更多数据
             loadMoreOptions();
         }
     };
-    
+
     const loadMoreOptions = async () => {
-        if (request && option_value) {
-            const nextPageParams = { ...requestParams, page: currentPageRef.current  + 1, pageSize: currentPageSize };
-            debounceFetchOptions(nextPageParams, null, (newOptions) => {
-                if (newOptions && newOptions.length > 0) {
-                    setNOptions(prevOptions => [...prevOptions, ...newOptions]);
-                    currentPageRef.current = currentPageRef.current + 1;
-                }
-            });
+        const nextPageParams = { ...requestParams, page: currentPageRef.current + 1, pageSize: currentPageSize };
+        let newOptions = await fetchList(nextPageParams, null)
+        if (Array.isArray(newOptions) && newOptions.length > 0) {
+            setNOptions(prevOptions => [...prevOptions, ...newOptions]);
+            currentPageRef.current = currentPageRef.current + 1;
         }
     };
     return addWrapper ? (
@@ -207,12 +212,12 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
                 onChange={handleChange}
                 style={{ width: '100%', flex: 1 }}
                 options={nOptions}
-                onPopupScroll={typeof request === 'function' ? handleScroll : null} 
+                onPopupScroll={typeof request === 'function' ? handleScroll : null}
                 mode={mode} >
 
             </OriginalSelect>
             {!props?.disabled && rightIcon}
-            {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName,recordFieldsChange })}
+            {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName, recordFieldsChange })}
         </BaseWrapper>
     ) : (<>
         <OriginalSelect
@@ -226,12 +231,12 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
             onChange={handleChange}
             style={{ width: '100%' }}
             options={nOptions}
-            onPopupScroll={typeof request === 'function' ? handleScroll : null} 
+            onPopupScroll={typeof request === 'function' ? handleScroll : null}
             mode={mode}  >
 
         </OriginalSelect>
         {!props?.disabled && rightIcon}
-        {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName ,recordFieldsChange})}
+        {!props?.disabled && typeof rightIconRender === 'function' && rightIconRender({ value, onChange, form, fieldName, recordFieldsChange })}
     </>
     )