@uyun/ec-user-picker
User Picker component from everest-components
Last updated 3 years ago .
UNLICENSED · Repository · Bugs ·
$ cnpm install @uyun/ec-user-picker 
Private package

category: Components type: Everest title: UserPicker subtitle: 用户选择 cols: 1

当前版本:6.x

作者:李金月

用户选择组件。

何时使用

用于选择租户下的所有用户或用户组。

  • v3.6.21 版本对应租户 R18.11.0 以下版本
  • v4.0.12 版本强依赖租户 R18.11.0 及以上版本
  • v5.0.0+ 版本强依赖租户 R18.13.0、portal R18.13.0 及以上版本
  • v6.0.0+ 版本强依赖租户 R18.17.0 及以上版本
  • v7.0.0+ 版本强依赖租户 R18.19.0 及以上版本
  • v15.0.0+ 版本强依赖 @uyun/components@5.x
默认模式

默认模式,以Select形式展现,选择后的数据以标签形式显示在选择器中,适用于数据规模较小、选择纬度较单一的场景。

<Example path="mini" />
Dialog 模式

Dialog 模式,以Modal形式展现,数据规模较大、选择维度较多的场景使用。

<Example path="dialog" />
Layer 模式

Layer 模式,以Dropdown形式展现,数量在按钮中显示,当容器中出现弹窗嵌套弹窗 or 选择维度不多时使用。

<Example path="layer" />
动态控制属性

选择不同配置组合查看效果

<Example path="dynamicsetting" />

API

共同的 API

参数 说明 类型 默认值
buttonProps 按钮 props (设置 title 可自定义按钮文案) object -
selectionType 多选/单选,checkboxradio string checkbox
value 已选择项 ValueObject -
isolation 各个列表数据是否隔离(不隔离,即按添加的时间顺序排列), 配合 value 格式使用 boolean false
pagination 是否显示页码 boolean true
showRecentlySelected 是否显示最近选择数据,mode 为 dialog layer 时有效 boolean true
showUsers 是否显示用户模块 boolean true
showGroups 是否显示用户组模块 boolean true
globalGroups 是否获取全局用户组 boolean false
showNumber 是否显示数值统计,点击可查看已选择的全部数据,mode 为 default 时有效 boolean false
getCombineData 自定义混合搜索接口,参考 自定义接口 getCombineData -
getUsers 自定义获取用户数据的接口,参考 自定义接口 getUsers -
queryGroupsTrees 自定义获取用户组数据的接口,参考 自定义接口 queryGroupsTree -
getGroupList 自定义搜索用户组数据的接口,参考 自定义接口 getGroupList -
getDeparts 自定义获取部门数据的接口,参考 自定义接口 getDeparts -
getDepartList 自定义搜索部门数据的接口,参考 自定义接口 getDepartList -
onChange 改变选中项时的回调 function(value) -
children 自定义扩展列表,参考 自定义扩展列表 ReactNode -

UserPicker

参数 说明 类型 默认值
userId 登陆用户 Id,必传(过滤不同用户最近选择数据) string -
product 产品名称,必传(过滤不同产品下最近选择数据) string -
productName 产品名称,传入后只会获取当前产品下的数据 string -
mode 设置模式 string: default dialog layer default
getPopupContainer 菜单渲染父节点,mode 为 default 时有效 Function(triggerNode) triggerNode => triggerNode.parentNode
width 下拉内容的渲染宽度,mode 为 default 时有效 number -
maxHeight 下拉内容的渲染最大高度,mode 为 default 时有效 number 460
placeholder 自定义修改 select 的占位符(mini 模式有效) string 请输入关键字

UserPickerPanel

参数 说明 类型 默认值
appId 产品 id,传入后只会获取当前产品下的数据 string -
showGroupQueryUser 是否显示按用户组查询用户 boolean true
showDepartQueryUser 是否显示按部门查询用户 boolean true

Lists(dialog、layer) 、MiniLists (default)

参数 说明 类型 默认值
getLists 自定义获取数据的接口,参考 自定义接口 getLists -

ValueObject

数据格式参考:

1. isolation = false 时,数据按添加的时间顺序排来:
{
  all: [{
      userId: '...',
      account: 'admin',
      realname: 'admin',
      departs: ['顶级部门'],
      type: 'users',
      ...
    },{
      departId: '...',
      name: '部门1',
      type: 'departs',
      ...
    },{
      groupId: '...',
      name: '用户组',
      type: 'groups',
      ...
    },{
      departId: '...',
      name: '部门2',
      type: 'departs',
      ...
    }]
}

2.isolation = true 时,不同类型的列表数据在一起:
{
  // 用户
  users: [
    {
      userId: '...',
      account: 'admin',
      realname: 'admin',
      departs: ['顶级部门'],
      ...
    }
  ],
  // 用户组
  groups: [
    {
      groupId: '...',
      name: '用户组',
      ...
    }
  ],
  // 自定义扩展列表的数据
  others: [
    { ... }
  ]
}
参数 说明 类型 默认值
type 扩展类型,对应 value 中的字段名 string -

自定义接口

当默认的数据源无法满足业务需求时,可自定义组件中的接口,需要注意请求参数的传递和确保返回正确的数据格式。由于数据量较大,所以返回的分页信息中不包含数据总数。

getUsers为例:

import UserPicker from '@uyun/ec-user-picker'
import { getUsers } from '@uyun/ec-user-picker/lib/services/api'

...
  <UserPicker
    getUsers={params => {
      return getUsers({
        // params 是页面中的分页、搜索等信息,
        // 可根据情况将这个对象更改为符合自定义接口的参数,
        // 例如,产品要求将用户数据源限制在某一个范围内,
        // 就可通过自定义接口参数来过滤用户数据。
        ...params,
        userIds: ['...', '...']
      })
        .then(data => {
          // data 是请求后获得的数据,
          // 可根据情况将这个数组更改为组件要求的数据格式,
          // 例如,自定义接口中用户唯一标识为 'id',而组件要求的则是 `userId`,
          // 那么你应该在此将所有用户数据中的 'id' 更改为 'userId'。
          return data
        })
    }}
    value={this.state.value}
    onChange={this.onChange}
  />
...

getUsers

请求参数传递:

参数 说明 类型
appId 应用 id,筛选当前产品的用户 string
userInfo 用户信息,多字段查询,可为姓名、账号、邮箱 string
userIds 用户 id 组, 筛选属于其中的用户 string
departId 部门 id,筛选当前部⻔的用户 string
groupId 用户组 id,筛选当前用户组的用户 string
pageIndex 当前页数 number
pageSize 每页条数 number
tenantId 租户 id,默认取当前登录用户的 tenantId,当需要按业务单位来查询时,需要显式指定 string

返回数据格式:

参数 说明 类型
pageNo 当前页数 number
pageSize 每页条数 number
total 列表总数 number
records 用户列表 object[]

getCombineData

请求参数传递:

参数 说明 类型
app_id 应用 id,筛选当前产品的数据 string
keyword 搜索关键字 string
type 搜索哪方面数据, 对应 value 中 type( 比如 type 传值'users, departs',混合搜索用户和部门的数据 ) string
page_index 用户 id 组, 筛选属于其中的用户 string
page_index 当前页数 number
page_size 每页条数 number

返回数据格式:

参数 说明 类型
pageNo 当前页数 number
pageSize 每页条数 number
total 列表总数 number
records 用户列表 object[]

queryGroupsTree

请求参数传递:

参数 说明 类型
app_id 应用 id,筛选当前产品的用户组 string
pid 父级分类用户组 id, 筛选当前分类用户组下的用户组 string

返回数据格式:

参数 说明 类型
- 用户组 object[]

getGroupList

请求参数传递:

参数 说明 类型
name 用户组名称 string
queryCategory 用户组类型 (0: 真正用户组;1: 分类用户组;2: 所以用户组) | string
pageIndex 当前页数 number
pageSize 每页条数 number

返回数据格式:

参数 说明 类型
pageNo 当前页数 number
pageSize 每页条数 number
records 用户列表 object[]

getDeparts

请求参数传递:

参数 说明 类型
parent_depart_id 上级部门 id,获取此部门下属的部门列表,获取顶级部门时传 0 string

返回数据格式:

参数 说明 类型
- 部门列表 object[]

getDepartList

请求参数传递:

参数 说明 类型
name 部门名称 string

返回数据格式:

参数 说明 类型
- 部门列表 object[]

getLists

请求参数不做要求

返回数据格式:

参数 说明 类型
pageNo 当前页数 number
pageSize 每页条数 number
total 列表总数 number
records 用户列表 object[]

自定义扩展列表

当业务需求需要使用除用户和用户组以外的数据源时,可对组件进行额外扩展,添加多个自定义选择项列表。进行扩展时,需要注意自定义的组件要满足一定要求。

以扩展一个部门列表为例:

// 自定义扩展组件通过 selectedRowKeys 进行选择项的显示,
// 调用 onSelect 、 onSelectAll 和onDeselect 进行数据的向上传递,
// 最后通过其它属性控制页面的布局和搜索等功能。
onst departsData = [
  {
    departId: "001",
    name: "顶级部门",
    children: [
      {
        departId: "001-1",
        name: "二级部门1",
        children: [
          {
            departId: "001-1-1",
            name: "三级部门"
          }
        ]
      },
      {
        departId: "001-2",
        name: "二级部门2"
      }
    ]
  }
];
class UserPickerPane extends React.Component {
  // 单选
  onSelect = (selectedKeys, event) => {
    const { onSelect, onDeselect } = this.props;
    const record = event.node.props.dataRef;
    if (event.selected) {
      if (onSelect) {
        onSelect("departs", record);
      }
    } else {
      if (onDeselect) {
        onDeselect("departs", selectedKeys[0]);
      }
    }
  };

  // 多选
  onCheck = (checkedKeys, event) => {
    const { value, onSelectAll } = this.props;
    let record = _.map(event.checkedNodes, item => {
      return item.props.dataRef;
    });
    const departs = _.filter(value, item => item.type === "departs");
    const departIds = _.map(value, item => item.departId);
    if (!event.checked) {
      record = _.filter(
        departs,
        item => checkedKeys.indexOf(item.departId) === -1
      );
    } else {
      record = _.filter(
        record,
        item => departIds.indexOf(item.departId) === -1
      );
    }
    // record: 新增或移除的数据
    if (onSelectAll) {
      onSelectAll("departs", "departId", record, event.checked);
    }
  };

  render() {
    const { selectedRowKeys, selectionType, mode } = this.props;
    const loop = data =>
      _.map(data, item => {
        if (item.children) {
          return (
            <TreeNode
              key={item.departId}
              title={item.name}
              dataRef={item}
              selectable={selectionType === "radio"}
              checkable={selectionType === "checkbox"}
            >
              {loop(item.children)}
            </TreeNode>
          );
        }
        return (
          <TreeNode
            key={item.departId}
            title={item.name}
            dataRef={item}
            selectable={selectionType === "radio"}
            checkable={selectionType === "checkbox"}
          />
        );
      });
    return (
      <DirectoryTree
        showLine
        showIcon={false}
        expandAction={false}
        multiple={selectionType === "checkbox"}
        checkable={selectionType === "checkbox"}
        selectedKeys={selectionType === "radio" ? selectedRowKeys : []}
        checkedKeys={selectionType === "checkbox" ? selectedRowKeys : []}
        defaultExpandAll
        onSelect={selectionType === "radio" ? this.onSelect : null}
        onCheck={this.onCheck}
      >
        {loop(departsData)}
      </DirectoryTree>
    );
  }
}
...
  state = {
    value: []
  }

...
  <UserPicker
    value={this.state.value}
    onChange={this.onChange}
  >
    {/* 使用自定义组件时,需要传入文档中标注的必填项 */}
    <UserPickerPane
      // 必填,对应 value 中的字段名
        type="departs"
        // 必填,数据的唯一标识
        rowKey="departId"
        // 必填,标签显示文字
        tab="部门"
        // 必填,回填到选择框的 Option,需要在 title 中传入 Tooltip 组件
        renderTag={record => (
          <Option
            title={<Tooltip title={record.name}>{record.name}</Tooltip>}
          >
            {record.name}
          </Option>
        )}
      />
  </UserPicker>
...
参数 说明 类型 默认值
type 扩展类型,对应 value 中的字段名 string -
rowKey 扩展数据的唯一标识 string -
tab 扩展的标签显示文字 string -
renderTag  扩展回填到选择框的 Option,需要在 title 中传入 Tooltip 组件 function(record) => ReactNode -

Current Tags

  • 15.1.15-dev.0                                ...           dev (2 years ago)
  • 3.6.2                                ...           latest (5 years ago)

180 Versions

  • 15.1.23                                ...           2 years ago
  • 15.1.22                                ...           2 years ago
  • 15.1.21                                ...           2 years ago
  • 3.6.23                                ...           2 years ago
  • 15.1.20                                ...           2 years ago
  • 15.1.19                                ...           2 years ago
  • 15.1.18                                ...           2 years ago
  • 15.1.17                                ...           2 years ago
  • 15.1.16                                ...           2 years ago
  • 15.1.15                                ...           2 years ago
  • 15.1.15-dev.0                                ...           2 years ago
  • 7.0.5                                ...           2 years ago
  • 15.1.14                                ...           2 years ago
  • 15.1.13                                ...           2 years ago
  • 15.1.12                                ...           2 years ago
  • 15.1.11                                ...           2 years ago
  • 15.1.10                                ...           2 years ago
  • 15.1.9                                ...           2 years ago
  • 15.1.8                                ...           2 years ago
  • 15.1.7                                ...           2 years ago
  • 15.1.6                                ...           2 years ago
  • 15.1.5                                ...           3 years ago
  • 15.1.4                                ...           3 years ago
  • 15.1.3                                ...           3 years ago
  • 15.1.2                                ...           3 years ago
  • 15.1.1                                ...           3 years ago
  • 15.1.1-alpha.0                                ...           3 years ago
  • 15.1.0                                ...           3 years ago
  • 7.0.4                                ...           3 years ago
  • 15.0.2                                ...           3 years ago
  • 15.0.1                                ...           3 years ago
  • 15.0.0                                ...           3 years ago
  • 7.0.3-dev.1                                ...           3 years ago
  • 6.1.7                                ...           3 years ago
  • 6.1.6                                ...           3 years ago
  • 7.0.3-dev.0                                ...           3 years ago
  • 6.1.5                                ...           3 years ago
  • 7.0.2                                ...           3 years ago
  • 7.0.2-dev.3                                ...           3 years ago
  • 7.0.2-dev.2                                ...           3 years ago
  • 7.0.2-dev.1                                ...           3 years ago
  • 7.0.2-dev.0                                ...           3 years ago
  • 7.0.1                                ...           3 years ago
  • 6.1.4                                ...           3 years ago
  • 5.1.0                                ...           3 years ago
  • 6.1.3                                ...           3 years ago
  • 7.0.1-dev.7                                ...           3 years ago
  • 7.0.1-dev.6                                ...           3 years ago
  • 7.0.1-dev.5                                ...           3 years ago
  • 7.0.1-dev.4                                ...           3 years ago
  • 7.0.1-dev.3                                ...           3 years ago
  • 7.0.1-dev.2                                ...           3 years ago
  • 7.0.1-dev.1                                ...           3 years ago
  • 6.1.2                                ...           3 years ago
  • 7.0.0                                ...           3 years ago
  • 7.0.0-alpha.3                                ...           3 years ago
  • 6.1.1                                ...           3 years ago
  • 7.0.0-alpha.2                                ...           3 years ago
  • 5.0.12                                ...           3 years ago
  • 5.0.10-dev.0                                ...           3 years ago
  • 5.0.11                                ...           3 years ago
  • 7.0.0-alpha.1                                ...           3 years ago
  • 7.0.0-alpha.0                                ...           3 years ago
  • 6.1.0                                ...           3 years ago
  • 6.0.4-alpha.5                                ...           3 years ago
  • 6.0.3                                ...           3 years ago
  • 5.0.10                                ...           3 years ago
  • 6.0.4-alpha.4                                ...           3 years ago
  • 6.0.4-alpha.3                                ...           3 years ago
  • 6.0.4-alpha.2                                ...           3 years ago
  • 6.0.4-alpha.1                                ...           3 years ago
  • 5.0.9                                ...           3 years ago
  • 5.0.9-alpha.10                                ...           3 years ago
  • 5.0.9-alpha.9                                ...           3 years ago
  • 5.0.9-alpha.8                                ...           3 years ago
  • 5.0.9-alpha.7                                ...           3 years ago
  • 5.0.9-alpha.6                                ...           3 years ago
  • 5.0.9-alpha.5                                ...           3 years ago
  • 5.0.9-alpha.4                                ...           3 years ago
  • 5.0.9-alpha.2                                ...           3 years ago
  • 5.0.9-alpha.1                                ...           3 years ago
  • 6.0.2                                ...           3 years ago
  • 6.0.1                                ...           3 years ago
  • 3.6.22                                ...           3 years ago
  • 5.0.8                                ...           3 years ago
  • 5.0.7                                ...           3 years ago
  • 5.0.6                                ...           3 years ago
  • 6.0.0                                ...           3 years ago
  • 5.0.5                                ...           3 years ago
  • 5.0.4                                ...           3 years ago
  • 5.0.3                                ...           4 years ago
  • 6.0.0-alpha.0                                ...           4 years ago
  • 5.0.2                                ...           4 years ago
  • 5.0.1                                ...           4 years ago
  • 5.0.1-alpha.0                                ...           4 years ago
  • 5.0.0                                ...           4 years ago
  • 4.1.1-alpha.0                                ...           4 years ago
  • 4.1.0-alpha.0                                ...           4 years ago
  • 4.0.12                                ...           4 years ago
  • 4.0.11                                ...           4 years ago
  • 4.0.10                                ...           4 years ago
  • 4.0.10-alpha.0                                ...           4 years ago
  • 4.0.9-alpha.0                                ...           4 years ago
  • 4.0.8-alpha.0                                ...           4 years ago
  • 4.0.7-alpha.0                                ...           4 years ago
  • 4.0.6-alpha.0                                ...           4 years ago
  • 4.0.5-alpha.0                                ...           4 years ago
  • 4.0.4-alpha.0                                ...           4 years ago
  • 4.0.3-alpha.0                                ...           4 years ago
  • 4.0.2-alpha.0                                ...           4 years ago
  • 3.6.24-alpha.2                                ...           4 years ago
  • 4.0.1-alpha.1                                ...           4 years ago
  • 4.0.1-alpha.0                                ...           4 years ago
  • 4.0.0-alpha.0                                ...           4 years ago
  • 3.7.0-alpha.0                                ...           4 years ago
  • 3.6.24-alpha.1                                ...           4 years ago
  • 3.6.24-alpha.0                                ...           4 years ago
  • 3.6.23-alpha.0                                ...           4 years ago
  • 3.6.22-alpha.0                                ...           4 years ago
  • 3.6.21                                ...           4 years ago
  • 3.6.21-alpha.2                                ...           4 years ago
  • 3.6.21-alpha.1                                ...           4 years ago
  • 3.6.21-alpha.0                                ...           4 years ago
  • 3.6.20-alpha.0                                ...           4 years ago
  • 3.6.19-alpha.0                                ...           4 years ago
  • 3.6.18                                ...           5 years ago
  • 3.6.17                                ...           5 years ago
  • 3.6.16                                ...           5 years ago
  • 3.6.15                                ...           5 years ago
  • 3.6.12                                ...           5 years ago
  • 3.6.11-alpha.0                                ...           5 years ago
  • 3.6.10                                ...           5 years ago
  • 4.0.0-beta.0                                ...           5 years ago
  • 3.6.9                                ...           5 years ago
  • 3.6.8                                ...           5 years ago
  • 3.6.7                                ...           5 years ago
  • 3.6.6                                ...           5 years ago
  • 3.6.5                                ...           5 years ago
  • 3.6.4                                ...           5 years ago
  • 3.6.3                                ...           5 years ago
  • 3.6.2                                ...           5 years ago
  • 3.6.1                                ...           5 years ago
  • 3.6.0                                ...           5 years ago
  • 3.5.8                                ...           5 years ago
  • 0.1.2                                ...           7 years ago
  • 0.1.3                                ...           7 years ago
  • 1.0.0                                ...           7 years ago
  • 1.0.1                                ...           7 years ago
  • 1.0.2                                ...           7 years ago
  • 1.0.3                                ...           7 years ago
  • 1.0.4                                ...           7 years ago
  • 1.1.0                                ...           7 years ago
  • 1.1.1                                ...           7 years ago
  • 2.0.0                                ...           6 years ago
  • 2.0.1                                ...           6 years ago
  • 2.0.2                                ...           6 years ago
  • 2.0.3                                ...           6 years ago
  • 3.0.0                                ...           6 years ago
  • 3.1.0                                ...           6 years ago
  • 3.1.1                                ...           6 years ago
  • 3.1.2                                ...           6 years ago
  • 3.2.0                                ...           6 years ago
  • 3.2.1                                ...           6 years ago
  • 3.3.0                                ...           6 years ago
  • 3.3.1                                ...           6 years ago
  • 3.3.2                                ...           5 years ago
  • 3.3.3                                ...           5 years ago
  • 3.3.4                                ...           5 years ago
  • 3.4.0                                ...           5 years ago
  • 3.5.0                                ...           5 years ago
  • 3.5.1                                ...           5 years ago
  • 3.5.2                                ...           5 years ago
  • 3.5.3                                ...           5 years ago
  • 3.5.4                                ...           5 years ago
  • 3.5.5                                ...           5 years ago
  • 3.5.6                                ...           5 years ago
  • 3.5.7                                ...           5 years ago
  • 1.2.0                                ...           6 years ago
  • 2.0.5                                ...           6 years ago
  • 0.1.4                                ...           7 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (6)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2013 - present © cnpmjs.org