新增、修改缓存列表

acupuncture-后台/src/api/monitor/cache.js

@@ -1,57 +1,65 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询缓存详细
 export function getCache() {
   return request({
-    url: '/monitor/cache',
-    method: 'get'
-  })
+    url: "/monitor/cache",
+    method: "get",
+  });
 }
 
 // 查询缓存名称列表
 export function listCacheName() {
   return request({
-    url: '/monitor/cache/getNames',
-    method: 'get'
-  })
+    url: "/monitor/cache/getNames",
+    method: "get",
+  });
 }
 
 // 查询缓存键名列表
 export function listCacheKey(cacheName) {
   return request({
-    url: '/monitor/cache/getKeys/' + cacheName,
-    method: 'get'
-  })
+    url: "/monitor/cache/getKeys/" + cacheName,
+    method: "get",
+  });
 }
 
 // 查询缓存内容
 export function getCacheValue(cacheName, cacheKey) {
   return request({
-    url: '/monitor/cache/getValue/' + cacheName + '/' + cacheKey,
-    method: 'get'
-  })
+    url: "/monitor/cache/getValue/" + cacheName + "/" + cacheKey,
+    method: "get",
+  });
 }
 
 // 清理指定名称缓存
 export function clearCacheName(cacheName) {
   return request({
-    url: '/monitor/cache/clearCacheName/' + cacheName,
-    method: 'delete'
-  })
+    url: "/monitor/cache/clearCacheName/" + cacheName,
+    method: "delete",
+  });
 }
 
 // 清理指定键名缓存
 export function clearCacheKey(cacheKey) {
   return request({
-    url: '/monitor/cache/clearCacheKey/' + cacheKey,
-    method: 'delete'
-  })
+    url: "/monitor/cache/clearCacheKey/" + cacheKey,
+    method: "delete",
+  });
 }
 
 // 清理全部缓存
 export function clearCacheAll() {
   return request({
-    url: '/monitor/cache/clearCacheAll',
-    method: 'delete'
-  })
+    url: "/monitor/cache/clearCacheAll",
+    method: "delete",
+  });
+}
+// 新增修改
+export function cacheAdd(query) {
+  return request({
+    url: "/monitor/cache/add",
+    method: "get",
+    params: query,
+  });
 }

acupuncture-后台/src/views/monitor/cache/list.vue

@@ -11,6 +11,12 @@
               icon="el-icon-refresh-right"
               @click="refreshCacheNames()"
             ></el-button>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              icon="el-icon-plus"
+              @click="handelAdd()"
+            ></el-button>
           </div>
           <el-table
             v-loading="loading"
@@ -47,6 +53,12 @@
               class-name="small-padding fixed-width"
             >
               <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpd(scope.row)"
+                ></el-button>
                 <el-button
                   size="mini"
                   type="text"
@@ -148,33 +160,106 @@
         </el-card>
       </el-col>
     </el-row>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="620px"
+      append-to-body
+      class="popup"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="缓存名称" prop="cacheName">
+          <el-input
+            v-model="form.cacheName"
+            placeholder="请输入缓存名称"
+            :disabled="title == '修改缓存'"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label=" " style="margin-bottom: 0px">
+          <template slot-scope="scope">
+            <el-button type="primary" @click="submit" size="mini"
+              >确 定</el-button
+            >
+            <el-button @click="open = false">取 消</el-button>
+          </template>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
+import {
+  listCacheName,
+  listCacheKey,
+  getCacheValue,
+  clearCacheName,
+  clearCacheKey,
+  clearCacheAll,
+  cacheAdd,
+} from "@/api/monitor/cache";
 
 export default {
   name: "CacheList",
   data() {
     return {
+      form: {
+        cacheName: "",
+        remark: "",
+      },
+      rules: {
+        cacheName: [
+          { required: true, message: "缓存名称不能为空", trigger: "blur" },
+        ],
+      },
+      open: false,
       cacheNames: [],
       cacheKeys: [],
       cacheForm: {},
       loading: true,
       subLoading: false,
       nowCacheName: "",
-      tableHeight: window.innerHeight - 200
+      tableHeight: window.innerHeight - 200,
     };
   },
   created() {
     this.getCacheNames();
   },
   methods: {
+    handleUpd(row) {
+      this.title = "修改缓存";
+      this.form = {
+        cacheName: row.cacheName,
+        remark: row.remark,
+      };
+      this.open = true;
+    },
+    handelAdd() {
+      this.title = "新增缓存";
+      this.open = true;
+      this.form = {
+        cacheName: "",
+        remark: "",
+      };
+    },
+    submit() {
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          cacheAdd(this.form).then((response) => {
+            this.$modal.msgSuccess("添加成功");
+            this.open = false;
+            this.getCacheNames();
+          });
+        }
+      });
+    },
     /** 查询缓存名称列表 */
     getCacheNames() {
       this.loading = true;
-      listCacheName().then(response => {
+      listCacheName().then((response) => {
         this.cacheNames = response.data;
         this.loading = false;
       });
@@ -186,7 +271,7 @@ export default {
     },
     /** 清理指定名称缓存 */
     handleClearCacheName(row) {
-      clearCacheName(row.cacheName).then(response => {
+      clearCacheName(row.cacheName).then((response) => {
         this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功");
         this.getCacheKeys();
       });
@@ -198,7 +283,7 @@ export default {
         return;
       }
       this.subLoading = true;
-      listCacheKey(cacheName).then(response => {
+      listCacheKey(cacheName).then((response) => {
         this.cacheKeys = response.data;
         this.subLoading = false;
         this.nowCacheName = cacheName;
@@ -211,7 +296,7 @@ export default {
     },
     /** 清理指定键名缓存 */
     handleClearCacheKey(cacheKey) {
-      clearCacheKey(cacheKey).then(response => {
+      clearCacheKey(cacheKey).then((response) => {
         this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功");
         this.getCacheKeys();
       });
@@ -226,16 +311,16 @@ export default {
     },
     /** 查询缓存内容详细 */
     handleCacheValue(cacheKey) {
-      getCacheValue(this.nowCacheName, cacheKey).then(response => {
+      getCacheValue(this.nowCacheName, cacheKey).then((response) => {
         this.cacheForm = response.data;
       });
     },
     /** 清理全部缓存 */
     handleClearCacheAll() {
-      clearCacheAll().then(response => {
+      clearCacheAll().then((response) => {
         this.$modal.msgSuccess("清理全部缓存成功");
       });
-    }
+    },
   },
 };
 </script>