feat: 表格添加刷新按钮

mayfly_go_web/src/views/ops/component/TagTree.vue

@@ -19,6 +19,11 @@
                             <span class="ml3">
                                 <slot name="label" :data="data"> {{ data.label }}</slot>
                             </span>
+                          
+                            <span class="ml3">
+                                <slot name="option" :data="data"></slot>
+                            </span>
+                          
                         </span>
                     </template>
                 </el-tree>

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

@@ -59,6 +59,11 @@
 
                         <SvgIcon name="Files"  v-if="data.type == NodeType.SqlMenu || data.type == NodeType.Sql" color="#f56c6c" />
                     </template>
+                    <template #option="{data}">
+                      <span v-if="data.type == NodeType.TableMenu">
+                        <el-link @click="reloadTables(data.key)" icon="refresh" :underline="false"></el-link>
+                      </span>
+                    </template>
                 </tag-tree>
             </el-col>
             <el-col :span="20">
@@ -125,6 +130,7 @@ const state = reactive({
     nowDbInst: {} as DbInst,
     db: '', // 当前操作的数据库
     activeName: '',
+    reloadStatus: false,
     tabs,
     dataTabsTableHeight: '600',
     editorHeight: '600',
@@ -257,7 +263,8 @@ const nodeClick = async (data: any) => {
 
 const getTables = async (params: any) => {
     const { id, db } = params;
-    let tables = await DbInst.getInst(id).loadTables(db);
+    let tables = await DbInst.getInst(id).loadTables(db, state.reloadStatus);
+    state.reloadStatus=false
     return tables.map((x: any) => {
         return new TagTreeNode(`${id}.${db}.${x.tableName}`, x.tableName, NodeType.Table).withIsLeaf(true).withParams({
             id,
@@ -406,6 +413,11 @@ const getSqlMenuNodeKey = (dbId: number, db: string) => {
     return `${dbId}.${db}.sql-menu`
 }
 
+const reloadTables = (nodeKey:string) => {
+  state.reloadStatus=true
+  tagTreeRef.value.reloadNode(nodeKey);
+}
+
 const registerSqlCompletionItemProvider = () => {
     // 参考 https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
     self.completionItemProvider = self.completionItemProvider || monaco.languages.registerCompletionItemProvider('sql', {

mayfly_go_web/src/views/ops/db/db.ts

@@ -58,13 +58,14 @@ export class DbInst {
     /**
      * 加载数据库表信息
      * @param dbName 数据库名
+     * @param reload 是否重新请求接口获取数据
      * @returns 表信息
      */
-    async loadTables(dbName: string) {
+    async loadTables(dbName: string, reload?: boolean) {
         const db = this.getDb(dbName);
         // 优先从 table map中获取
         let tables = db.tables;
-        if (tables) {
+        if (!reload && tables) {
             return tables;
         }
         console.log(`load tables -> dbName: ${dbName}`);