feat: 新增资产展示功能

资产展示功能,会展示选中数据资产表的表信息,以及表资产信息(数据默认只展示表中第一条数据),表中没有数据,则展示的数据值为null

src/views/etl/assetShow/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-container :style="{height: mainHeight + 'px'}">
+    <el-aside>
+      <el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+    </el-aside>
+    <el-container v-if="asset.dataType == 'dataTable'">
+      <el-main>
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>资产模型基本信息</span>
+          </div>
+          <el-descriptions border :column="2">
+            <el-descriptions-item label="表名称">{{asset.tableName}}</el-descriptions-item>
+            <el-descriptions-item label="表备注">{{asset.tableComment}}</el-descriptions-item>
+            <el-descriptions-item label="数据量">{{asset.tableCount}}</el-descriptions-item>
+            <el-descriptions-item label="是否核心">
+              <el-tag size="small">是</el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <el-card class="box-card" style="margin-top: 20px">
+          <div slot="header" class="clearfix">
+            <span>模型数据</span>
+          </div>
+          <el-row v-if="kvtList.length > 0" :gutter="20">
+            <el-col :span="6" v-for="(kvt,index) in kvtList[0]" style="margin-top: 20px">
+              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">
+                <el-descriptions-item label="Type">
+                  <el-tag size="small">{{kvt.type}}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="Value">{{kvt.value=='' ? 'null':kvt.value}}</el-descriptions-item>
+              </el-descriptions>
+            </el-col>
+          </el-row>
+          <el-row v-if="kvtList.length == 0" :gutter="20">
+            <el-col :span="6" v-for="(value,index) in structure" style="margin-top: 20px">
+              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">
+                <el-descriptions-item label="Type">
+                  <el-tag size="small">{{value}}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="Value">null</el-descriptions-item>
+              </el-descriptions>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+
+import {dataAssetList, listSource, structureList} from "@/api/etl/source";
+
+export default {
+  name: "AssetShow",
+  data() {
+    return {
+      source: {},
+      asset: {},
+      sourceList: [],
+      mainHeight: window.innerHeight - 85,
+      defaultProps: {
+        children: 'tableList',
+        label: 'label'
+      },
+      showAuth: null,
+      assetShowList: [
+        {key: "测试.sys_user.id", type: "String", value: 1},
+        {key: "测试.sys_user.name", type: "String", value: "张三"},
+        {key: "测试.sys_user.age", type: "Integer", value: 18},
+        {key: "测试.sys_user.email", type: "String", value: "123@136.com"},
+        {key: "测试.sys_user.sex", type: "String", value: "Y"},
+      ],
+      kvtList: [],
+      structure: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      listSource({}).then(response => {
+        this.sourceList = response.data.rows;
+        this.sourceList.forEach(source => {
+          if (source.type=='PostGreSql'){
+            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
+          }else{
+            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
+          }
+
+          source.dataType = 'dataSource'
+          if (source.tableList!=null){
+            source.tableList.forEach(table => {
+              table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
+              table.dataType = 'dataTable'
+            })
+          }
+        })
+        this.total = response.data.total;
+      });
+    },
+    structureList(){
+      structureList(this.source).then(res => {
+        console.log(res)
+        this.kvtList = res.data.kvtList
+        this.structure = res.data.structure
+      })
+    },
+    handleNodeClick(data) {
+      if (data.dataType === 'dataSource'){
+        this.source = data
+        dataAssetList(data).then(res => {
+          res.data.forEach(table => {
+            table.dataType = "dataTable"
+            table.label=table.tableName+"-"+table.tableComment+"("+table.tableCount+"条)"
+          })
+          data.tableList = res.data
+          this.sourceList[this.sourceList.indexOf(data)].tableList = res.data
+          this.title = data
+        })
+
+      }else{
+        this.asset= data
+        this.sourceList.forEach(source => {
+          if (source.tableList!=null){
+            source.tableList.forEach(table => {
+              if (table.tableName === data.tableName){
+                this.source = source
+              }
+            })
+          }
+        })
+        console.log(this.source)
+        this.source.sql = 'select * from '+(data.modeName == null ? '' : data.modeName+'.')+data.tableName +' limit 1'
+        setTimeout(() => {
+          this.structureList()
+        }, 50);
+
+      }
+      this.showAssets = data.dataType
+    },
+    expandTable( node, resolve){
+      if (node.level === 0) return resolve(this.assetStructureList);
+      const {data} = node;
+      if (data.type === 'dataTable') {
+        return resolve([])
+      }
+      setTimeout(() => {
+        resolve(this.childrenList)
+      }, 500);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-aside {
+  margin: 0;
+  padding: 0;
+  width: 400px;
+  background-color: white;
+}
+.el-main {
+  background-color: #f1f1f1;
+}
+.custom-tree-node{
+  height: 30px;
+}
+.el-descriptions-row>th{
+  width: 200px;
+}
+</style>

src/views/etl/assets/index.vue

@@ -117,6 +117,7 @@ export default {
         this.sourceData = data
       },
       handleNodeClick(data) {
+        this.source = data
         if (data.dataType === 'dataSource'){
           dataAssetList(data).then(res => {
             res.data.forEach(table => {
@@ -135,6 +136,7 @@ export default {
       },
       sql(){
         structureList(this.source).then(res => {
+          console.log(res)
           this.structureList = res.data.kvtList
         })
       },
@@ -142,7 +144,7 @@ export default {
         listSource({}).then(response => {
           this.sourceList = response.data.rows;
           this.sourceList.forEach(source => {
-            if (source.type=='PostGre'){
+            if (source.type=='PostGreSql'){
               source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
             }else{
               source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'

src/views/etl/source/index.vue

@@ -344,9 +344,6 @@ export default {
           ],
           maxWaitSize: [
             {required: true, message: "最大等待次数不能为空", trigger: "blur"}
-          ],
-          modeName: [
-            {required: true, message: "模式名称不能为空", trigger: "blur"}
           ]
         },
       dataSourceParamList: [