资产组件封装

src/components/AssetTree/index.vue

@@ -3,12 +3,9 @@
     <el-tree
       :data="treeList"
       :props="defaultProps"
-      :default-expand-all="defaultExpandAll"
-      :default-expanded-keys="defaultExpandedKeys"
       v-loading="treeLoading"
-      node-key="id"
+      :node-key="nodeKey"
       ref="tree"
-      :expand-on-click-node="expandOnClickNode"
       :highlight-current="true"
       @node-click="handleNodeClick"
       v-bind="$attrs"
@@ -18,51 +15,52 @@
 </template>
 
 <script>
-  import { getTreeByType } from '@/api/classifyManage';
+  import { getTreeByPid, getTreeByType } from '@/api/classifyManage';
   // let originId = '';
   // let originType = '';
   export default {
     props: {
+      // treeList私有化处理
+      treeFormate: {
+        type: Function,
+        default: null
+      },
       defaultProps: {
         type: Object,
         default: function () {
           return {
             children: 'children',
-            value: 'code',
+            value: 'id',
             label: 'name'
           };
         }
       },
-      defaultExpandAll: {
-        type: Boolean,
-        default: true
-      },
+      // 初始请求treeList
       init: {
         type: Boolean,
-        default: false
-      },
-      defaultExpandedKeys: {
-        type: Array,
-        default: function () {
-          return [];
-        }
+        default: true
       },
-      expandOnClickNode: {
-        type: Boolean,
-        default: false
+      // 接口分父级id 和 类型筛选
+      paramsType: {
+        type: String,
+        default: 'id'
       },
       type: {
         type: String,
         default: ''
       },
+      id: {
+        type: String,
+        default: '0'
+      },
+      nodeKey: {
+        type: String,
+        default: 'id'
+      }
       // appendRoot: {
       //   type: Boolean,
       //   default: false
       // },
-      treeFormate: {
-        type: Function,
-        default: null
-      }
     },
     data () {
       return {
@@ -86,9 +84,14 @@
       async getTreeData () {
         try {
           this.treeLoading = true;
-          const res = await getTreeByType(type);
+          const requestApi =
+            this.paramsType === 'type'
+              ? getTreeByType.bind(null, this.type)
+              : getTreeByPid.bind(null, this.id);
+
+          const res = await requestApi();
           this.treeLoading = false;
-          if (res.success) {
+          if (res?.code === '0') {
             this.treeList = res.data;
 
             if (this.treeFormate) {
@@ -150,6 +153,12 @@
 <style lang="scss" scoped>
   .tree-wrapper {
     width: 100%;
+    height: 100%;
     overflow: auto;
+
+    :deep(.el-tree) {
+      display: inline-block;
+      min-width: 100%;
+    }
   }
 </style>

src/views/classifyManage/itemInformation/index.vue

@@ -2,7 +2,7 @@
   <div class="ele-body">
     <el-card shadow="never">
       <ele-split-layout
-        width="266px"
+        width="256px"
         allow-collapse
         :right-style="{ overflow: 'hidden' }"
       >
@@ -22,7 +22,8 @@
             </div>
           </ele-toolbar>
           <div class="ele-border-lighter sys-organization-list">
-            <el-tree
+            <asset-tree @handleNodeClick="onNodeClick" />
+            <!-- <el-tree
               ref="tree"
               :data="treeData"
               highlight-current
@@ -31,7 +32,7 @@
               :expand-on-click-node="false"
               :default-expand-all="true"
               @node-click="onNodeClick"
-            />
+            /> -->
           </div>
         </div>
         <template v-slot:content>
@@ -45,9 +46,10 @@
 <script>
   import itemList from './components/item-list';
   import { getTreeByPid } from '@/api/classifyManage';
+  import AssetTree from '@/components/AssetTree';
 
   export default {
-    components: { itemList },
+    components: { itemList, AssetTree },
     data () {
       return {
         treeData: [],