Redis 菜单的重构,移除对 key 的管理

This commit is contained in:
YunaiV
2023-04-06 19:49:58 +08:00
parent 06e1e27652
commit 87ac04d9a7
7 changed files with 34 additions and 150 deletions

View File

@ -4,6 +4,7 @@
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-row>
<!-- 基本信息 -->
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-descriptions title="基本信息" :column="6" border>
@ -47,106 +48,33 @@
</el-descriptions>
</el-card>
</el-col>
<!-- 命令统计 -->
<el-col :span="12" class="mt-3">
<el-card :gutter="12" shadow="hover">
<div ref="commandStatsRef" class="h-88"></div>
</el-card>
</el-col>
<!-- 内存使用量统计 -->
<el-col :span="12" class="mt-3">
<el-card class="ml-3" :gutter="12" shadow="hover">
<div ref="usedmemory" class="h-88"></div>
</el-card>
</el-col>
</el-row>
<el-row class="mt-3">
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-table
v-loading="keyListLoad"
:data="keyList"
row-key="id"
@row-click="openKeyTemplate"
>
<el-table-column prop="keyTemplate" label="Key 模板" width="200" />
<el-table-column prop="keyType" label="Key 类型" width="100" />
<el-table-column prop="valueType" label="Value 类型" />
<el-table-column prop="timeoutType" label="超时时间" width="200">
<template #default="{ row }">
<DictTag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="row?.timeoutType" />
<span v-if="row?.timeout > 0">({{ row?.timeout / 1000 }} )</span>
</template>
</el-table-column>
<el-table-column prop="memo" label="备注" />
</el-table>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
<XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
<el-row>
<el-col :span="14" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>键名列表</span>
</div>
</template>
<el-table :data="cacheKeys" style="width: 100%" @row-click="handleKeyValue">
<el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true">
<template #default="{ row }">
{{ row }}
</template>
</el-table-column>
<el-table-column label="操作" align="right" width="60">
<template #default="{ row }">
<XTextButton preIcon="ep:delete" @click="handleDeleteKey(row)" />
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="10" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>缓存内容</span>
<XTextButton
preIcon="ep:refresh"
title="清理全部"
@click="handleDeleteKeys(keyTemplate)"
class="float-right p-1"
/>
</div>
</template>
<el-descriptions :column="1">
<el-descriptions-item label="缓存键名:">{{ cacheForm.key }}</el-descriptions-item>
<el-descriptions-item label="缓存内容:">{{ cacheForm.value }}</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
</el-row>
</XModal>
</template>
<script setup lang="ts" name="Redis">
import * as echarts from 'echarts'
import { DICT_TYPE } from '@/utils/dict'
import * as RedisApi from '@/api/infra/redis'
import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
const cache = ref<RedisMonitorInfoVO>()
const keyListLoad = ref(true)
const keyList = ref<RedisKeyInfo[]>([])
// 基本信息
const readRedisInfo = async () => {
const data = await RedisApi.getCache()
cache.value = data
loadEchartOptions(data.commandStats)
const redisKeysInfo = await RedisApi.getKeyDefineList()
keyList.value = redisKeysInfo
keyListLoad.value = false //加载完成
}
// 图表
const commandStatsRef = ref<HTMLElement>()
@ -241,33 +169,7 @@ const loadEchartOptions = (stats) => {
]
})
}
const dialogVisible = ref(false)
const keyTemplate = ref('')
const cacheKeys = ref()
const cacheForm = ref<{
key: string
value: string
}>({
key: '',
value: ''
})
const openKeyTemplate = async (row: RedisKeyInfo) => {
keyTemplate.value = row.keyTemplate
cacheKeys.value = await RedisApi.getKeyList(row.keyTemplate)
dialogVisible.value = true
}
const handleDeleteKey = async (row) => {
RedisApi.deleteKey(row)
message.success(t('common.delSuccess'))
}
const handleDeleteKeys = async (row) => {
RedisApi.deleteKeys(row)
message.success(t('common.delSuccess'))
}
const handleKeyValue = async (row) => {
const res = await RedisApi.getKeyValue(row)
cacheForm.value = res
}
onBeforeMount(() => {
readRedisInfo()
})