Package - @uyun/ec-user-picker

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

当前版本：3.x

作者：沈挺

用户选择组件。

何时使用

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

开发环境保证接口已经代理到 /tenant
生产环境登陆 http://components.uyundev.cn/tenant/ 之后才有数据

API

共同的 API

参数	说明	类型	默认值
disabled	是否禁用	boolean	false
selectionType	多选/单选，`checkbox`或`radio`	string	`checkbox`
showUsers	是否显示用户模块	boolean	true
showGroups	是否显示用户组模块	boolean	true
getUsers	自定义获取用户数据的接口，参考自定义接口	getUsers	-
getGroups	自定义获取用户组数据的接口，参考自定义接口	getGroups	-
getDeparts	自定义获取部门数据的接口，参考自定义接口	getDeparts	-
getDepartList	自定义搜索部门数据的接口，参考自定义接口	getDepartList	-
value	已选择项	ValueObject	-
onChange	改变选中项时的回调	function(value)	-
children	自定义扩展列表，参考自定义扩展列表	ReactNode	-

UserPicker

参数	说明	类型	默认值
productName	产品名称，传入后只会获取当前产品下的数据	string	-
mode	设置模式	string: `default` `inline` `dropdown` `select`	`default`
getPopupContainer	菜单渲染父节点，mode 为 `select` 时有效	Function(triggerNode)	triggerNode => triggerNode.parentNode
width	下拉内容的渲染宽度，mode 为 `dropdown` 或 `select` 时有效	number	-
maxHeight	下拉内容的渲染最大高度，mode 为 `dropdown` 或 `select` 时有效	number	460

UserPickerTable

参数	说明	类型	默认值
appId	产品 id，传入后只会获取当前产品下的数据	string	-
showTags	是否显示标签模块	boolean	true

UserPickerTags

参数	说明	类型	默认值
rowKeyMap	模块与数据 key 的映射关系	object	-

ValueObject

数据格式参考：

{
  // 用户
  users: [
    {
      userId: '...',
      account: 'admin',
      realname: 'admin',
      departs: ['顶级部门'],
      ...
    }
  ],
  // 用户组
  groups: [
    {
      groupId: '...',
      name: '用户组',
      ...
    }
  ],
  // 自定义扩展列表的数据
  others: [
    { ... }
  ]
}

自定义接口

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

以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

返回数据格式：

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

getGroups

请求参数传递：

参数	说明	类型
appId	应用 id，筛选当前产品的用户组	string
name	用户组名称	string
pageIndex	当前页数	number
pageSize	每页条数	number

返回数据格式：

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

getDeparts

请求参数传递：

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

返回数据格式：

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

getDepartList

请求参数传递：

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

返回数据格式：

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

自定义扩展列表

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

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

// 自定义扩展组件通过 selectedRowKeys 进行选择项的显示，
// 调用 onSelect 和 onSelectAll 进行数据的向上传递，
// 最后通过其它属性控制页面的布局和搜索等功能。
class UserPickerPane extends React.Component {
  // 必填
  onSelect = (record, selected, selectedRows) => {
    const { type, rowKey, onSelect } = this.props
    if (onSelect) {
      onSelect(type, rowKey, record, selected, selectedRows)
    }
  }

  // 必填
  onSelectAll = (selected, selectedRows, changeRows) => {
    const { type, rowKey, onSelectAll } = this.props
    if (onSelectAll) {
      onSelectAll(type, rowKey, selected, selectedRows, changeRows)
    }
  }

  render () {
    const {
      rowKey, size, columns, dataSource,
      pagination, selectedRowKeys,
    } = this.props

    return (
      <div>
        <Form layout='inline'>
          <Form.Item>
            <Input.Search placeholder='请输入关键字' />
          </Form.Item>
        </Form>

        <Table
          rowKey={rowKey}
          size={size}
          columns={columns}
          dataSource={dataSource}
          rowSelection={{
            selectedRowKeys,
            onSelect: this.onSelect,
            onSelectAll: this.onSelectAll,
          }}
          pagination={pagination}
        />
      </div>
    )
  }
}

...
  state = {
    value: {
      users: [],
      groups: [],
      // 部门列表的选择项
      departs: []
    }
  }

...
  <UserPicker
    value={this.state.value}
    onChange={this.onChange}
  >
    {/* 使用自定义组件时，需要传入文档中标注的必填项 */}
    <UserPickerPane
      // 必填，对应 value 中的字段名
      type='departs'
      // 必填，数据的唯一标识
      rowKey='departId'
      // 必填，标签显示文字
      tab='部门'
      columns={[
        {
          title: '名称',
          dataIndex: 'name'
        }
      ]}
      dataSource={departsData}
      // 必填，回填到选择框的 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