kd-aiot-frontend-wt/src/components/productTree/index.vue

<template>
    <div class="tree-wrapper">
      <el-tree
        :data="treeList"
        :props="defaultProps"
        v-loading="treeLoading"
        :node-key="nodeKey"
        ref="tree"
        :highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        :default-expanded-keys="defaultExpandedKeys"
        v-bind="$attrs"
        :default-expand-all="defaultExpandAll"
      >
      </el-tree>
    </div>
  </template>
  
  <script>
    import { getProduceTreeByPid } from '@/api/bpm/components/saleManage/contact';
    // let originId = '';
    // let originType = '';
    export default {
      props: {
        // treeList私有化处理
        treeFormate: {
          type: Function,
          default: null
        },
        defaultProps: {
          type: Object,
          default: function () {
            return {
              children: 'children',
              value: 'id',
              label: 'name'
            };
          }
        },
        defaultExpandAll: {
          type: Boolean,
          default: function () {
            return false;
          }
        },
        // 初始请求treeList
        init: {
          type: Boolean,
          default: true
        },
       
        isFirstRefreshTable:{
          type: Boolean,
          default: true
        },
        id: {
          type: String,
          default: '0'
        },
        nodeKey: {
          type: String,
          default: 'id'
        }
        // appendRoot: {
        //   type: Boolean,
        //   default: false
        // },
      },
      data() {
        return {
          defaultExpandedKeys: [],
          treeList: [],
          treeLoading: false,
          parentName: '',
          parentId: '',
          currentKey: ''
        };
      },
      mounted() {
        if (this.init) {
          this.getTreeData();
        }
      },
      methods: {
        getInstance() {
          return this.$refs.tree;
        },
        // 获取树结构数据
        async getTreeData(params = {}) {
          try {
            this.treeLoading = true;
  
            const data = await getProduceTreeByPid(params);
            this.treeLoading = false;
            this.$emit('setRootId', data[0].id);
              this.treeList = this.$util.toTreeData({
              data: data || [],
              idField: 'id',
              parentIdField: 'parentId'
            });
            this.defaultExpandedKeys=[this.treeList[0].id||'']
            this.$nextTick(() => {
                // 默认高亮第一级树节点
                if (this.treeList[0]&&this.isFirstRefreshTable) {
                  
                  this.setCurrentKey(this.treeList[0].id);
                  this.handleNodeClick(
                    this.treeList[0],
                    this.$refs.tree.getCurrentNode()
                  );
                }
              });
              return this.treeList;
          } catch (error) {
            console.error(error);
          }
          this.treeLoading = false;
        },
        // 递归 - 往树children里面添加parentName
        // _setParentName (tree) {
        //   let data = tree;
        //   for (let i = 0; i < data.length; i++) {
        //     if (data[i].parentId === '0') {
        //       this.parentName = data[i].name;
        //       originId = data[i].id;
        //       originType = data[i].type;
        //     }
  
        //     data[i]['originId'] = originId;
        //     data[i]['originType'] = originType;
        //     data[i]['parentId'] = data[i]['parentId'];
        //     if (data[i].children && data[i].children.length > 0) {
        //       this._setParentName(data[i].children);
        //     }
        //   }
        //   return data;
        // },
  
        handleNodeClick(data, node) {
          this.$emit('handleNodeClick', data, node);
        },
        // 设置默认高亮行
        setCurrentKey(id) {
          this.currentKey = id;
          this.$refs.tree.setCurrentKey(this.currentKey);
        },
  
        // 获取树的选中状态
        getSelectList() {
          const selectList = this.$refs.tree.getCurrentNode();
          return selectList;
        }
      }
    };
  </script>
  
  <style lang="scss" scoped>
    .tree-wrapper {
      width: 100%;
      height: 100%;
      overflow: auto;
  
      :deep(.el-tree) {
        display: inline-block;
        min-width: 100%;
      }
    }
  </style>