kd-aiot-frontend-eom/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/saleManage/quotation';
  import { getInfoByIds,getTreeByIds } from '@/api/classifyManage/index';

  // 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'
      },
      typeIds: {
        type: Array,
        default: () => []
      },
      ids:{
        type: Array,
        default: () => []
      },
      itemType:{
        type:String,
        default:'1'
      }
      // 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;
          let data = {};
          if (this.typeIds.length > 0) {
            let res = await getInfoByIds(this.typeIds.toString());
            data= res.data
          }else if(this.ids.length > 0){
            let res = await getTreeByIds({ ids: this.ids.join(',') });
            data= res.data

          } else {
            data = await getProduceTreeByPid(this.itemType);
          }
          console.log(data,'data')

          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>