PersonnelSelect人员选择组件

安装

import Demo from "@hzab/personnel-select";

概述

PersonnelSelect 组件是一个支持远程加载数据的选择器，能够灵活处理多选和单选的需求。此组件基于 Ant Design 的 Select 组件，扩展了数据加载及项渲染的功能。

API 说明

基础属性 - BaseSelectProps

| 属性名 | 类型 | 必填 | 默认值 | 描述 | |-----------------------|-------------------------------------------------------------------------------------------------------------------|-------|-------|--------------------------------------------------------| | loadData | (search: string, pagination: ScrollPagination) => Promise<{ list: LabelValue[]; pagination: ScrollPagination }> | 是 | - | 请求数据的函数，接受搜索关键词和分页参数，返回包含列表和分页信息的 Promise。 | | getInitData | <T = Record<string, any>, U = LabelValue[]>(query: T) => Promise<U | any> | 否 | - | 可选的查询函数，用于根据查询条件获取数据。 | | renderItem | (item: LabelValue) => React.ReactNode | 否 | - | 自定义列表项渲染函数，接收一个 LabelValue 对象并返回 React 节点。 | | isClearable | boolean | 否 | false | 下拉框收起时是否清除当前选择的值。 | | initialPagination | Partial<ScrollPagination> | 否 | - | 初始的分页参数，支持部分属性。 | | avataProps | AvatarProps | 否 | - | Ant Design 头像组件的 props。 | | mode | "multiple" \| "tags" | 否 | - | 选择模式，支持多选或标签模式。 | | listItemConfigs | { label: string; key: string }[] | 否 | - | 列表项内部展示的字段配置数组。 | | disabledKey | string | 否 | - | 用于动态禁用选项的键。 | | labelKey | string | 否 | - | 用于动态获取显示文本的键。 | | valueKey | string | 否 | - | 用于动态获取值的键。 | | showAvatar | boolean | 否 | true | 是否显示头像 | | debounceDuration | number | 否 | 500ms | 防抖时长（ms）。 | | avatarKey | string | 否 | - | 用于设置获取头像属性字段的key，也可以用Ant Design 头像组件的 props覆盖src属性来自定义 | | disabledStyle | (disabled: boolean) => React.CSSProperties | 否 | - | 动态生成禁用状态下的样式。 | | customItemNode | React.ReactNode | 否 | - | 自定义列表项的 React 节点。 | | dropdownRenderStyle | React.CSSProperties | 否 | - | 下拉列表容器的样式。 |

多选模式 - RemoteSelectMultipleProps

| 属性名 | 类型 | 必填 | 默认值 | 描述 | |---------|-------------------------------------------|----|-----|-------------------------------------| | mode | "multiple" | 是 | - | 选择模式，固定为多选模式。 | | value | LabelValue[] \| Array<string \| number> | 否 | - | 下拉框的值，可以是 LabelValue 数组或字符串/数字数组。 |

单选模式 - RemoteSelectTagsProps

| 属性名 | 类型 | 必填 | 默认值 | 描述 | |---------|----------------------------------|----|-----|-----------------------------------| | mode | "tags" | 是 | - | 选择模式，固定为标签模式。 | | value | LabelValue \| string \| number | 否 | - | 下拉框的值，可以是 LabelValue 对象或字符串/数字。 |

组合类型 - RemoteSelectProps

export type RemoteSelectProps = RemoteSelectMultipleProps | RemoteSelectTagsProps;

示例

import React from 'react';
import { RemoteSelect } from './RemoteSelect';

const App: any = () => {
  const [value, setValue] = useState<any>();

  const handleloadData = async (userName, { pageNum, pageSize }) => {

    const params: Record<string, any> = { pageNum, pageSize };

    if (userName) {
      params.userName = userName;
    }

    const res = await axios({
      method: "get",
      url: "/main/api/v1/userinfo/userDetailListV2",
      params: {
        ...params,
      },
    });

    const { list = [], pagination = {} } = res.data.data;

    return {
      list: list.map((item: any) => ({ ...item, label: item.userName, value: item.userId })),
      pagination,
    };
  };

  const handleSearchDta = async (ids) => {
    const res = await axios({
      method: "post",
      url: "/main/api/app/v1/user/getUserList",
      data: {
        userIdList: Array.isArray(ids) ? ids : [ids],
      },
    });

    const list = res.data.data.map((item: any) => ({ ...item, label: item.userName, value: item.userId }));

    return list;
  };

  useEffect(() => {
    setTimeout(() => {
      setValue(591718);
    }, 2000);
  }, []);

  return (
    <div className="demo">
      <div className="pl30 pt30 mt30">
        <PersonnelSelect
          value={value}
          onChange={(value, option) => {
            setValue(value);
          }}
          style={{ width: "1200px" }}
          loadData={handleloadData}
          searchData={handleSearchDta}
          mode="multiple"
        />
      </div>
    </div>
  );
};

export default App;