From b55c521403e14e0b58d0cf832dcb1f0e703d99c7 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Tue, 18 Mar 2025 03:36:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=8A=B6=E6=80=81=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=B7?=
 =?UTF-8?q?=E6=A0=BC=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Prices.vue 中添加状态筛选组件，允许用户根据状态过滤价格列表
- 更新 loadPrices 函数以支持状态筛选参数
- 增强数据缓存逻辑，包含状态筛选信息
- 监听状态选择变化，确保数据加载时重置到第一页
---
 frontend/src/views/Prices.vue | 39 +++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Prices.vue b/frontend/src/views/Prices.vue
index 38b7ba3..4fc7671 100644
--- a/frontend/src/views/Prices.vue
+++ b/frontend/src/views/Prices.vue
@@ -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;