83 lines
3.1 KiB
Vue
83 lines
3.1 KiB
Vue
<template>
|
|
<div class="tokenlog-page">
|
|
<div class="page-toolbar">
|
|
<el-select v-model="filterConsumed" placeholder="消费状态" clearable style="width:140px" @change="fetchData">
|
|
<el-option label="未消费" :value="0" />
|
|
<el-option label="已消费" :value="1" />
|
|
</el-select>
|
|
<el-button @click="fetchData" :icon="RefreshRight">刷新</el-button>
|
|
</div>
|
|
|
|
<el-table :data="list" v-loading="loading" stripe>
|
|
<el-table-column prop="systemCode" label="系统编码" width="120" />
|
|
<el-table-column prop="tokenPreview" label="Token" min-width="220" show-overflow-tooltip />
|
|
<el-table-column label="消费状态" width="90" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag size="small" :type="row.consumed === 1 ? 'success' : 'warning'">
|
|
{{ row.consumed === 1 ? '已消费' : '未消费' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="acquiredAt" label="获取时间" width="170" />
|
|
<el-table-column prop="consumedAt" label="消费时间" width="170">
|
|
<template #default="{ row }">{{ row.consumedAt || '-' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="consumeApi" label="消费接口" width="220" show-overflow-tooltip>
|
|
<template #default="{ row }">{{ row.consumeApi || '-' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="consumeIp" label="消费IP" width="140">
|
|
<template #default="{ row }">{{ row.consumeIp || '-' }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="page-footer" v-if="total > 0">
|
|
<el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
|
|
layout="prev,pager,next" @current-change="fetchData" small />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { RefreshRight } from '@element-plus/icons-vue'
|
|
import request from '@/utils/request'
|
|
|
|
interface TokenLog {
|
|
id: string; systemCode: string; tokenPreview: string
|
|
consumed: number; acquiredAt: string; consumedAt: string
|
|
consumeApi: string; consumeIp: string
|
|
}
|
|
|
|
const loading = ref(false)
|
|
const list = ref<TokenLog[]>([])
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = ref(15)
|
|
const filterConsumed = ref<number | null>(null)
|
|
|
|
async function fetchData() {
|
|
loading.value = true
|
|
try {
|
|
const res = await request.post('/zgapi/v1/admin/email/token-log/page', {
|
|
page: page.value, pageSize: pageSize.value,
|
|
consumed: filterConsumed.value !== null ? filterConsumed.value : undefined,
|
|
})
|
|
list.value = res.data?.records || []
|
|
total.value = res.data?.total || 0
|
|
} catch {} finally { loading.value = false }
|
|
}
|
|
|
|
onMounted(() => fetchData())
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tokenlog-page { max-width: 1100px; }
|
|
.page-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
|
|
.page-footer { display:flex; justify-content:center; margin-top:24px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.page-toolbar { flex-direction: column; gap: 10px; }
|
|
.page-toolbar .el-select { width: 100% !important; }
|
|
}
|
|
</style>
|