@hzab/group-user-selector 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,2 @@
+# @hzab/group-user-selector@0.0.1
+组件初始化

package/README.md

@@ -0,0 +1,67 @@
+# @hzab/group-user-selector
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import Demo from "@hzab/group-user-selector";
+
+<Demo />;
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数   | 类型   | 必填 | 默认值 | 说明              |
+| ------ | ------ | ---- | ------ | ----------------- |
+| schema | Object | 是   | -      | 数据信息的 schema |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+- 打包编译：npm run build
+
+## 发布
+
+- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
+
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@hzab/group-user-selector",
+  "version": "0.0.1",
+  "description": "",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-patch": "npm version patch && npm publish --access public",
+    "publish-minor": "npm version minor && npm publish --access public",
+    "publish-major": "npm version major && npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "^1.0.0",
+    "@hzab/webpack-config": "^1.0.0",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.14.0",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@hzab/data-model": "^1.7.0",
+    "lodash": "^4.17.21"
+  }
+}

package/src/GroupSelection/index.jsx

@@ -0,0 +1,250 @@
+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);

package/src/GroupSelection/index.less

@@ -0,0 +1,160 @@
+.group-selection {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  .group-selection-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.5);
+    z-index: 100;
+  }
+
+  .group-selection-list {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    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-breadcrumb {
+      margin-top: 12px;
+    }
+
+    .group-selection-list-check {
+      margin: 12px 0;
+    }
+
+    .group-selection-list-view {
+      flex: 1;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .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 {
+    position: relative;
+    height: 100%;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .group-selection-detail-list {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 24px;
+
+      .group-selection-detail-item {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        padding: 4px 8px;
+        margin: 0 12px 12px 0;
+        color: #e8e8e8;
+        border-radius: 8px;
+        background-color: aliceblue;
+
+        img {
+          width: 32px;
+          height: auto;
+          margin-right: 12px;
+        }
+
+        .label {
+          font-size: 16px;
+          color: #141414;
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+function Test() {
+  return <div>Test</div>;
+}
+
+export default Test;