| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <template> |
| 懒 | 2 | <div class="app-container"> |
| 3 | <el-row :gutter="10"> | |
| 4 | <el-col :span="8"> | |
| 5 | <el-card style="height: calc(100vh - 125px)"> | |
| 6 | <div slot="header"> | |
| 7 | <span><i class="el-icon-collection"></i> 缓存列表</span> | |
| 8 | <el-button | |
| 9 | style="float: right; padding: 3px 0" | |
| 10 | type="text" | |
| 11 | icon="el-icon-refresh-right" | |
| 12 | @click="refreshCacheNames()" | |
| 13 | ></el-button> | |
| 14 | </div> | |
| 15 | <el-table | |
| 16 | v-loading="loading" | |
| 17 | :data="cacheNames" | |
| 18 | :height="tableHeight" | |
| 19 | highlight-current-row | |
| 20 | @row-click="getCacheKeys" | |
| 21 | style="width: 100%" | |
| 22 | > | |
| 23 | <el-table-column | |
| 24 | label="序号" | |
| 25 | width="60" | |
| 26 | type="index" | |
| 27 | ></el-table-column> | |
| 28 | ||
| 29 | <el-table-column | |
| 30 | label="缓存名称" | |
| 31 | align="center" | |
| 32 | prop="cacheName" | |
| 33 | :show-overflow-tooltip="true" | |
| 34 | :formatter="nameFormatter" | |
| 35 | ></el-table-column> | |
| 36 | ||
| 37 | <el-table-column | |
| 38 | label="备注" | |
| 39 | align="center" | |
| 40 | prop="remark" | |
| 41 | :show-overflow-tooltip="true" | |
| 42 | /> | |
| 43 | <el-table-column | |
| 44 | label="操作" | |
| 45 | width="60" | |
| 46 | align="center" | |
| 47 | class-name="small-padding fixed-width" | |
| 48 | > | |
| 49 | <template slot-scope="scope"> | |
| 50 | <el-button | |
| 51 | size="mini" | |
| 52 | type="text" | |
| 53 | icon="el-icon-delete" | |
| 54 | @click="handleClearCacheName(scope.row)" | |
| 55 | ></el-button> | |
| 56 | </template> | |
| 57 | </el-table-column> | |
| 58 | </el-table> | |
| 59 | </el-card> | |
| 60 | </el-col> | |
| 61 | ||
| 62 | <el-col :span="8"> | |
| 63 | <el-card style="height: calc(100vh - 125px)"> | |
| 64 | <div slot="header"> | |
| 65 | <span><i class="el-icon-key"></i> 键名列表</span> | |
| 66 | <el-button | |
| 67 | style="float: right; padding: 3px 0" | |
| 68 | type="text" | |
| 69 | icon="el-icon-refresh-right" | |
| 70 | @click="refreshCacheKeys()" | |
| 71 | ></el-button> | |
| 72 | </div> | |
| 73 | <el-table | |
| 74 | v-loading="subLoading" | |
| 75 | :data="cacheKeys" | |
| 76 | :height="tableHeight" | |
| 77 | highlight-current-row | |
| 78 | @row-click="handleCacheValue" | |
| 79 | style="width: 100%" | |
| 80 | > | |
| 81 | <el-table-column | |
| 82 | label="序号" | |
| 83 | width="60" | |
| 84 | type="index" | |
| 85 | ></el-table-column> | |
| 86 | <el-table-column | |
| 87 | label="缓存键名" | |
| 88 | align="center" | |
| 89 | :show-overflow-tooltip="true" | |
| 90 | :formatter="keyFormatter" | |
| 91 | > | |
| 92 | </el-table-column> | |
| 93 | <el-table-column | |
| 94 | label="操作" | |
| 95 | width="60" | |
| 96 | align="center" | |
| 97 | class-name="small-padding fixed-width" | |
| 98 | > | |
| 99 | <template slot-scope="scope"> | |
| 100 | <el-button | |
| 101 | size="mini" | |
| 102 | type="text" | |
| 103 | icon="el-icon-delete" | |
| 104 | @click="handleClearCacheKey(scope.row)" | |
| 105 | ></el-button> | |
| 106 | </template> | |
| 107 | </el-table-column> | |
| 108 | </el-table> | |
| 109 | </el-card> | |
| 110 | </el-col> | |
| 111 | ||
| 112 | <el-col :span="8"> | |
| 113 | <el-card :bordered="false" style="height: calc(100vh - 125px)"> | |
| 114 | <div slot="header"> | |
| 115 | <span><i class="el-icon-document"></i> 缓存内容</span> | |
| 116 | <el-button | |
| 117 | style="float: right; padding: 3px 0" | |
| 118 | type="text" | |
| 119 | icon="el-icon-refresh-right" | |
| 120 | @click="handleClearCacheAll()" | |
| 121 | >清理全部</el-button | |
| 122 | > | |
| 123 | </div> | |
| 124 | <el-form :model="cacheForm"> | |
| 125 | <el-row :gutter="32"> | |
| 126 | <el-col :offset="1" :span="22"> | |
| 127 | <el-form-item label="缓存名称:" prop="cacheName"> | |
| 128 | <el-input v-model="cacheForm.cacheName" :readOnly="true" /> | |
| 129 | </el-form-item> | |
| 130 | </el-col> | |
| 131 | <el-col :offset="1" :span="22"> | |
| 132 | <el-form-item label="缓存键名:" prop="cacheKey"> | |
| 133 | <el-input v-model="cacheForm.cacheKey" :readOnly="true" /> | |
| 134 | </el-form-item> | |
| 135 | </el-col> | |
| 136 | <el-col :offset="1" :span="22"> | |
| 137 | <el-form-item label="缓存内容:" prop="cacheValue"> | |
| 138 | <el-input | |
| 139 | v-model="cacheForm.cacheValue" | |
| 140 | type="textarea" | |
| 141 | :rows="8" | |
| 142 | :readOnly="true" | |
| 143 | /> | |
| 144 | </el-form-item> | |
| 145 | </el-col> | |
| 146 | </el-row> | |
| 147 | </el-form> | |
| 148 | </el-card> | |
| 149 | </el-col> | |
| 150 | </el-row> | |
| 151 | </div> | |
| 152 | </template> | |
| 153 | ||
| 154 | <script> | |
| 155 | import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache"; | |
| 156 | ||
| 157 | export default { | |
| 158 | name: "CacheList", | |
| 159 | data() { | |
| 160 | return { | |
| 161 | cacheNames: [], | |
| 162 | cacheKeys: [], | |
| 163 | cacheForm: {}, | |
| 164 | loading: true, | |
| 165 | subLoading: false, | |
| 166 | nowCacheName: "", | |
| 167 | tableHeight: window.innerHeight - 200 | |
| 168 | }; | |
| 169 | }, | |
| 170 | created() { | |
| 171 | this.getCacheNames(); | |
| 172 | }, | |
| 173 | methods: { | |
| 174 | /** 查询缓存名称列表 */ | |
| 175 | getCacheNames() { | |
| 176 | this.loading = true; | |
| 177 | listCacheName().then(response => { | |
| 178 | this.cacheNames = response.data; | |
| 179 | this.loading = false; | |
| 180 | }); | |
| 181 | }, | |
| 182 | /** 刷新缓存名称列表 */ | |
| 183 | refreshCacheNames() { | |
| 184 | this.getCacheNames(); | |
| 185 | this.$modal.msgSuccess("刷新缓存列表成功"); | |
| 186 | }, | |
| 187 | /** 清理指定名称缓存 */ | |
| 188 | handleClearCacheName(row) { | |
| 189 | clearCacheName(row.cacheName).then(response => { | |
| 190 | this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功"); | |
| 191 | this.getCacheKeys(); | |
| 192 | }); | |
| 193 | }, | |
| 194 | /** 查询缓存键名列表 */ | |
| 195 | getCacheKeys(row) { | |
| 196 | const cacheName = row !== undefined ? row.cacheName : this.nowCacheName; | |
| 197 | if (cacheName === "") { | |
| 198 | return; | |
| 199 | } | |
| 200 | this.subLoading = true; | |
| 201 | listCacheKey(cacheName).then(response => { | |
| 202 | this.cacheKeys = response.data; | |
| 203 | this.subLoading = false; | |
| 204 | this.nowCacheName = cacheName; | |
| 205 | }); | |
| 206 | }, | |
| 207 | /** 刷新缓存键名列表 */ | |
| 208 | refreshCacheKeys() { | |
| 209 | this.getCacheKeys(); | |
| 210 | this.$modal.msgSuccess("刷新键名列表成功"); | |
| 211 | }, | |
| 212 | /** 清理指定键名缓存 */ | |
| 213 | handleClearCacheKey(cacheKey) { | |
| 214 | clearCacheKey(cacheKey).then(response => { | |
| 215 | this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功"); | |
| 216 | this.getCacheKeys(); | |
| 217 | }); | |
| 218 | }, | |
| 219 | /** 列表前缀去除 */ | |
| 220 | nameFormatter(row) { | |
| 221 | return row.cacheName.replace(":", ""); | |
| 222 | }, | |
| 223 | /** 键名前缀去除 */ | |
| 224 | keyFormatter(cacheKey) { | |
| 225 | return cacheKey.replace(this.nowCacheName, ""); | |
| 226 | }, | |
| 227 | /** 查询缓存内容详细 */ | |
| 228 | handleCacheValue(cacheKey) { | |
| 229 | getCacheValue(this.nowCacheName, cacheKey).then(response => { | |
| 230 | this.cacheForm = response.data; | |
| 231 | }); | |
| 232 | }, | |
| 233 | /** 清理全部缓存 */ | |
| 234 | handleClearCacheAll() { | |
| 235 | clearCacheAll().then(response => { | |
| 236 | this.$modal.msgSuccess("清理全部缓存成功"); | |
| 237 | }); | |
| 238 | } | |
| 239 | }, | |
| 240 | }; | |
| 241 | </script> | |
