feature(Redis监控): 添加缓存列表

yudao-ui-admin/src/views/infra/redis/index.vue

@@ -67,32 +67,133 @@
     </el-row>
 
     <el-table
-        v-loading="keyListLoad"
-        :data="keyList"
-        row-key="id"
+      v-loading="keyListLoad"
+      :data="keyList"
+      row-key="id"
+      @row-click="openCacheInfo"
     >
       <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 slot-scope="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="scope.row.timeoutType" />
-          <span v-if="scope.row.timeout > 0">({{ scope.row.timeout / 1000 }} 秒)</span>
+          <dict-tag
+            :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE"
+            :value="scope.row.timeoutType"
+          />
+          <span v-if="scope.row.timeout > 0"
+            >({{ scope.row.timeout / 1000 }} 秒)</span
+          >
         </template>
       </el-table-column>
       <el-table-column prop="memo" label="备注" />
     </el-table>
-  </div>
 
+    <!-- 缓存模块信息框 -->
+    <el-dialog
+      :title="keyTemplate + '模块'"
+      :visible.sync="open"
+      width="50vw"
+      append-to-body
+    >
+      <el-row :gutter="10">
+        <el-col :span="10" class="card-box">
+          <el-card style="height: 70vh">
+            <div slot="header">
+              <span>键名列表</span>
+              <el-button
+                style="float: right; padding: 3px 0"
+                type="text"
+                icon="el-icon-refresh-right"
+                @click="refreshCacheKeys"
+              ></el-button>
+            </div>
+            <el-table
+                :data="cachekeys"
+                style="width: 100%"
+                @row-click="handleCacheValue"
+            >
+              <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="14">
+          <el-card :bordered="false" style="height: 70vh">
+            <div slot="header">
+              <span>缓存内容</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="keyTemplate">
+                  <el-input v-model="cacheForm.keyTemplate" :readOnly="true" />
+                </el-form-item>
+              </el-col>
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存键名:" prop="key">
+                  <el-input v-model="cacheForm.key" :readOnly="true" />
+                </el-form-item>
+                </el-col>
+                <el-col :offset="1" :span="22">
+                  <el-form-item label="缓存内容:" prop="value">
+                    <el-input
+                      v-model="cacheForm.value"
+                      type="textarea"
+                      :rows="12"
+                      :readOnly="true"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { getCache, getKeyList } from "@/api/infra/redis";
+import { getCache, getKeyList, getKeyDefineKeys, getKeyValue, clearCacheKey } from "@/api/infra/redis";
 import echarts from "echarts";
 
 export default {
   name: "Server",
-  data() {
+  data () {
     return {
       // 统计命令信息
       commandstats: null,
@@ -103,15 +204,20 @@ export default {
       // key 列表
       keyListLoad: true,
       keyList: [],
+      // 模块弹出框
+      open: false,
+      keyTemplate: "",
+      cachekeys: [],
+      cacheForm: {}
     };
   },
-  created() {
+  created () {
     this.getList();
     this.openLoading();
   },
   methods: {
     /** 查缓存询信息 */
-    getList() {
+    getList () {
       // 查询 Redis 监控信息
       getCache().then((response) => {
         this.cache = response.data;
@@ -174,10 +280,55 @@ export default {
         this.keyListLoad = false;
       });
     },
+
     // 打开加载层
-    openLoading() {
+    openLoading () {
       this.$modal.loading("正在加载缓存监控数据，请稍后！");
     },
+
+    // 打开缓存弹窗
+    openCacheInfo (e) {
+      this.open = true;
+      let keyDefine = e.keyTemplate.substring(0, e.keyTemplate.length - 2);
+      this.keyTemplate = keyDefine;
+      // 加载键名列表
+      this.handleCacheKeys(keyDefine);
+    },
+
+    /** 键名前缀去除 */
+    keyFormatter (cacheKey) {
+      return cacheKey.replace(this.keyTemplate, "");
+    },
+
+    // 获取键名列表
+    handleCacheKeys (keyDefine){
+      const cacheName = keyDefine !== undefined ? keyDefine : this.keyTemplate;
+      getKeyDefineKeys(cacheName).then(response => {
+        this.cachekeys = response.data
+        this.cacheForm = {}
+      })
+    },
+
+    // 获取缓存值
+    handleCacheValue (e){
+      getKeyValue(this.keyTemplate, e).then(response => {
+        this.cacheForm = response.data
+      })
+    },
+
+    // 刷新键名列表
+    refreshCacheKeys(){
+      this.$modal.msgSuccess("刷新键名列表成功");
+      this.handleCacheKeys();
+    },
+
+    // 删除缓存
+    handleClearCacheKey(key){
+      clearCacheKey(key).then(response =>{
+        this.$modal.msgSuccess("清理缓存键名[" + key + "]成功");
+        this.handleCacheKeys();
+      })
+    },
   },
 };
 </script>