fj-dc-ui/.svn/pristine/81/81bc3c5bdf3d6a6d2c212eff232c94bf7efcf5b6.svn-base

<template>
  <div>
    <el-button size="mini" :class="tabType==1 ? 'active' : 'normal'" @click="tabChange('1')">当前数据</el-button>
<!--    <el-button size="mini" :class="tabType==2 ? 'active' : 'normal'" @click="tabChange('2')">历史数据</el-button>-->
    <el-button size="mini" :class="tabType==0 ? 'active' : 'normal'" @click="tabChange('0')">全部数据</el-button>
    <div class="tree" style="height: 100%;width: 200px;overflow: auto;display: inline-flex;">
      <el-tree
        class="el-treeWhite"
        :data="treeData"
        :props="treeProps"
        :expand-on-click-node="true"
        @node-click="nodeClick"
        node-key="id"
        :default-expanded-keys="tableDefaultExpandedKeys"
      >
         <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.nm }}</span>
            <span v-if="data.id.length == 2" style="float:right;color:blue;">
              ({{data.children.length}})
            </span>
          </span>
      </el-tree>
    </div>

  </div>
</template>

<script>
import { getDuChaFenGongList, getTableId_ny} from "../api/duChaTianBao.js";
export default {
  components: {},
  props:['rootCode','rootType'],
  data() {
    return {
      treeData: [],
      lyjg:[],
      tableDefaultExpandedKeys: [],
      treeProps: {
        label: "nm",
        children: "children",
        disabled: false,
        expandOnClickNode: false ,
        first:true

      },
      staticProvData:{
        '11':'北京市' ,
        '12':'天津市' ,
        '13':'河北省' ,
        '14':'山西省' ,
        '15':'内蒙古自治区' ,
        '21':'辽宁省' ,
        '22':'吉林省' ,
        '23':'黑龙江省' ,
        '31':'上海市' ,
        '32':'江苏省' ,
        '33':'浙江省' ,
        '34':'安徽省' ,
        '35':'福建省' ,
        '36':'江西省' ,
        '37':'山东省' ,
        '41':'河南省' ,
        '42':'湖北省' ,
        '43':'湖南省' ,
        '44':'广东省' ,
        '45':'广西壮族自治区' ,
        '46':'海南省' ,
        '50':'重庆市' ,
        '51':'四川省' ,
        '52':'贵州省' ,
        '53':'云南省' ,
        '54':'西藏自治区' ,
        '61':'陕西省' ,
        '62':'甘肃省' ,
        '63':'青海省' ,
        '64':'宁夏回族自治区' ,
        '65':'新疆维吾尔自治区' ,
        '66':'新疆生产建设兵团' ,
        },
        currentEngId:'',
        tabType:"0"
    };
  },
  mounted: function() {

    this.loadTreeListData();
  },
   activated(){
      console.log('nongyin_tiaobao_activated_tree');
      this.loadTreeListData();
    },
   computed: {
    userId: function() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    }
  },
  methods: {
    tabChange(tabType){
        this.tabType = tabType;
        this.loadTreeListData();
        this.$emit('changeTabType',tabType)
    },
    loadTreeListData:function(){
       try{
    getDuChaFenGongList(this.userId,100,this.tabType).then((res) =>{
        let _self = this;
        _self.lyjg = [];
        console.log(res);
        var children = [];
        var tempTreeData = [];
        var hasProv = false;
       if(res.data==null || res.data.length==0){
         this.treeData = [];
         this.$emit('treeNoData',false);
         return;
       }
        res.data.forEach(ele => {
              if(ele.id.length == 6){
                _self.lyjg.push(ele);
              }
          });
          _self.$emit("emitLyjgList",_self.lyjg);
        // res.data.forEach((element,index)=>{
        //     tempTreeData.forEach((provNode)=>{
        //       if(element.code.startsWith(provNode.code)){
        //         provNode['children'].push(element);
        //         hasProv = true;
        //       }
        //     });
        //     if(!hasProv){
        //       let newProvNode = {};
        //       newProvNode['nm'] = _self.staticProvData[element.code.substr(0,2)];
        //       newProvNode['code'] = element.code.substr(0,2);
        //       newProvNode['children'] = [];
        //       newProvNode['children'].push(element);
        //       tempTreeData.push(newProvNode);
        //     }
        //     hasProv = false;
        //     children.push(element);
        //     this.$emit('treeNoData',true);
        // })
        // console.log(tempTreeData);
        let data = res.data
        data = _self.getTrees(data)
          _self.treeData = data;
          _self.$emit("emitCurrentNodeId",data[0]);
        // _self.treeData = tempTreeData;
        //  this.$emit("provTreeSelectChange", { 'code':children[0].code, 'name': children[0].nm,'objCode':children[0].objId});
        //  this.$emit("provTreeSelectChange1", { 'code':'', 'name':'','objCode':''});
        // this.$emit("LoadingCompleted",{'type':false});
      },(err) =>{});

       }catch(e){
         this.$message.error('超时');
       }
    },
    //格式化树形数据
      getTrees(list) {
          //@wxcwater重写方法 适应多个树
          let highLevelLength = 99;//预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
          let _self =this;
          list.forEach((item,index)=>{
            item['pidLength'] = item.pid&&item.pid!=''?item.pid.length:0;
            if(highLevelLength>item.pidLength){
              highLevelLength = item.pidLength;
            }
          });
          console.log(highLevelLength);
          let heightLevelNode = [];
           list.forEach((item,index)=>{

            if(highLevelLength>=item.pidLength){
              heightLevelNode.push(item);
            }
          });

            list.forEach((item,index)=>{
              heightLevelNode.forEach((pItem)=>{
                _self.addTreeNode(pItem,item);
              });

            });
            console.log(heightLevelNode);
            return heightLevelNode;
          },

     addTreeNode:function(treeNode,leafNode){
       let _self = this;
       if(!treeNode.hasOwnProperty('children')){
         treeNode['children'] = [];
       }
       if(leafNode.pid == treeNode.id){
         treeNode.children.push(leafNode);
         return;
       }
       treeNode.children.forEach((item) => {
         _self.addTreeNode(item,leafNode);
       });
     },
      /**利用递归格式化每个节点**/

    nodeClick: function(data) {
      // alert(data.code+data.name+data.type);
      //修改逻辑 如果是行政区划 给两个code 一个完整code  一个likecode 用于like查询 省的就是两位 市县的四位 以此类推
      // let likeCode = data.code;
      // if(data.type == 2){ //行政区
      //       likeCode = likeCode.endsWith('0000000000')?likeCode.substr(0,likeCode.length-10):likeCode;
      //       likeCode = likeCode.endsWith('00000000')?likeCode.substr(0,likeCode.length-8):likeCode;
      //       likeCode = likeCode.endsWith('000000')?likeCode.substr(0,likeCode.length-6):likeCode;
      //       likeCode = likeCode.endsWith('000')?likeCode.substr(0,likeCode.length-3):likeCode;
      // }
      // if(data.code.length>2){
      //   this.$emit("provTreeSelectChange", { 'code':data.code, 'name': data.nm,'objCode':data.objId});
      //   this.$emit("provTreeSelectChange1", { 'code':data.code, 'name': data.nm,'objCode':data.objId});
      // }
      console.log(data);
      if (data.engId == '' || data.engId == null) {
        if(data.noteType=='county'){
          getTableId_ny(data.objId,this.persId).then((res)=>{
            data.engId = res.data.engId;
            data['objId'] = data.objId;
            data['id'] = data.id;
            // this.loadTreeListData();
            console.log("获取的engid是" + data.engId);
            this.$emit("emitCurrentNodeId",data);
          })
        }else{
          this.$emit("emitCurrentNodeId",data);
        }
      }else{
        this.$emit("emitCurrentNodeId",data);
      }
    },

  }
};
</script>

<style scoped>
  .active{
    background: #3f8eff;
    color:white;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 60px !important;
    padding: 7px 0px !important;
    margin-left: 0px !important;
  }
  .normal{
    background: white;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 60px !important;
    padding: 7px 0px !important;
    margin-left: 0px !important;
  }
</style>