@beisen/auto-tree/README.md

AutoTree

# AutoTree

## 项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run serve:data //用于本地模拟数据服务

3. npm run dev （开发环境打包 port:8080）

4. npm run test （测试用例）

5. npm run build （生产环境打包）


## 参数

### props
```javascript
const options = {
      required: true,  //必填
      disabled: false, 
      sync: false,    //异步请求
      status: 'edit', //edit,search
      showDropDown: false,  //渲染footer，带有确定按钮以及下拉弹层
      hiddenTip: false,
      sideTip: false, //tips是否左右显示 可选参数  true ，false 默认为false 可不设置，一般情况下均为false`
      single: true,   //单选多选
      isFetching: this.state.isFetching,  //loading状态
      isSearchAutoTreeEdit:true,   //是否在高级筛选中的组件（beisencloud的参数）
      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",  //唯一标示(cmp_id)
      errorStatus: false, //是否报错
      errorMsg:"出错了~~~！", //报错信息
      helpMsg:"dsadas",     //帮助信息
      labelText: '选择部门11', //左侧 label 文字
      showText:'请输入正确信1息',
      placeholder: '输入部门2名称1', // input placeholder
      lablePos: true, //label位置，true时在左边，false在上边
      lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
      defaultStatus:false, //// 输入框样式控制，默认false
      hidden:false, //不显示，默认false
      defaultValue:false, //todo 用于控制state.hasClick
      defaultValueObj:{
        id:'',
        name:'',
        path:'',
        level:'',
      },
      getAutoTreeDataAPI,


      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('2focusCallBack')
        setTimeout(function() {
          self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
        },500)
      }, // input focusp输入回调
      blurCallBack: (event) => console.log(event), //  input失去焦点回调
      changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)}, // input keyup输入回调
      clearCallback: ()=>{console.log('clearCallback')},
      searchSubmitCallBack: (value) =>{console.log(value)}, //搜索态点击确定按钮回调
      setSessionCallBack:() => {},
      submitCallBack:(resultsData)=>{console.log(resultsData)},
      getAutoTreeData:(getAutoTreeDataAPI,inputValue,filters)=>{},
      findAllSearch:(value)=>{},
      clearAutoTreeData:()=>{},
      showPopCallback:()=>{},
      removeComponent:()=>{},
      unmountCallBack:()=>{},
      onCloseCallback:(event)=>{},
      itemCloseCallBack:(resultsData)=>{},
    }
```



## 使用方法

1.安装npm组件包

```
npm install @beisen/auto-tree --save-dev
```

2.引用组件

  ```javascript
import auto-tree from "@beisen/auto-tree"
  ```
  
3.传入参数

  该参数为上述参数，传入方式使用: {...参数}

```javascript

class Demo extends Component{
  constructor(props){
    super(props);
    this.state = {
      // hidden:false,
      popShow:true,
      target: "",
      defaultDropValue: '',
      defaultValue: '',
      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
    })
  }
  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)
  }
  clearAutoTreeData() {
    this.props.clearAutoTreeData();
  }

  render () {
    let self = this;
    const options = {
      required: true,
      disabled: false,
      sync: false,    //true：同步，false：异步
      status: 'search', //edit,search
      single: true,
      isFetching: this.state.isFetching,
      isSearchAutoTreeEdit:true,
      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 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',
      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} />:"";
    
    return (
      <div style={{marginTop:'50px',height:"700px"}}>
        <div>
          {popTree}
        </div>
      </div>
    )
  }
}
render(
  <Provider store={store}>
    <Demo />
  </Provider>,
  document.getElementById('content')
); 


```