@beisen/auto-tree/index.js

AutoTree

/* eslint-disable */
import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import debounce from '@beisen/es6-promise-debounce'
import ConfigureStore from './app/configureStore';
import { Provider, connect } from 'react-redux';
import usReducers from './app/modules/BaseTree';
import * as usActions from './app/modules/BaseTree';
import Immutable from 'immutable';
import { toJS } from 'immutable';

const store = ConfigureStore(usReducers)  ;


import AutoTree from './src/index.js';
@connect(
  state => state.toJS(),
  {...usActions}
)
class Demo extends Component{
  constructor(props){
    super(props);
    this.state = {
      // hidden:false,
      popShow:true,
      target: "",
      defaultDropValue: '132321321',
      defaultValue: '1,2,3',
      treeMaxheight: '',
      isFetching: true
    }
    this.popClose = this.popClose.bind(this);
    this.removeComponent = this.removeComponent.bind(this);
  }
  popClose() {
    let self = this;
    this.setState({
      popShow: !this.state.popShow
    })
  }
  removeComponent() {
    this.setState({
      popShow: false
    })
  }
  resizeMaxheight = () => {
    // let inputNode = this.refs.autoFormInput;
    let treeMaxheight = parseInt(document.documentElement.clientHeight * 0.8 - 150) + 'px';
    this.setState({treeMaxheight:treeMaxheight});
  }
  componentDidMount() {
    if(this.refs.dirButton!=undefined){
      let target = this.refs.dirButton.getBoundingClientRect();
      this.state.target = target;
      this.setState(this.state);
    }
    let self = this;
    setTimeout(function() {
     // self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
     self.setState({isFetching:false})
    },500)
    // if(status == 'edit') {
      this.resizeMaxheight();
      window.addEventListener('resize',debounce(function(){
        self.resizeMaxheight();
      },200),false)
    // }
  }
  clearAutoTreeData() {
    this.props.clearAutoTreeData();
  }

  // clearValue = () => {
  //   this.setState({defaultValue:''});
  // }

  test = () => {
    this.setState({defaultValue:""})
  }

  // setAutoTreeData(){
  //   this.setState({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'
  //       }
  //     ]})
  // }

  render () {
    let self = this;
    const options = {
      required: true,
      disabled: false,
      sync: false,    //true：同步，false：异步
      status: 'edit', //edit,search
      single: false,
      isFetching: this.state.isFetching,
      isSearchAutoTreeEdit:false,
      hiddenTip: false,
      sideTip: false,
      showDropDown: true,
      totalCount: 100,
      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)=>this.clearAutoTreeData(),
      setSessionCallBack:() => {},
      itemCloseCallBack: (data) => {console.log(data)}
    }
    const options1 = {
      required: true,
      disabled: false,
      sync: false,
      status: 'edit', //edit,search
      showDropDown: false,
      hiddenTip: false,
      sideTip: false,
      single: false,
      // isSearchAutoTreeEdit:true,
      autoTreeData: [{
        id:'0',
        name:'100990'
      },
      {
        id:'1',
        name:'asdfasdf'
      }],
      componentId:"2",
      errorStatus: false, //是否报错
      errorMsg:"出错了~~~！", //报错信息
      labelText: '选择部门1', //左侧 label 文字
      showText:'请输入正确信息',
      placeholder: '输入部门名称1', // input placeholder
      lablePos: false, //label位置，true时在左边，false在上边
      lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
      autoTreeSearchCallBack: (val) => console.log(val),
      findAllSearch: (val) => console.log(val),
      keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
      itemCallBack: (data) => {
        // this.setState({_defaultValue:data[0].name})
      }, //  点击回调
      focusCallBack: (value) => {
        let self = this;
        console.log('2focusCallBack')
        // setTimeout(function() {
        //  self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
        // },500)
      }, // input keyup输入回调
      blurCallBack: (event) => console.log(event), //  点击回调
      changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)}, // input keyup输入回调
      clearCallback: ()=>{console.log('clearCallback')},
      submitCallBack: (data) =>{console.log(data)},
      searchSubmitCallBack: (value) =>{console.log(value)},
      setSessionCallBack:() => {}
    }
    const options2 = {
      required: true,
      disabled: false,
      readOnly: false,
      sync: false,
      status: 'edit', //edit,search
      defaultValue: "321321,321321,321321",
      showDropDown: true,
      hiddenTip: false,
      sideTip: false,
      single: true,
      selectDate: [
       {
         name:"12321321"
       }
      ],
      isFetching: false,
      isSearchAutoTreeEdit:true,
      defaultValueObj:{
        id:"0"
        ,name:"100990"
      },
      autoTreeData: [{
        id:'0',
        name:'100990'
      },
      {
        id:'1',
        name:'asdfasdf'
      }],
      treeData:[{
				"id": "32025",
				"name": "技术体系阿斯顿发送到发送到发送到发送到发送到发送到发送到发送的方式打发当时发生的发生的",
				"path": "32025.",
				"pid": "0",
				"level": "1",
				"has_child":false,
				"clickable":false
			}],
      componentId:"3",
      errorStatus: true, //是否报错
      errorMsg:"出错了~~~！", //报错信息
      helpMsg:"dsadas",
      labelText: '选择部门11', //左侧 label 文字
      showText:'请输入正确信1息',
      placeholder: '输入部门2名称1', // input placeholder
      lablePos: true, //label位置，true时在左边，false在上边
      lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
      autoTreeSearchCallBack: (val) => console.log(val),
      keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
      itemCallBack: (data) => {
        console.log(data)
        // this.setState({_defaultValue:data[0].name})
      }, //  点击回调
      focusCallBack: (value) => {
        let self = this;
         setTimeout(function() {
         self.setState({isFetching:false})
        },500)
        // console.log('2focusCallBack')
        // setTimeout(function() {
        //  self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
        // },500)
      }, // input keyup输入回调
      blurCallBack: (event) => console.log(event), //  点击回调
      changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)}, // input keyup输入回调
      clearCallback: ()=>{console.log('clearCallback')},
      searchSubmitCallBack: (value) =>{console.log(value)},
      setSessionCallBack:() => {},
      translation: {
        emptyBgText: '这里什么都没有...TT',
	      pleaseSearch: "请搜索TT",
	      confirmText: '确定TT',
        inputToSearch: '输入可进行搜索TT',
        thisLevelAndAllSubordinatesText: '本级别及所有下级TT',
        thisLevelText: '本级别TT',
        directSubordinateText: '直接下级TT',
        allSubordinatesText: '所有下级TT',
        thisLevelAndDirectSubordinateText: '本级别及直接下级TT'
      }
    }

    const options3 = {
      required: true,
      disabled: false,
      sync: false,
      status: 'search', //edit,search
      showDropDown: false,
      hiddenTip: false,
      sideTip: false,
      isSearchAutoTreeEdit:true,
      single: true,
      autoTreeData: [{
        id:'0',
        name:'100990'
      },
      {
        id:'1',
        name:'asdfasdf'
      }],
      componentId:"3",
      errorStatus: false, //是否报错
      errorMsg:"出错3了~~~！", //报错信息
      labelText: '选择部22门11', //左侧 label 文字
      showText:'请输入正2确信1息',
      placeholder: '2输入部门2名称1', // input placeholder
      autoTreeSearchCallBack: (val) => console.log(val),
      keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
      itemCallBack: (data) => {
        console.log(data)
        // this.setState({_defaultValue:data[0].name})
      }, //  点击回调
      focusCallBack: (value) => {
        let self = this;
        console.log(value)
        console.log('3focusCallBack')
        setTimeout(function() {
         self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
        },500)
      }, // input keyup输入回调
      blurCallBack: (event) => console.log(event), //  点击回调
      changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)}, // input keyup输入回调
      clearCallback: ()=>{console.log('clearCallback')},
      searchSubmitCallBack: (value) =>{console.log(value)},
      setSessionCallBack:() => {}
    }
    const treeData = {
      toggle: true,
      treeData: this.props.treeData,
      async: 1,  //1异步 0同步
      id:1,          //异步请求的第一层数据pid,非必须
      sidebarScene:false,  // false或该字段没有，则为非sidebar交互方式
      // scrollBar:true,  //false则不使用
      initGetData:true, //默认为tree,是否组件在首次渲染时请求数据,树组件默认会在DidMount时执行getTreeData方法去请求数据
      postData:[],
      methodType:'GET',
      isFetching:this.state.isFetching,
      getTreeData:function(id,treeAsync,getUrl,postData,methodType) {
        console.log(id,treeAsync,getUrl,postData,methodType)
        self.props.getTreeData(getUrl,id);
      },
      getTreeDataAPI: '' || 'http://localhost:3001/getTreeData'  //请求接口
      ,style:{
        "maxHeight":this.state.treeMaxheight
      }
      ,clearTreeData:function() {console.log('clearTreeData')}
    }
    const DropDownData = {
      "title":""  //input框前的文字标识，可为空
      ,"placeholder":"搜索"              /**没有值的时候显示的内容(string)**/
      ,"defaultValue": this.state.defaultDropValue  //默认值
      ,"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中的值**/
    }
    let popTree = this.state.popShow?<AutoTree  {...options} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
    let popTree1 = this.state.popShow?<AutoTree {...options1} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
    let popTree2 = this.state.popShow?<AutoTree {...options2} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
    let popTree3 = this.state.popShow?<AutoTree {...options3} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";

    return (
      <div style={{marginTop:'50px',height:"700px"}}>
        <button onClick={this.test}>重置value</button>
        <div>
          {popTree2}
        </div>
        <div style={{marginLeft: '500px'}}>
          {popTree1}
        </div>
        {/* <div style={{marginTop: '700px'}}>
          {popTree}
        </div>
        <div style={{marginTop: '900px'}}>
          {popTree3}
        </div> */}
        <div>
        </div>
      </div>
    )
  }
}

/*



*/


// {options.status=='search'?<button className="btn" ref="dirButton" style={{'marginTop':'50px','marginLeft':'100px'}} onClick = {this.popClose} >天天向上</button>:''}

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