@hzab/group-user-selector 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/group-user-selector",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/SearchRenter/index.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, forwardRef } from "react";
-import { Input,message,  Pagination,  } from "antd";
+import { Input, message, Pagination, } from "antd";
 
 import "./index.less";
 
@@ -7,7 +7,7 @@ function SearchRenter(props, ref) {
   const {
     searchModel,
     searchQueryKey = "search",
-    hasPagination = true,
+    hasSearchPagination = true,
     hasSearch = true,
     ItemRenter,
     setLoading = () => { },
@@ -16,7 +16,7 @@ function SearchRenter(props, ref) {
   const [search, setSearch] = useState("");
   const [searchList, setSearchList] = useState([]);
   const [total, setTotal] = useState(0);
-  const [pageData, setPageData] = useState(hasPagination ? {
+  const [pageData, setPageData] = useState(hasSearchPagination ? {
     pageSize: 10,
     pageNum: 1
   } : {});
@@ -27,15 +27,13 @@ function SearchRenter(props, ref) {
     setLoading && setLoading(true);
     searchModel &&
       searchModel.getList({ ...data }).then((res) => {
-        console.log(res, 2222222);
-
         setSearchList(res?.list || res || []);
-        setTotal(res?.pagination?.total||res?.total);
+        setTotal(res?.pagination?.total || res?.total || 0);
       }).catch((err) => {
         message.error(err._message || "未知错误");
       })
         .finally(() => {
-          setLoading &&  setLoading(false);
+          setLoading && setLoading(false);
         });
   }
 
@@ -54,12 +52,22 @@ function SearchRenter(props, ref) {
   }
 
   const onSearch = (value) => {
-
     setSearch(value);
-    if (!value) return;
+    if (!value) {
+      setPageData({
+        pageSize: 10,
+        pageNum: 1
+      })
+      return
+    };
+    const data = {
+      pageSize: pageData?.pageSize || 10,
+      pageNum: 1
+    }
+    setPageData(data)
     handleSearch({
       [searchQueryKey]: value,
-      ...pageData
+      ...data
     })
   };
 
@@ -75,12 +83,12 @@ function SearchRenter(props, ref) {
             })}
           </div>
 
-          {hasPagination ? <div className="group-selection-search-pagination">
+          {hasSearchPagination ? <div className="group-selection-search-pagination">
             <Pagination current={pageData?.pageNum} total={total} pageSize={pageData?.pageSize} onChange={handleChangePage} size="small" />
           </div> : null}
         </div>
       ) : null}
-      </>
+    </>
   );
 }
 

package/src/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useImperativeHandle, forwardRef } from "react";
+import { useEffect, useState, useImperativeHandle, forwardRef, useReducer, useRef } from "react";
 import { Input, Breadcrumb, Checkbox, message, Spin, Pagination, ConfigProvider } from "antd";
 import zhCN from 'antd/es/locale/zh_CN';
 import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons";
@@ -21,6 +21,7 @@ function GroupSelection(props, ref) {
     valueKey = "value",
     isUserKey = "isUser",
     imgKey = "img",
+    hasPagination = true,
   } = props;
   const [breadcrumb, setBreadcrumb] = useState([
     {
@@ -32,6 +33,14 @@ function GroupSelection(props, ref) {
   const [checkAll, setCheckAll] = useState(false);
   const [selectList, setSelectList] = useState([]);
   const [selectedList, setSelectedList] = useState([...value]);
+  const [queryValue, setQueryValue] = useState(undefined);
+  const [total, setTotal] = useState(0);
+
+
+    const pageData = useRef(hasPagination ? {
+      pageSize: 10,
+      pageNum: 1
+    } : {});
 
   // 通过useImperativeHandle定义要抛出的值或方法
   useImperativeHandle(ref, () => ({
@@ -47,8 +56,9 @@ function GroupSelection(props, ref) {
   const getTreeData = (value?: string | number) => {
     setLoading(true);
     model &&
-      model.getList({ [queryKey]: value }).then((res) => {
+      model.getList({ [queryKey]: value || queryValue, ...pageData.current }).then((res) => {
         setSelectList(res?.list || res || []);
+        setTotal(res?.pagination?.total||res?.total || 0);
       })
         .catch((err) => {
         message.error(err._message || "未知错误");
@@ -64,6 +74,15 @@ function GroupSelection(props, ref) {
   }, []);
 
 
+  const handleChangePage = (pageNum, pageSize) => {
+    const pages = {
+      pageNum: pageSize !== pageData.current?.pageSize ? 1 : pageNum,
+      pageSize
+    }
+    pageData.current = pages
+
+    getTreeData()
+  }
 
 
 
@@ -72,6 +91,7 @@ function GroupSelection(props, ref) {
     const arr = [...breadcrumb];
     arr.splice(index + 1);
     setBreadcrumb(arr);
+    setQueryValue(e[valueKey]);
     getTreeData(e[valueKey]);
   };
 
@@ -79,7 +99,7 @@ function GroupSelection(props, ref) {
     const arr = [...breadcrumb];
     arr.push(item);
     setBreadcrumb(arr);
-
+    setQueryValue(item[valueKey]);
     getTreeData(item[valueKey]);
   };
 
@@ -159,6 +179,9 @@ function GroupSelection(props, ref) {
               return Renter(item);
             })}
           </div>
+          {hasPagination ? <div>
+            <Pagination current={pageData.current?.pageNum} total={total} pageSize={pageData.current?.pageSize} onChange={handleChangePage} size="small" />
+          </div> : null}
         </div>
         <div className="group-selection-detail">
           <div className="group-selection-detail-list">