@beisen/UserSelector v0.1.61

UserSelector

• 更新信息 目前选人组件已内置Tita真实数据，如不使用内置数据，isUseInitial为false即可，但使用时得手动在Reducers中添加接口。 测试环境的接口已部署跨域访问，线上还未部署。故当测试使用的是测试环境，tita-inc

参数

Props ----- without Redux

hidden: false, // 是否渲染 默认false
singleSelect: true // 单人选人，没有高级模式
offset: {}, // 组件位置偏移量 offset = {left: '10px',top: '20px'},
TenantId: '204348', // 租户ID
UserId: '100368554', // 用户ID
apiType: 'tita', // 接口产品 
isUseInitial: true, // 是否使用内置接口
onSure: () => {}, // 精简模式下 返回点击的人 数据格式 高级模式下 确定回调 返回已选择的数组
onClose: () => {}, // 高级模式下 取消回调 

默认内置接口

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]
 }
 }
}

Props ---- width Redux(Initialize)

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

简单预览

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 (
 <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')
);