mirror of
https://github.com/woodchen-ink/aimodels-prices.git
synced 2025-07-18 13:41:59 +08:00
新增状态筛选功能,优化价格列表展示
- 在 Prices.vue 中添加状态筛选组件,允许用户根据状态过滤价格列表 - 更新 loadPrices 函数以支持状态筛选参数 - 增强数据缓存逻辑,包含状态筛选信息 - 监听状态选择变化,确保数据加载时重置到第一页
This commit is contained in:
parent
611938ec2d
commit
b55c521403
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user