@hzab/hierarchical-statistics 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,2 @@
+# @hzab/component-boilerplate@0.0.1
+组件初始化

package/README.md

@@ -0,0 +1,125 @@
+# @hzab/group-user-selector
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import { InfiniteListUIPc, InfiniteListUIMobile } from "@hzab/hierarchical-statistics";
+      <InfiniteListUIPc
+        ref={listRef}
+        style={{
+          maxWidth: "400px",
+        }}
+        listModal={
+          new DataModel({
+            getListApi: "/api/v1/sysOrg/getDeptTree",
+            query: {
+              pageNum: 1,
+              pageSize: 8,
+            },
+          })
+        }
+        fieldList={{
+          value: "orgId",
+          label: "orgName",
+        }}
+        virtualPagedListProps={{
+          height: 300,
+          dynamicHeightMode: true,
+          renderItem: (record) => (
+            <div
+              onClick={() => {
+                listRef.current.handleNodeClick(record);
+              }}
+              style={{ padding: "12px 30px", border: "1px solid red" }}
+            >
+              <div>{record?.orgName}</div>
+            </div>
+          ),
+          noMoreComponent: <div>没有更多数据了</div>,
+        }}
+      ></InfiniteListUIPc>
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数                 | 类型                           | 必填  | 默认值    | 说明                                 |
+| -------------------- | ------------------------------| ----- | --------- | ----------------------------------- |
+| listModal            | Object                        | 是    | -         | 列表数据模型DataModel，必须包含getListApi |
+| breadModel           | Object                        | 否    | -        | 回显数据模型DataModel，必须包含getApi |
+| showHome             | boolean                       | 否    | -         | 是否显示面包屑首页            |
+| onNodeClick          | function(item)                | 否    | -         | item点击事件        |
+| onNodeSelect         | function(item)                | 否    | -         | item选中事件        |
+| onBreadcrumbClick    | function(item)                | 否    | -         | 回显点击事件        |
+| fieldList            | {value: number, label: string}| 否    | -         | 列表默认关联字段      |
+| fieldBreadcrumb      | {value: number, label: string}| 否    | -         | 面包屑显示对应关联字段  |
+| parentField          | string                        | 否    | parentId  | 请求接口关联字段        |
+| homeBreadcrumb       | string                        | 否    | 首页      | 面包屑首页名称     |
+| style                | CSSProperties                 | 否    | -         | 组件外层样式     |
+| listStyle            | CSSProperties                 | 否    | -         | 列表外层样式     |
+| readcrumbStyle       | CSSProperties                 | 否    | -         | 面包屑外层样式    |
+| separatorStyle       | CSSProperties                 | 否    | -         | 面包屑分割符样式    |
+| listRenderProps      | Object                        | 否    | -         | list-render-mobile 配置    |
+| virtualPagedListProps| Object                        | 否    | -         | virtualPagedList 配置    |
+| separator            | string                        | 否    | -         | 分隔符 默认"-"     |
+| Slots                | Object                        | 是    | -         | 插槽              |
+
+
+
+### Slots
+
+| 参数                 | 类型                | 必填  | 默认值   | 说明                                |
+| -------------------- | -------------------| ----- | ------- | ----------------------------------- |
+| fixRenderCenter      | Function           | 否    | -        | 固定在头部 面包屑和列表之间插槽       |
+| itemRender           | Function           | 是    | -        | 自定义列表项       |
+
+# 组件开发流程
+
+- 在 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,54 @@
+{
+  "name": "@hzab/hierarchical-statistics",
+  "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",
+    "webpack": "5.75.0"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@hzab/data-model": "^1.7.5",
+    "@hzab/headless-components": "^0.0.3",
+    "@hzab/list-render-mobile": "^1.1.7"
+  }
+}

package/src/components/Breadcrumb/index.tsx

@@ -0,0 +1,28 @@
+import styles from "../index.module.less";
+const BreadcrumbUI = (props: any) => {
+  const { readcrumbStyle, separatorStyle, separator, breadcrumbData, terminal, handleBreadcrumbClick } = props;
+  return (
+    <div
+      className={`${styles["readcrumb-box"]} ${terminal !== "pc" ? styles["readcrumb-box-mobile"] : null}`}
+      style={readcrumbStyle}
+    >
+      {breadcrumbData.map((item, index) => (
+        <div className={`${styles["readcrumb-item"]}`} key={index}>
+          <span
+            className={styles["title"]}
+            style={{ color: breadcrumbData.length - 1 == index ? "#aeadad" : "#403ef5" }}
+            key={item?.value}
+            onClick={() => handleBreadcrumbClick(item, index)}
+          >
+            {item?.label}
+          </span>
+          <span className={styles["separator"]} style={separatorStyle}>
+            {breadcrumbData?.length - 1 != index ? separator : ""}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BreadcrumbUI;

package/src/components/InfiniteListUiMobile/index.tsx

@@ -0,0 +1,60 @@
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
+import { ConfigProvider, Spin } from "antd";
+import ListRender from "@hzab/list-render-mobile";
+import { useInfiniteList } from "../../use-infinite-list";
+import { InfiniteListProps, InfiniteListInstance } from "../../type";
+import Breadcrumb from "../Breadcrumb";
+import styles from "../index.module.less";
+const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
+  const {
+    states: {
+      readcrumbStyle,
+      separatorStyle,
+      separator,
+      listRenderProps,
+      style,
+      listModal,
+      breadcrumbData,
+      Slots,
+      loading,
+      listRef,
+      listStyle,
+      breadModel,
+    },
+    actions: { fetchBreadData, handleSelectId, handleNodeClick, handleBreadcrumbClick },
+  } = useInfiniteList({ ...props, terminal: "mobile" });
+  useImperativeHandle(ref, () => ({
+    handleNodeClick,
+    handleSelectId,
+    listRef: listRef?.current,
+    listModal,
+    breadModel,
+    fetchBreadData,
+  }));
+  return (
+    <div className={styles["contain"]} style={style}>
+      <Spin spinning={loading}>
+        {/* 面包屑导航 */}
+        <div className={styles["breadcrumb-box-main"]}>
+          <Breadcrumb
+            terminal="mobile"
+            readcrumbStyle={readcrumbStyle}
+            separatorStyle={separatorStyle}
+            separator={separator}
+            breadcrumbData={breadcrumbData}
+            handleBreadcrumbClick={handleBreadcrumbClick}
+            Slots={Slots}
+          ></Breadcrumb>
+          {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
+        </div>
+
+        <div className={styles["list-box-main"]} style={listStyle}>
+          {/* 移动端 */}
+          <ListRender ref={listRef} model={listModal} {...listRenderProps} renderItem={Slots.renderItem} />
+        </div>
+      </Spin>
+    </div>
+  );
+};
+
+export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIMobile);

package/src/components/InfiniteListUiPc/index.tsx

@@ -0,0 +1,73 @@
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
+import VirtualPagedList from "@hzab/headless-components/src/VirtualPagedList";
+import { ConfigProvider, Spin, Empty, Button } from "antd";
+import { useInfiniteList } from "../../use-infinite-list";
+import Breadcrumb from "../Breadcrumb";
+import { InfiniteListProps, InfiniteListInstance } from "../../type";
+import styles from "../index.module.less";
+const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
+  const {
+    states: {
+      listModal,
+      readcrumbStyle,
+      separatorStyle,
+      separator,
+      style,
+      selectedLoadIdNode,
+      breadcrumbData,
+      Slots,
+      loading,
+      listStyle,
+      listRef,
+      virtualPagedListProps,
+    },
+    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick },
+  } = useInfiniteList({ ...props, terminal: "pc" });
+
+  useImperativeHandle(ref, () => ({
+    handleNodeClick,
+    handleSelectId,
+    listRef: listRef?.current,
+    listModal,
+  }));
+
+  const loadData = async (pageNum) => {
+    listModal.query = { ...listModal.query, pageNum: pageNum };
+    const res = await listModal?.getList();
+    const list = res?.list ?? [];
+    return {
+      list,
+      isMore: res?.pagination?.total > (pageNum - 1) * listModal.query.pageSize + res?.list?.length ? true : false,
+    };
+  };
+  return (
+    <div className={styles["contain"]} style={style}>
+      <Spin spinning={loading}>
+        {/* 面包屑导航 */}
+        <div className={styles["breadcrumb-box-main"]}>
+          <Breadcrumb
+            terminal="pc"
+            readcrumbStyle={readcrumbStyle}
+            separatorStyle={separatorStyle}
+            separator={separator}
+            breadcrumbData={breadcrumbData}
+            handleBreadcrumbClick={handleBreadcrumbClick}
+          ></Breadcrumb>
+          {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
+        </div>
+
+        <div className={styles["list-box-main"]} style={listStyle}>
+          <VirtualPagedList
+            key={selectedLoadIdNode}
+            ref={listRef}
+            {...virtualPagedListProps}
+            renderItem={Slots.renderItem}
+            loadMoreItems={loadData}
+          />
+        </div>
+      </Spin>
+    </div>
+  );
+};
+
+export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIPc);

package/src/components/index.module.less

@@ -0,0 +1,30 @@
+.contain {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE/Edge */
+  user-select: none; /* Standard syntax */
+}
+.breadcrumb-box-main {
+  position: sticky;
+  top: 0px;
+  z-index: 9;
+  .readcrumb-box {
+    height: 40px;
+    width: 100%; /* 或者其他固定宽度 */
+    overflow: hidden; /* 隐藏水平滚动条 */
+    white-space: nowrap; /* 文字在一行内显示 */
+    overflow-x: auto;
+    display: flex;
+    align-items: center;
+
+    > div {
+      display: inline-block;
+      .separator {
+        margin: 0 4px;
+      }
+    }
+  }
+  .readcrumb-box-mobile::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条（适用于 Chrome/Edge/Safari） */
+  }
+}

package/src/type.d.ts

@@ -0,0 +1,72 @@
+export type ListItem = {
+  children?: ListItem[];
+  value: number;
+  label: string;
+  [key: string]: any;
+};
+
+export type FieldItem = {
+  /** 选中当前关联id */
+  value: string;
+  /** 选中当前关联名称 */
+  label: string;
+};
+export type PathItem = {
+  value: number;
+  label: string;
+};
+export type InitSelectItem = PathItem;
+export type OnNodeBreadcrumbClickType = PathItem & { index: number };
+export interface InfiniteListInstance {
+  /** 点击下级节点事件 */
+  handleNodeClick?: (item: ListItem) => void;
+  /** 选中事件 */
+  handleSelectId?: (item: ListItem) => void;
+  listRef?: any;
+  listModal?: any;
+}
+export interface InfiniteListProps {
+  /** 面包屑显示对应关联字段默认 value,label */
+  fieldBreadcrumb?: FieldItem;
+  /** 是否有首页，默认false */
+  showHome?: boolean;
+  /** 关联字段默认 value,label */
+  fieldList?: FieldItem;
+  /** 列表请求接口下一级关联字段 */
+  parentField?: string;
+  /** 面包屑首页名称 */
+  homeBreadcrumb?: string;
+  /** 自定义面包屑 和 自定义列表 */
+  Slots: {
+    /** 固定在头部 面包屑和列表之间插槽 */
+    fixRenderCenter?: any;
+    /** 自定义列表项 */
+    renderItem: any;
+  };
+  /** 面包屑分割符 */
+  separator?: string;
+  /** 组件外层样式 */
+  style?: object;
+  /** 面包屑分割符css 样式 */
+  separatorStyle?: object;
+  /** 面包屑外层 自定义css 样式 */
+  readcrumbStyle?: object;
+  /** 设备是pc,还是mobile */
+  terminal?: string;
+  /** 列表外层 css 样式 */
+  listStyle?: object;
+  /** list modal */
+  listModal: any;
+  /** bread modal */
+  breadModel?: any;
+  /** list-render-mobile配置 */
+  listRenderProps?: object;
+  /** virtualPagedList 配置 */
+  virtualPagedListProps?: any;
+  /** 选中点击事件 */
+  onNodeClick?: (node: ListItem) => void;
+  /** 选中id */
+  onNodeSelect?: (node: ListItem) => void;
+  /** 选中回显点击事件 */
+  onBreadcrumbClick?: (node: OnNodeBreadcrumbClickType) => void;
+}

package/src/use-infinite-list.ts

@@ -0,0 +1,142 @@
+import { useState, useEffect, useRef } from "react";
+import { ListItem, PathItem, InfiniteListProps } from "./type";
+
+export function useInfiniteList(props: InfiniteListProps) {
+  const {
+    style,
+    listStyle,
+    separatorStyle,
+    readcrumbStyle,
+    listRenderProps,
+    showHome = true,
+    onNodeClick,
+    onNodeSelect,
+    onBreadcrumbClick,
+    parentField = "parentId",
+    homeBreadcrumb = "首页",
+    fieldBreadcrumb = {
+      value: "value",
+      label: "label",
+    },
+    fieldList = {
+      value: "value",
+      label: "label",
+      ...props?.fieldList,
+    },
+    Slots,
+    separator = "/",
+    listModal,
+    breadModel,
+    virtualPagedListProps,
+  } = props;
+  const [loading, setLoading] = useState(false);
+  const [selectedLoadIdNode, setSelectedLoadIdNode] = useState<number | null>(null);
+  const [selecteId, setSelectedId] = useState<number | null>();
+  const [breadcrumbData, setBreadcrumbData] = useState<PathItem[]>(
+    showHome ? [{ value: 0, label: homeBreadcrumb }] : [],
+  );
+  const listRef = useRef<any>(null);
+
+  /**
+   * 下一级请求函数
+   * @param {ListItem} item - 选中的节点数据
+   *
+   */
+  const handleNodeClick = (item: ListItem) => {
+    onNodeClick?.({
+      ...item,
+      value: item[fieldList.value],
+      label: item[fieldList.label],
+    });
+    listModal.query = { ...listModal.query, [parentField]: item[fieldList.value] };
+    setSelectedLoadIdNode(item[fieldList.value]);
+    setBreadcrumbData((pre) => [
+      ...pre,
+      {
+        value: item[fieldList.value],
+        label: item[fieldList.label],
+      },
+    ]);
+    listRef.current?.onSearch();
+  };
+
+  /**
+   * 选中节点id
+   * @param {ListItem} item - 选中的节点
+   *
+   */
+  const handleSelectId = (item: ListItem) => {
+    setSelectedId(item[fieldList.value]);
+    onNodeSelect?.({ ...item });
+  };
+
+  /**
+   * 处理面包屑点击事件
+   * @param {PathItem} item - 被点击的面包屑节点
+   * @param {number} index - 被点击的面包屑节点的索引
+   */
+  const handleBreadcrumbClick = (item: PathItem, index: number) => {
+    if (breadcrumbData.length - 1 == index) return;
+    onBreadcrumbClick?.({
+      ...item,
+      index: index,
+    });
+    listModal.query = { ...listModal.query, [parentField]: item.value };
+    setSelectedLoadIdNode(item.value);
+    setBreadcrumbData(breadcrumbData.slice(0, index + 1));
+    listRef.current?.onSearch();
+  };
+
+  /**
+   * 面包屑数据回显
+   *
+   */
+  const fetchBreadData = async () => {
+    setLoading(true);
+    try {
+      const res = await breadModel?.get();
+      if (!res && !Array.isArray(res)) return;
+      let relPath =
+        res[0]?.path?.map((v: any) => {
+          return {
+            ...v,
+            value: v[fieldBreadcrumb.value],
+            label: v[fieldBreadcrumb.label],
+          };
+        }) || [];
+      relPath && setBreadcrumbData(relPath);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchBreadData();
+  }, []);
+
+  return {
+    states: {
+      style,
+      listStyle,
+      separatorStyle,
+      readcrumbStyle,
+      selectedLoadIdNode,
+      breadcrumbData,
+      Slots,
+      listRenderProps,
+      separator,
+      loading,
+      selecteId,
+      listRef,
+      virtualPagedListProps,
+      listModal,
+      breadModel,
+    },
+    actions: {
+      handleSelectId,
+      handleNodeClick,
+      handleBreadcrumbClick,
+      fetchBreadData,
+    },
+  };
+}