From d602175913ed57ca7aa2a12509720eab487bc0d3 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Fri, 17 Jan 2025 00:31:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=8A=E4=B8=8B=E6=9E=B6?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/merchant.js                |  12 +-
 src/views/merchant/ProductList.vue | 242 +++++++++++++++++++++++------
 2 files changed, 204 insertions(+), 50 deletions(-)

diff --git a/src/api/merchant.js b/src/api/merchant.js
index c245c51..775cdf3 100644
--- a/src/api/merchant.js
+++ b/src/api/merchant.js
@@ -3,7 +3,15 @@ import request from '@/utils/request'
 // 获取商家商品列表
 export function getMerchantProducts(merchantId) {
   return request({
-    url: `/api/merchant/product/merchant/${merchantId}`,
-    method: 'get'
+    url: `/api/merchant/product/list`,
+    method: 'get',
+    params: {
+      merchant_id: merchantId
+    }
   })
+}
+
+// 修改商品状态
+export const updateProductStatus = (productId, data) => {
+  return request.put(`/api/merchant/product/${productId}`, data)
 } 
\ No newline at end of file
diff --git a/src/views/merchant/ProductList.vue b/src/views/merchant/ProductList.vue
index b87f8d6..a1ee712 100644
--- a/src/views/merchant/ProductList.vue
+++ b/src/views/merchant/ProductList.vue
@@ -29,45 +29,63 @@
         </a-form>
       </div>
       
-      <a-table 
-        :columns="columns" 
-        :data-source="tableData" 
-        :pagination="pagination"
-        :loading="loading"
-        @change="handleTableChange"
-        row-key="id"
-      >
-        <template #bodyCell="{ column, text, record }">
-          <!-- 图片列 -->
-          <template v-if="column.key === 'image_url'">
-            <div class="product-image">
-              <img :src="text" :alt="record.name" />
-            </div>
+      <div class="table-container">
+        <a-table 
+          :columns="columns" 
+          :data-source="tableData" 
+          :pagination="pagination"
+          :loading="loading"
+          @change="handleTableChange"
+          row-key="id"
+          :scroll="{ x: 1500 }"
+        >
+          <template #bodyCell="{ column, text, record }">
+            <!-- 图片列 -->
+            <template v-if="column.key === 'image_url'">
+              <div class="product-image">
+                <img :src="text" :alt="record.name" />
+              </div>
+            </template>
+            <!-- 价格列 -->
+            <template v-if="['product_price', 'sale_price', 'settlement_amount'].includes(column.key)">
+              ¥{{ text }}
+            </template>
+            <!-- 标签列 -->
+            <template v-if="column.key === 'tags'">
+              <a-tag 
+                v-for="tag in text?.split(',')" 
+                :key="tag" 
+                color="blue"
+              >
+                {{ tag }}
+              </a-tag>
+            </template>
+            <!-- 最高抵扣金额 -->
+            <template v-if="column.key === 'max_deduct_points'">
+              {{ text }} 消费金
+            </template>
+            <!-- 状态列 -->
+            <template v-if="column.key === 'status'">
+              <a-tag :color="getStatusColor(record.status)">
+                {{ getStatusText(record.status) }}
+              </a-tag>
+            </template>
+            <!-- 操作列 -->
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a-button type="link" @click="handleEdit(record)">修改</a-button>
+                <a-button 
+                  type="link" 
+                  :loading="record.statusLoading"
+                  @click="handleToggleStatus(record)"
+                >
+                  {{ record.status === 'LISTING' ? '下架' : '上架' }}
+                </a-button>
+              </a-space>
+            </template>
           </template>
-          <!-- 价格列 -->
-          <template v-if="['product_price', 'sale_price', 'settlement_amount'].includes(column.key)">
-            ¥{{ text }}
-          </template>
-          <!-- 标签列 -->
-          <template v-if="column.key === 'tags'">
-            <a-tag 
-              v-for="tag in text?.split(',')" 
-              :key="tag" 
-              color="blue"
-            >
-              {{ tag }}
-            </a-tag>
-          </template>
-          <!-- 最高抵扣金额 -->
-          <template v-if="column.key === 'max_deduct_points'">
-            {{ text }} 消费金
-          </template>
-          <!-- 操作列 -->
-          <template v-if="column.key === 'action'">
-            <a-button type="link" @click="handleEdit(record)">修改</a-button>
-          </template>
-        </template>
-      </a-table>
+        </a-table>
+      </div>
 
       <!-- 添加商品模态框 -->
       <a-modal
@@ -280,7 +298,7 @@ import { defineComponent, ref, onMounted } from 'vue'
 import { message, Upload, InputNumber, Tag } from 'ant-design-vue'
 import { UploadOutlined } from '@ant-design/icons-vue'
 import PageContainer from '@/components/PageContainer.vue'
-import { getMerchantProducts } from '@/api/merchant'
+import { getMerchantProducts, updateProductStatus } from '@/api/merchant'
 import request from '@/utils/request'
 
 export default defineComponent({
@@ -323,6 +341,13 @@ export default defineComponent({
         width: 100,
         align: 'center'
       },
+      {
+        title: '所属商家',
+        dataIndex: 'merchant_name',
+        key: 'merchant_name',
+        width: 160,
+        ellipsis: true
+      },
       {
         title: '商品名称',
         dataIndex: 'name',
@@ -363,6 +388,13 @@ export default defineComponent({
         width: 120,
         align: 'right'
       },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        align: 'center'
+      },
       {
         title: '操作',
         key: 'action',
@@ -391,21 +423,34 @@ export default defineComponent({
 
     // 获取商品列表
     const fetchData = async () => {
-      if (!filterForm.value.merchant_id) {
-        tableData.value = []
-        return
-      }
-
       try {
         loading.value = true
+        const params = {
+          skip: (pagination.value.current - 1) * pagination.value.pageSize,
+          limit: pagination.value.pageSize
+        }
+
+        // 如果选择了商家，添加商家ID参数
+        if (filterForm.value.merchant_id) {
+          params.merchant_id = filterForm.value.merchant_id
+        }
+
         const res = await getMerchantProducts(filterForm.value.merchant_id)
         if (res.code === 200) {
-          tableData.value = res.data || []
-          pagination.value.total = res.data.length
+          tableData.value = (res.data.items || []).map(item => ({
+            ...item,
+            statusLoading: false
+          }))
+          pagination.value.total = res.data.total
+        } else {
+          tableData.value = []
+          pagination.value.total = 0
         }
       } catch (error) {
         console.error('获取商品列表失败:', error)
         message.error('获取商品列表失败')
+        tableData.value = []
+        pagination.value.total = 0
       } finally {
         loading.value = false
       }
@@ -623,8 +668,55 @@ export default defineComponent({
       addModalVisible.value = false
     }
 
+    // 获取状态文本
+    const getStatusText = (status) => {
+      const statusMap = {
+        'LISTING': '上架',
+        'UNLISTING': '下架'
+      }
+      return statusMap[status] || status
+    }
+
+    // 获取状态标签颜色
+    const getStatusColor = (status) => {
+      const colorMap = {
+        'LISTING': 'green',
+        'UNLISTING': 'red'
+      }
+      return colorMap[status] || 'default'
+    }
+
+    // 处理状态切换
+    const handleToggleStatus = async (record) => {
+      const newStatus = record.status === 'LISTING' ? 'UNLISTING' : 'LISTING'
+      const actionText = newStatus === 'LISTING' ? '上架' : '下架'
+
+      try {
+        // 添加局部loading状态
+        record.statusLoading = true
+        
+        const res = await updateProductStatus(record.id, {
+          status: newStatus
+        })
+
+        if (res.code === 200) {
+          message.success(`${actionText}成功`)
+          // 更新本地数据状态
+          record.status = newStatus
+        } else {
+          throw new Error(res.message || `${actionText}失败`)
+        }
+      } catch (error) {
+        console.error(`${actionText}商品失败:`, error)
+        message.error(error.message || `${actionText}失败`)
+      } finally {
+        record.statusLoading = false
+      }
+    }
+
     onMounted(() => {
       fetchMerchantOptions()
+      fetchData() // 直接加载所有商品
     })
 
     return {
@@ -654,14 +746,16 @@ export default defineComponent({
       handleEditUpload,
       handleEditRemoveImage,
       handleEditSubmit,
-      handleEditCancel
+      handleEditCancel,
+      getStatusText,
+      getStatusColor,
+      handleToggleStatus
     }
   }
 })
 </script>
 
 <style scoped>
-
 .table-header {
   display: flex;
   justify-content: space-between;
@@ -731,4 +825,56 @@ export default defineComponent({
 .image-actions .ant-btn {
   color: #fff;
 }
+
+:deep(.ant-tag) {
+  min-width: 60px;
+  text-align: center;
+}
+
+:deep(.ant-space) {
+  gap: 8px !important;
+}
+
+:deep(.ant-table-cell) {
+  white-space: nowrap;
+}
+
+:deep(.ant-table-cell-ellipsis) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.product-list {
+  background: #fff;
+  padding: 24px;
+  min-height: 100%;
+}
+
+.table-container {
+  overflow-x: auto;
+  background: #fff;
+}
+
+:deep(.ant-table-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-table) {
+  overflow-x: auto;
+}
+
+:deep(.ant-table-body) {
+  overflow-x: auto !important;
+}
+
+:deep(.ant-table-cell) {
+  white-space: nowrap;
+}
+
+:deep(.ant-table-cell-ellipsis) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style> 
\ No newline at end of file