@hzab/group-user-selector

组件模板

• [email protected]

• 注意：首次克隆先执行 npm run prepare 命令

组件

示例

import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/InfiniteListUiPc";
<InfiniteListUIPc
  ref={listRef}
  style={{
    maxWidth: "400px",
  }}
  listModal={
    new DataModel({
      getListApi: "/api/v1/sysOrg/getDeptTree",
      query: {
        pageNum: 1,
        pageSize: 8,
      },
    })
  }
  fieldList={{
    value: "orgId",
    label: "orgName",
  }}
  Slots={{
    renderItem: (record) => (
      <div
        onClick={() => {
          listRef.current.handleNodeClick(record);
        }}
        style={{ padding: "12px 30px", border: "1px solid red" }}
      >
        <div>{record?.orgName}</div>
      </div>
    ),
  }}
  virtualPagedListProps={{
    height: 300,
    dynamicHeightMode: true,
    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 源和云效源都需要发布

• 命令：npm publish --access public

• 发布目录：

  • src

迭代发布命令-版本自增

• beta: 需要手动修改 package.json 中的 version，添加 -betaX 版本号。使用 npm publish --beta 发布
• 0.0.x: npm run publish-patch
• 0.x.0: npm run publish-minor
• x.0.0: npm run publish-major

nrm

• 安装 npm install -g nrm
• 增加源 nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
• 切换源 nrm use aliyun nrm use npm
• 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看） npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js