Add channel type filtering to Prices view and backend API

backend/handlers/prices.go

@@ -14,9 +14,11 @@ import (
 func GetPrices(c *gin.Context) {
 	db := c.MustGet("db").(*sql.DB)
 
-	// 获取分页参数
+	// 获取分页和筛选参数
 	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
 	pageSize, _ := strconv.Atoi(c.DefaultQuery("pageSize", "20"))
+	channelType := c.Query("channel_type") // 新增: 获取厂商筛选参数
+
 	if page < 1 {
 		page = 1
 	}
@@ -26,23 +28,40 @@ func GetPrices(c *gin.Context) {
 
 	offset := (page - 1) * pageSize
 
+	// 构建查询条件
+	var whereClause string
+	var args []interface{}
+	if channelType != "" {
+		whereClause = "WHERE channel_type = ?"
+		args = append(args, channelType)
+	}
+
 	// 获取总数
 	var total int
-	err := db.QueryRow("SELECT COUNT(*) FROM price").Scan(&total)
+	countQuery := "SELECT COUNT(*) FROM price"
+	if whereClause != "" {
+		countQuery += " " + whereClause
+	}
+	err := db.QueryRow(countQuery, args...).Scan(&total)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to count prices"})
 		return
 	}
 
 	// 使用分页查询
-	rows, err := db.Query(`
+	query := `
 		SELECT id, model, billing_type, channel_type, currency, input_price, output_price, 
 			price_source, status, created_at, updated_at, created_by,
 			temp_model, temp_billing_type, temp_channel_type, temp_currency,
 			temp_input_price, temp_output_price, temp_price_source, updated_by
-		FROM price 
+		FROM price`
-		ORDER BY created_at DESC
+	if whereClause != "" {
-		LIMIT ? OFFSET ?`, pageSize, offset)
+		query += " " + whereClause
+	}
+	query += " ORDER BY created_at DESC LIMIT ? OFFSET ?"
+	args = append(args, pageSize, offset)
+
+	rows, err := db.Query(query, args...)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to fetch prices"})
 		return

frontend/src/views/Prices.vue

@@ -51,14 +51,13 @@
       </template>
       
       <el-table 
-        v-else
+        :data="prices" 
-        :data="filteredPrices" 
         style="width: 100%"
         @selection-change="handlePriceSelectionChange"
         v-loading="tableLoading"
         element-loading-text="加载中..."
       >
-        <el-table-column type="selection" width="55" />
+        <el-table-column v-if="isAdmin" type="selection" width="55" />
         <el-table-column label="模型">
           <template #default="{ row }">
             <div class="value-container">
@@ -180,7 +179,7 @@
         </el-table-column>
       </el-table>
       
-      <!-- 添加分页 -->
+      <!-- 修改分页组件 -->
       <div class="pagination-container">
         <el-pagination
           v-model:current-page="currentPage"
@@ -188,9 +187,17 @@
           :page-sizes="[10, 20, 50, 100]"
           :total="total"
           layout="total, sizes, prev, pager, next"
+          :small="false"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-        />
+          size-change-label="条/页"
+        >
+          <template #sizes>
+            <el-select v-model="pageSize" :options="[10, 20, 50, 100].map(item => ({ value: item, label: item + ' 条/页' }))">
+              <template #prefix>每页</template>
+            </el-select>
+          </template>
+        </el-pagination>
       </div>
     </el-card>
 
@@ -408,10 +415,7 @@ const calculateRate = (price, currency) => {
   return currency === 'USD' ? (price / 2).toFixed(4) : (price / 14).toFixed(4)
 }
 
-const filteredPrices = computed(() => {
+const filteredPrices = computed(() => prices.value)
-  if (!selectedProvider.value) return prices.value
-  return prices.value.filter(p => p.channel_type === selectedProvider.value)
-})
 
 const editingPrice = ref(null)
 
@@ -427,25 +431,20 @@ const cachedPrices = ref(new Map()) // 用于缓存数据
 const loadPrices = async () => {
   tableLoading.value = true
   
-  // 检查缓存
+  // 构建查询参数
-  const cacheKey = `${currentPage.value}-${pageSize.value}-${selectedProvider.value}`
+  const params = {
-  if (cachedPrices.value.has(cacheKey)) {
+    page: currentPage.value,
-    const cached = cachedPrices.value.get(cacheKey)
+    pageSize: pageSize.value
-    prices.value = cached.prices
+  }
-    total.value = cached.total
+  
-    tableLoading.value = false
+  // 添加厂商筛选参数
-    loading.value = false
+  if (selectedProvider.value) {
-    return
+    params.channel_type = selectedProvider.value
   }
   
   try {
     const [pricesRes, providersRes] = await Promise.all([
-      axios.get('/api/prices', {
+      axios.get('/api/prices', { params }),
-        params: {
-          page: currentPage.value,
-          pageSize: pageSize.value
-        }
-      }),
       axios.get('/api/providers')
     ])
     
@@ -454,6 +453,7 @@ const loadPrices = async () => {
     providers.value = providersRes.data
     
     // 缓存数据
+    const cacheKey = `${currentPage.value}-${pageSize.value}-${selectedProvider.value}`
     cachedPrices.value.set(cacheKey, {
       prices: pricesRes.data.prices,
       total: pricesRes.data.total
@@ -815,9 +815,9 @@ const handleCurrentChange = (val) => {
   loadPrices()
 }
 
-// 当选择厂商时重置分页
+// 当选择厂商时重新加载数据
 watch(selectedProvider, () => {
-  currentPage.value = 1
+  currentPage.value = 1 // 重置到第一页
   loadPrices()
 })
 
@@ -1009,4 +1009,20 @@ onMounted(async () => {
     transition: all 0.3s ease;
   }
 }
+
+/* 添加分页选择框样式 */
+:deep(.el-pagination) {
+  .el-select {
+    width: auto !important;
+    margin: 0 8px;
+  }
+  
+  .el-select .el-input {
+    width: 110px !important;
+  }
+  
+  .el-select-dropdown__item {
+    padding-right: 15px;
+  }
+}
 </style>