144 lines
5.2 KiB
Vue
144 lines
5.2 KiB
Vue
<template>
|
|
<PageWrapper>
|
|
<div class="cache-box">
|
|
<el-card :bordered="false" header="缓存列表">
|
|
<el-table empty-text="暂无数据" border :height="fwbHeight" :data="cacheNameData" row-key="cacheName"
|
|
ref="cacheNameTable" highlight-current-row @row-click="onCheckedCacheName">
|
|
<el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="缓存名称" prop="cacheName"
|
|
min-width="100"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="备注" prop="message"></el-table-column>
|
|
<el-table-column align="center" label="操作" width="60" fixed="right">
|
|
<template #default="{ row}">
|
|
<el-icon :color="`var(--el-color-danger)`" size="16" @click="handleDelete(row)" style="cursor: pointer;"><Delete /></el-icon>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card :bordered="false" header="键名列表">
|
|
<el-table empty-text="暂无数据" border :height="fwbHeight" :data="cacheKeyData" row-key="cacheKey"
|
|
ref="cacheKeyTable" highlight-current-row @row-click="onCheckedCachKey">
|
|
<el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="缓存键名" prop="cacheKey" min-width="100"></el-table-column>
|
|
<el-table-column align="center" label="操作" width="60" fixed="right">
|
|
<template #default="{ row}">
|
|
<el-icon :color="`var(--el-color-danger)`" size="16" @click="handleDelete(row)" style="cursor: pointer;"><Delete /></el-icon>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card :bordered="false" header="缓存内容">
|
|
<el-form ref="form" :model="formData" label-width="80px" label-position="top" v-if="cacheKeyData.length > 0">
|
|
<el-form-item label="缓存名称：">
|
|
<el-input v-model="formData.cacheName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="缓存键值：">
|
|
<el-input v-model="formData.cacheKey"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="缓存内容：">
|
|
<el-input v-model="formData.cacheValue" type="textarea"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div v-else>暂无数据</div>
|
|
</el-card>
|
|
</div>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted,nextTick,reactive } from 'vue';
|
|
import { getCacheNames, getCacheKeys, getCacheValue } from '@/api/monitor/cache';
|
|
import { message, confirm } from "@/utils/auth";
|
|
|
|
const cacheNameTable = ref()
|
|
const cacheKeyTable = ref()
|
|
const cacheNameData = ref([])
|
|
const cacheKeyData = ref([])
|
|
const formData = reactive({
|
|
cacheKey:"",
|
|
cacheName:"",
|
|
cacheValue:"",
|
|
message:''
|
|
})
|
|
const cacheName = ref('')
|
|
const cacheKey = ref('')
|
|
const fwbHeight = document.body.clientHeight -230
|
|
|
|
//选择缓存名
|
|
const onCheckedCacheName = (row) => {
|
|
cacheName.value = row.cacheName
|
|
loadCachekeys()
|
|
}
|
|
//选择缓存key
|
|
const onCheckedCachKey = (row) => {
|
|
cacheKey.value = row.cacheKey
|
|
loadCacheValue()
|
|
}
|
|
|
|
//加载缓存名列表
|
|
const loadCacheNames = async () => {
|
|
const result = await getCacheNames();
|
|
cacheNameData.value = result
|
|
cacheName.value = result.length > 0 ? result[0].cacheName : ''
|
|
if (cacheName.value) {
|
|
nextTick(() => {
|
|
cacheNameTable.value.setCurrentRow(result[0])
|
|
})
|
|
loadCachekeys()
|
|
}
|
|
};
|
|
//加载缓存key列表
|
|
const loadCachekeys = async () => {
|
|
let datas = []
|
|
const result = await getCacheKeys(cacheName.value);
|
|
result.map(item=>{
|
|
datas.push({
|
|
cacheKey:item.split(':')[1]
|
|
})
|
|
})
|
|
cacheKeyData.value = datas
|
|
cacheKey.value = datas.length > 0 ? datas[0].cacheKey : ''
|
|
if (cacheKey.value) {
|
|
nextTick(() => {
|
|
cacheKeyTable.value.setCurrentRow(datas[0])
|
|
})
|
|
loadCacheValue()
|
|
}
|
|
};
|
|
//加载缓存value列表
|
|
const loadCacheValue = async () => {
|
|
const data = await getCacheValue({ cacheName: cacheName.value,cacheKey:cacheKey.value });
|
|
for (const key in formData) {
|
|
if (data[key] != null && data[key] != undefined) {
|
|
formData[key] = data[key];
|
|
}
|
|
}
|
|
}
|
|
const handleDelete = async(row)=> {
|
|
await confirm('确定要删除？');
|
|
// await onlineOut(row.tokenId)
|
|
message("删除成功");
|
|
// loadTable()
|
|
}
|
|
onMounted(() => {
|
|
loadCacheNames()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.cache-box {
|
|
display: flex;
|
|
|
|
>.el-card {
|
|
flex: 1;
|
|
&:nth-child(2) {
|
|
margin:0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style> |