feat: 数据操作按钮跳转

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -714,7 +714,6 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
 onMounted(() => {
     self.completionItemProvider?.dispose()
     setHeight();
-    instManage.loadSelectScheme()
     // 监听浏览器窗口大小变化,更新对应组件高度
     window.onresize = () => setHeight();
 });
@@ -1734,13 +1733,15 @@ const loadSchemaTables = async (inst: any, schema: string, fn: Function) => {
   }else {
     tables.forEach((a:any)=>a.show=true)
   }
-  fn()
+  fn(state.instances.tables[id+schema])
 }
 
 // 选择数据库实例
-const changeInstance = (inst: any) => {
+const changeInstance = (inst: any, fn?: Function) => {
+  debugger
   state.dbId = inst.id
   state.dbType = inst.type
+  fn && fn()
 }
 // 选择数据库
 const changeSchema = (inst: any, schema: string) => {
@@ -1800,23 +1801,6 @@ const addQueryTab = async () => {
   
 }
 
-const instManage = {
-  loadSelectScheme: ()=>{
-    let {tagPath, dbId, db} = store.state.sqlExecInfo.dbOptInfo;
-    if(dbId){
-      state.dbId = dbId;
-      state.db = db;
-      addQueryTab()
-      // fixme 差展开菜单树至对应的db
-    }
-    
-  }
-}
-
-watch(()=>store.state.sqlExecInfo.dbOptInfo, () => {
-  instManage.loadSelectScheme()
-})
-
 </script>
 
 <style lang="scss">

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) => {
+const changeInstance = (inst : any, fn: Function) => {
-  emits('changeInstance', inst)
+  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">

mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue

@@ -159,12 +159,12 @@ const {
     jsonEditorDialog,
 } = toRefs(state)
 
-const changeInstance = async (inst: any) => {
+const changeInstance = async (inst: any, fn: Function) => {
   if (inst) {
     if (!state.instances.dbs[inst.id]) {
       const res = await mongoApi.databases.request({id: inst.id});
       state.instances.dbs[inst.id] = res.Databases;
-      console.log(res.Databases)
+      fn && fn(res.Databases)
     }
   }
 }
@@ -179,7 +179,7 @@ const loadTableNames = async (inst: any, database: string, fn:Function) => {
     tables.push({tableName: tb, show: true})
   }
   state.instances.tables[inst.id+database] = tables
-  fn()
+  fn(tables)
 }
 
 const changeCollection = (inst: any, schema: string, collection: string) => {

mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue

@@ -7,7 +7,7 @@
         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>
@@ -18,7 +18,7 @@
             <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
                          :index="'mongo-instance-' + inst.id"
                          :key="'mongo-instance-' + inst.id"
-                         @click.prevent="changeInstance(inst)"
+                         @click.prevent="changeInstance(inst, ()=>{})"
             >
               <template #title>
                 <el-popover
@@ -55,7 +55,7 @@
                 <!-- 第四级 01：表 -->
                 <el-sub-menu :index="inst.id + db.Name + '-table'" >
                   <template #title>
-                    <div style="width: 100%" @click="loadTableNames(inst, db.Name)">
+                    <div style="width: 100%" @click="loadTableNames(inst, db.Name, ()=>{})">
                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><Calendar color="#409eff"/></el-icon>
                       <span>集合</span>
                       <el-icon v-show="state.loading[inst.id + db.Name]" class="is-loading"><Loading /></el-icon>
@@ -97,8 +97,9 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive} from 'vue';
+import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
 import {formatByteSize} from '@/common/utils/format';
+import {store} from '@/store';
 
 const props = defineProps({
   instances: {
@@ -117,6 +118,8 @@ const setHeight = () => {
   state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
 }
 
+const menuRef = ref(null) as Ref
+
 const state = reactive({
   instanceMenuMaxHeight: '800px',
   nowSchema: '',
@@ -135,9 +138,10 @@ const initLoadInstances = () => {
 /**
  * 改变选中的数据库实例
  * @param inst 选中的实例对象
+ * @param fn 选中的实例对象后的回调事件
  */
-const changeInstance = (inst : any) => {
+const changeInstance = (inst : any, fn: Function) => {
-  emits('changeInstance', inst)
+  emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -151,12 +155,14 @@ const changeSchema = (inst : any, schema: string) => {
 /**
  * 加载schema下所有表
  * @param inst 数据库实例
+ * @param fn 加载表名后的回调函数，参数：表名list
  * @param schema database名
  */
-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)
   })
 }
 /**
@@ -181,6 +187,38 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
   })
 }
 
+const selectDb = async (val?: any) => {
+  let info = val || store.state.mongoDbOptInfo.dbOptInfo;
+  if (info && info.dbId) {
+    const {tagPath, dbId, db} = info
+    menuRef.value.open(tagPath);
+    menuRef.value.open('mongo-instance-' + dbId);
+    await changeInstance({id: dbId}, () => {
+      // 加载数据库
+      nextTick(async () => {
+        menuRef.value.open(dbId + db)
+        // 加载集合列表
+        await nextTick(async () => {
+          await loadTableNames({id: dbId}, db, (res: any[]) => {
+            // 展开集合列表
+            menuRef.value.open(dbId + db + '-table')
+            // 加载第一张集合数据
+            loadTableData({id: dbId}, db, res[0].tableName)
+          })
+        })
+      })
+    })
+  }
+}
+
+onMounted(()=>{
+  selectDb();
+})
+
+watch(()=>store.state.mongoDbOptInfo.dbOptInfo, async newValue => {
+  await selectDb(newValue)
+})
+
 </script>
 
 <style lang="scss">

mayfly_go_web/src/views/ops/redis/DataOperation.vue

@@ -335,7 +335,7 @@ const initLoadInstances = async ()=>{
   }
 }
 
-const changeInstance = async (inst: any) => {
+const changeInstance = async (inst: any, fn: Function) => {
   let dbs = state.instances.dbs[inst.id] || []
   if(dbs.length <=0 ){
     const res = await redisApi.redisInfo.request({ id: inst.id, host:inst.host });
@@ -348,8 +348,7 @@ const changeInstance = async (inst: any) => {
   }
 
   state.instances.dbs[inst.id] = dbs
-  
+  fn && fn(dbs)
-  
 }
 
 /** 初始化加载db数据 */

mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue

@@ -7,7 +7,7 @@
         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>
@@ -16,8 +16,8 @@
             </template>
             <!-- 第二级：数据库实例 -->
             <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
-                         :index="'mongo-instance-' + inst.id"
+                         :index="'redis-instance-' + inst.id"
-                         :key="'mongo-instance-' + inst.id"
+                         :key="'redis-instance-' + inst.id"
                          @click.prevent="changeInstance(inst)"
             >
               <template #title>
@@ -61,7 +61,8 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive} from 'vue';
+import {onBeforeMount, onMounted, reactive, Ref, ref, watch} from 'vue';
+import {store} from '@/store';
 
 defineProps({
   instances: {
@@ -80,12 +81,13 @@ const setHeight = () => {
   state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
 }
 
+const menuRef = ref(null) as Ref;
+
 const state = reactive({
   instanceMenuMaxHeight: '800px',
   nowSchema: '',
   filterParam: {},
   loading: {},
-  
 })
 
 /**
@@ -98,9 +100,10 @@ const initLoadInstances = () => {
 /**
  * 改变选中的数据库实例
  * @param inst 选中的实例对象
+ * @param fn 选中的实例后的回调函数
  */
-const changeInstance = (inst : any) => {
+const changeInstance = (inst : any, fn?:Function) => {
-  emits('changeInstance', inst)
+  emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -112,6 +115,26 @@ const changeSchema = (inst : any, schema: string) => {
   emits('changeSchema', inst, schema)
 }
 
+const selectDb = async (val?: any) => {
+  const info = val || store.state.redisDbOptInfo.dbOptInfo
+  if (info && info.dbId) {
+    const {tagPath, dbId} = info
+    menuRef.value.open(tagPath);
+    menuRef.value.open('redis-instance-' + dbId);
+    await changeInstance({id: dbId}, async (dbs: any[]) => {
+      await changeSchema({id: dbId}, dbs[0]?.name)
+    })
+  }
+}
+
+onMounted(()=>{
+  selectDb();
+})
+
+watch(()=>store.state.redisDbOptInfo.dbOptInfo, async newValue =>{
+  await selectDb(newValue)
+})
+
 </script>
 
 <style lang="scss">