@hzab/group-user-selector 0.0.1 → 0.0.3

package/package.json

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

package/src/components/ItemRenter/index.jsx

@@ -0,0 +1,46 @@
+import {  forwardRef } from "react";
+import { Checkbox } from "antd";
+
+import defaultAvatar from "../../assets/imgs/defaultAvatar.png";
+import department from "../../assets/imgs/department.png";
+
+import "./index.less";
+
+function ItemRenter(props, ref) {
+  const {
+    labelKey = "label",
+    valueKey = "value",
+    isUserKey = "isUser",
+    imgKey = "img",
+    isCheck = false,
+    item,
+    handleClickItem,
+    handleCheckItem
+  } = props;
+
+
+  return (
+    <>
+      <div className="group-selection-list-item" key={item[valueKey]}>
+        <div className="avatar" onClick={() => handleCheckItem(item)}>
+          <Checkbox checked={isCheck} />
+          <img src={item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department} />
+          <div className="label">{item[labelKey]}</div>
+        </div>
+        {item[isUserKey] ? null : <div
+          className={`next  ${isCheck ? "noNext" : ""}`}
+          onClick={() => {
+            if (isCheck) {
+              return;
+            }
+            handleClickItem(item);
+          }}
+        >
+          下级
+        </div>}
+      </div>
+      </>
+  );
+}
+
+export default forwardRef(ItemRenter);

package/src/components/ItemRenter/index.less

@@ -0,0 +1,33 @@
+.group-selection-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+      width: 32px;
+      height: auto;
+      margin: 0 12px;
+    }
+
+    .label {
+      font-size: 16px;
+      color: #141414;
+    }
+  }
+
+  .next {
+    color: rgb(64, 62, 245);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .noNext {
+    opacity: 0.5;
+  }
+}

package/src/components/SearchRenter/index.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useState, forwardRef } from "react";
+import { Input,message,  Pagination,  } from "antd";
+
+import "./index.less";
+
+function SearchRenter(props, ref) {
+  const {
+    searchModel,
+    searchQueryKey = "search",
+    hasSearchPagination = true,
+    hasSearch = true,
+    ItemRenter,
+    setLoading = () => { },
+  } = props;
+
+  const [search, setSearch] = useState("");
+  const [searchList, setSearchList] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [pageData, setPageData] = useState(hasSearchPagination ? {
+    pageSize: 10,
+    pageNum: 1
+  } : {});
+
+
+
+  const handleSearch = (data) => {
+    setLoading && setLoading(true);
+    searchModel &&
+      searchModel.getList({ ...data }).then((res) => {
+        console.log(res, 2222222);
+
+        setSearchList(res?.list || res || []);
+        setTotal(res?.pagination?.total||res?.total || 0);
+      }).catch((err) => {
+        message.error(err._message || "未知错误");
+      })
+        .finally(() => {
+          setLoading &&  setLoading(false);
+        });
+  }
+
+  const handleChangePage = (pageNum, pageSize) => {
+    const pages = {
+      pageNum: pageSize !== pageData?.pageSize ? 1 : pageNum,
+      pageSize
+    }
+    setPageData({
+      ...pages
+    })
+    handleSearch({
+      [searchQueryKey]: search,
+      ...pages
+    })
+  }
+
+  const onSearch = (value) => {
+
+    setSearch(value);
+    if (!value) return;
+    handleSearch({
+      [searchQueryKey]: value,
+      ...pageData
+    })
+  };
+
+
+  return (
+    <>
+      {hasSearch ? <Input.Search onSearch={onSearch} enterButton placeholder="搜索成员" allowClear /> : null}
+      {search ? (
+        <div className="group-selection-search-view">
+          <div className="group-selection-search-list">
+            {searchList.map((item, index) => {
+              return ItemRenter(item);
+            })}
+          </div>
+
+          {hasSearchPagination ? <div className="group-selection-search-pagination">
+            <Pagination current={pageData?.pageNum} total={total} pageSize={pageData?.pageSize} onChange={handleChangePage} size="small" />
+          </div> : null}
+        </div>
+      ) : null}
+      </>
+  );
+}
+
+export default forwardRef(SearchRenter);

package/src/components/SearchRenter/index.less

@@ -0,0 +1,36 @@
+.group-selection-search-view {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: absolute;
+  top: 56px;
+  left: 24px;
+  width: calc(100% - 48px);
+  height: calc(100% - 80px);
+  overflow-y: hidden;
+  z-index: 10;
+  background-color: #fff;
+
+  .group-selection-search-list {
+  box-sizing: border-box;
+  flex: 1;
+    overflow-y: auto;
+    padding: 24px ;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .group-selection-search-pagination {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+  }
+}

package/src/{GroupSelection/index.less → index.less}

@@ -29,45 +29,48 @@
     padding: 24px;
     border-right: 1px solid #e8e8e8;
 
-    .group-selection-search-view {
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      position: absolute;
-      top: 56px;
-      left: 24px;
-      width: calc(100% - 48px);
-      height: calc(100% - 80px);
-      overflow-y: hidden;
-      z-index: 10;
-      background-color: #fff;
-
-      .group-selection-search-list {
-      box-sizing: border-box;
-      flex: 1;
-        overflow-y: auto;
-        padding: 24px ;
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-
-      .group-selection-search-pagination {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #fff;
-      }
-    }
+    // .group-selection-search-view {
+    //   display: flex;
+    //   flex-direction: column;
+    //   box-sizing: border-box;
+    //   position: absolute;
+    //   top: 56px;
+    //   left: 24px;
+    //   width: calc(100% - 48px);
+    //   height: calc(100% - 80px);
+    //   overflow-y: hidden;
+    //   z-index: 10;
+    //   background-color: #fff;
+
+    //   .group-selection-search-list {
+    //   box-sizing: border-box;
+    //   flex: 1;
+    //     overflow-y: auto;
+    //     padding: 24px ;
+
+    //     &::-webkit-scrollbar {
+    //       display: none;
+    //     }
+    //   }
+
+    //   .group-selection-search-pagination {
+    //     position: absolute;
+    //     left: 0;
+    //     bottom: 0;
+    //     width: 100%;
+    //     height: 40px;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: center;
+    //     background-color: #fff;
+    //   }
+    // }
 
     .group-selection-breadcrumb {
       margin-top: 12px;
+      .group-selection-breadcrumb-item {
+        cursor: pointer;
+      }
     }
 
     .group-selection-list-check {
@@ -83,39 +86,39 @@
       }
     }
 
-    .group-selection-list-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 24px;
-
-      .avatar {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        img {
-          width: 32px;
-          height: auto;
-          margin: 0 12px;
-        }
-
-        .label {
-          font-size: 16px;
-          color: #141414;
-        }
-      }
-
-      .next {
-        color: rgb(64, 62, 245);
-        cursor: pointer;
-        flex-shrink: 0;
-      }
-
-      .noNext {
-        opacity: 0.5;
-      }
-    }
+    // .group-selection-list-item {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: space-between;
+    //   margin-bottom: 24px;
+
+    //   .avatar {
+    //     display: flex;
+    //     align-items: center;
+    //     cursor: pointer;
+
+    //     img {
+    //       width: 32px;
+    //       height: auto;
+    //       margin: 0 12px;
+    //     }
+
+    //     .label {
+    //       font-size: 16px;
+    //       color: #141414;
+    //     }
+    //   }
+
+    //   .next {
+    //     color: rgb(64, 62, 245);
+    //     cursor: pointer;
+    //     flex-shrink: 0;
+    //   }
+
+    //   .noNext {
+    //     opacity: 0.5;
+    //   }
+    // }
   }
 
   .group-selection-detail {

package/src/index.tsx

@@ -1,5 +1,203 @@
-function Test() {
-  return <div>Test</div>;
+import { useEffect, useState, useImperativeHandle, forwardRef } 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";
+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 "./index.less";
+
+function GroupSelection(props, ref) {
+  const {
+    model,
+    queryKey = "parentId",
+    value = [],
+    labelKey = "label",
+    valueKey = "value",
+    isUserKey = "isUser",
+    imgKey = "img",
+    hasPagination = true,
+  } = props;
+  const [breadcrumb, setBreadcrumb] = useState([
+    {
+      [labelKey]: "首页",
+      [valueKey]: undefined,
+    },
+  ]);
+  const [loading, setLoading] = useState(false);
+  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, setPageData] = useState(hasPagination ? {
+      pageSize: 10,
+      pageNum: 1
+    } : {});
+
+  // 通过useImperativeHandle定义要抛出的值或方法
+  useImperativeHandle(ref, () => ({
+    selectedList,
+  }));
+
+  useEffect(() => {
+    const selectedValues = new Set(selectedList.map((item) => item[valueKey]));
+    const isAllSelected = selectList.every((item) => selectedValues.has(item[valueKey]));
+    setCheckAll(isAllSelected);
+  }, [selectList, selectedList]);
+
+  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);
+      })
+        .catch((err) => {
+        message.error(err._message || "未知错误");
+        })
+        .finally(() => {
+        setLoading(false);
+        });
+  };
+
+
+  useEffect(() => {
+    getTreeData();
+  }, []);
+
+
+  const handleChangePage = (pageNum, pageSize) => {
+    const pages = {
+      pageNum: pageSize !== pageData?.pageSize ? 1 : pageNum,
+      pageSize
+    }
+    setPageData({
+      ...pages
+    })
+    getTreeData()
+  }
+
+
+
+  const handleBreadcrumb = (e) => {
+    const index = breadcrumb.findIndex((item) => item[valueKey] === e[valueKey]);
+    const arr = [...breadcrumb];
+    arr.splice(index + 1);
+    setBreadcrumb(arr);
+    setQueryValue(e[valueKey]);
+    getTreeData(e[valueKey]);
+  };
+
+  const handleClickItem = (item) => {
+    const arr = [...breadcrumb];
+    arr.push(item);
+    setBreadcrumb(arr);
+    setQueryValue(item[valueKey]);
+    getTreeData(item[valueKey]);
+  };
+
+  const handleCheckDelete = (item) => {
+    setSelectedList(selectedList.filter((i) => i[valueKey] !== item[valueKey]));
+  };
+
+  const handleCheckItem = (item) => {
+    const is = selectedList.some((i) => i[valueKey] === item[valueKey]);
+    if (is) {
+      handleCheckDelete(item);
+    } else {
+      setSelectedList([...selectedList, item]);
+    }
+  };
+
+  const handleCheckAll = (e) => {
+    const isChecked = e.target.checked;
+    if (isChecked) {
+      // 全选：合并 selectList 并去重
+      setSelectedList((prev) => {
+        const selectedValues = new Set(prev.map((item) => item[valueKey])); // 已选值的 Set
+        const newItems = selectList.filter((item) => !selectedValues.has(item[valueKey]));
+        return [...prev, ...newItems]; // 合并新项
+      });
+    } else {
+      // 取消全选：仅移除 selectList 中的项
+      setSelectedList((prev) => {
+        const selectValues = new Set(selectList.map((item) => item[valueKey])); // 需移除值的 Set
+        return prev.filter((item) => !selectValues.has(item[valueKey])); // 过滤保留其他项
+      });
+    }
+  };
+
+  const handleCheck = (item) => {
+    const is = selectedList.some((i) => i[valueKey] === item[valueKey]);
+    return is;
+  };
+
+  const Renter = (item) => {
+    const isCheck = handleCheck(item);
+    return (
+      <ItemRenter
+        {...props}
+        item={item}
+        isCheck={isCheck}
+        handleCheckItem={handleCheckItem}
+        handleCheckDelete={handleCheckDelete}
+        handleClickItem={handleClickItem}
+      />
+    );
+  };
+
+  return (
+    <ConfigProvider locale={zhCN}>
+
+      <div className="group-selection">
+        {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]}>
+                  {item[labelKey]}
+                </Breadcrumb.Item>
+              );
+            })}
+          </Breadcrumb>
+          <div className="group-selection-list-check">
+            <Checkbox onChange={handleCheckAll} checked={checkAll && !!selectList.length} /> 全选
+          </div>
+          <div className="group-selection-list-view">
+            {selectList.map((item, index) => {
+              return Renter(item);
+            })}
+          </div>
+          {hasPagination ? <div>
+            <Pagination current={pageData?.pageNum} total={total} pageSize={pageData?.pageSize} onChange={handleChangePage} size="small" />
+          </div> : null}
+        </div>
+        <div className="group-selection-detail">
+          <div className="group-selection-detail-list">
+            {selectedList.map((item, index) => {
+              return (
+                <div className="group-selection-detail-item" key={item[valueKey]}>
+                  <img src={item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department} />
+                  <div className="label">{item[labelKey]}</div>
+                  <CloseCircleFilled style={{ cursor: "pointer" }} onClick={() => handleCheckDelete(item)} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </ConfigProvider>
+  );
 }
 
-export default Test;
+export default forwardRef(GroupSelection);

package/src/GroupSelection/index.jsx

@@ -1,250 +0,0 @@
-import { useEffect, useState, useImperativeHandle, forwardRef } 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";
-import 'moment/locale/zh-cn';
-import _ from "lodash";
-import defaultAvatar from "../assets/imgs/defaultAvatar.png";
-import department from "../assets/imgs/department.png";
-
-import "./index.less";
-
-function GroupSelection(props, ref) {
-  const {
-    model,
-    searchModel,
-    queryKey = "parentId",
-    searchQueryKey = "search",
-    value = [],
-    labelKey = "label",
-    valueKey = "value",
-    isUserKey = "isUser",
-    imgKey = "img",
-    hasPagination = true,
-    hasSearch = true
-  } = props;
-  const [breadcrumb, setBreadcrumb] = useState([
-    {
-      [labelKey]: "首页",
-      [valueKey]: undefined,
-    },
-  ]);
-  const [loading, setLoading] = useState(false);
-  const [checkAll, setCheckAll] = useState(false);
-  const [selectList, setSelectList] = useState([]);
-  const [selectedList, setSelectedList] = useState([...value]);
-  const [search, setSearch] = useState("");
-  const [searchList, setSearchList] = useState([]);
-  const [total, setTotal] = useState(0);
-  const [pageData, setPageData] = useState(hasPagination ? {
-    pageSize: 10,
-    pageNum: 1
-  } : {});
-
-  // 通过useImperativeHandle定义要抛出的值或方法
-  useImperativeHandle(ref, () => ({
-    selectedList,
-  }));
-
-  useEffect(() => {
-    const selectedValues = new Set(selectedList.map((item) => item[valueKey]));
-    const isAllSelected = selectList.every((item) => selectedValues.has(item[valueKey]));
-    setCheckAll(isAllSelected);
-  }, [selectList, selectedList]);
-
-  const getTreeData = (value) => {
-    setLoading(true);
-    model &&
-      model.get({ [queryKey]: value }).then((res) => {
-        setSelectList(res);
-      })
-        .catch((err) => {
-          message.error(err._message || "未知错误");
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-  };
-
-
-  useEffect(() => {
-    getTreeData();
-  }, []);
-
-
-  const handleSearch = (data) => {
-    setLoading(true);
-    searchModel &&
-      searchModel.get({ ...data }).then((res) => {
-        const list = res?.list || [];
-        setSearchList(list);
-        setTotal(res?.total);
-      }).catch((err) => {
-        message.error(err._message || "未知错误");
-      })
-        .finally(() => {
-          setLoading(false);
-        });
-  }
-
-  const handleChangePage = (pageNum, pageSize) => {
-    const pages = {
-      pageNum: pageSize !== pageData?.pageSize ? 1 : pageNum,
-      pageSize
-    }
-    setPageData({
-      ...pages
-    })
-    handleSearch({
-      [searchQueryKey]: search,
-      ...pages
-    })
-  }
-
-  const onSearch = (value) => {
-
-    setSearch(value);
-    if (!value) return;
-    handleSearch({
-      [searchQueryKey]: value,
-      ...pageData
-    })
-  };
-
-  const handleBreadcrumb = (e) => {
-    const index = breadcrumb.findIndex((item) => item[valueKey] === e[valueKey]);
-    const arr = [...breadcrumb];
-    arr.splice(index + 1);
-    setBreadcrumb(arr);
-    getTreeData(e[valueKey]);
-  };
-
-  const handleClickItem = (item) => {
-    const arr = [...breadcrumb];
-    arr.push(item);
-    setBreadcrumb(arr);
-
-    getTreeData(item[valueKey]);
-  };
-
-  const handleCheckDelete = (item) => {
-    setSelectedList(selectedList.filter((i) => i[valueKey] !== item[valueKey]));
-  };
-
-  const handleCheckItem = (item) => {
-    const is = selectedList.some((i) => i[valueKey] === item[valueKey]);
-    if (is) {
-      handleCheckDelete(item);
-    } else {
-      setSelectedList([...selectedList, item]);
-    }
-  };
-
-  const handleCheckAll = (e) => {
-    const isChecked = e.target.checked;
-    if (isChecked) {
-      // 全选：合并 selectList 并去重（基于 value）
-      setSelectedList((prev) => {
-        const selectedValues = new Set(prev.map((item) => item[valueKey])); // 已选值的 Set
-        const newItems = selectList.filter((item) => !selectedValues.has(item[valueKey]));
-        return [...prev, ...newItems]; // 合并新项
-      });
-    } else {
-      // 取消全选：仅移除 selectList 中的项（基于 value）
-      setSelectedList((prev) => {
-        const selectValues = new Set(selectList.map((item) => item[valueKey])); // 需移除值的 Set
-        return prev.filter((item) => !selectValues.has(item[valueKey])); // 过滤保留其他项
-      });
-    }
-  };
-
-  const handleCheck = (item) => {
-    const is = selectedList.some((i) => i[valueKey] === item[valueKey]);
-    return is;
-  };
-
-  const ItemRenter = (item) => {
-    const isCheck = handleCheck(item);
-    return (
-      <div className="group-selection-list-item" key={item[valueKey]}>
-        <div className="avatar" onClick={() => handleCheckItem(item)}>
-          <Checkbox checked={isCheck} />
-          <img src={item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department} />
-          <div className="label">{item[labelKey]}</div>
-        </div>
-        {item[isUserKey] ? null : <div
-          className={`next  ${isCheck ? "noNext" : ""}`}
-          onClick={() => {
-            if (isCheck) {
-              return;
-            }
-            handleClickItem(item);
-          }}
-        >
-          下级
-        </div>}
-      </div>
-    );
-  };
-
-  return (
-    <ConfigProvider locale={zhCN}>
-
-      <div className="group-selection">
-        {loading ? <div className="group-selection-loading">
-          <Spin tip="Loading..." spinning={loading} />
-        </div> : null}
-        <div className="group-selection-list">
-          {hasSearch ? <Input.Search onSearch={onSearch} enterButton placeholder="搜索成员" allowClear /> : null}
-
-          {/* <Input addonBefore={<SearchOutlined />} allowClear placeholder="搜索成员" onChange={onSearch} /> */}
-          {search ? (
-            <div className="group-selection-search-view">
-              <div className="group-selection-search-list">
-                {searchList.map((item, index) => {
-                  return ItemRenter(item);
-                })}
-              </div>
-
-              {hasPagination ? <div className="group-selection-search-pagination">
-                <Pagination current={pageData?.pageNum} total={total} pageSize={pageData?.pageSize} onChange={handleChangePage} size="small" />
-              </div> : null}
-            </div>
-          ) : null}
-          <Breadcrumb className="group-selection-breadcrumb">
-            {breadcrumb.map((item) => {
-              return (
-                <Breadcrumb.Item style={{ cursor: "pointer" }} onClick={() => handleBreadcrumb(item)} key={item[valueKey]}>
-                  {item[labelKey]}
-                </Breadcrumb.Item>
-              );
-            })}
-          </Breadcrumb>
-          <div className="group-selection-list-check">
-            <Checkbox onChange={handleCheckAll} checked={checkAll && selectList.length} /> 全选
-          </div>
-          <div className="group-selection-list-view">
-            {selectList.map((item, index) => {
-              return ItemRenter(item);
-            })}
-          </div>
-        </div>
-        <div className="group-selection-detail">
-          <div className="group-selection-detail-list">
-            {selectedList.map((item, index) => {
-              return (
-                <div className="group-selection-detail-item" key={item[valueKey]}>
-                  <img src={item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department} />
-                  <div className="label">{item[labelKey]}</div>
-                  <CloseCircleFilled style={{ cursor: "pointer" }} onClick={() => handleCheckDelete(item)} />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </ConfigProvider>
-  );
-}
-
-export default forwardRef(GroupSelection);