资产结构测试2

src/api/etl/etl.js

@@ -54,9 +54,9 @@ export function delInfo(id) {
 
 
 //获取
-export function getTableInfo(){
+export function getTableTree(){
   return request({
-    url: 'etl/info/dataConstruct',
+    url: 'etl/info/getTableTree',
     method: 'get'
   })
 }

src/views/etl/construction/index.vue

@@ -1,15 +1,24 @@
 <template>
   <div>
     <el-container>
-      <el-aside width="200px">
-        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+
+      <el-aside>
+        <el-tree :data="assetStructureList"
+                 :expand-on-click-node="false"
+                 :load="expandTable"
+                 lazy
+                 @node-click=""
+                 :props="defaultProps">
+          <!--                  <div class="custom-tree-node" slot-scope="{ node, data }">-->
+          <!--                      <div v-if="data.info.type !== null">{{ data.info.dataResourceName + '('+data.info.databaseName + '-' + data.info.dataSourcesSystemName+')' }}</div>-->
+          <!--                      <div v-if="data.info.type === null">{{ data.tableName + '-'+data.tableRemark + '(' + data.dataNum+'条)' }}</div>-->
+          <!--                  </div>-->
+        </el-tree>
       </el-aside>
 
       <el-main>
         <h1>整体数据资产结构概述</h1>
-        <el-button @click="getTable">
-          测试
-        </el-button>
+
       </el-main>
     </el-container>
   </div>
@@ -18,7 +27,8 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
- import {getTableInfo} from "@/api/etl/etl";
+ import {getTableTree} from "@/api/etl/etl";
+import data from "@/views/system/dict/data.vue";
 
 export default {
     //import引入的组件需要注入到对象中才能使用"
@@ -27,49 +37,14 @@ export default {
       //这里存放数据"
 
       return {
-        data: [{
-          label: '一级1',
-          children: [{
-            label: '二级 1-1',
-            children: [{
-              label: '三级 1-1-1'
-            }]
-          }]
-        },
-          {
-          label: '一级 2',
-          children: [{
-            label: '二级 2-1',
-            children: [{
-              label: '三级 2-1-1'
-            }]
-          },
-            {
-              label: '二级 2-2',
-              children: [{
-                label: '三级 2-2-1'
-              }]
-            }]
-          },
-            {
-            label: '一级 3',
-            children: [{
-              label: '二级 3-1',
-              children: [{
-                label: '三级 3-1-1'
-              }]
-          },
-            {
-            label: '二级 3-2',
-            children: [{
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
+
+        childrenList: [],
+        assetStructureList: [],
+
 
         defaultProps: {
           children: 'children',
-          label: 'label'
+          label: 'tableName'
         }
       };
     },
@@ -86,14 +61,39 @@ export default {
     //方法集合",
     methods: {
 
-     getTable(){
-       getTableInfo().then(response=>{
-         console.log(response)
+     getList(){
+       getTableTree().then(response =>{
+         this.data = []
+         response.data.forEach(data => {
+           let info = data.basicConfigInfo
+           this.assetStructureList.push({
+             'info':info,
+             'table': info.dataResourceName+"("+info.dataSourcesSystemName+")",
+             'children':data.children
+           })
+         })
+         console.log(this.assetStructureList)
        })
-     }
+     },
+
+
+      expandTable(node,resolve){
+       if (node.level === 0) return resolve(this.assetStructureList);
+       const {data} = node;
+       this.showAssets = data.type;
+       if (data.type === null){
+         return resolve([])
+       }
+
+       setTimeout(() => {
+         resolve(this.childrenList)
+       },500);
+      }
+
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
+     this.getList()
     },
     //生命周期 - 挂载完成（可以访问DOM元素）",
     mounted() {