fj-dc-ui/.svn/pristine/cf/cfd64ae951f42989a132440949b7b8e663a7dd4f.svn-base

<template>
  <div class="tree" :style="{'height':height + 'px','width':width == 0 ? 250 : width + 'px'}">
    <el-tree
      :data="treeData"
      :show-checkbox="showCheckbox"
      @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', 'showCheckbox'],
    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) {
        var _self = this;
        _self.$emit("provTreeSelectChange", {
          'id': data.id,
          'pid': data.pid,
          'pnm': data.pnm
        });
      },

      // 递归获取选中的元素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>