etl-cloud-ui/src/views/data/structure/index.vue

<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside style="width: 400px">
      <el-tree :data="assetStructureList"
               :load="expandTable"
               lazy
               @node-click="showAssetsFun"
               :props="defaultProps">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div v-if="data.type === 'dataSource'">
            {{ data.dataSourceName + '(' + data.dataSourceDatabaseName + '-' + data.dataSourceSystemName + ')' }}
          </div>
          <div v-if="data.type === 'dataTable'">
            {{ data.tableName + '-' + data.tableNameAnnotation + '(' + data.tableDataCount + '条)' }}
          </div>
        </div>
      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <OverallAssets v-if="showAssets == null" :assetStructureDataCount="assetStructureDataCount"/>
        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"
                                 :structureTableDataCount="structureTableDataCount"/>
        <overall-asset-structure v-if="showAssets === 'dataTable'" :assetTableDetailsList="assetTableDetailsList" :tableName="tableName"
                                 :tableNameAnnotation="tableNameAnnotation"
                                 :tableDataCount="tableDataCount" :title="title"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {listAssetStructure, selectAssetSouructureTableList} from "@/api/data/structure";
import OverallAssets from "@/views/data/structure/dashlboard/OverallAssets.vue";
import OverallSpecificAssets from "@/views/data/structure/dashlboard/OverallSpecificAssets.vue";
import OverallAssetStructure from "@/views/data/structure/dashlboard/OverallAssetStructure.vue";

export default {
  name: 'assetStructure',
  components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets},
  data() {
    return {
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      // 数据库
      assetStructureList: [],
      // 数据库表
      childrenList: [],

      showAssets: null,
      title: null,
      tableName: null,
      tableNameAnnotation: null,
      tableDataCount: null,
      assetTableDetailsList: null,
      // 数据接入数量
      assetStructureDataCount: {
        dataCount: null,
        assetStructureTableCount: null,
        assetStructureTableDataCount: null,
      },
      // 数据接入数量
      structureTableDataCount: {
        tableCount: null,
        tableDataCount: null,
        childrenList: [],
      }

    }
  },
  created() {
    this.listAssetStructure();
  },
  methods: {
    // 查询数据资产列表
    listAssetStructure() {
      listAssetStructure().then(response => {
        // console.log(response)
        // console.log(response.data)
        this.assetStructureList = response.data.assetStructureList
        this.assetStructureList.forEach(
          item => {
            item.type = "dataSource"
          }
        )
        // 数据接入数量
        this.assetStructureDataCount.dataCount = this.assetStructureList.length
        this.assetStructureDataCount.assetStructureTableCount = response.data.assetStructureTableCount
        this.assetStructureDataCount.assetStructureTableDataCount = response.data.assetStructureTableDataCount

      })
    },
    expandTable(node, resolve) {
      /**
       * 节点展开回调函数，接受两个参数：
       *   node: 当前展开节点的信息对象，包含节点级别（level）、数据（data）等属性
       *   resolve: 一个函数，用于异步加载完成时传递子节点数据，通知 `el-tree` 组件更新节点状态
       */

      // 如果当前节点为根节点（level === 0），直接返回 assetStructureList 作为其子节点数据
      if (node.level === 0) {
        return resolve(this.assetStructureList);
      }

      // 从节点信息对象中解构出 data 属性
      const {data} = node;
      /*
            // 异步调用 selectAssetSouructureTableList API 函数，传入当前节点的 id 作为参数
            selectAssetSouructureTableList(data.id).then((response) => {
              // 打印 API 返回的响应数据
              // console.log(response);

              // 将 API 返回的 data 属性赋值给 this.childrenList
              this.childrenList = response.data.assetStructureList;

              // 遍历 this.childrenList，为每个元素添加 type 属性，值为 "dataTable"
              this.childrenList.forEach((item) => {
                item.type = "dataTable";
              });

              this.structureTableDataCount.tableCount = response.data.tableCount
              this.structureTableDataCount.tableDataCount = response.data.tableDataCount
              this.structureTableDataCount.childrenList = this.childrenList

              // 调用 resolve 函数，传递处理后的 this.childrenList 作为子节点数据
              resolve(this.childrenList);
            });*/

      // 如果当前节点的数据类型为 "dataTable"，返回空数组，不加载任何子节点
      if (data.type === 'dataTable') {
        this.tableName = data.tableName,
        this.tableNameAnnotation = data.tableNameAnnotation,
        this.tableDataCount = data.tableDataCount
        this.childrenList.forEach(item => {
          if (item.tableName === this.tableName){
            this.assetTableDetailsList = item.assetTableDetailsList
          }
          return
        })
        return resolve([])
      }

      // 如果当前节点级别大于 1，返回空数组，不加载任何子节点
      if (node.level > 1) return resolve([]);

      // 使用 setTimeout 延迟 500ms 执行以下代码块
      setTimeout(() => {
        // 定义一个局部变量 data，赋值为 this.childrenList
        const data = this.childrenList;

        // 调用 resolve 函数，传递 data 作为子节点数据
        resolve(data);
      }, 500);
    },
    showAssetsFun(data) {
      this.title = data.dataSourceName + '(' + data.dataSourceDatabaseName + '-' + data.dataSourceSystemName + ')'
      this.showAssets = data.type;
      if (data.type === 'dataSource') {
        // 异步调用 selectAssetSouructureTableList API 函数，传入当前节点的 id 作为参数
        selectAssetSouructureTableList(data.id).then((response) => {
          // 打印 API 返回的响应数据
          // console.log(response);

          // 将 API 返回的 data 属性赋值给 this.childrenList
          this.childrenList = response.data.tableDetailsRespList;

          // 遍历 this.childrenList，为每个元素添加 type 属性，值为 "dataTable"
          this.childrenList.forEach((item) => {
            item.type = "dataTable";
          });

          this.structureTableDataCount.tableCount = response.data.tableCount
          this.structureTableDataCount.tableDataCount = response.data.tableDataCount
          this.structureTableDataCount.childrenList = this.childrenList
        });
      }
      if (data.type === "dataTable") {
        this.tableParams = {
          tableName: data.name,
          tableAsName: data.as
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.el-aside {
  margin: 0;
  padding: 0;
  width: 600px;
  background-color: white;
}

.el-main {
  background-color: #f1f1f1;
}
</style>