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

- 在 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> </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"> <template v-if="loading">
<div v-for="i in 5" :key="i" class="skeleton-row"> <div v-for="i in 5" :key="i" class="skeleton-row">
@ -202,7 +215,7 @@
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip :content="row.status === 'pending' ? '通过审核' : '已审核'" placement="top"> <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'"> :disabled="row.status !== 'pending'">
<el-icon> <el-icon>
<Check /> <Check />
@ -210,7 +223,7 @@
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip :content="row.status === 'pending' ? '拒绝审核' : '已审核'" placement="top"> <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'"> :disabled="row.status !== 'pending'">
<el-icon> <el-icon>
<Close /> <Close />
@ -464,6 +477,7 @@ const form = ref({
const router = useRouter() const router = useRouter()
const selectedProvider = ref('') const selectedProvider = ref('')
const selectedModelType = ref('') const selectedModelType = ref('')
const selectedStatus = ref('')
const searchQuery = ref('') const searchQuery = ref('')
const isAdmin = computed(() => props.user?.role === 'admin') const isAdmin = computed(() => props.user?.role === 'admin')
@ -529,6 +543,10 @@ const loadPrices = async () => {
if (selectedModelType.value) { if (selectedModelType.value) {
params.model_type = selectedModelType.value params.model_type = selectedModelType.value
} }
//
if (selectedStatus.value) {
params.status = selectedStatus.value
}
// //
if (searchQuery.value) { if (searchQuery.value) {
params.search = searchQuery.value params.search = searchQuery.value
@ -545,7 +563,7 @@ const loadPrices = async () => {
providers.value = providersRes.data 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, { cachedPrices.value.set(cacheKey, {
prices: pricesRes.data.data, prices: pricesRes.data.data,
total: pricesRes.data.total total: pricesRes.data.total
@ -991,7 +1009,7 @@ const handleCurrentChange = (val) => {
loadPrices() loadPrices()
} }
// //
watch(selectedProvider, () => { watch(selectedProvider, () => {
currentPage.value = 1 // currentPage.value = 1 //
loadPrices() loadPrices()
@ -1003,6 +1021,12 @@ watch(selectedModelType, () => {
loadPrices() loadPrices()
}) })
//
watch(selectedStatus, () => {
currentPage.value = 1 //
loadPrices()
})
// //
watch(searchQuery, () => { watch(searchQuery, () => {
// 使 // 使
@ -1114,6 +1138,13 @@ onMounted(() => {
align-items: center; align-items: center;
} }
.status-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.model-type-filters { .model-type-filters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;