fj-dc-ui/.svn/pristine/7e/7e7006194b8916a6cd3e6d2681a794c05735d0bd.svn-base

<template>
    <div class="tb_left_tree">
<!--        <div class="date_wrapper">年度：-->
<!--            <el-select v-model="year" placeholder="请选择">-->
<!--                <el-option-->
<!--                v-for="item in yearList"-->
<!--                :key="item.id"-->
<!--                :label="item.year"-->
<!--                :value="item.year">-->
<!--                </el-option>-->
<!--            </el-select>-->
<!--        </div>-->
        <span style="display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #ebeef5;">
          <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>
        </span>
      <div class="tree" style="
         height: calc(100% - 50px);
          width: 100%;
          overflow: auto;
          display: inline-flex;">
        <el-tree
            :highlight-current="true"
            :data="treeData"
            node-key="id"
            :expand-on-click-node="false"
            @node-click = 'treeNodeClickHandler'
            ref="jigou_tree"
            >
            <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span style="float:left;">{{ data.pnm}}</span>
            </div>
        </el-tree>
      </div>
    </div>
</template>
<script>
import request from '@util/gw_ajax_request.js'
import {getTrees} from '@util/gw_formatTree'
import {getYearList} from '@api/jcOneMapApi'
export default {
    props: ['orgType'],
    data(){
        return{
            treeData: [],
            lyjg: [],
            yearList: [],
            year: '',
            tabType:"0",//0全部数据，1当前数据，2历史数据
        }
    },
    computed: {
        persId() {
            return localStorage.getItem("userid")
                ? localStorage.getItem("userid")
                : "1098101939614724096";
        },
    },
    mounted(){
        this.getLeftTreeData()
    },
    methods:{
        tabChange(tabType){
            this.tabType = tabType;
            this.getLeftTreeData();
            this.$emit('changeTabType',tabType)
        },
        getYearlists(){
            getYearList().then(res=>{
                this.yearList = res.data;
                let lastItemIndex = this.yearList.length - 1
                this.year = this.yearList[lastItemIndex].year
            })
        },
        getLeftTreeData(){
            var _self = this;
            _self.lyjg = [];
            request.get('/dc/organization/base/getAllNode',{params:{'userId':this.persId,'orgType':this.orgType,'tabType':this.tabType}}).then((res)=>{
                let data = res.data
                data.forEach(ele => {
                    if(ele.pid == null || ele.pid == ''){
                        ele.pid = '001'
                    }
                    if(ele.id.length == 6){
                        _self.lyjg.push(ele);
                    }
                });
                this.$emit('organList',_self.lyjg)

                data = getTrees(data)
                _self.treeData = data;
                console.log(data);
            })
        },
        treeNodeClickHandler:function(data,node,tree){
            this.$emit('treeNodeClickHandler',data)
        },
    },
    watch:{
        year(val){
            if(val){
                this.getLeftTreeData()
                this.$emit('changeYear',val)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .tb_left_tree{
        height: 100%;
        width: 100%;
        overflow: auto;
        .date_wrapper{
            padding: 10px 0 5px 10px;
        }
    }
    .active{
      background: #3f8eff;
      color:white;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .normal{
      background: white;
      margin-top: 5px;
      margin-bottom: 5px;
    }
</style>