fj-dc-ui/.svn/pristine/d0/d00628049a07179a8f20d0852a62fc066e5cbff7.svn-base

<template>
    <el-tree 
        class="el-treeWhite"
        :data="treeData"
        show-checkbox
        @check="currentChecked"
        :props="treeProps"
        :expand-on-click-node="false"
        node-key="id"
        :default-checked-keys="defaultCheckeds"
        :default-expanded-keys="tableDefaultExpandedKeys"
        style="height: 400px;overflow:auto;padding-left:30px;"
    >
        <div class="custom-tree-node" slot-scope="{ node, data }">
            <span style="float:left:">{{ data.pnm}}
                
            </span>
            <div style="float:right;display: flex;align-items: center;width:50%;">
                <span style="color:blue;margin-right:20%;" v-show="data.sttm!=''&&data.entm!=''">{{data.sttm}}/{{data.entm}}
                </span>
            </div>
        </div>
    </el-tree>
</template>

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

    export default {
        components: {},
        props: [],
        data() {
            return {
                type:'001',
                treeData: [],
                tableDefaultExpandedKeys: ['001','002','003'],
                treeProps: {
                    label: "pnm",
                    children: "children",
                    disabled: false,
                    expandOnClickNode: false,
                    first: true,
                },
                checkedData: [],
                changedData: [],
                defaultCheckeds:[],
            };
        },
        mounted: function () {
            this.defaultCheckeds = [];
            this.getLeftTreeData();
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        activated:function(){
            this.defaultCheckeds = [];
        },
        methods: {
            currentChecked(data, currentChecked) {
                const { checkedNodes, halfCheckedNodes } = currentChecked;
                this.$emit('currentCheckedNodes',checkedNodes);
            },
            //根据用户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)
                    _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>
.custom-tree-node{
    width:100%;
}
</style>