fj-dc-ui/.svn/pristine/ce/ce3537323ba0d75dbb2a25e9855fe43602999c84.svn-base

<template>
    <div class="tree" :style="{'height':height + 'px','width':width == 0 ? 250 : width + 'px'}">
        <el-tree
                :data="treeData"
                @check-change="handleCheckChange"
                :props="treeProps"
                :expand-on-click-node="false"
                @node-click="nodeClick"
                node-key="id"
                :default-expanded-keys="tableDefaultExpandedKeys"
        ></el-tree>
    </div>
</template>

<script>
    import request from '../../utils/gw_ajax_request.js';
    import {dateFormat} from "../../utils/gw_date";

    export default {
        components: {},
        props: ['pid','type','pidNodes','height','width'],
        data() {
            return {
                treeData: [],
                code:'45',
                tableDefaultExpandedKeys: ['001','002','003','006'],
                treeProps: {
                    label: "pnm",
                    children: "children",
                    disabled: false,
                    expandOnClickNode: false,
                    first: true,
                },
                checkedData: [],
                changedData: [],
            };
        },
        mounted: function () {
            if(this.width == undefined){
                this.width = '250';
            }
            if(this.height == undefined){
                this.height = '550';
            }
            this.getLeftTreeData();
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        methods: {
            // 节点点击事件
            nodeClick: function (data) {
                this.$emit("provTreeSelectChange", {'id':data.id});
            },
            //根据用户id获取左侧树
            getLeftTreeData(){
                //
                var _self = this;
                request.get('/dc/organization/base/getAllNode',{params:{'userId':this.userId,'orgType':this.type}}).then((res)=>{
                    let data = res.data
                    data.forEach(ele => {
                        if(ele.pid == null || ele.pid == ''){
                            ele.pid = '001'
                        }if(ele.sttm==null || ele.sttm == ''){
                            ele.sttm = ''
                        }else{
                            ele.sttm = dateFormat(ele.sttm,'yy-MM-dd');
                        }if(ele.entm==null || ele.entm == ''){
                            ele.entm = ''
                        }else{
                            ele.entm = dateFormat(ele.entm,'yy-MM-dd');
                        }
                    });
                    // data = _self.getTrees(data, data[0].pid);
                    // 使用新的格式化树方法
                    data = _self.getTreesNew(data);
                    _self.treeData = data;
                })
            },
            //格式化树形数据
            getTrees(list,pId) {
                let items = {};
                // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
                for(let i = 0; i < list.length; i++) {
                    let key = list[i].parentId ? list[i].parentId : list[i].pid;
                    if(items[key]) {
                        items[key].push(list[i]);
                    } else {
                        items[key] = [];
                        items[key].push(list[i]);
                    }
                }
                return this.formatTree(items, pId);

            },
            getTreesNew(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;
                }
                });
                let heightLevelNode = [];
                list.forEach((item,index)=>{
                    if(highLevelLength>=item.pidLength){
                        heightLevelNode.push(item);
                    }
                });
                list.forEach((item,index)=>{
                    heightLevelNode.forEach((pItem)=>{
                    _self.addTreeNode(pItem,item);
                    });
                });
                return heightLevelNode;
            },
            /**利用递归格式化每个节点**/
            formatTree(items, pId) {
                let result = [];
                if(!items[pId]) {
                    return result;
                }
                for(let t of items[pId]) {
                    t.children = this.formatTree(items, t.id)
                    result.push(t);
                }
                return result;
            },
            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);
                });
            },


        }
    };
</script>

<style scoped>
.tree{
    overflow-y: auto;
    overflow-x: auto;
}
.el-tree {
     min-width: 100%;
     display:inline-block !important;
 }

/*滚动条样式*/
.tree::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
/*正常情况下滑块的样式*/
.tree::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.tree:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
.tree::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*正常时候的主干部分*/
.tree::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/
.tree::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: rgba(0, 0, 0, .01);
}
</style>