TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-02 15:30:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
meilin.huang
2023-12-11 11:00:20 +08:00
parent e444500835
commit d00bd2ed72
9 changed files with 91 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
mayfly_go_web/src/components/pagetable/PageTable.vue
View File

@@ -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;
}

12
mayfly_go_web/src/views/ops/db/DbList.vue
View File

@@ -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();
};

20
mayfly_go_web/src/views/ops/db/DbSqlExecLog.vue
View File

@@ -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 () => {
pageTableRef.value.search();
if (state.query.dbId) {
pageTableRef.value.search();
}
};
const onShowRollbackSql = async (sqlExecLog: any) => {

10
mayfly_go_web/src/views/ops/machine/MachineList.vue
View File

@@ -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;

37
mayfly_go_web/src/views/ops/machine/MachineRec.vue
View File

@@ -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
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()"
>
<page-table ref="pageTableRef" :page-api="machineApi.termOpRecs" :lazy="true" height="100%" v-model:query-form="query" :columns="columns">
<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 });
state.data = res.list;
state.total = res.total;
pageTableRef.value.search();
};
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">

13
mayfly_go_web/src/views/ops/machine/ScriptManage.vue
View File

@@ -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) {

2
mayfly_go_web/src/views/ops/machine/api.ts
View File

@@ -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}'),
};

10
mayfly_go_web/src/views/ops/mongo/MongoList.vue
View File

@@ -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;

10
mayfly_go_web/src/views/ops/redis/RedisList.vue
View File

@@ -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;