@beisen-phoenix/person-selector

主要特性

• 支持普通模式与高级模式；
• 内置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，可以单向获取响应数据。

开发人员

huhai@beisen.com（胡海）