# @beisen-phoenix/person-selector

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

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/person-selector
pnpm add @beisen-phoenix/person-selector
yarn add @beisen-phoenix/person-selector
bun add @beisen-phoenix/person-selector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 611.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/person-selector
- npm.io page: https://npm.io/package/@beisen-phoenix/person-selector

## Dependencies (15)

- [es6-promise](https://npm.io/package/es6-promise.md) ^4.2.6
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.0.0
- [fetch-polyfill](https://npm.io/package/fetch-polyfill.md) ^0.8.2
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1
- [promise-polyfill](https://npm.io/package/promise-polyfill.md) 8.1.0
- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/tabs](https://npm.io/package/@beisen-phoenix/tabs.md) ^3.3.55
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.7.0
- [react-highlight-words](https://npm.io/package/react-highlight-words.md) 0.16.0
- [@beisen-phoenix/avatar](https://npm.io/package/@beisen-phoenix/avatar.md) ^3.3.55
- [@beisen-phoenix/button](https://npm.io/package/@beisen-phoenix/button.md) ^3.3.55
- [@beisen-phoenix/search](https://npm.io/package/@beisen-phoenix/search.md) ^3.3.55
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [promise.prototype.finally](https://npm.io/package/promise.prototype.finally.md) ^3.1.0
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 433 more at https://npm.io/package/@beisen-phoenix/person-selector/versions

## README

### 主要特性

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

[设计稿链接](http://nature.beisen.co/NaturedesignSpec/Naturedesign3.0/preview/%5bPC%5dNaturedesign3.0-06-Composite/#artboard0)

###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#"，否则不能识别）
```$xslt
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的结构如下
```angular2 
export interface Staff {
    Id: number,
    Name: string,
    Email: string,
    Avatar: string,
    AvatarColor: string,
    DepartmentId: number
}
```
部门数据，请提供Department[]，Department的结构如下
```angular2
export interface Department {
    Id: number,
    PId: number,
    DepartmentName: string,
    TotalUserCount: number
}
```

####hideTabs字段说明
hideTabs array可以使用的字段有
```$xslt
export enum TabType {
    'commonContact'="commonContact",
    'subordinate'='subordinate',
    'department'='department'
};
```

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

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

```angular2

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（胡海）

---
_Source: https://npm.io/package/@beisen-phoenix/person-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._