@hzab/group-user-selector 0.0.4 → 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.4",
+  "version": "0.0.5",
   "description": "",
   "main": "src",
   "scripts": {

package/src/index.tsx

@@ -1,14 +1,14 @@
 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([
     {
@@ -36,11 +37,14 @@ function GroupSelection(props, ref) {
   const [queryValue, setQueryValue] = useState(undefined);
   const [total, setTotal] = useState(0);
 
-
-    const pageData = useRef(hasPagination ? {
-      pageSize: 10,
-      pageNum: 1
-    } : {});
+  const pageData = useRef(
+    hasPagination
+      ? {
+          pageSize: 10,
+          pageNum: 1,
+        }
+      : {},
+  );
 
   // 通过useImperativeHandle定义要抛出的值或方法
   useImperativeHandle(ref, () => ({
@@ -56,35 +60,32 @@ function GroupSelection(props, ref) {
   const getTreeData = (value?: string | number) => {
     setLoading(true);
     model &&
-      model.getList({ [queryKey]: value || queryValue, ...pageData.current }).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.current?.pageSize ? 1 : pageNum,
-      pageSize
-    }
-    pageData.current = pages
-
-    getTreeData()
-  }
-
+      pageSize,
+    };
+    pageData.current = pages;
 
+    getTreeData();
+  };
 
   const handleBreadcrumb = (e) => {
     const index = breadcrumb.findIndex((item) => item[valueKey] === e[valueKey]);
@@ -155,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>
               );
@@ -179,9 +185,17 @@ 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}
+          {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">