feat: 数据操作按钮跳转

mayfly_go_web/src/views/ops/db/component/InstanceTree.vue

@@ -2,7 +2,7 @@
   <div class="instances-box layout-aside">
     <el-row type="flex" justify="space-between">
       <el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight,height: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
-        <el-menu background-color="transparent" :collapse-transition="false">
+        <el-menu background-color="transparent" ref="menuRef">
           <!-- 第一级：tag -->
           <el-sub-menu v-for="tag of instances.tags" :index="tag.tagPath" :key="tag.tagPath">
             <template #title>
@@ -13,7 +13,7 @@
             <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
                          :index="'instance-' + inst.id"
                          :key="'instance-' + inst.id"
-                         @click="changeInstance(inst)"
+                         @click="changeInstance(inst, ()=>{})"
             >
               <template #title>
                 <el-popover
@@ -49,7 +49,7 @@
                 <!-- 第四级 01：表 -->
                 <el-sub-menu :index="inst.id + schema + '-table'" >
                   <template #title>
-                    <div style="width: 100%" @click="loadTableNames(inst, schema)">
+                    <div style="width: 100%" @click="loadTableNames(inst, schema, ()=>{})">
                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><Calendar color="#409eff"/></el-icon>
                       <span>表</span>
                       <el-icon v-show="state.loading[inst.id + schema]" class="is-loading"><Loading /></el-icon>
@@ -113,7 +113,8 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive} from 'vue';
+import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
+import {store} from '@/store';
 
 const props = defineProps({
   instanceMenuMaxHeight: {
@@ -130,6 +131,8 @@ onBeforeMount(async ()=>{
   await initLoadInstances()
 })
 
+const menuRef = ref(null) as Ref
+
 const state = reactive({
   nowSchema: '',
   filterParam: {},
@@ -146,9 +149,10 @@ const initLoadInstances = () => {
 /**
  * 改变选中的数据库实例
  * @param inst 选中的实例对象
+ * @param fn 选中的实例对象后的回调函数
  */
-const changeInstance = (inst : any) => {
-  emits('changeInstance', inst)
+const changeInstance = (inst : any, fn: Function) => {
+  emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -163,11 +167,13 @@ const changeSchema = (inst : any, schema: string) => {
  * 加载schema下所有表
  * @param inst 数据库实例
  * @param schema database名
+ * @param fn 加载表集合后的回调函数，参数：res 表集合
  */
-const loadTableNames = async (inst: any, schema: string) => {
+const loadTableNames = async (inst: any, schema: string, fn: Function) => {
   state.loading[inst.id+schema] = true
-  await emits('loadTableNames', inst, schema, ()=>{
+  await emits('loadTableNames', inst, schema, (res: any[])=>{
     state.loading[inst.id+schema] = false
+    fn && fn(res)
   })
 }
 /**
@@ -192,6 +198,39 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
   })
 }
 
+const selectDb = async (val?: any) => {
+  let info = val || store.state.sqlExecInfo.dbOptInfo;
+  if (info && info.dbId) {
+    const {tagPath, dbId, db} = info
+    menuRef.value.open(tagPath);
+    menuRef.value.open('instance-' + dbId);
+    await changeInstance({id: dbId}, () => {
+      // 加载数据库
+      nextTick(async () => {
+        menuRef.value.open(dbId + db)
+        state.nowSchema = (dbId+db)
+        // 加载集合列表
+        await nextTick(async () => {
+          await loadTableNames({id: dbId}, db, (res: any[]) => {
+            // 展开集合列表
+            menuRef.value.open(dbId + db + '-table')
+            console.log(res)
+          })
+        })
+      })
+    })
+  }
+}
+
+onMounted(()=>{
+  selectDb();
+})
+
+watch(()=>store.state.sqlExecInfo.dbOptInfo, async newValue => {
+  await selectDb(newValue)
+})
+
+
 </script>
 
 <style lang="scss">