@hzab/group-user-selector 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -1,2 +1,19 @@
+# @hzab/group-user-selector@0.0.5
+
+完善请求类型
+
+# @hzab/group-user-selector@0.0.4
+
+修复分页 bug
+
+# @hzab/group-user-selector@0.0.3
+
+增加列表自定义分页
+
+# @hzab/group-user-selector@0.0.2
+
+增加搜索列表自定义分页
+
 # @hzab/group-user-selector@0.0.1
+
 组件初始化

package/README.md

@@ -20,9 +20,21 @@ import Demo from "@hzab/group-user-selector";
 
 ### InfoPanel Attributes
 
-| 参数   | 类型   | 必填 | 默认值 | 说明              |
-| ------ | ------ | ---- | ------ | ----------------- |
-| schema | Object | 是   | -      | 数据信息的 schema |
+| 参数                | 类型    | 必填 | 默认值   | 说明                                |
+| ------------------- | ------- | ---- | -------- | ----------------------------------- |
+| value               | Object  | 否   | []       | 选中的人员数据                      |
+| model               | Object  | 否   | -        | 列表的请求 model （getListApi）     |
+| modelGetType        | string  | 否   | getList  | 列表的请求类型                      |
+| searchModel         | Object  | 否   | -        | 搜索列表的请求 model （getListApi） |
+| queryKey            | string  | 否   | parentId | 列表的请求 model 的入参 key         |
+| searchQueryKey      | string  | 否   | search   | 搜索列表的请求 model 的入参 key     |
+| labelKey            | string  | 否   | label    | labelKey                            |
+| valueKey            | string  | 否   | value    | valueKey                            |
+| imgKey              | string  | 否   | img      | imgKey 头像                         |
+| isUserKey           | string  | 否   | isUser   | 区分部门和人员                      |
+| hasPagination       | boolean | 否   | true     | 列表是否分页                        |
+| hasSearch           | boolean | 否   | true     | 是否有搜索                          |
+| hasSearchPagination | boolean | 否   | true     | 搜索列表是否分页                    |
 
 # 组件开发流程
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/group-user-selector",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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";
 
@@ -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 || 0);
+        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
     })
   };
 
@@ -80,7 +88,7 @@ function SearchRenter(props, ref) {
           </div> : null}
         </div>
       ) : null}
-      </>
+    </>
   );
 }
 

package/src/index.tsx

@@ -1,14 +1,14 @@
-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 zhCN from "antd/es/locale/zh_CN";
 import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons";
-import 'moment/locale/zh-cn';
+import "moment/locale/zh-cn";
 import _ from "lodash";
 
 import defaultAvatar from "./assets/imgs/defaultAvatar.png";
 import department from "./assets/imgs/department.png";
-import SearchRenter from './components/SearchRenter'
-import ItemRenter from './components/ItemRenter'
+import SearchRenter from "./components/SearchRenter";
+import ItemRenter from "./components/ItemRenter";
 
 import "./index.less";
 
@@ -22,6 +22,7 @@ function GroupSelection(props, ref) {
     isUserKey = "isUser",
     imgKey = "img",
     hasPagination = true,
+    modelGetType = "getList",
   } = props;
   const [breadcrumb, setBreadcrumb] = useState([
     {
@@ -35,10 +36,15 @@ function GroupSelection(props, ref) {
   const [selectedList, setSelectedList] = useState([...value]);
   const [queryValue, setQueryValue] = useState(undefined);
   const [total, setTotal] = useState(0);
-    const [pageData, setPageData] = useState(hasPagination ? {
-      pageSize: 10,
-      pageNum: 1
-    } : {});
+
+  const pageData = useRef(
+    hasPagination
+      ? {
+          pageSize: 10,
+          pageNum: 1,
+        }
+      : {},
+  );
 
   // 通过useImperativeHandle定义要抛出的值或方法
   useImperativeHandle(ref, () => ({
@@ -54,36 +60,32 @@ function GroupSelection(props, ref) {
   const getTreeData = (value?: string | number) => {
     setLoading(true);
     model &&
-      model.getList({ [queryKey]: value || queryValue, ...pageData }).then((res) => {
-        setSelectList(res?.list || res || []);
-        setTotal(res?.pagination?.total||res?.total || 0);
-      })
+      model[modelGetType]({ [queryKey]: value, ...pageData.current })
+        .then((res) => {
+          setSelectList(res?.list || res || []);
+          setTotal(res?.pagination?.total || res?.total || 0);
+        })
         .catch((err) => {
-        message.error(err._message || "未知错误");
+          message.error(err._message || "未知错误");
         })
         .finally(() => {
-        setLoading(false);
+          setLoading(false);
         });
   };
 
-
   useEffect(() => {
     getTreeData();
   }, []);
 
-
   const handleChangePage = (pageNum, pageSize) => {
     const pages = {
-      pageNum: pageSize !== pageData?.pageSize ? 1 : pageNum,
-      pageSize
-    }
-    setPageData({
-      ...pages
-    })
-    getTreeData()
-  }
-
+      pageNum: pageSize !== pageData.current?.pageSize ? 1 : pageNum,
+      pageSize,
+    };
+    pageData.current = pages;
 
+    getTreeData();
+  };
 
   const handleBreadcrumb = (e) => {
     const index = breadcrumb.findIndex((item) => item[valueKey] === e[valueKey]);
@@ -154,17 +156,22 @@ function GroupSelection(props, ref) {
 
   return (
     <ConfigProvider locale={zhCN}>
-
       <div className="group-selection">
-        {loading ? <div className="group-selection-loading">
-          <Spin tip="Loading..." spinning={loading} />
-        </div> : null}
+        {loading ? (
+          <div className="group-selection-loading">
+            <Spin tip="Loading..." spinning={loading} />
+          </div>
+        ) : null}
         <div className="group-selection-list">
           <SearchRenter {...props} setLoading={setLoading} ItemRenter={Renter} />
           <Breadcrumb className="group-selection-breadcrumb">
             {breadcrumb.map((item) => {
               return (
-                <Breadcrumb.Item className="group-selection-breadcrumb-item" onClick={() => handleBreadcrumb(item)} key={item[valueKey]}>
+                <Breadcrumb.Item
+                  className="group-selection-breadcrumb-item"
+                  onClick={() => handleBreadcrumb(item)}
+                  key={item[valueKey]}
+                >
                   {item[labelKey]}
                 </Breadcrumb.Item>
               );
@@ -178,9 +185,17 @@ function GroupSelection(props, ref) {
               return Renter(item);
             })}
           </div>
-          {hasPagination ? <div>
-            <Pagination current={pageData?.pageNum} total={total} pageSize={pageData?.pageSize} onChange={handleChangePage} size="small" />
-          </div> : null}
+          {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">