From 8a1c08baaf0ee002b471996b195e7da180b90209 Mon Sep 17 00:00:00 2001
From: feige <791364011@qq.com>
Date: 星期一, 21 七月 2025 09:38:47 +0800
Subject: [PATCH] 增加了前端代码库
---
src/views/monitor/cache/list.vue | 241 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 241 insertions(+), 0 deletions(-)
diff --git a/src/views/monitor/cache/list.vue b/src/views/monitor/cache/list.vue
new file mode 100644
index 0000000..9e0523e
--- /dev/null
+++ b/src/views/monitor/cache/list.vue
@@ -0,0 +1,241 @@
+<template>
+ <div class="app-container">
+ <el-row :gutter="10">
+ <el-col :span="8">
+ <el-card style="height: calc(100vh - 125px)">
+ <div slot="header">
+ <span><i class="el-icon-collection"></i> 缂撳瓨鍒楄〃</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ type="text"
+ icon="el-icon-refresh-right"
+ @click="refreshCacheNames()"
+ ></el-button>
+ </div>
+ <el-table
+ v-loading="loading"
+ :data="cacheNames"
+ :height="tableHeight"
+ highlight-current-row
+ @row-click="getCacheKeys"
+ style="width: 100%"
+ >
+ <el-table-column
+ label="搴忓彿"
+ width="60"
+ type="index"
+ ></el-table-column>
+
+ <el-table-column
+ label="缂撳瓨鍚嶇О"
+ align="center"
+ prop="cacheName"
+ :show-overflow-tooltip="true"
+ :formatter="nameFormatter"
+ ></el-table-column>
+
+ <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 slot-scope="scope">
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-delete"
+ @click="handleClearCacheName(scope.row)"
+ ></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ </el-col>
+
+ <el-col :span="8">
+ <el-card style="height: calc(100vh - 125px)">
+ <div slot="header">
+ <span><i class="el-icon-key"></i> 閿悕鍒楄〃</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ type="text"
+ icon="el-icon-refresh-right"
+ @click="refreshCacheKeys()"
+ ></el-button>
+ </div>
+ <el-table
+ v-loading="subLoading"
+ :data="cacheKeys"
+ :height="tableHeight"
+ highlight-current-row
+ @row-click="handleCacheValue"
+ style="width: 100%"
+ >
+ <el-table-column
+ label="搴忓彿"
+ width="60"
+ type="index"
+ ></el-table-column>
+ <el-table-column
+ label="缂撳瓨閿悕"
+ align="center"
+ :show-overflow-tooltip="true"
+ :formatter="keyFormatter"
+ >
+ </el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ width="60"
+ align="center"
+ class-name="small-padding fixed-width"
+ >
+ <template slot-scope="scope">
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-delete"
+ @click="handleClearCacheKey(scope.row)"
+ ></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ </el-col>
+
+ <el-col :span="8">
+ <el-card :bordered="false" style="height: calc(100vh - 125px)">
+ <div slot="header">
+ <span><i class="el-icon-document"></i> 缂撳瓨鍐呭</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ type="text"
+ icon="el-icon-refresh-right"
+ @click="handleClearCacheAll()"
+ >娓呯悊鍏ㄩ儴</el-button
+ >
+ </div>
+ <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>
+import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache"
+
+export default {
+ name: "CacheList",
+ data() {
+ return {
+ cacheNames: [],
+ cacheKeys: [],
+ cacheForm: {},
+ loading: true,
+ subLoading: false,
+ nowCacheName: "",
+ tableHeight: window.innerHeight - 200
+ }
+ },
+ created() {
+ this.getCacheNames()
+ },
+ methods: {
+ /** 鏌ヨ缂撳瓨鍚嶇О鍒楄〃 */
+ getCacheNames() {
+ this.loading = true
+ listCacheName().then(response => {
+ this.cacheNames = response.data
+ this.loading = false
+ })
+ },
+ /** 鍒锋柊缂撳瓨鍚嶇О鍒楄〃 */
+ refreshCacheNames() {
+ this.getCacheNames()
+ this.$modal.msgSuccess("鍒锋柊缂撳瓨鍒楄〃鎴愬姛")
+ },
+ /** 娓呯悊鎸囧畾鍚嶇О缂撳瓨 */
+ handleClearCacheName(row) {
+ clearCacheName(row.cacheName).then(response => {
+ this.$modal.msgSuccess("娓呯悊缂撳瓨鍚嶇О[" + row.cacheName + "]鎴愬姛")
+ this.getCacheKeys()
+ })
+ },
+ /** 鏌ヨ缂撳瓨閿悕鍒楄〃 */
+ getCacheKeys(row) {
+ const cacheName = row !== undefined ? row.cacheName : this.nowCacheName
+ if (cacheName === "") {
+ return
+ }
+ this.subLoading = true
+ listCacheKey(cacheName).then(response => {
+ this.cacheKeys = response.data
+ this.subLoading = false
+ this.nowCacheName = cacheName
+ })
+ },
+ /** 鍒锋柊缂撳瓨閿悕鍒楄〃 */
+ refreshCacheKeys() {
+ this.getCacheKeys()
+ this.$modal.msgSuccess("鍒锋柊閿悕鍒楄〃鎴愬姛")
+ },
+ /** 娓呯悊鎸囧畾閿悕缂撳瓨 */
+ handleClearCacheKey(cacheKey) {
+ clearCacheKey(cacheKey).then(response => {
+ this.$modal.msgSuccess("娓呯悊缂撳瓨閿悕[" + cacheKey + "]鎴愬姛")
+ this.getCacheKeys()
+ })
+ },
+ /** 鍒楄〃鍓嶇紑鍘婚櫎 */
+ nameFormatter(row) {
+ return row.cacheName.replace(":", "")
+ },
+ /** 閿悕鍓嶇紑鍘婚櫎 */
+ keyFormatter(cacheKey) {
+ return cacheKey.replace(this.nowCacheName, "")
+ },
+ /** 鏌ヨ缂撳瓨鍐呭璇︾粏 */
+ handleCacheValue(cacheKey) {
+ getCacheValue(this.nowCacheName, cacheKey).then(response => {
+ this.cacheForm = response.data
+ })
+ },
+ /** 娓呯悊鍏ㄩ儴缂撳瓨 */
+ handleClearCacheAll() {
+ clearCacheAll().then(response => {
+ this.$modal.msgSuccess("娓呯悊鍏ㄩ儴缂撳瓨鎴愬姛")
+ })
+ }
+ }
+}
+</script>
--
Gitblit v1.9.1