20240716

src/api/monitor/cache.js

@@ -1,9 +1,46 @@
 import request from '@/utils/request'
 
 // 查询缓存详细
-export function getCache() {
+export function getCacheInfo() {
   return request({
     url: '/monitor/cache',
     method: 'get'
   })
 }
+
+// 根据条件查询key
+export function getCacheKeys(data = {}) {
+  return request({
+    url: '/monitor/cache/keys',
+    method: 'post',
+    data
+  })
+}
+
+// 根据key查询缓存信息
+export function getCache(data = {}) {
+  return request({
+    url: '/monitor/cache/get',
+    method: 'post',
+    data
+  })
+}
+
+// 根据key修改缓存信息
+export function updateCache(data = {}) {
+  return request({
+    url: '/monitor/cache/update',
+    method: 'post',
+    data
+  })
+}
+
+
+// 根据key删除缓存信息
+export function deleteCache(data = {}) {
+  return request({
+    url: '/monitor/cache/delete',
+    method: 'post',
+    data
+  })
+}

src/router/modules/monitor.js

@@ -25,6 +25,12 @@ const monitorRouter = {
       meta: { title: '缓存监控' }
     },
     {
+      path: 'cacheList',
+      component: () => import('@/views/admin/monitor/cache/list'),
+      name: 'cacheList',
+      meta: { title: '缓存管理' }
+    },
+    {
       path: 'druid',
       component: () => import('@/views/admin/monitor/druid'),
       name: 'druid',

src/utils/mixin.js

@@ -68,6 +68,7 @@ export default {
     },
     // 获取页面列表
     async getList({ rows = this.rows } = {}) {
+      console.log(this.queryForm)
       this.listLoading = true
       const { code, retObj } = await this.listApi({ rows, ...this.queryForm })
       if (code === 0) {
@@ -152,10 +153,14 @@ export default {
       this.parentEdit = Object.assign({}, row)
     },
     // 查询
-    search() {
+    search(type) {
       this.page = 1
       this.pageTotal = 0
-      this.getPageList()
+      if (type) {
+        this.getList()
+      } else {
+        this.getPageList()
+      }
     },
     // 调用子组件
     toggleEdit(bool, index) {
@@ -235,31 +240,15 @@ export default {
     },
 
     // 重置搜索条件
-    resetQuery() {
+    resetQuery(type) {
       this.page = 1
       this.rows = 20
       this.pageTotal = 0
       this.queryForm = {}
-      this.getPageList()
-    },
-    // 腾退重置搜索条件
-    resetQueryQuit(type) {
-      this.page = 1
-      this.rows = 10
-      this.pageTotal = 0
-      this.queryForm = { type: type }
-      this.getPageList()
-    },
-    // 获取页面弹框列表
-    async getHouse(api, arr) {
-      const { code, retObj } = await this[api]({
-        page: this.pageHouse,
-        rows: 10,
-        ...this.houseForm
-      })
-      if (code === 0) {
-        this[arr] = retObj.list
-        this.pageTotalHouse = retObj.total
+      if (type) {
+        this.getList()
+      } else {
+        this.getPageList()
       }
     },
     // 每页显示条数变更

src/views/admin/dict/components/tenantTreeDict.vue

@@ -5,20 +5,23 @@
       <el-button :type="butType" :icon="butIcon" circle :title="treeText" @click="toggleTree" />
     </el-tooltip>
     <!-- 租户树 -->
-    <div v-show="showTree" class="tree-title">所属租户</div>
-    <el-tree
-      v-show="showTree"
-      ref="tree"
-      :data="treeData"
-      :props="defaultProps"
-      :default-expand-all="true"
-      highlight-current
-      node-key="id"
-      :expand-on-click-node="false"
-      :current-node-key="defTenantId"
-      class="lug-tree"
-      @node-click="handleNodeClick"
-    />
+    <transition name="el-zoom-in-center"> </transition>
+      <div v-show="showTree" class="tree-title">所属租户</div>
+    <transition name="el-zoom-in-center">
+      <el-tree
+        v-show="showTree"
+        ref="tree"
+        :data="treeData"
+        :props="defaultProps"
+        :default-expand-all="true"
+        highlight-current
+        node-key="id"
+        :expand-on-click-node="false"
+        :current-node-key="defTenantId"
+        class="lug-tree"
+        @node-click="handleNodeClick"
+      />
+    </transition>
   </div>
 </template>
 
@@ -38,7 +41,7 @@ export default {
       defTenantId: -1, // 默认选中节点id
       defaultProps: {
         children: 'children',
-        label: function(a, b) {
+        label: function (a, b) {
           return a.name
         }
       }
@@ -112,8 +115,8 @@ export default {
   font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   padding: 10px;
   margin-top: 11px;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
 }
 ::v-deep .lug-tree {
   margin-top: 0px;

src/views/admin/logs/tenantTreeLog.vue

@@ -4,20 +4,22 @@
     <el-tooltip class="item" effect="light" :content="treeText" placement="right">
       <el-button :type="butType" :icon="butIcon" circle :title="treeText" @click="toggleTree" />
     </el-tooltip>
-    <!-- 租户树 -->
-    <el-tree
-      v-show="showTree"
-      ref="tree"
-      :data="treeData"
-      :props="defaultProps"
-      :default-expand-all="true"
-      highlight-current
-      node-key="id"
-      :expand-on-click-node="false"
-      :current-node-key="defTenantId"
-      class="lug-tree"
-      @node-click="handleNodeClick"
-    />
+    <transition name="el-zoom-in-center">>
+      <!-- 租户树 -->
+      <el-tree
+        v-show="showTree"
+        ref="tree"
+        :data="treeData"
+        :props="defaultProps"
+        :default-expand-all="true"
+        highlight-current
+        node-key="id"
+        :expand-on-click-node="false"
+        :current-node-key="defTenantId"
+        class="lug-tree"
+        @node-click="handleNodeClick"
+      />
+    </transition>
   </div>
 </template>
 
@@ -37,7 +39,7 @@ export default {
       defTenantId: 1, // 默认选中节点id
       defaultProps: {
         children: 'children',
-        label: function(a, b) {
+        label: function (a, b) {
           return a.name
         }
       }

src/views/admin/monitor/cache/components/edit.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="applyfor-edit">
+    <el-dialog
+      title="缓存信息"
+      :visible.sync="editShow"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="editForm" :model="editForm" label-position="right" label-width="5.8rem">
+        <el-form-item label="缓存key" prop="">
+          <el-input v-model="editForm.key" disabled />
+        </el-form-item>
+        <el-form-item label="缓存value" prop="value">
+          <el-input v-model="editForm.value" />
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="danger" @click="handleClose">取 消</el-button>
+        <el-button :disabled="isDisable" type="primary" @click="confirmClick">保 存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getCache, updateCache } from '@/api/monitor/cache'
+import MixinEdit from '@/utils/mixin-edit.js'
+
+export default {
+  mixins: [MixinEdit],
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['cacheKey', 'editShow'],
+  data() {
+    return {
+      saveApi: updateCache,
+      getApi: getCache,
+      rules: {
+        value: [{ required: true, message: '所属租户不能为空', trigger: 'change' }],
+        name: [{ required: true, message: '部门名称不能为空', trigger: 'change' }]
+      },
+    }
+  },
+  created() {
+    this.$set(this.editForm, 'key', this.cacheKey)
+    this.getLocalData()
+  },
+  methods: {
+    async getLocalData() {
+      const { code, retObj } = await this.getApi({ key: this.cacheKey })
+      if (code === 0) {
+        this.$set(this.editForm, 'value', retObj)
+      }
+    },
+    confirmClick() {
+      this.$refs.editForm.validate(async valid => {
+        if (valid) {
+          this.isDisable = true
+          const { code, msg } = await this.saveApi(this.editForm)
+          if (code === 0) {
+            this.$message.success(msg)
+            this.$parent.editShow = false
+          }
+          this.isDisable = false
+        } else {
+          return false
+        }
+      })
+    },
+    // methods-end
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/admin/monitor/cache/index.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { getCache } from '@/api/monitor/cache'
+import { getCacheInfo } from '@/api/monitor/cache'
 import echarts from 'echarts'
 
 export default {
@@ -91,7 +91,7 @@ export default {
   methods: {
     /** 查缓存询信息 */
     getPageList() {
-      getCache().then((response) => {
+      getCacheInfo().then((response) => {
         this.cache = response.retObj
         this.loading.close()
 

src/views/admin/monitor/cache/list.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <!-- 查询 -->
+      <el-input v-model="queryForm.key" class="filter-item" placeholder="缓存key" clearable />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search(1)"
+        >查 询</el-button
+      >
+      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="resetQuery(1)"
+        >重 置</el-button
+      >
+    </div>
+    <!-- key卡片 -->
+    <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
+      <el-tooltip class="item" effect="dark" placement="bottom"  @click="handleUpdate(item)">
+        <div slot="content">{{ item }}</div>
+        <div @click="handleUpdate(item)">{{ item }}</div>
+      </el-tooltip>
+    </el-card>
+    <Edit
+        v-if="editShow"
+        ref="edit"
+        :edit-show="editShow"
+        :cache-key="key"
+      />
+  </div>
+</template>
+
+<script>
+import { getCacheKeys } from '@/api/monitor/cache'
+import Mixin from '@/utils/mixin.js'
+import Edit from './components/edit'
+
+export default {
+  name: 'Cache',
+  components: { Edit },
+  mixins: [Mixin],
+  data() {
+    return {
+      listApi: getCacheKeys,
+      key: ''
+    }
+  },
+  created() {},
+  methods: {
+    handleUpdate(item) {
+      this.editShow = true
+      if (item) {
+        this.key = item
+      }
+    },
+    // end
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-card {
+  text-align: center;
+  width: 15%;
+  float: left;
+  margin-right: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+::v-deep .el-card__body {
+  padding: 10px 5px;
+  font-size: 13px;
+}
+
+::v-deep .el-card__header {
+  padding: 10px 10px;
+  border-bottom: 1px solid #e6ebf5;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+</style>
+

src/views/admin/tenantTree.vue

@@ -5,19 +5,22 @@
       <el-button :type="butType" :icon="butIcon" circle :title="treeText" @click="toggleTree" />
     </el-tooltip>
     <!-- 租户树 -->
-    <el-tree
-      v-show="showTree"
-      ref="tree"
-      :data="treeData"
-      :props="defaultProps"
-      :default-expand-all="true"
-      highlight-current
-      node-key="id"
-      :expand-on-click-node="false"
-      :current-node-key="defTenantId"
-      class="lug-tree"
-      @node-click="handleNodeClick"
-    />
+    <transition name="el-zoom-in-center"
+      >
+      <el-tree
+        v-show="showTree"
+        ref="tree"
+        :data="treeData"
+        :props="defaultProps"
+        :default-expand-all="true"
+        highlight-current
+        node-key="id"
+        :expand-on-click-node="false"
+        :current-node-key="defTenantId"
+        class="lug-tree"
+        @node-click="handleNodeClick"
+      />
+    </transition>
   </div>
 </template>
 
@@ -37,7 +40,7 @@ export default {
       defTenantId: 1, // 默认选中节点id
       defaultProps: {
         children: 'children',
-        label: function(a, b) {
+        label: function (a, b) {
           return a.name
         }
       }