@beisen/user-selector

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 // 开启添加部门功能， 通过addResults(id, dataType, pid) 抛出部门数据
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: () => {}, // 高级模式下 取消回调
addResults: (id, dataType, pid) => {} 抛出选中数据

Props ---- width Redux(Initialize)

multi: false, // 默认精简模式
usedusers: [], // 常用人员
staffs: [], // 下属信息
departments: [], // 部门信息
results: [] // 已选择人员

searchDataFormat:(value,event)=>searchValue //对搜索输入的内容进行format，将会在请求数据之前执行，此方法需要返回处理后的value，可以在此做输入内容校验替换或者警告等等
getSearchInfo:() => {} // 获取搜索结果
getStaff:() => {} // 获取下属
getUsedInfo:() => {} // 获取常用人员信息
getDepartments:() => {} // 获取部门信息
getDepInfo:() => {} // 获取部门下人员

addResults: (id, dataNow, pid, onSure) => {} // 高级模式下 添加结果
setMulti: () => {} // 设置高级模式
clearResults: (isAll, id) => {} // 删除结果
addAllUsers: (dataNow) => {} // 高级下 添加所有常用
closeComponent: (dataNow) => {} //关闭组件

默认内置接口

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.传入参数

简单预览

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: '[e-mail]',
				UserAvatar: {
					Original: null,
					Small: null,
					Medium: null,
					Big: null,
					HasAvatar: false,
					Color: '#b9cc4f'
				}
			},
			'103875086': {
				Id: 103875086,
				Name: '郭美山',
				Email: '[e-mail]',
				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 <App usedusers={usedusers} offset={offset} />;
	}
}

使用 with Redux

需复制 app 目录下 UserSelector.js 文件 至 Reducers 中

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 (
			<div>
				<App
					{...this.props}
					offset={offset}
					{...data}
					onSure={this.onSure}
					hidden={this.state.hidden}
				/>
				<button onClick={this.setShow}>show</button>
			</div>
		);
	}
}

render(
	<Provider store={store}>
		<Demo />
	</Provider>,
	document.getElementById('content')
);