数据库列表

src/api/detabase/detabase.js

@@ -34,6 +34,15 @@ export function selectDatabaseList(data) {
   })
 }
 
+//查询数据库下表名
+export function selectedDatabaseList(data) {
+  return request({
+    url: '/detabase/detabase/selectedDatabaseList',
+    method: 'post',
+    data: data
+  })
+}
+
 // 新增数据源
 export function addDetabase(data) {
   return request({

src/views/detabase/analysis/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <el-container style="height: 80%; border: 1px solid #eee">
+      <el-aside width="400px" style="background-color: rgb(238, 241, 246)">
+        <el-menu @select="handleSelectdata">
+          <el-submenu
+            v-for="(item, index) in menuList"
+                      :key="index"
+                      :index="item.id"
+          >
+          <span slot="title" @click="handSubmenuTitle(item)">{{ item.name }}</span>
+            <el-menu-item
+              v-for="(database, dbIndex) in item.databaseList"
+              :key="dbIndex"
+              :index="item.id + '-' + (dbIndex + 1)"
+            >
+              {{ database }}
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+
+      <el-container>
+        <el-header style="text-align: right; font-size: 12px">
+          <el-dropdown>
+            <i class="el-icon-setting" style="margin-right: 15px"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>查看</el-dropdown-item>
+              <el-dropdown-item>新增</el-dropdown-item>
+              <el-dropdown-item>删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <span>王小虎</span>
+        </el-header>
+
+        <el-main>
+          <el-table :data="tableData">
+
+            <el-table-column prop="date" label="日期" width="140">
+            </el-table-column>
+            <el-table-column prop="name" label="姓名" width="120">
+            </el-table-column>
+            <el-table-column prop="address" label="地址">
+            </el-table-column>
+          </el-table>
+        </el-main>
+      </el-container>
+    </el-container>
+
+  </div>
+</template>
+<script>
+import {
+  listDetabase,
+  selectDatabaseList,
+  selectedDatabase,
+  selectedDatabaseList,
+  selectedMenu
+} from "@/api/detabase/detabase";
+
+export default {
+  name: 'Index',
+  data() {
+    const item = {
+      date: '2016-05-02',
+      name: '王小虎',
+      address: '上海市普陀区金沙江路 1518 弄'
+    };
+    return {
+      tableData: Array(20).fill(item),
+      menuList:[
+
+      ],
+      /*数据源查询条件*/
+      queryParams: {},
+      databaseList:[],
+      tableList:[]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /*选中标题*/
+    handSubmenuTitle(item){
+      let databaseConnect={};
+      databaseConnect.username=item.username;
+      databaseConnect.password=item.password;
+      databaseConnect.host=item.host;
+      databaseConnect.type=item.type;
+      selectDatabaseList(databaseConnect).then(
+        res=>{
+          item.databaseList=res.data
+        }
+      )
+      console.log(item)
+    },
+    /*选中下拉*/
+    handleSelectdata(key){
+      console.log(key)
+      const [menuId, databaseIndex] = key.split('-').map(Number);
+      console.log(menuId, databaseIndex)
+      const selectedMenu = this.menuList.find(item => item.id == menuId);
+      console.log(selectedMenu)
+      if (selectedMenu) {
+        const selectedDatabase = selectedMenu.databaseList[databaseIndex - 1];
+        console.log(selectedDatabase);
+        //根据selectedDatabase 名字 找下面包含的表
+        let databaseConnect={};
+        databaseConnect.username=selectedMenu.username;
+        databaseConnect.password=selectedMenu.password;
+        databaseConnect.host=selectedMenu.host;
+        databaseConnect.port=selectedMenu.port;
+        databaseConnect.type=selectedMenu.type;
+        databaseConnect.tableName=selectedDatabase
+
+        console.log(databaseConnect)
+        selectedDatabaseList(databaseConnect).then(
+          res=>{
+            this.tableList=res.data
+            console.log(res.data)
+          }
+        )
+      }
+    },
+    /** 查询数据源列表 */
+    getList() {
+      this.loading = true;
+      listDetabase(this.queryParams).then(response => {
+        const menuListWithStringIds = response.data.rows.map(item => ({
+          ...item, // 复制对象的其他属性
+          id: String(item.id),
+          name: item.name,
+          host: item.host,
+          port: item.port,
+          username: item.username,
+          password: item.password,
+          type: item.type,
+          connectionParam: item.connectionParam,
+          databaseList:[
+
+          ]
+        }));
+
+        this.menuList=menuListWithStringIds
+        console.log(this.menuList)
+      });
+    },
+  }
+}
+</script>
+<style>
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+</style>