😎缓存页面调整

This commit is contained in:
zuohuaijun 2024-07-01 13:42:47 +08:00
parent 428c6cf716
commit 4b3c5d97e1

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="sys-cache-container"> <div class="sys-cache-container">
<NoticeBar text="系统缓存数据管理,请慎重操作!" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" /> <NoticeBar text="系统缓存数据管理,请慎重操作!" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
<el-row :gutter="8" style="width: 100%"> <el-row :gutter="5" class="mt5">
<el-col :span="8" :xs="24"> <el-col :span="8" :xs="24">
<el-card shadow="hover" header="缓存列表" v-loading="state.loading" class="mt8"> <el-card shadow="hover" header="缓存列表" style="height: calc(100vh - 156px)" v-loading="state.loading" body-style="height:100%;overflow:auto;padding:5px 5px 50px 5px;">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>缓存列表</span> <span>缓存列表</span>
@ -21,12 +21,11 @@
highlight-current highlight-current
check-strictly check-strictly
default-expand-all default-expand-all
accordion
/> />
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="16" :xs="24"> <el-col :span="16" :xs="24">
<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" class="mt8"> <el-card shadow="hover" header="缓存数据" style="height: calc(100vh - 156px)" v-loading="state.loadingData" body-style="height:calc(100% - 36px);overflow:auto;">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>{{ `缓存数据${state.cacheKey ? `${state.cacheKey}` : ''}` }}</span> <span>{{ `缓存数据${state.cacheKey ? `${state.cacheKey}` : ''}` }}</span>
@ -54,12 +53,13 @@ const treeRef = ref<InstanceType<typeof ElTree>>();
const currentNode = ref<any>({}); const currentNode = ref<any>({});
const state = reactive({ const state = reactive({
loading: false, loading: false,
loading1: false, loadingData: false,
cacheData: [] as any, cacheData: [] as any,
cacheValue: undefined as any, cacheValue: undefined as any,
cacheKey: undefined, cacheKey: undefined,
}); });
//
onMounted(async () => { onMounted(async () => {
handleQuery(); handleQuery();
}); });
@ -122,7 +122,7 @@ const nodeClick = async (node: any) => {
if (node.id == 0) return; if (node.id == 0) return;
currentNode.value = node; currentNode.value = node;
state.loading1 = true; state.loadingData = true;
var res = await getAPI(SysCacheApi).apiSysCacheValueKeyGet(node.id); var res = await getAPI(SysCacheApi).apiSysCacheValueKeyGet(node.id);
// state.cacheValue = JSON.parse(res.data.result); // state.cacheValue = JSON.parse(res.data.result);
var result = res.data.result; var result = res.data.result;
@ -142,7 +142,7 @@ const nodeClick = async (node: any) => {
} }
state.cacheKey = node.id; state.cacheKey = node.id;
state.loading1 = false; state.loadingData = false;
}; };
</script> </script>
@ -152,4 +152,7 @@ const nodeClick = async (node: any) => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
:deep(.el-card__header) {
padding: 6px !important;
}
</style> </style>