Newts Parading Majestically

    @beisen/UserSelector

    0.1.61 • Public • Published

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

    Install

    npm i @beisen/UserSelector

    DownloadsWeekly Downloads

    12

    Version

    0.1.61

    License

    ISC

    Last publish

    Collaborators

    • beisencorp