fix: PageTable调整后一些页面问题修复

mayfly_go_web/src/components/pagetable/PageTable.vue

@@ -223,15 +223,19 @@ const props = defineProps({
         type: Api,
         required: true,
     },
-    // 数据处理回调函数，用于将请求回来的数据二次加工处理等
-    dataHandlerFn: {
-        type: Function,
-    },
     // 懒加载，即需要手动调用search方法才可调接口获取数据，不会在mounted的时候调用。
     lazy: {
         type: Boolean,
         default: false,
     },
+    // 执行查询时对查询参数进行处理，调整等
+    beforeQueryFn: {
+        type: Function,
+    },
+    // 数据处理回调函数，用于将请求回来的数据二次加工处理等
+    dataHandlerFn: {
+        type: Function,
+    },
     // 查询条件配置
     query: {
         type: Array<TableQuery>,
@@ -347,13 +351,23 @@ const handleSelectionChange = (val: any) => {
 const reqPageApi = async () => {
     try {
         state.loading = true;
-        const res = await props.pageApi?.request(queryForm_.value);
+
+        let qf = queryForm_.value;
+        if (props.beforeQueryFn) {
+            qf = await props.beforeQueryFn(qf);
+        }
+
+        const res = await props.pageApi?.request(qf);
+        if (!res) {
+            return;
+        }
+
+        state.total = res.total;
         if (props.dataHandlerFn) {
             state.data = await props.dataHandlerFn(res.list);
         } else {
             state.data = res.list;
         }
-        state.total = res.total;
     } finally {
         state.loading = false;
     }

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

@@ -3,6 +3,7 @@
         <page-table
             ref="pageTableRef"
             :page-api="dbApi.dbs"
+            :before-query-fn="checkRouteTagPath"
             :query="queryConfig"
             v-model:query-form="query"
             :show-selection="true"
@@ -130,6 +131,7 @@
             :before-close="onBeforeCloseSqlExecDialog"
             :close-on-click-modal="false"
             v-model="sqlExecLogDialog.visible"
+            :destroy-on-close="true"
         >
             <db-sql-exec-log :db-id="sqlExecLogDialog.dbId" :dbs="sqlExecLogDialog.dbs" />
         </el-dialog>
@@ -264,11 +266,15 @@ onMounted(async () => {
     if (Object.keys(actionBtns).length > 0) {
         columns.value.push(actionColumn);
     }
-    if (route.query.tagPath) {
-        state.query.tagPath = route.query.tagPath as string;
-    }
 });
 
+const checkRouteTagPath = (query: any) => {
+    if (route.query.tagPath) {
+        query.tagPath = route.query.tagPath as string;
+    }
+    return query;
+};
+
 const search = async () => {
     pageTableRef.value.search();
 };

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

@@ -1,6 +1,14 @@
 <template>
     <div class="db-sql-exec-log">
-        <page-table ref="pageTableRef" :page-api="dbApi.getSqlExecs" height="100%" :query="queryConfig" v-model:query-form="query" :columns="columns">
+        <page-table
+            ref="pageTableRef"
+            :page-api="dbApi.getSqlExecs"
+            :lazy="true"
+            height="100%"
+            :query="queryConfig"
+            v-model:query-form="query"
+            :columns="columns"
+        >
             <template #dbSelect>
                 <el-select v-model="query.db" placeholder="请选择数据库" style="width: 200px" filterable clearable>
                     <el-option v-for="item in dbs" :key="item" :label="`${item}`" :value="item"> </el-option>
@@ -88,7 +96,11 @@ const state = reactive({
 
 const { query, rollbackSqlDialog } = toRefs(state);
 
-onMounted(async () => {});
+onMounted(async () => {
+    state.query.dbId = props.dbId;
+    state.query.pageNum = 1;
+    await searchSqlExecLog();
+});
 
 watch(props, async () => {
     state.query.dbId = props.dbId;
@@ -97,7 +109,9 @@ watch(props, async () => {
 });
 
 const searchSqlExecLog = async () => {
+    if (state.query.dbId) {
         pageTableRef.value.search();
+    }
 };
 
 const onShowRollbackSql = async (sqlExecLog: any) => {

mayfly_go_web/src/views/ops/machine/MachineList.vue

@@ -3,6 +3,7 @@
         <page-table
             ref="pageTableRef"
             :page-api="machineApi.list"
+            :before-query-fn="checkRouteTagPath"
             :query="queryConfig"
             v-model:query-form="params"
             :show-selection="true"
@@ -284,11 +285,14 @@ const state = reactive({
 const { tags, params, infoDialog, selectionData, serviceDialog, processDialog, fileDialog, machineStatsDialog, machineEditDialog, machineRecDialog } =
     toRefs(state);
 
-onMounted(async () => {
+onMounted(async () => {});
+
+const checkRouteTagPath = (query: any) => {
     if (route.query.tagPath) {
-        state.params.tagPath = route.query.tagPath as string;
+        query.tagPath = route.query.tagPath as string;
     }
-});
+    return query;
+};
 
 const handleCommand = (commond: any) => {
     const data = commond.data;

mayfly_go_web/src/views/ops/machine/MachineRec.vue

@@ -2,23 +2,14 @@
     <div id="terminalRecDialog">
         <el-dialog
             :title="title"
-            v-if="dialogVisible"
             v-model="dialogVisible"
             :before-close="handleClose"
             :close-on-click-modal="false"
             :destroy-on-close="true"
             width="800"
+            @open="getTermOps()"
         >
-            <page-table
+            <page-table ref="pageTableRef" :page-api="machineApi.termOpRecs" :lazy="true" height="100%" v-model:query-form="query" :columns="columns">
-                height="100%"
-                v-model:query-form="query"
-                :data="data"
-                :columns="columns"
-                :total="total"
-                v-model:page-size="query.pageSize"
-                v-model:page-num="query.pageNum"
-                @pageChange="getTermOps()"
-            >
                 <template #action="{ data }">
                     <el-button @click="playRec(data)" loading-icon="loading" :loading="data.playRecLoding" type="primary" link>回放</el-button>
                 </template>
@@ -39,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, watch, ref, reactive, nextTick } from 'vue';
+import { toRefs, watch, ref, reactive, nextTick, Ref } from 'vue';
 import { machineApi } from './api';
 import * as AsciinemaPlayer from 'asciinema-player';
 import 'asciinema-player/dist/bundle/asciinema-player.css';
@@ -63,36 +54,32 @@ const columns = [
 ];
 
 const playerRef = ref(null);
+const pageTableRef: Ref<any> = ref(null);
 const state = reactive({
     dialogVisible: false,
     title: '',
-    machineId: 0,
-    data: [],
-    total: 0,
     query: {
         pageNum: 1,
         pageSize: 10,
+        machineId: 0,
     },
 
     playerDialogVisible: false,
 });
 
-const { dialogVisible, query, data, total, playerDialogVisible } = toRefs(state);
+const { dialogVisible, query, playerDialogVisible } = toRefs(state);
 
 watch(props, async (newValue: any) => {
     const visible = newValue.visible;
-    if (visible) {
-        state.machineId = newValue.machineId;
-        state.title = newValue.title;
-        await getTermOps();
-    }
     state.dialogVisible = visible;
+    if (visible) {
+        state.query.machineId = newValue.machineId;
+        state.title = newValue.title;
+    }
 });
 
 const getTermOps = async () => {
-    const res = await machineApi.termOpRecs.request({ id: state.machineId, ...state.query });
+    pageTableRef.value.search();
-    state.data = res.list;
-    state.total = res.total;
 };
 
 let player: any = null;
@@ -136,8 +123,6 @@ const handleClose = () => {
     emit('update:visible', false);
     emit('update:machineId', null);
     emit('cancel');
-    state.data = [];
-    state.total = 0;
 };
 </script>
 <style lang="scss">

mayfly_go_web/src/views/ops/machine/ScriptManage.vue

@@ -12,6 +12,7 @@
             <page-table
                 ref="pageTableRef"
                 :page-api="machineApi.scripts"
+                :before-query-fn="checkScriptType"
                 :lazy="true"
                 :query="queryConfig"
                 v-model:query-form="query"
@@ -154,10 +155,20 @@ watch(props, async (newValue) => {
 });
 
 const getScripts = async () => {
-    state.query.machineId = state.query.type == ScriptTypeEnum.Private.value ? props.machineId : 9999999;
     pageTableRef.value.search();
 };
 
+const checkScriptType = (query: any) => {
+    if (!query.type) {
+        query.machineId = props.machineId;
+        query.type = ScriptTypeEnum.Private.value;
+    } else {
+        query.machineId = query.type == ScriptTypeEnum.Private.value ? props.machineId : 9999999;
+    }
+
+    return query;
+};
+
 const runScript = async (script: any) => {
     // 如果存在参数，则弹窗输入参数后执行
     if (script.params) {

mayfly_go_web/src/views/ops/machine/api.ts

@@ -44,7 +44,7 @@ export const machineApi = {
     delConf: Api.newDelete('/machines/{machineId}/files/{id}'),
     terminal: Api.newGet('/api/machines/{id}/terminal'),
     // 机器终端操作记录列表
-    termOpRecs: Api.newGet('/machines/{id}/term-recs'),
+    termOpRecs: Api.newGet('/machines/{machineId}/term-recs'),
     // 机器终端操作记录详情
     termOpRec: Api.newGet('/machines/{id}/term-recs/{recId}'),
 };

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

@@ -3,6 +3,7 @@
         <page-table
             ref="pageTableRef"
             :page-api="mongoApi.mongoList"
+            :before-query-fn="checkRouteTagPath"
             :query="queryConfig"
             v-model:query-form="query"
             :show-selection="true"
@@ -97,11 +98,14 @@ const state = reactive({
 
 const { tags, selectionData, query, mongoEditDialog, dbsVisible, usersVisible } = toRefs(state);
 
-onMounted(async () => {
+onMounted(async () => {});
+
+const checkRouteTagPath = (query: any) => {
     if (route.query.tagPath) {
-        state.query.tagPath = route.query.tagPath as string;
+        query.tagPath = route.query.tagPath as string;
     }
-});
+    return query;
+};
 
 const showDatabases = async (id: number) => {
     state.dbOps.dbId = id;

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

@@ -3,6 +3,7 @@
         <page-table
             ref="pageTableRef"
             :page-api="redisApi.redisList"
+            :before-query-fn="checkRouteTagPath"
             :query="queryConfig"
             v-model:query-form="query"
             :show-selection="true"
@@ -218,11 +219,14 @@ const state = reactive({
 
 const { tags, selectionData, query, detailDialog, clusterInfoDialog, infoDialog, redisEditDialog } = toRefs(state);
 
-onMounted(async () => {
+onMounted(async () => {});
+
+const checkRouteTagPath = (query: any) => {
     if (route.query.tagPath) {
-        state.query.tagPath = route.query.tagPath as string;
+        query.tagPath = route.query.tagPath as string;
     }
-});
+    return query;
+};
 
 const showDetail = (detail: any) => {
     state.detailDialog.data = detail;