feat: 添加缓存列表
This commit is contained in:
374
src/views/monitor/cache/list.vue
vendored
Normal file
374
src/views/monitor/cache/list.vue
vendored
Normal file
@@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<el-card style="height: calc(100vh - 155px)">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIconOffline :icon="Collection" />
|
||||
<span class="header-title">缓存列表</span>
|
||||
</div>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
size="large"
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="refreshCacheNames()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="cacheNames"
|
||||
:height="tableHeight"
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
@row-click="getCacheKeys"
|
||||
>
|
||||
<el-table-column label="序号" width="60" type="index" />
|
||||
|
||||
<el-table-column
|
||||
label="缓存名称"
|
||||
align="center"
|
||||
prop="cacheName"
|
||||
:show-overflow-tooltip="true"
|
||||
:formatter="nameFormatter"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="备注"
|
||||
align="center"
|
||||
prop="remark"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="60"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-popconfirm
|
||||
confirm-button-text="确定"
|
||||
cancel-button-text="取消"
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="确定要删除此缓存名称吗？"
|
||||
@confirm="handleClearCacheName(scope.row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
/>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card style="height: calc(100vh - 155px)">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIconOffline :icon="Key" />
|
||||
<span class="header-title">键名列表</span>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
size="large"
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="refreshCacheKeys()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="subLoading"
|
||||
:data="cacheKeys"
|
||||
:height="tableHeight"
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
@row-click="handleCacheValue"
|
||||
>
|
||||
<el-table-column label="序号" width="60" type="index" />
|
||||
<el-table-column
|
||||
label="缓存键名"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
:formatter="keyFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="60"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-popconfirm
|
||||
confirm-button-text="确定"
|
||||
cancel-button-text="取消"
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="确定要删除此缓存键名吗？"
|
||||
@confirm="handleClearCacheKey(scope.row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
/>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card :bordered="false" style="height: calc(100vh - 155px)">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIconOffline :icon="Document" />
|
||||
<span class="header-title">缓存内容</span>
|
||||
</div>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确定"
|
||||
cancel-button-text="取消"
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="确定要清理所有缓存吗？"
|
||||
@confirm="handleClearCacheAll()"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
style="float: right; padding: 3px 0"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>清理全部</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="cacheForm">
|
||||
<el-row :gutter="32">
|
||||
<el-col :offset="1" :span="22">
|
||||
<el-form-item label="缓存名称:" prop="cacheName">
|
||||
<el-input v-model="cacheForm.cacheName" :readOnly="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="22">
|
||||
<el-form-item label="缓存键名:" prop="cacheKey">
|
||||
<el-input v-model="cacheForm.cacheKey" :readOnly="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="22">
|
||||
<el-form-item label="缓存内容:" prop="cacheValue">
|
||||
<el-input
|
||||
v-model="cacheForm.cacheValue"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
:readOnly="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import {
|
||||
getCachedKeysAPI,
|
||||
getCachedNamesAPI,
|
||||
getCachedInfoAPI,
|
||||
deleteAllCachedAPI,
|
||||
deleteCachedAPI,
|
||||
deleteCachedKeyAPI
|
||||
} from "@/api/monitor";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Collection from "@iconify-icons/ep/collection";
|
||||
import Key from "@iconify-icons/ep/key";
|
||||
import Document from "@iconify-icons/ep/document";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import { message } from "@/utils/message";
|
||||
defineOptions({
|
||||
name: "CacheList"
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const subLoading = ref(false);
|
||||
const tableHeight = ref(window.innerHeight - 180);
|
||||
const cacheNames = ref([]);
|
||||
const cacheKeys = ref([]);
|
||||
const cacheForm = reactive({
|
||||
cacheName: "",
|
||||
cacheKey: "",
|
||||
cacheValue: ""
|
||||
});
|
||||
|
||||
const refreshCacheNames = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getCachedNamesAPI();
|
||||
if (res.success) {
|
||||
cacheNames.value = res.data;
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("获取缓存名称列表失败", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getCacheKeys = async (row: any) => {
|
||||
cacheForm.cacheName = row.cacheName;
|
||||
cacheForm.cacheKey = "";
|
||||
cacheForm.cacheValue = "";
|
||||
subLoading.value = true;
|
||||
try {
|
||||
const res = await getCachedKeysAPI(row.cacheName);
|
||||
if (res.success) {
|
||||
cacheKeys.value = res.data;
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("获取缓存键名列表失败", error);
|
||||
} finally {
|
||||
subLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshCacheKeys = async () => {
|
||||
if (cacheForm.cacheName) {
|
||||
subLoading.value = true;
|
||||
try {
|
||||
const res = await getCachedKeysAPI(cacheForm.cacheName);
|
||||
if (res.success) {
|
||||
cacheKeys.value = res.data;
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("刷新缓存键名列表失败", error);
|
||||
} finally {
|
||||
subLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCacheValue = async (row: any) => {
|
||||
cacheForm.cacheKey = row;
|
||||
try {
|
||||
const res = await getCachedInfoAPI(cacheForm.cacheName, row);
|
||||
if (res.success) {
|
||||
Object.assign(cacheForm, res.data);
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("获取缓存内容失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearCacheName = async (row: any) => {
|
||||
try {
|
||||
const res = await deleteCachedAPI(row.cacheName);
|
||||
if (res.success) {
|
||||
refreshCacheNames();
|
||||
cacheKeys.value = [];
|
||||
cacheForm.cacheName = "";
|
||||
cacheForm.cacheKey = "";
|
||||
cacheForm.cacheValue = "";
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("清除缓存名称失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearCacheKey = async (row: any) => {
|
||||
try {
|
||||
const res = await deleteCachedKeyAPI(row);
|
||||
if (res.success) {
|
||||
refreshCacheKeys();
|
||||
cacheForm.cacheKey = "";
|
||||
cacheForm.cacheValue = "";
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("清除缓存键名失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearCacheAll = async () => {
|
||||
try {
|
||||
const res = await deleteAllCachedAPI();
|
||||
if (res.success) {
|
||||
refreshCacheNames();
|
||||
cacheKeys.value = [];
|
||||
cacheForm.cacheName = "";
|
||||
cacheForm.cacheKey = "";
|
||||
cacheForm.cacheValue = "";
|
||||
}
|
||||
message(res.msg, { type: res.success ? "success" : "error" });
|
||||
} catch (error) {
|
||||
console.error("清除所有缓存失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const nameFormatter = (row: any, column: any, cellValue: any) => {
|
||||
return cellValue || "-";
|
||||
};
|
||||
|
||||
const keyFormatter = (row: any, column: any, cellValue: any) => {
|
||||
return row || "-";
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshCacheNames();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin-left: 0.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.centered-descriptions {
|
||||
:deep(.el-descriptions-item__container) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions-item__label) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions-item__content) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user