@beisen/recruit-auto-tree/examples/default/index.js

import DefaultComponent from '../../src'
import React, { Component } from 'react'

export default class extends Component {
  render () {
  	const options = {
      required: true,
      disabled: false,
      sync: false,    //true：同步，false：异步
      status: 'edit', //edit,search
      single: false,
      isFetching: false,
      isSearchAutoTreeEdit:false,
      hiddenTip: false,
      sideTip: false,
      showDropDown: false,
      totalCount: 3,
      helpMsg: 'aaaaaa',
      autoTreeData: [
        {
          id:'0',
          name:'100990ajksdhfoiqhwieofhsdhfajshdfjahsdjkfhaksdhfajsdhfquwehfkjasdhfkajshdfjasbdvasnbkjsdfbksjhdf',
          pname:'我是爸爸'
        },{
          id:'1',
          name:'100990',
          pname:'我是爸爸'
        },{
          id:'2',
          name:'123123123123'
        },{
          id:'3',
          name:'1qweqweqwe'
        },{
          id:'4',
          name:'1asdfasdf'
        },{
          id:'5',
          name:'23123123'
        },{
          id:'6',
          name:'1asdadssdasdasd'
        },{
          id:'7',
          name:'10dsfgergsdfgsdfg0'
        },{
          id:'8',
          name:'1435467867543'
        },{
          id:'9',
          name:'sdfgwer1fasdfasdf'
        },{
          id:'10',
          name:'23434534534511435345'
        },{
          id:'11',
          name:'sdfsdfgsdfgsdfg111'
        },{
          id:'12',
          name:'sdvsdfgsfgweger11222'
        },{
          id:'13',
          name:'dfgrgw2211'
        }
      ],
      defaultValue: '',
      defaultStatus: false,
      componentId:"1",
      errorStatus: false, //是否报错
      errorMsg:"出错了~~~！", //报错信息
      // showText:'请输入正确信息',
      labelText: '选择部门', //左侧 label 文字
      placeholder: '', // input placeholder
      lablePos: true, //label位置，true时在左边，false在上边
      lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
      autoTreeSearchCallBack: (val,filters) => {this.setState({defaultDropValue:filters})},
      keyUpCallBack: (event, value) => {}, // input keyup输入回调
      itemCallBack: (data) => {

      }, //  点击回调
      focusCallBack: (value) => {
        // setTimeout(function() {
        //  self.setState({isFetching:false})
        // },5500)
        console.log('点击了')
        let self = this;
        setTimeout(function() {
         // self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
        },500)
      }, // input keyup输入回调
      blurCallBack: (event) => {}, //  点击回调
      changeCallBack: (event,value,inputValue) => {}, // input keyup输入回调
      clearCallback: () => {},
      showPopCallback: () =>{},
      unmountCallBack: () => {},
      searchSubmitCallBack: (value) =>{console.log(value)},
      submitCallBack: (data) =>{console.log(data)},
      onCloseCallback:(value)=> {},
      setSessionCallBack:() => {},
      itemCloseCallBack: (data) => {console.log(data)},
      clearAutoTreeData: () => {}
    }
    const treeData = {
      toggle: true,
      treeData: [],
      async: 1,  //1异步 0同步
      id:1,          //异步请求的第一层数据pid,非必须
      sidebarScene:false,  // false或该字段没有，则为非sidebar交互方式
      // scrollBar:true,  //false则不使用
      initGetData:true, //默认为tree,是否组件在首次渲染时请求数据,树组件默认会在DidMount时执行getTreeData方法去请求数据
      postData:[],
      methodType:'GET',
      isFetching:false,
      getTreeData:function(id,treeAsync,getUrl,postData,methodType) {
        console.log(id,treeAsync,getUrl,postData,methodType)
        return [];
      },
      getTreeDataAPI: '' || 'http://localhost:3001/getTreeData'  //请求接口
      ,style:{
        "maxHeight": ''
      }
      ,clearTreeData:function() {console.log('clearTreeData')}
    }
    const DropDownData = {
      "title":""  //input框前的文字标识，可为空
      ,"placeholder":"搜索"              /**没有值的时候显示的内容(string)**/
      ,"defaultValue": ''  //默认值
      ,"openListView":false    // 是否打开下拉框
      ,"errorStatus":true      // 错误状态
      ,"errorMsg":"出错了~~~！"    //错误信息
      ,multiple: false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
      ,"children":[
        {
            "value":0
            ,"text":"本级别及所有下级"
            ,"isActive":false  //点击效果，默认为false
            ,"isChecked":false  //是否被选中，默认为false
        }
        ,{
            "value":1
            ,"text":"本级别"
            ,"isActive":false
            ,"isChecked":false
        }
        ,{
            "value":2
            ,"text":"本本级别及直接下级"
            ,"isActive":false
            ,"isChecked":false
        }
        ,{
            "value":3
            ,"text":"直接下级"
            ,"isActive":false
            ,"isChecked":false
        }
        ,{
            "value":4
            ,"text":"全部下级"
            ,"isActive":false
            ,"isChecked":false
        }
      ]               /** MenuItem **/
      ,"hidden":false  //是否显示\
      ,"disabled":false //是否禁用
      ,"required":false  //是否显示必选星号
      ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
      ,"onClick":function(event, target, val){} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
      ,"onBlur":function(event, val){} /**失去焦点后事件回调event：val：input抛出的值**/ /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
      ,"onFocus":function(event, val){} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
    }
    return <DefaultComponent {...this.props} {...options} DropDownData={DropDownData} treeData={treeData} />
  }
}