fix: 移除隧道连接时检测是否正在使用

frontend/src/views/ops/db/DbTransferFile.vue

@@ -1,28 +1,25 @@
 <template>
     <div class="db-transfer-file">
-        <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :destroy-on-close="true" width="1000px">
+        <el-dialog
+            @open="search()"
+            :title="title"
+            v-model="dialogVisible"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+            body-class="h-[65vh]"
+            width="1000px"
+        >
             <page-table
                 ref="pageTableRef"
-                :data="state.tableData"
                 v-model:query-form="state.query"
+                :page-api="dbApi.dbTransferFileList"
+                :lazy="true"
                 :show-selection="true"
                 v-model:selection-data="state.selectionData"
                 :columns="columns"
-                @page-num-change="
-                    (args: any) => {
-                        state.query.pageNum = args.pageNum;
-                        search();
-                    }
-                "
-                @page-size-change="
-                    (args: any) => {
-                        state.query.pageSize = args.pageNum;
-                        search();
-                    }
-                "
             >
                 <template #tableHeader>
-                    <el-button v-auth="perms.del" :disabled="state.selectionData.length < 1" @click="del()" type="danger" icon="delete">
+                    <el-button v-auth="perms.del" :disabled="state.selectionData.length < 1" @click="onDel()" type="danger" icon="delete">
                         {{ $t('common.delete') }}
                     </el-button>
                 </template>
@@ -41,17 +38,20 @@
                 <template #action="{ data }">
                     <el-button
                         v-if="actionBtns[perms.run] && data.status === DbTransferFileStatusEnum.Success.value"
-                        @click="openRun(data)"
+                        @click="onOpenRun(data)"
                         type="primary"
                         link
-                        >{{ $t('db.run') }}</el-button
                     >
-                    <el-button v-if="data.logId" @click="openLog(data)" type="success" link>{{ $t('db.log') }}</el-button>
+                        {{ $t('db.run') }}
+                    </el-button>
+
+                    <el-button v-if="data.logId" @click="onOpenLog(data)" type="success" link>{{ $t('db.log') }}</el-button>
                 </template>
             </page-table>
-            <TerminalLog v-model:log-id="state.logsDialog.logId" v-model:visible="state.logsDialog.visible" :title="state.logsDialog.title" />
         </el-dialog>
 
+        <TerminalLog v-model:log-id="state.logsDialog.logId" v-model:visible="state.logsDialog.visible" :title="state.logsDialog.title" />
+
         <el-dialog :title="state.runDialog.title" v-model="state.runDialog.visible" :destroy-on-close="true" width="600px">
             <el-form :model="state.runDialog.runForm" ref="runFormRef" label-width="auto" :rules="state.runDialog.formRules">
                 <el-form-item :label="$t('db.dbFileType')" prop="dbType">
@@ -70,17 +70,15 @@
             </el-form>
 
             <template #footer>
-                <div>
-                    <el-button @click="state.runDialog.cancel()">{{ $t('common.cancel') }}</el-button>
-                    <el-button type="primary" :loading="state.runDialog.loading" @click="state.runDialog.btnOk">{{ $t('common.confirm') }}</el-button>
-                </div>
+                <el-button @click="state.runDialog.onCancel()">{{ $t('common.cancel') }}</el-button>
+                <el-button type="primary" :loading="state.runDialog.loading" @click="state.runDialog.onConfirm">{{ $t('common.confirm') }}</el-button>
             </template>
         </el-dialog>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, Ref, ref, watch } from 'vue';
+import { onMounted, reactive, Ref, ref, useTemplateRef, watch } from 'vue';
 import { dbApi } from '@/views/ops/db/api';
 import { getDbDialect } from '@/views/ops/db/dialect';
 import PageTable from '@/components/pagetable/PageTable.vue';
@@ -109,6 +107,8 @@ const props = defineProps({
 
 const dialogVisible = defineModel<boolean>('visible', { default: false });
 
+const pageTableRef: Ref<any> = useTemplateRef('pageTableRef');
+
 const columns = ref([
     TableColumn.new('fileKey', 'db.file').setMinWidth(280).isSlot(),
     TableColumn.new('createTime', 'db.execTime').setMinWidth(180).isTime(),
@@ -168,11 +168,11 @@ const state = reactive({
             targetDbType: '',
         },
         loading: false,
-        cancel: function () {
+        onCancel: function () {
             state.runDialog.visible = false;
             state.runDialog.runForm = {} as any;
         },
-        btnOk: async function () {
+        onConfirm: async function () {
             await useI18nFormValidate(runFormRef);
             if (state.runDialog.runForm.targetDbType !== state.runDialog.runForm.dbType) {
                 ElMessage.warning(t('db.targetDbTypeSelectError', { dbType: state.runDialog.runForm.dbType }));
@@ -181,7 +181,7 @@ const state = reactive({
             state.runDialog.runForm.clientId = getClientId();
             await dbApi.dbTransferFileRun.request(state.runDialog.runForm);
             useI18nOperateSuccessMsg();
-            state.runDialog.cancel();
+            state.runDialog.onCancel();
             await search();
         },
         onSelectRunTargetDb: function (param: any) {
@@ -195,14 +195,13 @@ const state = reactive({
 });
 
 const search = async () => {
-    const { total, list } = await dbApi.dbTransferFileList.request(state.query);
-    state.tableData = list;
-    pageTableRef.value.total = total;
+    pageTableRef.value?.search();
+    // const { total, list } = await dbApi.dbTransferFileList.request(state.query);
+    // state.tableData = list;
+    // pageTableRef.value.total = total;
 };
 
-const pageTableRef: Ref<any> = ref(null);
-
-const del = async function () {
+const onDel = async function () {
     try {
         await useI18nDeleteConfirm(state.selectionData.map((x: any) => x.fileKey).join('、'));
         await dbApi.dbTransferFileDel.request({ fileId: state.selectionData.map((x: any) => x.id).join(',') });
@@ -213,7 +212,7 @@ const del = async function () {
     }
 };
 
-const openLog = function (data: any) {
+const onOpenLog = function (data: any) {
     state.logsDialog.logId = data.logId;
     state.logsDialog.visible = true;
     state.logsDialog.title = t('db.log');
@@ -221,7 +220,7 @@ const openLog = function (data: any) {
 };
 
 // 运行sql，弹出选择需要运行的库，默认运行当前数据库，需要保证数据库类型与sql文件一致
-const openRun = function (data: any) {
+const onOpenRun = function (data: any) {
     state.runDialog.runForm = { id: data.id, dbType: data.fileDbType } as any;
     state.runDialog.visible = true;
 };