fj-dc-ui/.svn/pristine/e2/e2b0b573f4df06580d80f776266bbda413f91a5e.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>
    <div style="margin-top:5px;margin-bottom:5px;display: flex;align-items: center;justify-content: center;height:30px;">
      <el-button type="primary" @click="checkAll">全选</el-button>
      <el-button type="warning" @click="inverse">反选</el-button>
    </div>
    <el-tree
      :data="treeData"
      show-checkbox
      ref="tree"
      @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";
    import {getTrees} from '@util/gw_formatTree'
    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: {
            checkAll(){
                this.$refs.tree.setCheckedNodes(this.treeData); // 全选
            },
            inverse(){
                this.$refs.tree.setCheckedNodes([]); // 取消全选
            },
            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);

                    // 使用新的格式化树方法
                    // _self.treeData = _self.getTreesNew(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>