@beisen/upaas-user-selector

UserSelector

参数

State

  * @param {String} TenantId 租户ID
  * @param {String} UserId 用户ID
  * @param {String} apiType 接口产品 
  * @param {Boolean} isUseInitial 是否使用内置接口
  * @param {String} singleSelect 单人选人，没有高级模式
  * @param {Boolean} multi   默认精简模式
  * @param {String} status 搜索态还是编辑态 edit or search
  * @param {array} usedusers 常用人员
  * @param {array} staffs 下属信息
  * @param {array} departments 部门信息
  * @param {array} results 已选择人员
  * @param {array} searchs 已搜索的数据
  * @param {Boolean} addDepartment 在多选下可否添加部门 
  * @param {func} onSure:(val) =>{} 精简模式下 返回点击的人 数据格式   高级模式下 确定回调 返回已选择的数组
  * @param {Object} offset 组件位置偏移量 offset = {left: '10px',top: '20px'},
  * @param {func} setMulti:() =>{this.setState({multi:true})}  //设置高级精简
  * @param {func} closeComponent:() =>{this.setState({multi:false})} //关闭组件
  * @param {func} addAllUsers:(dataNow) =>{}  //以下为原action方法
  * @param {func} clearResults:(isAll, id) =>{}
  * @param {func} addResults:(id, dataNow, pid, onSure) =>{}
  * @param {func} getDepInfo:(id, url) =>{}
  * @param {func} getDepartments:(url) =>{}
  * @param {func} getStaff:(url) =>{}
  * @param {func} getSearchInfo:(value, url) =>{}
  * @param {func} getUsedInfo:(url) =>{} 
  * @param {String} showTag  //title
  * @param {String} helpMsg  //帮助信息
  * @param {String} placeHolder //placeHolder
  * @param {Boolean} errorStatus //是否有错误
  * @param {String} defaultValue //默认值
  * @param {String} showText //点击时的提示文字
  * @param {String} errorMsg //错误信息
  * @param {Boolean} hidden //隐藏
  * @param {Boolean} disabled //禁用
  * @param {Boolean} readonly //只读
  * @param {Boolean} required //必填
  * @param {String} value  //显示值对应的id,"100766253,107932152,100506155"
  * @param {String} text  //显示在input框上的值，"张明几斤几两退热贴([e-mail]),学男11([e-mail])",
  * @param {func} onClick:(val) =>{} //点击回调
  * @param {func} onChange:(val) =>{} //onchange回调
  * @param {func} onBlur:(val) =>{} //失焦回调
  * @param {func} onFocus:(val) =>{} //input框获取焦点回调

  */

简单预览

import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import App from './src/index.js';

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 () {
    let temp = {
      TenantId: '204348',  // 租户ID
      UserId: '100368554',  // 用户ID
      apiType: 'tita',   // 接口产品 
      isUseInitial: true,  // 是否使用内置接口
      singleSelect: false,  // 单人选人，没有高级模式
      multi:this.state.multi, // 默认精简模式
      status:'search',        //搜索态还是编辑态
      usedusers:initData, // 常用人员
      staffs:[],   // 下属信息
      departments:[],     // 部门信息
      results:initData,   // 已选择人员
      searchs:[],   // 已搜索的数据
      addDepartment:true,  //在多选下可否添加部门 
      onSure:this.onSure,   // 精简模式下 返回点击的人 数据格式   高级模式下 确定回调 返回已选择的数组
      hidden:this.state.hidden,   // 是否渲染 默认false
      offset: {}, // 组件位置偏移量 offset = {left: '10px',top: '20px'},
      setMulti: ()=>{this.setState({multi:true})},  //以下为原action方法
      closeComponent: ()=>{
        console.log("关闭组件");
        this.setState({multi:false});
      },
      addAllUsers: (dataNow)=>{console.log(dataNow)},
      clearResults: (isAll, id)=>{console.log(isAll+"----"+id)},
      addResults: (id, dataNow, pid, onSure)=>{console.log(id+"----"+dataNow+"----"+pid)},
      getDepInfo: (id, url)=>{console.log(id+"----"+url)},
      getDepartments: (url)=>{console.log(url)},
      getStaff: (url)=>{console.log(url)},
      getSearchInfo: (value, url)=>{console.log(value+"----"+url)},
      getUsedInfo: (url)=>{console.log(url)}
    }

    let textboxoptions = {
      showTag: '啊啊啊啊',  //输入框前的文字
      helpMsg: '321321',
      placeHolder: '请输入',    //input上的placeHolder
      errorStatus: false,//错误状态，true 有错, false 无措
      defaultValue: "张明几斤几两退热贴([e-mail]),学男11([e-mail]),王明英([e-mail])", //输入框内文字
      showText: '',    // 点击时的提示文字
      errorMsg: 'error',   // 错误时的问题提示
      hidden: false,           //隐藏组件
      disabled: false,           //禁用组件
      readonly: false,           //input框只读
      required: false,      //是否必填
      value:"100766253,107932152,100506155",
      text:"张明几斤几两退热贴([e-mail]),学男11([e-mail]),王明英([e-mail])",
      onClick: function(event, status, value) {
        console.log(event)
      },
      onChange: function(val){
        console.log(val)
      },
      // onBlur: function(val){that.onChange(val)},
      onFocus: function(val){}
    };

    return (
      <div >
        <UpaasUserSelector 
        {...temp}
        {...textboxoptions}
       />
        <button onClick={this.setShow}>show</button>
      </div>
    )
  }
}

render(
  <Demo />,
  document.getElementById('content')
);