主要特性

支持普通模式与高级模式；
内置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	无
afterShowAdvance	点击高级模式按钮后的回调	Function	no	无
allowSearchNull	是否配置允许搜索"空（未填写）"	bool	no	no
showSearch	是否显示搜索框	boolean	no	true
queryString	自定义的搜索字符串	string
eventHost	自定义的事件代理对象(一般用在需要监听全局事件的情况),一般为document	document	否	document
lang	当前语言环境(zh_CN,en_US,zh_TW)	string	zh_CN	否
translation	国际化，详情见下方	object	-	否
hideTabs	隐藏一个或者多个tab（暂不支持隐藏所有）	array	no	请参考下面的hideTabs说明
hideAdvanceModeText	普通模式下隐藏'高级模式'文字	bool	no	false
dataProvideByExternalPromise	组件是否使用外部数据	bool	no	false
urlProvideByExternalPromise	组件中的编辑新建url是否自动使用外部数据中返回的url	bool	no	false
displayFieldsProvideByExternalPromise	人员显示字段是否自动使用外部数据中返回的DisPlayFields字段	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	无
noDataText	用于自定义空数据文案	string	no	'这里什么都没有...'
hideFooterAfterResultNull	普通模式下，搜索结果为空时，是否隐藏底部操作栏（即展示自定义区域及高级模式入口区域）	boolean	no	false
customEmpty	自定义空数据展示，参数为当前是否在搜索状态及是否在高级模式下	(advanceMode: boolean,searchMode: boolean) => React.ReactNode	no	无
showBU	显示人员所属业务单元	boolean	no	false
searchKeywordMaxLength	搜索关键字支持最大长度	number	no	无
showSearchOverflowTips	超过最大输入长度是否展示提示	boolean	no	无
showResignedUser	包含离职人员开关是否开启	boolean	no	无
isIncludeResigned	开关显示时的默认勾选状态	boolean	no	无
onIncludeResignedChange	开关状态改变时的回调函数	boolean	no	无
cloudHost	cloud域名	string	no	无
renderCustomTab	渲染自定义tab回调方法	Function	no	无
renderCustomItem	渲染自定义名称回调方法	Function	no	无
customBlockTips	渲染自定义名称 hovertips 提示	string	no	无
customTabPromise	自定义tab获取数据函数	Function	no	无
customParam	业务自定义参数	boolean	no	无
getCustomTab	获取自定义tab方法	Function	no	无
isNotAllowCreateContact	是否不允许创建常用联系人	boolean	no	无
useTenantConfig	是否使用外部数据源自定义显示tab，开启后请配置tenantStaffTabPromise	boolean	no	无
tenantStaffTabPromise	外部数据-高级模式可现实的tab	()=>Promise	no	无

样式

属性	说明	类型	默认值	必须配置
className	容器自定义css类名	string	无	no

queryString参数使用场景说明

替代选人组件的搜索功能

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

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

changelist

2023-06-07

feat 添加isNotAllowCreateContact, 是否不允许创建常用联系人

2020-02-18 [3.4.65-beta.1]

feat 添加API：hideFooterAfterResultNull，普通模式下，搜索结果为空时，是否隐藏底部操作栏（即展示自定义区域及高级模式入口区域）
feat 添加API：customEmpty 自定义空数据展示
feat 添加API：appendStafftoSelected 高级模式下，可使用此实例方法向已选列表中添加人员

2020-01-08 [3.4.17版本]

feat 添加参数className，容器自定义css类名

[3.4.1] 2020-01-01

feat 添加参数lang，设置当前语言环境

3.3.157

refactor 将空状态组件替换为基础组件

3.3.154

feat 新增参数noDataText，用于自定义空数据的文案

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 // 只有为false时才隐藏人员数量 IsShowTotalUserCount?: boolean [index: string]: any }


* 使用外部数据，搜索结果、常用联系人、我的下属、部门下面的员工接口，请提供Staff[], Staff的结构如下
```angular2 
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
    // 只有为false时才隐藏人员数量
    IsShowTotalUserCount?: boolean
}

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，可以单向获取响应数据。

开发人员

huhai@beisen.com（胡海）