wms-antdvue/.svn/pristine/e9/e91e6f5bb788de6b34169d63af0b7da77cc6c863.svn-base

<template>
    <PageWrapper>
        <div class="cache-box">
            <a-card  title="缓存列表">
                <a-table 
                    :style="{ minHeight: fwbHeight+'px' }"
                    :scroll="{ x: '100%',y: fwbHeight+'px',}"
                    :dataSource="cacheNameData"
                    :columns="cacheNameColumns" 
                    row-key="cacheName"
                    :customRow="onCheckedCacheName"
                    :rowSelection="{type:'radio',selectedRowKeys: selectedName,onChange:handleNameChange}"
                    >
                 <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'action'">
                        <a-button type="danger" @click="handleDelete(record,'cacheName')">
                            <template #icon><DeleteOutlined /></template>
                            删除
                        </a-button>
                    </template>
                </template>
                </a-table>
            </a-card>
            <a-card title="键名列表">
                <a-table  :columns="cacheKeyColumns"  
                    row-key="cacheKey"
                    :style="{ minHeight: fwbHeight+'px' }"
                    :scroll="{ x: '100%',y: fwbHeight+'px',}"
                    :dataSource="cacheKeyData"
                    :customRow="onCheckedCachKey"
                    :rowSelection="{type:'radio',selectedRowKeys: selectedKey,onChange:handleKeyChange}">
                >
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'action'">
                        <a-button type="danger" @click="handleDelete(record,'cacheKey')">
                            <template #icon><DeleteOutlined /></template>
                            删除
                        </a-button>
                        </template>
                    </template>
                </a-table>
            </a-card>
            <a-card>
                <template #title>
                    <div class="clearfix">
                        <span>缓存内容</span>     
                        <a-button @click="clearAll" style="float: right; padding: 3px 0" type="text">
                            <template #icon><RedoOutlined /></template>
                            清理全部
                        </a-button>
                    </div>
                </template>
                <a-form ref="form" :model="formData"
                :label-col="{ style: { width: '80px' }}"
                layout="vertical" v-if="cacheKeyData.length > 0">
                    <a-form-item label="缓存名称：">
                        <a-input v-model:value="formData.cacheName"></a-input>
                    </a-form-item>
                    <a-form-item label="缓存键值：">
                        <a-input v-model:value="formData.cacheKey"></a-input>
                    </a-form-item>
                    <a-form-item label="缓存内容：">
                        <a-input v-model:value="formData.cacheValue" type="textarea"></a-input>
                    </a-form-item>
                </a-form>
                <div v-else>暂无数据</div>
            </a-card>
        </div>
    </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, onMounted,reactive } from 'vue';
import { RedoOutlined,DeleteOutlined} from '@ant-design/icons-vue';
import { getCacheNames, getCacheKeys, getCacheValue,deleteCacheName,deleteCacheKey,deleteCacheAll } from '@/api/monitor/caches';
import { Modal,message } from 'ant-design-vue';
import { cacheNameColumns } from './cacheNameColumns';
import { cacheKeyColumns } from './cacheKeyColumns';

const cacheNameData = ref([])
const cacheKeyData = ref([])

const selectedName= ref([])
const selectedKey= ref([])
const formData = reactive({
    cacheKey:"",
    cacheName:"",
    cacheValue:"",
    message:''
})
const cacheName = ref('')
const cacheKey = ref('')
const fwbHeight = document.body.clientHeight -320

//选择缓存名
const onCheckedCacheName = (record) => {
    return {
        onClick: () => {
          cacheName.value = record.cacheName
          selectedName.value = []
          selectedName.value.push(cacheName.value)
          if(cacheName.value) {
            loadCachekeys()
          }
        },    
      }
}
const handleNameChange=(value)=>{
    cacheName.value = value[0]
    selectedName.value = value
    if(cacheName.value) {
        loadCachekeys()
    }
}
//选择缓存key
const onCheckedCachKey = (record) => {
    return {
        onClick: () => {
            cacheKey.value = record.cacheKey
            selectedKey.value= []
            selectedKey.value.push(cacheKey.value)
            if(cacheKey.value) {
                loadCacheValue()
            }
        },    
      }
}
const handleKeyChange=(value)=>{
    cacheKey.value = value[0]
    selectedKey.value = value
    if(cacheKey.value) {
        loadCacheValue()
    }
}
//加载缓存名列表
const loadCacheNames = async () => {
    const result = await getCacheNames();
    cacheNameData.value = result
    cacheName.value = result.length > 0 ? result[0].cacheName : ''
    selectedName.value =[]
    selectedName.value.push(cacheName.value)
    if(cacheName.value) {
        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 : ''
    selectedKey.value = []
    selectedKey.value.push(cacheKey.value)
    if(cacheKey.value) {
        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];
        }
    }
}
const handleDelete = async(row,type)=> {
  Modal.confirm({
      title: '提示',
      content: "确定要删除？",
      onOk: async () => {
        if(type=='cacheName') {
            await deleteCacheName(row.cacheName)
            message.success("删除成功");
            loadCacheNames()
        }else {
            await deleteCacheKey(row.cacheKey)
            message.success("删除成功");
            loadCachekeys()
        }
      }
    });  
}
const clearAll = async()=> {
  Modal.confirm({
      title: '提示',
      content: "确定要清理全部？",
      onOk: async () => {
        await deleteCacheAll()
        loadCacheNames()
      }
    });
}
onMounted(() => {
    loadCacheNames()
})
</script>
<style lang="less">
.cache-box {
    display: flex;
    >.ant-card {
        flex: 1;
        &:nth-child(2) {
            margin:0 15px;
        }
    }
}

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