From e89cf96ff46cafae3ce474d5e420c1eaaac0ca35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Mon, 6 Feb 2023 14:50:57 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=9E=E4=BE=8B=E6=A0=91?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=8A=A0=E5=AE=BD=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E3=80=81=E8=A1=A8=E5=8A=A0=E8=BD=BD=E4=B8=AD?=
 =?UTF-8?q?loading=E7=8A=B6=E6=80=81=E3=80=81=E6=96=B0=E5=BB=BA=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E7=AD=89=E6=8C=89=E9=92=AE=E8=87=AA=E6=88=90=E4=B8=80?=
 =?UTF-8?q?=E8=A1=8C=E3=80=81=E5=8A=A0=E5=AE=BD=E5=AE=9E=E4=BE=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=AE=BD=E5=BA=A6=E3=80=81=E5=AE=9E=E4=BE=8B=E6=A0=91?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E9=BB=98=E8=AE=A4=E6=92=91=E6=BB=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/src/views/ops/db/SqlExec.vue    | 15 +++++++------
 .../views/ops/db/component/InstanceTree.vue   | 21 ++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 150253ed..8b1dc84c 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -1,8 +1,10 @@
 <template>
     <div>
       <el-row type="flex">
-        <el-col :span="3"  >
+        <el-col :span="24">
           <el-button type="primary" icon="plus" @click="addQueryTab" size="small">新建查询</el-button>
+        </el-col>
+        <el-col :span="4" style="border-left: 1px solid #eee; margin-top: 10px" >
           <InstanceTree
               :instance-menu-max-height="state.instanceMenuMaxHeight"
               :instances="state.instances"
@@ -13,8 +15,8 @@
               @load-table-data="loadTableData"
           />
         </el-col>
-        <el-col :span="21">
-        <el-container id="data-exec" style="border: 1px solid #eee; margin-top: 1px">
+        <el-col :span="20">
+        <el-container id="data-exec" style="border-left: 1px solid #eee; margin-top: 10px">
             <el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 100%" v-model="state.activeName">
                 <el-tab-pane closable v-for="q in state.queryTabs" :key="q.id" :label="q.label" :name="q.name" >
                     <div>
@@ -199,7 +201,7 @@
                             layout="prev, pager, next, total, jumper" v-model:current-page="dt.pageNum"
                             :page-size="defalutLimit"></el-pagination>
                     </el-row>
-                  <div style="height: 20px; font-size: 12px; padding: 0 10px;line-height: 20px; color: #606266"><span>{{dt.sql}}</span></div>
+                  <div style=" font-size: 12px; padding: 0 10px; color: #606266"><span>{{dt.sql}}</span></div>
                 </el-tab-pane>
             </el-tabs>
         </el-container>
@@ -724,7 +726,7 @@ const setHeight = () => {
     // 默认300px
     state.monacoOptions.height = window.innerHeight - 550 + 'px'
     state.dataTabsTableHeight = window.innerHeight - 219;
-    state.instanceMenuMaxHeight = window.innerHeight - 130 + 'px';
+    state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
 };
 
 /**
@@ -1721,7 +1723,7 @@ const loadInstances = async () => {
 }
 
 // 加载实例对应的所有表名
-const loadSchemaTables = async (inst: any, schema: string) => {
+const loadSchemaTables = async (inst: any, schema: string, fn: Function) => {
   changeSchema(inst, schema)
   let {id} = inst
   let tables = state.instances.tables[id+schema];
@@ -1732,6 +1734,7 @@ const loadSchemaTables = async (inst: any, schema: string) => {
   }else {
     tables.forEach((a:any)=>a.show=true)
   }
+  fn()
 }
 
 // 选择数据库实例
diff --git a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
index 08d9583f..a57dcb80 100644
--- a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="instances-box layout-aside">
     <el-row type="flex" justify="space-between">
-      <el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
-        <el-menu background-color="transparent">
+      <el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight,height: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
+        <el-menu background-color="transparent" :collapse-transition="false">
           <!-- 第一级：tag -->
           <el-sub-menu v-for="tag of instances.tags" :index="tag.tagPath" :key="tag.tagPath">
             <template #title>
@@ -20,7 +20,7 @@
                     placement="right-start"
                     title="数据库实例信息"
                     trigger="hover"
-                    :width="180"
+                    :width="210"
                 >
                   <template #reference>
                     <span>&nbsp;&nbsp;<el-icon><MostlyCloudy color="#409eff"/></el-icon>{{ inst.name }}</span>
@@ -52,6 +52,7 @@
                     <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>
                     </div>
                   </template>
                   <el-menu-item :index="inst.id + schema + '-tableSearch'"
@@ -130,8 +131,9 @@ onBeforeMount(async ()=>{
 })
 
 const state = reactive({
-  nowSchema:'',
-  filterParam: {}
+  nowSchema: '',
+  filterParam: {},
+  loading: {}
 })
 
 /**
@@ -162,8 +164,11 @@ const changeSchema = (inst : any, schema: string) => {
  * @param inst 数据库实例
  * @param schema database名
  */
-const loadTableNames = (inst: any, schema: string) => {
-  emits('loadTableNames', inst, schema)
+const loadTableNames = async (inst: any, schema: string) => {
+  state.loading[inst.id+schema] = true
+  await emits('loadTableNames', inst, schema, ()=>{
+    state.loading[inst.id+schema] = false
+  })
 }
 /**
  * 加载选中表数据
@@ -192,7 +197,7 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
 <style lang="scss">
 .instances-box {
   .el-menu{
-    width: 210px;
+    width: 275px;
   }
   .el-sub-menu{
     .checked{