kd-aiot-frontend-pro/src/components/AssetTree/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"
      v-bind="$attrs"
      :default-expand-all="defaultExpandAll"
      :default-expanded-keys="defaultExpandedKeys"
    >
    </el-tree>
  </div>
</template>

<script>
import {getProduceTreeByCode, getTreeByPid} from '@/api/custom';

// 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 true;
      }
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 初始请求treeList
    init: {
      type: Boolean,
      default: true
    },

    isFirstRefreshTable: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: '0'
    },
    code: {
      type: String,
      default: ''
    },
    nodeKey: {
      type: String,
      default: 'id'
    }
    // appendRoot: {
    //   type: Boolean,
    //   default: false
    // },
  },
  data() {
    return {
      treeList: [],
      treeLoading: false,
      parentName: '',
      parentId: '',
      currentKey: ''
    };
  },
  async mounted() {
    if (this.init) {
      if (this.code) {
        let typeObj = await getProduceTreeByCode(this.code);
        await this.getTreeData(typeObj[0]?.id);
      } else {
        await this.getTreeData(this.id);
      }
    }
  },
  methods: {
    getInstance() {
      return this.$refs.tree;
    },
    // 获取树结构数据
    async getTreeData(id) {
      try {
        this.treeLoading = true;

        const res = await getTreeByPid(id);
        this.treeLoading = false;
        if (res?.code === '0') {
          this.treeList = res.data;
          this.$emit('setRootId', res.data[0].id);
          if (this.treeFormate) {
            this.treeList = this.treeFormate(this.treeList);
          }
          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>