Package - @uyun/ec-user-picker

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 及以上版本

API

共同的 API

参数	说明	类型	默认值
buttonProps	按钮 props	object	-
selectionType	多选/单选，`checkbox`或`radio`	string	`checkbox`
showUsers	是否显示用户模块	boolean	true
showGroups	是否显示用户组模块	boolean	true
getCombineData	自定义混合搜索接口，参考自定义接口	getCombineData	-
getUsers	自定义获取用户数据的接口，参考自定义接口	getUsers	-
queryGroupsTrees	自定义获取用户组数据的接口，参考自定义接口	queryGroupsTree	-
getGroupList	自定义搜索用户组数据的接口，参考自定义接口	getGroupList	-
globalGroups	是否获取全局用户组	boolean	false
getDeparts	自定义获取部门数据的接口，参考自定义接口	getDeparts	-
getDepartList	自定义搜索部门数据的接口，参考自定义接口	getDepartList	-
value	已选择项	ValueObject	-
pagination	是否显示页码	boolean	true
showRecentlySelected	是否显示最近选择数据，mode 为 `dialog` `layer` 时有效	boolean	true
showNumber	是否显示数值统计，点击可查看已选择的全部数据，mode 为 `default` 时有效	boolean	false
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

UserPickerPanel

参数	说明	类型	默认值
appId	产品 id，传入后只会获取当前产品下的数据	string	-

Lists（dialog、layer）、MiniLists (default)

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

ValueObject

数据格式参考：

[{
  userId: '...',
  account: 'admin',
  realname: 'admin',
  departs: ['顶级部门'],
  type: 'users',
  ...
},{
  departId: '...',
  name: '部门1',
  type: 'departs',
  departPath: '/顶级部门/部门1'
  ...
},{
  groupId: '...',
  name: '用户组1',
  type: 'groups',
  groupPath: '/顶级用户组/用户组1'
  ...
},{
  roleId: '...',
  name: '角色1',
  type: 'roles',
  ...
}]

参数	说明	类型	默认值
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

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

何时使用

API

共同的 API

UserPicker

UserPickerPanel

Lists（dialog、layer） 、MiniLists (default)

ValueObject

自定义接口

getUsers

getCombineData

queryGroupsTree

getGroupList

getDeparts

getDepartList

getLists

自定义扩展列表

Current Tags

180 Versions

Lists（dialog、layer）、MiniLists (default)