新增状态筛选功能,优化价格列表展示

- 在 Prices.vue 中添加状态筛选组件,允许用户根据状态过滤价格列表
- 更新 loadPrices 函数以支持状态筛选参数
- 增强数据缓存逻辑,包含状态筛选信息
- 监听状态选择变化,确保数据加载时重置到第一页
This commit is contained in:
wood chen 2025-03-18 03:36:57 +08:00
parent 611938ec2d
commit b55c521403

View File

@ -62,6 +62,19 @@
</div>
</div>
<!-- 添加状态筛选 -->
<div class="filter-section">
<div class="filter-label" style="min-width:80px;">状态筛选:</div>
<div class="status-filters">
<el-button :type="!selectedStatus ? 'primary' : ''" @click="selectedStatus = ''">全部</el-button>
<el-button v-for="(status, key) in statusMap" :key="key"
:type="selectedStatus === key ? 'primary' : ''"
@click="selectedStatus = key">
{{ status }}
</el-button>
</div>
</div>
<!-- 添加骨架屏 -->
<template v-if="loading">
<div v-for="i in 5" :key="i" class="skeleton-row">
@ -202,7 +215,7 @@
</el-button>
</el-tooltip>
<el-tooltip :content="row.status === 'pending' ? '通过审核' : '已审核'" placement="top">
<el-button type="success" link @click="updateStatus(row.id, 'approved')"
<el-button type="success" link @click="updateStatus(row.id, 'approve')"
:disabled="row.status !== 'pending'">
<el-icon>
<Check />
@ -210,7 +223,7 @@
</el-button>
</el-tooltip>
<el-tooltip :content="row.status === 'pending' ? '拒绝审核' : '已审核'" placement="top">
<el-button type="danger" link @click="updateStatus(row.id, 'rejected')"
<el-button type="danger" link @click="updateStatus(row.id, 'rejecte')"
:disabled="row.status !== 'pending'">
<el-icon>
<Close />
@ -464,6 +477,7 @@ const form = ref({
const router = useRouter()
const selectedProvider = ref('')
const selectedModelType = ref('')
const selectedStatus = ref('')
const searchQuery = ref('')
const isAdmin = computed(() => props.user?.role === 'admin')
@ -529,6 +543,10 @@ const loadPrices = async () => {
if (selectedModelType.value) {
params.model_type = selectedModelType.value
}
//
if (selectedStatus.value) {
params.status = selectedStatus.value
}
//
if (searchQuery.value) {
params.search = searchQuery.value
@ -545,7 +563,7 @@ const loadPrices = async () => {
providers.value = providersRes.data
//
const cacheKey = `${currentPage.value}-${pageSize.value}-${selectedProvider.value}-${selectedModelType.value}-${searchQuery.value}`
const cacheKey = `${currentPage.value}-${pageSize.value}-${selectedProvider.value}-${selectedModelType.value}-${selectedStatus.value}-${searchQuery.value}`
cachedPrices.value.set(cacheKey, {
prices: pricesRes.data.data,
total: pricesRes.data.total
@ -991,7 +1009,7 @@ const handleCurrentChange = (val) => {
loadPrices()
}
//
//
watch(selectedProvider, () => {
currentPage.value = 1 //
loadPrices()
@ -1003,6 +1021,12 @@ watch(selectedModelType, () => {
loadPrices()
})
//
watch(selectedStatus, () => {
currentPage.value = 1 //
loadPrices()
})
//
watch(searchQuery, () => {
// 使
@ -1114,6 +1138,13 @@ onMounted(() => {
align-items: center;
}
.status-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.model-type-filters {
display: flex;
flex-wrap: wrap;