oms/src/benyun/components/sideTree/sideTree.vue

<template>
  <div class="sideTree" v-loading="load">
    <div class="tree-top">
      <el-switch
        :width="35"
        v-model="switchValue"
        active-text="包含下级"
        size="mini">
      </el-switch>
    </div>
    <el-tree :data="data" :props="defaultProps" node-key="id" highlight-current :expand-on-click-node="false" :default-expand-all="attrs.defaultExpandAll" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script lang="ts">
  /*
  config:{
    attr:{
      retConfig:{}, //返回值配置
      label:'',
      children:'',
      defaultExpandAll: true/false  //	是否默认展开所有节点
      resType:''  //请求返回数据所在位置
    }，
    request:{
      url:'',
      method:'',
      data:'',
      params:''
    }
  }

  */
  import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  import VueViews from '@/benyun/compVue/VueViews'
  @Component
	export default class SideTree extends VueViews {
    load = false;
    value:any={}
    switchValue = true;
    data:Array<any>=[]
    config:any={}
    
    get defaultProps(){
      let obj = {
        children: 'children',
        label: 'label'
      }
      if(this.attrs.label){
        obj.label = this.attrs.label
      }
      if(this.attrs.children){
        obj.children = this.attrs.children
      }
      return obj;
    }

    get requestConfig(){
      return this.config.request
    }
    
    created(){
      if(this.propConfig){
        this.setConfig(this.propConfig)
      }
      if(this.requestConfig){
        this.request()
      }
    }

    setData(data:Array<any>){
      this.data=data;
    }

    handleNodeClick(data:any){
      this.value={}
      let newData = this.getChildData([data]);
      if(this.attrs.retConfig){
        if(this.switchValue){
          for(const item of newData){
            for(const key in this.attrs.retConfig){
              if(!this.value[key]) this.value[key] = [];
              this.value[key].push(item[this.attrs.retConfig[key]])
            }
          }
        }else{
          for(const key in this.attrs.retConfig){
            if(!this.value[key]) this.value[key] = [];
            this.value[key].push(data[this.attrs.retConfig[key]])
          }
        }
      }
      this.value['isContain'] = this.switchValue;
      
      this.onChange();
    }
    onChange(){
      this.$emit('onChange',this.value)
    }
    //获取下级数据
    getChildData(data:Array<any>):Array<any>{
      let d:Array<any> = [];
      for(const item of data){
        d.push(item);
        if(item.children && item.children.length > 0){
          d = d.concat(this.getChildData(item.children))
        }
      }
      return d;
    }
    request(){
      this.data = []
      this.load = true;
      if(this.requestConfig){
        this.requestHandle({
          ...this.requestConfig,
          success:(res:any) => {
            let t = this.attrs.resType?this.attrs.resType:'data'
            if(res && res[t]){
              this.setData(res[t])
            }
            this.load = false
          },
          fail:() => {
            this.load = false;
          }
        })
      }
    }
    
  }
</script>

<style scoped lang="scss">
.tree-top{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
}
</style>

<style lang="scss">
.tree-top{
  .el-switch__label *{
    font-size: 12px !important;
  }
}
</style>