# @beisen-platform/user-selector
> * 更新信息 目前选人组件已内置Tita真实数据，如不使用内置数据，isUseInitial为false即可，但使用时得手动在Reducers中添加接口。 测试环境的接口已部署跨域访问，线上还未部署。故当测试使用的是测试环境，tita-inc
Latest version **1.0.20-rc.4** (published 2019-11-17) · ISC license · 0 weekly downloads
## Install
```sh
npm install @beisen-platform/user-selector
pnpm add @beisen-platform/user-selector
yarn add @beisen-platform/user-selector
bun add @beisen-platform/user-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 | 1.0.20-rc.4 |
| Published | 2019-11-17 |
| First published | 2018-11-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 110.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |
## Links
- npm: https://www.npmjs.com/package/@beisen-platform/user-selector
- npm.io page: https://npm.io/package/@beisen-platform/user-selector
## Dependencies (9)
- [@beisen-platform/search](https://npm.io/package/@beisen-platform/search.md)
- [@beisen-platform/loading](https://npm.io/package/@beisen-platform/loading.md)
- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [@beisen-platform/base-button](https://npm.io/package/@beisen-platform/base-button.md)
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen/es6-promise-debounce](https://npm.io/package/@beisen/es6-promise-debounce.md)
- [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md)
- [@beisen-platform/tab-component](https://npm.io/package/@beisen-platform/tab-component.md)
## Recent versions
- 1.0.20-rc.4 (latest) — 2019-11-17
- 1.0.20-rc.3 — 2019-11-11
- 1.0.20-rc.2 — 2019-10-28
- 1.0.20-rc.1 — 2019-09-27
- 1.0.20 — 2019-09-09
- 1.0.19 — 2019-09-09
- 1.0.18 — 2019-09-09
- 1.0.17 — 2019-08-16
- 1.0.16-rc.4 — 2019-08-13
- 1.0.16-rc.3 — 2019-08-08
- 1.0.16-rc.2 — 2019-07-30
- 1.0.16-rc.1 — 2019-07-30
- 1.0.16 — 2019-07-25
- 1.0.15 — 2019-07-12
- 1.0.14 — 2019-07-10
- … 18 more at https://npm.io/package/@beisen-platform/user-selector/versions
## README
# UserSelector
* 更新信息
目前选人组件已内置Tita真实数据，如不使用内置数据，isUseInitial为false即可，但使用时得手动在Reducers中添加接口。
测试环境的接口已部署跨域访问，线上还未部署。故当测试使用的是测试环境，tita-inc
## 项目运行
```
1. cnpm install 或 npm install
2. npm run dev （开发环境打包、项目启动，默认端口 port:8080）
3. npm run build （生产环境打包）
```
## 使用参数
### Props ----- without Redux
```
hidden: false, // 是否渲染 默认false
addDepartment: true // 开启添加部门功能
singleSelect: true // 单人选人，没有高级模式
offset: {}, // 组件位置偏移量 offset = {left: '10px',top: '20px'},
hiddenTabDepartment: true //隐藏掉高级模式下tab中的部门
TenantId: '204348', // 租户ID
UserId: '100368554', // 用户ID
apiType: 'tita', // 接口产品
showToMultiBtn: false //是否渲染高级模式的按钮，默认为true，渲染
isUseInitial: true, // 是否使用内置接口
onSure: () => {}, // 精简模式下 返回点击的人 数据格式 高级模式下 确定回调 返回已选择的数组
onClose: () => {}, // 高级模式下 取消回调
searchDataFormat:(value,event)=>searchValue //对搜索输入的内容进行format，将会在请求数据之前执行，此方法需要返回处理后的value，可以在此做输入内容校验替换或者警告等等
```
### Props ---- width Redux(Initialize)
```
multi: false, // 默认精简模式
usedusers: [], // 常用人员
staffs: [], // 下属信息
departments: [], // 部门信息
results: [] // 已选择人员
```
### 默认内置接口
```
export default class InitialUrls {
constructor(TenantId, UserId) {
const tempTita = 'http://www.tita-inc.com/api/v1/' + TenantId + '/' + UserId + '/';
this.tita = {
usedUserUrl: tempTita + 'Contact',
searchUrl: tempTita + 'user',
staffUrl: tempTita + 'org/GetMySubordinates?lv=2&type=0',
departmentUrl: tempTita + 'department/All',
depUserUrl: tempTita + 'department/DepartmentOfUser?department_id='
}
}
gettita(apiType) {
switch(apiType) {
case 'usedUserUrl':
return this.tita[apiType] + '?v=' + (new Date()).getTime();
case 'searchUrl':
return this.tita[apiType] + '?v=' + (new Date()).getTime();
default:
return this.tita[apiType]
}
}
}
```
## ux-user-selector调用方法
1.安装npm组件包
```
npm install @beisen/user-selector --save-dev
```
2.引用组件
```
import userSelector from "@beisen/user-selector"
```
3.传入参数
## 简单预览
```javascript
import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import App from './src/index.js';
class Demo extends Component{
render () {
const offset = {
left: '10px',
top: '20px'
};
// tita接口数据
const Data = {
"101893065":{
"Id":101893065,
"Name":"袁园",
"Email":"yuanyuan@beisen.com",
"UserAvatar":{"Original":null,"Small":null,"Medium":null,"Big":null,"HasAvatar":false,"Color":"#b9cc4f"}
},
"103875086":{
"Id":103875086,
"Name":"郭美山",
"Email":"guomeishan@beisen.com",
"UserAvatar":{"Original":"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_o.png","Small":"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_s.png","Medium":"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_m.png","Big":null,"HasAvatar":true,"Color":null}}
};
const usedusers = Object.values(Data);
return (
)
}
}
```
## 使用 with Redux
需复制app目录下 UserSelector.js文件 至Reducers中
```javascript
import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import ConfigureStore from './app/configureStore';
import { Provider, connect } from 'react-redux';
import usReducers from './app/modules/UserSelector';
import * as usActions from './app/modules/UserSelector';
import Immutable from 'immutable';
import { toJS } from 'immutable';
const store = ConfigureStore(usReducers) ;
import App from './src/index.js';
@connect(
state => state.toJS(),
{...usActions}
)
class Demo extends Component{
constructor(props) {
super(props)
this.state = {
hidden: false
}
}
onSure(temp) {
console.log(temp)
}
setShow() {
this.setState({hidden: !this.state.hidden})
}
render () {
const offset = {
left: '10px',
top: '20px'
}
const data = {
TenantId: '204348',
UserId: '100368554',
apiType: 'tita',
isUseInitial: true
}
return (
)
}
}
render(
,
document.getElementById('content')
);
```
---
_Source: https://npm.io/package/@beisen-platform/user-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._