wms-elevue/src/views/monitor/caches/index.vue

<template>
  <PageWrapper>
    <div class="cache-box">
      <el-card header="缓存列表">
        <el-table
          empty-text="暂无数据"
          border
          :height="fwbHeight"
          :data="cacheNameData"
          row-key="cacheName"
          ref="cacheNameTable"
          highlight-current-row
          @row-click="onCheckedCacheName"
        >
          <el-table-column type="index" width="80" align="center" label="序号" />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="缓存名称"
            prop="cacheName"
            min-width="100"
          />
          <el-table-column show-overflow-tooltip align="center" label="备注" prop="message" />
          <el-table-column align="center" label="操作" width="60" fixed="right">
            <template #default="{ row }">
              <el-icon
                :color="`var(--el-color-danger)`"
                size="16"
                @click.stop="handleDelete(row, 'cacheName')"
                style="cursor: pointer"
                ><Delete
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card header="键名列表">
        <el-table
          empty-text="暂无数据"
          border
          :height="fwbHeight"
          :data="cacheKeyData"
          row-key="cacheKey"
          ref="cacheKeyTable"
          highlight-current-row
          @row-click="onCheckedCachKey"
        >
          <el-table-column type="index" width="80" align="center" label="序号" />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="缓存键名"
            prop="cacheKey"
            min-width="100"
          />
          <el-table-column align="center" label="操作" width="60" fixed="right">
            <template #default="{ row }">
              <el-icon
                :color="`var(--el-color-danger)`"
                size="16"
                @click.stop="handleDelete(row, 'cacheKey')"
                style="cursor: pointer"
                ><Delete
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <template #header>
          <div class="clearfix">
            <span>缓存内容</span>
            <el-button @click="clearAll" style="float: right; padding: 3px 0" type="text"
              ><el-icon><RefreshRight /></el-icon>清理全部</el-button
            >
          </div>
        </template>
        <el-form
          ref="form"
          :model="formData"
          label-width="80px"
          label-position="top"
          v-if="cacheKeyData.length > 0"
        >
          <el-form-item label="缓存名称：">
            <el-input v-model="formData.cacheName" />
          </el-form-item>
          <el-form-item label="缓存键值：">
            <el-input v-model="formData.cacheKey" />
          </el-form-item>
          <el-form-item label="缓存内容：">
            <el-input v-model="formData.cacheValue" type="textarea" />
          </el-form-item>
        </el-form>
        <div v-else>暂无数据</div>
      </el-card>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, reactive } from 'vue';
  import {
    getCacheNames,
    getCacheKeys,
    getCacheValue,
    deleteCacheName,
    deleteCacheKey,
    deleteCacheAll,
  } from '@/api/monitor/caches';
  import { message, confirm } from '@/utils/auth';

  const cacheNameTable = ref();
  const cacheKeyTable = ref();
  const cacheNameData = ref([]);
  const cacheKeyData = ref([]);

  /**
   * 定义表单参数
   */
  const formData = reactive({
    cacheKey: '',
    cacheName: '',
    cacheValue: '',
    message: '',
  });
  const cacheName = ref('');
  const cacheKey = ref('');
  const fwbHeight = document.body.clientHeight - 230;

  /**
   * 选择缓存名
   * @param row 参数
   */
  const onCheckedCacheName = (row) => {
    cacheName.value = row.cacheName;
    loadCachekeys();
  };

  /**
   * 选择缓存key
   */
  const onCheckedCachKey = (row) => {
    cacheKey.value = row.cacheKey;
    loadCacheValue();
  };

  /**
   * 加载缓存名列表
   */
  const loadCacheNames = async () => {
    const result = await getCacheNames();
    cacheNameData.value = result;
    cacheName.value = result.length > 0 ? result[0].cacheName : '';
    if (cacheName.value) {
      nextTick(() => {
        cacheNameTable.value.setCurrentRow(result[0]);
      });
      loadCachekeys();
    }
  };

  /**
   * 加载缓存key列表
   */
  const loadCachekeys = async () => {
    let datas = [];
    const result = await getCacheKeys(cacheName.value);
    result.map((item) => {
      let len = item.split(':').length;
      datas.push({
        cacheKey: item.split(':')[len - 1],
      });
    });
    cacheKeyData.value = datas;
    cacheKey.value = datas.length > 0 ? datas[0].cacheKey : '';
    if (cacheKey.value) {
      nextTick(() => {
        cacheKeyTable.value.setCurrentRow(datas[0]);
      });
      loadCacheValue();
    }
  };

  /**
   * 加载缓存value列表
   */
  const loadCacheValue = async () => {
    const data = await getCacheValue({ cacheName: cacheName.value, cacheKey: cacheKey.value });
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key];
      }
    }
  };

  /**
   * 执行删除
   * @param row 行数据
   * @param type 类型
   */
  const handleDelete = async (row, type) => {
    await confirm('确定要删除？');
    if (type == 'cacheName') {
      await deleteCacheName(row.cacheName);
      message('删除成功');
      loadCacheNames();
    } else {
      await deleteCacheKey(row.cacheKey);
      message('删除成功');
      loadCachekeys();
    }
  };

  /**
   * 清除全部缓存
   */
  const clearAll = async () => {
    await confirm('确定要清理全部？');
    await deleteCacheAll();
    loadCacheNames();
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    loadCacheNames();
  });
</script>
<style lang="scss" scoped>
  .cache-box {
    display: flex;

    > .el-card {
      flex: 1;
      &:nth-child(2) {
        margin: 0 15px;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>