support to show database and tables

console/atest-ui/src/views/DataManager.vue

@@ -10,7 +10,25 @@ const sqlQuery = ref('')
 const queryResult = ref([])
 const columns = ref([])
 const queryTip = ref('')
+const databases = ref([])
+const tables = ref([])
+const currentDatabase = ref('')
 
+interface Tree {
+    label: string
+    children?: Tree[]
+}
+const tablesTree: Tree[] = []
+watch(tables, (t) => {
+    // clear tablesTree
+    tablesTree.splice(0, tablesTree.length)
+    t.forEach((i) => {
+        tablesTree.push({
+            label: i,
+        })
+    })
+    console.log(tablesTree)
+})
 watch(store, (s) => {
     stores.value.forEach((e: Store) => {
         if (e.name === s) {
@@ -46,7 +64,7 @@ const ormDataHandler = (data) => {
     const result = []
     const cols = new Set()
 
-    data.Rows.forEach(e => {
+    data.items.forEach(e => {
         const obj = {}
         e.data.forEach(item => {
             obj[item.key] = item.value
@@ -55,6 +73,8 @@ const ormDataHandler = (data) => {
         result.push(obj)
     })
 
+    databases.value = data.meta.databases
+    tables.value = data.meta.tables
     queryResult.value = result
     columns.value = Array.from(cols).sort((a, b) => {
         if (a === 'id') return -1;
@@ -103,6 +123,16 @@ const executeQuery = async () => {
 
 <template>
   <div>
+    <el-container>
+      <el-aside width="200px">
+          <el-select v-model="currentDatabase" placeholder="Select database">
+              <el-option v-for="item in databases" :key="item" :label="item"
+                         :value="item"></el-option>
+          </el-select>
+          <el-tree :data="tablesTree" />
+      </el-aside>
+      <el-container>
+          <el-header>
               <el-form @submit.prevent="executeQuery">
                   <el-row :gutter="10">
                       <el-col :span="2">
@@ -125,8 +155,13 @@ const executeQuery = async () => {
                       </el-col>
                   </el-row>
               </el-form>
+          </el-header>
+          <el-main>
               <el-table :data="queryResult">
                   <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col"></el-table-column>
               </el-table>
+          </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>