fj-dc-ui/.svn/pristine/c1/c1ebdc61a0dac2269462a391cd043b44ca9c6c11.svn-base

<template>
    <div class="tree" :style="{'height':height + 'px','width':width == 0 ? 250 : width + 'px'}">
        <!--<div class="left_tree_title">年度：-->
            <!--<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>-->
        <el-tree
                :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 request from '@util/gw_ajax_request.js';
    import {dateFormat} from "@util/gw_date";
    import { getTrees } from "@util/gw_formatTree.js";
    import {getYearList} from '@api/jcOneMapApi'
    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: [],
                yearList: [],
                year: ''
            };
        },
        mounted: function () {
            if(this.width == undefined){
                this.width = '250';
            }
            if(this.height == undefined){
                this.height = '550';
            }
            this.getYearlists();
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        methods: {
            getYearlists(){
                getYearList().then(res=>{
                    this.yearList = res.data;
                    let lastItemIndex = this.yearList.length - 1
                    this.year = this.yearList[lastItemIndex].year
                })
            },
            // 节点点击事件
            nodeClick: function (data) {
                // alert(data.id);
            },
            // 递归获取选中的元素id
            getCheckedNode:function(data){
                if(data.children == null || data.disabled || 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 == null || data.disabled || 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) {
                    // 如果没有被禁用
                    if(!data.disabled){
                        _self.checkedData.push({
                            'id': data.id,
                            'pnm': data.pnm
                        });
                        _self.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,
                        });
                        _self.getChangedNode(data)
                    }else{
                        _self.changedData.push({
                            'id': data.id,
                            'pnm': data.pnm,
                        });
                    }


                }

                this.$emit('treeCheckedDataChange', {
                    'newCheckedArray': _self.checkedData,
                    'changedItem': _self.changedData,
                    'newStatus': checked
                });
            },
            //根据用户id获取左侧树
            getLeftTreeData(){
                var _self = this;
                request.get('/dc/organization/base/getAllNode',{params:{'userId':this.userId,'orgType':this.type, 'year': this.year}}).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');
                        }
                    });

                    // 处理最低节点增加上层节点
                    _self.addUpNode(data);
                })
            },
            //处理最低节点增加上层节点
            async addUpNode(data){
                // 1.先获取所有id组成的数组并满足id的长度小于12的（12是最低节点）
                // 2.如果都是最低节点，那么就加上上层节点
                let arr = data.map(v => {
                    return v.id
                }).filter(
                    (v,i) => v.length<12
                );
                let ids = data.map(v => {
                    return v.pid
                }).join();
                if(arr.length == 0 && ids.length != 0){
                    await request.get('/dc/organization/base/getAllNodeById',{params:{'id':ids, 'year': this.year}}).then((res)=>{
                        let dataUp = res.data;
                        dataUp.forEach((item,index)=>{
                            item.disabled = true
                        })
                        data = data.concat(dataUp)
                    }).catch((err)=>{})
                }
                this.treeData = await getTrees(data)
                console.log(JSON.stringify(this.treeData))
            },
        },
        watch:{
            type(val){
                if(val){
                    this.getLeftTreeData()
                }
            },
            year(val){
                if(val){
                    this.getLeftTreeData();
                    this.$emit('changeYear',val);
                }
            }
        }
    };
</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>