55

src/api/classifyManage/index.js

@@ -25,6 +25,21 @@ export async function getTreeByPid (parentId) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+
+// 根据ids查询物品分类
+export async function getTreeByIds(data) {
+  const res = await request.get(`/pda/main/categoryLevel/pdaTreeByPid`, {
+    params: data
+  });
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+
+
 // 根据类型查分类树
 export async function getTreeByType (type) {
   const res = await request.get(`/main/categoryLevel/getTreeByType/${type}`);
@@ -34,6 +49,11 @@ export async function getTreeByType (type) {
   return Promise.reject(new Error(res.data.message));
 }
 
+
+
+
+
+
 // 删除分类
 export async function deleteCategory (id) {
   const res = await request.get(`/main/categoryLevel/delete/${id}`);

src/components/AssetTree/treeIndex.vue

@@ -0,0 +1,137 @@
+<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"
+    >
+    </el-tree>
+  </div>
+</template>
+
+<script>
+  import { getTreeByIds } from '@/api/classifyManage';
+
+  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;
+        }
+      },
+      // 初始请求treeList
+      init: {
+        type: Boolean,
+        default: true
+      },
+      treeIds: {
+        type: Array,
+        default: () => []
+      },
+      nodeKey: {
+        type: String,
+        default: 'id'
+      }
+    },
+    data() {
+      return {
+        treeList: [],
+        treeLoading: false,
+        parentName: '',
+        parentId: '',
+        currentKey: ''
+      };
+    },
+    mounted() {
+      if (this.init) {
+        this.getTreeData();
+      }
+    },
+    methods: {
+      getInstance() {
+        return this.$refs.tree;
+      },
+      // 获取树结构数据
+      async getTreeData() {
+        try {
+          this.treeLoading = true;
+
+          const res = await getTreeByIds({ ids: this.treeIds.join(',') });
+          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.setCurrentKey(this.treeList[0].id);
+                this.handleNodeClick(
+                  this.treeList[0],
+                  this.$refs.tree.getCurrentNode()
+                );
+              }
+            });
+            return this.treeList;
+          }
+        } catch (error) {
+          console.log(error);
+        }
+        this.treeLoading = false;
+      },
+
+      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>