fj-dc-ui/.svn/pristine/04/04fcd9229df9c74ee26b06d777489fe92e89f704.svn-base

<template>
<div class="tree" :style="{'height':height + 'px','width':width == 0 ? 250 : width + 'px'}">
    <el-tree
             class="el-treeWhite"
             :data="treeData"
             show-checkbox
             @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 {getNodeByPidAndCode} from "../../api/duChaAPI.js";
    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'],
                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) {
                // alert(data.id);
            },
            // 递归获取选中的元素id
            getCheckedNode:function(data){
                if(data.children.length === 0){
                    return;
                }
                data.children.forEach((element,index) => {
                    this.checkedData.push({
                        'id': element.id,
                        'pnm': element.pnm,
                    });
                    this.getCheckedNode(element);
                });
            },
            // 递归获取改变的元素id
            getChangedNode:function(data){
                if(data.children.length === 0){
                    return;
                }
                data.children.forEach((element,index) => {
                    this.changedData.push({
                        'id': element.id,
                        'pnm': element.pnm,
                    });
                    this.getChangedNode(element);
                });
            },
            // 选中或取消事件
            handleCheckChange: function (data, checked, indeterminate) {

                //
                let _self = this;

                // 如果是选中
                if (checked) {

                   _self.checkedData.push({
                        'id': data.id,
                        'pnm': data.pnm,
                    });

                    this.getCheckedNode(data)

                } else {
                    let newCheckedData = [];
                    _self.checkedData.forEach((element, index) => {
                        if (element.id == data.id || element.engId == data.engId) {

                        } else {
                            newCheckedData.push(element);
                        }
                    });
                    _self.checkedData = newCheckedData;

                    // 被改变的元素，先清空一下
                    _self.changedData = [];
                    // 只获取明确被取消的元素id和下级id
                    if(!indeterminate){
                        _self.changedData.push({
                            'id': data.id,
                            'pnm': data.pnm,
                        });
                        this.getChangedNode(data)
                    }

                }

                this.$emit('treeCheckedDataChange', {
                    'newCheckedArray': _self.checkedData,
                    'changedItem': _self.changedData,
                    'newStatus': checked
                });
            },
            //根据用户id获取左侧树
            getLeftTreeData(){
                var _self = this;
                request.get('/dc/gd/base/getRyNode',{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)
                    _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);
            },
            /**利用递归格式化每个节点**/
            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;
            },


        }
    };
</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>