主要特性

• 支持普通模式与高级模式；
• 内置url；
• 搜索高亮匹配
• 可以选择单个人员
• 删除及清空已选人员
• 多语言支持

设计稿链接

###API说明

| 属性 |说明 | 类型| 必须配置 | 默认值| | ------------ |-------|--------| -----|-----| | apiPath | 接口请求前缀，形如(http://www.italent-inc.cn) | string | yes(仅在使用内置APi模式下需要)| 无 | tenantId | BSGlobal.tenantInfo中的Id | string、number | yes(仅在使用内置APi模式下需要)| 无 | userId | BSGlobal.loginUserInfo中的Id | string、number | yes(仅在使用内置APi模式下需要)| 无 | onSure | 点击确定按钮后的回调 | （val: array）: void | no | 无 | onError | fetch数据发生error后的回调 | （er: error）: void | no | 无 | onCancel | 点击取消按钮后的回调 | Function | no | 无 | defaultValue | 高级模式下默认已选人员（非完全受控）,详见下面的数据格式解释 | staff[] 或者 department[] | no | 无 | onChange | 高级模式下数据变动回调 | Function | no | 无 | advanceMode | 高级/普通模式开关 | bool | yes| 无 | allowSearchNull | 是否配置允许搜索"空（未填写）" | bool | no| no | showSearch | 是否显示搜索框 | boolean | no | true | | queryString | 自定义的搜索字符串 | string | | | | eventHost | 自定义的事件代理对象(一般用在需要监听全局事件的情况),一般为document| document | 否 | document | | translation | 多语言翻译文字 | object | no| 请参考下面的translate说明 | hideTabs | 隐藏一个或者多个tab（暂不支持隐藏所有） | array | no| 请参考下面的hideTabs说明 | hideAdvanceModeText | 普通模式下隐藏'高级模式'文字 | bool | no| false | dataProvideByExternalPromise | 组件是否使用外部数据 | bool | no| false | contactPromise | 外部数据-常用联系人函数（返回promise） | ()=>Promise | no| 无 | staffPromise | 外部数据-我的下属函数（返回promise） | ()=>Promise | no| 无 | departmentPromise | 外部数据-所有部门函数（返回promise） | ()=>Promise | no| 无 | departmentStaffPromise | 外部数据-部门下面的员工函数（返回promise） | (staffId)=>Promise | no| 无 | searchPromise | 外部数据-search函数（返回promise） | (string)=>Promise | no| 无 | departmentSelectAble | 是否可以通过选中部门达到选中该部门下所有员工| boolean | no | false | validateSearch | 搜索内容校验规则，返回值里的 info 会出现在搜索框下方作为提示信息，val 会被设置为最终输入值, clearTipAfter 多少毫秒后提示消失 | (val: string) => { value: string, info: string,clearTipAfter?:number } | 无 | No | showDepartMent | 高级模式联系人是否显示所在部门 | boolean | no | false | | customModule | 选择器底部的用户自定义模块插槽 | typeof React.Component 、 typeof React.FunctionComponent 、 React.ReactNode | no | 无 |

queryString参数使用场景说明

替代选人组件的搜索功能

需要将showSearch参数设置为false来隐藏默认搜索框

需要提供eventHost用来设置键盘事件监听

changelist

1.0.35

支持隐藏一个或者多个tab

取消已选描述"已选人员xx个，组X个"里面关于"组"的描述

1.0.34

为了兼容firefox，移除了代码中的promise.finally用法

1.0.28

使用IntersectionObserver来优化部门列表在大数据情况下的加载性能 对ie引入fetch 及 intersection的兼容库

1.0.26

当部门数据有找不到对应的父节点的时候，把这个数据当成第一层级来处理

1.0.20

组件支持不使用内置接口，使用外部提供的promise函数来得到数据

支持控制普通模式下""高级模式>"隐藏

注意

• 若使用内置接口，依据平台现有选人组件的数据请求方式，所有数据方式为 get,请求url已经内置,为了更好的兼容性，请必须配置apiPath、tenantId、userId。
• 选人没有内置弹层，需要依赖非模态组件，请参考：http://cmp.italent-inc.cn/details?id=1064
• apiPath 的前缀必须要有 // 或者http:// 或者https://
• defaultValue 仅支持高级模式
• defaultValue 的数据格式如下3种，分别代表'空、员工、部门''（注：'空（未填写）'的Id必须为"#AllowSearchNull#"，否则不能识别）

interface BlankItem {
    Id: string,
    Name: string
}
interface Staff {
    Id: number,
    Name: string,
    Email: string,
    Avatar: string,
    AvatarColor: string,
    DepartmentId: number
}

或者
export interface Department {
    Id: number,
    PId: number,
    DepartmentName: string,
    TotalUserCount?: number,
    children?: Department[],
    isDepartment?: boolean
    [index: string]: any
}

• 使用外部数据，搜索结果、常用联系人、我的下属、部门下面的员工接口，请提供Staff[], Staff的结构如下

export interface Staff {
    Id: number,
    Name: string,
    Email: string,
    Avatar: string,
    AvatarColor: string,
    DepartmentId: number
}

部门数据，请提供Department[]，Department的结构如下

export interface Department {
    Id: number,
    PId: number,
    DepartmentName: string,
    TotalUserCount: number
}

####hideTabs字段说明 hideTabs array可以使用的字段有

export enum TabType {
    'commonContact'="commonContact",
    'subordinate'='subordinate',
    'department'='department'
};

比如我要取消常用联系人+我的下属的显示，就传递 ['commonContact','subordinate'], 暂不支持隐藏所有tabName，如果传递了所有的tabName，将会忽略该字段

translate字段说明--默认翻译字段

export const defaultTranslation: DefaultTranslationType = {
	search: '搜索',
	advancedMode: '高级模式',
	noDataTip: '这里什么都没有...',
	emptyText: '空 (未填写)',
	commonContact: '常用',
	subordinate: '下属',
	department: '部门',
	searchResult: '搜索结果',
	frequentContacts: '常用联系人',
	person: '人',
	my: '我的',
	aleradySelect: '已选人员',
	group: '组',
	clearSelect: '清空已选',
	cancel: '取消',
	sure: '确认',
	pleaseSelectTip: '请在左侧选择人员',
	one: '个',
	empty: '空(未填写)',
	directSubordinate: '直接下属'
}

其他

为什么不支持受控模式？

当前模块有取消 与 确定按钮，这对使用者来暗示--》点选确定按钮之后，数据会被提交给外部。这恰是非受控模式的交互，所以我不支持完全受控。

如果我想使用受控模式怎么办？

目前不支持完全受控，本模块支持onChange，可以单向获取响应数据。

开发人员

[email protected]（胡海）