数据资产

src/api/etl/source.js

@@ -9,6 +9,22 @@ export function listSource(query) {
   })
 }
 
+export function assetsList(data) {
+  return request({
+    url: '/etl/source/AssetsList',
+    method: 'post',
+    data
+  })
+}
+
+export function structureList(data) {
+  return request({
+    url: '/etl/source/StructureList',
+    method: 'post',
+    data
+  })
+}
+
 // 查询【请填写功能名称】详细
 export function getSource(id) {
   return request({

src/views/etl/assets/index.vue

@@ -1,19 +1,58 @@
 <template>
-  <div></div>
+  <div>
+    <el-container style="height: 80%; border: 1px solid #eee">
+      <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
+        <el-menu :default-openeds="['1', '3']">
+          <el-submenu :index="source.id" v-for="source in sourceList">
+            <template slot="title"><i class="el-icon-message"></i>{{source.dataSourceName}}</template>
+            <el-menu-item-group>
+              <template v-if="source.tableList==null" slot="title">连接失败或数据库中没有表</template>
+              <el-menu-item v-for="(tableName,index) in source.tableList" :index="source.id-index" @click="selectAssets(source,tableName)">{{tableName}}</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+
+      <el-container>
+
+        <el-main>
+          <el-card style="height: 280px">
+            <div slot="header" class="clearfix">
+              <span>查询语句</span>
+            </div>
+            <el-input type="textarea" v-model="source.sql" style="width: 1080px;" :rows="6"></el-input>
+            <el-button style="float: right;margin-top: 20px" @click="sql()">查询</el-button>
+          </el-card>
+          <br>
+          <el-card>
+            <div slot="header" class="clearfix">
+              <span>数据资产</span>
+            </div>
+            <el-table :data="structureList">
+              <el-table-column v-for="(assets,index) in assetsList" :label="index+' ('+assets+')'" width="140">
+                <template slot-scope="scope">
+                  {{scope.row[index].value}}
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-  import {listSource} from "@/api/etl/source";
+import {assetsList, listSource, structureList} from "@/api/etl/source";
 
 export default {
     //import引入的组件需要注入到对象中才能使用"
     components: {},
     props: {},
     data() {
-      //这里存放数据"
-
       return {
         queryParams: {
           pageNum: 1,
@@ -25,6 +64,11 @@ export default {
         total: 0,
         // 【请填写功能名称】表格数据
         sourceList: [],
+        assetsList:[],
+        structureList:[],
+        source: {
+          sql: ''
+        }
       };
     },
     //计算属性 类似于data概念",
@@ -33,37 +77,49 @@ export default {
     watch: {},
     //方法集合",
     methods: {
+      sql(){
+        structureList(this.source).then(res => {
+          console.log(res)
+          this.structureList = res.data.kvtList
+        })
+      },
+      selectAssets(source,tableName) {
+        this.structureList = []
+        this.assetsList = []
+        this.source.sql=''
+        source.tableName = tableName
+        this.source = source
+        assetsList(source).then(res => {
+          console.log(res)
+          this.assetsList = res.data.structure
+        })
+      },
       getList() {
         this.loading = true;
         listSource(this.queryParams).then(response => {
           this.sourceList = response.data.rows;
           this.total = response.data.total;
-          this.loading = false;
+          console.log(this.sourceList)
         });
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
+      this.getList()
     },
     //生命周期 - 挂载完成（可以访问DOM元素）",
     mounted() {
-    },
-    beforeCreate() {
-    }, //生命周期 - 创建之前",
-    beforeMount() {
-    }, //生命周期 - 挂载之前",
-    beforeUpdate() {
-    }, //生命周期 - 更新之前",
-    updated() {
-    }, //生命周期 - 更新之后",
-    beforeDestroy() {
-    }, //生命周期 - 销毁之前",
-    destroyed() {
-    }, //生命周期 - 销毁完成",
-    activated() {
-    } //如果页面有keep-alive缓存功能，这个函数会触发",
+    }
   };
 </script>
 <style scoped>
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  line-height: 60px;
+}
 
+.el-aside {
+  color: #333;
+}
 </style>

src/views/etl/source/index.vue

@@ -378,7 +378,7 @@ export default {
         }
       })
     },
-    /** 查询【请填写功能名称】列表 */
+    /** 查询数据源列表 */
     getList() {
       this.loading = true;
       listSource(this.queryParams).then(response => {