暂存

src/components/products.vue

@@ -39,14 +39,13 @@ const supplierList = ref([])
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
 // 产品类型映射
 const productTypeMap = {
-    raw_material: '原材料',
-    packaging: '包装材料',
-    equipment: '设备器具',
-    cleaning: '清洁用品',
-    promote: '宣传物料'
+    '茶饮原料': '茶饮原料',
+    '包装物料': '包装物料',
+    '设备器具': '设备器具'
 }
 
 onMounted(() => {
@@ -67,24 +66,25 @@ watch(filterType, () => {
     handleSearch()
 })
 
-// 监听搜索结果变化，重置页码
-watch(searchResults, () => {
-    currentPage.value = 1
-})
+// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
+const paginatedData = computed(() => searchResults.value)
 
-// 分页后的数据
-const paginatedData = computed(() => {
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return searchResults.value.slice(start, end)
-})
-
-// 获取产品列表
-const fetchData = async () => {
+// 获取产品列表（服务端分页）
+const fetchData = async (page) => {
     loading.value = true
-    const res = await getProductsList()
+    const params = {
+        page: page || currentPage.value,
+        pageSize: pageSize.value
+    }
+    const res = await getProductsList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -99,6 +99,8 @@ const handleSearch = async () => {
 
     loading.value = true
     const params = {
+        page: currentPage.value,
+        pageSize: pageSize.value,
         type: filterType.value || undefined
     }
     if (select.value === '1') {
@@ -110,7 +112,13 @@ const handleSearch = async () => {
     }
     const res = await getProductsList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -236,18 +244,17 @@ const closeDetail = () => {
 // 产品类型标签样式
 const getTypeTag = (type) => {
     const map = {
-        raw_material: '',
-        packaging: 'success',
-        equipment: 'warning',
-        cleaning: 'info',
-        promote: 'danger'
+        '茶饮原料': '',
+        '包装物料': 'success',
+        '设备器具': 'warning'
     }
     return map[type] || 'info'
 }
 
-// 页码变化
+// 页码变化（服务端分页：重新请求后端）
 const handleCurrentChange = (val) => {
     currentPage.value = val
+    fetchData(val)
 }
 
 // 检查权限
@@ -267,8 +274,8 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     class="products-search-with-select" @keyup.enter="handleSearch">
                     <template #prepend>
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
-                            <el-option label="ID" value="1" />
-                            <el-option label="名称" value="2" />
+                            <el-option label="产品编号" value="1" />
+                            <el-option label="产品名称" value="2" />
                             <el-option label="供应商" value="3" />
                         </el-select>
                     </template>
@@ -286,11 +293,9 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
             <div class="filter-row">
                 <span class="filter-label">筛选条件：</span>
                 <el-select v-model="filterType" placeholder="产品类型" clearable style="width: 140px; margin-right: 12px;">
-                    <el-option label="原材料" value="raw_material" />
-                    <el-option label="包装材料" value="packaging" />
-                    <el-option label="设备器具" value="equipment" />
-                    <el-option label="清洁用品" value="cleaning" />
-                    <el-option label="宣传物料" value="promote" />
+                    <el-option label="茶饮原料" value="茶饮原料" />
+                    <el-option label="包装物料" value="包装物料" />
+                    <el-option label="设备器具" value="设备器具" />
                 </el-select>
             </div>
         </div>
@@ -306,12 +311,12 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
 
             <div v-else>
                 <div class="list-header">
-                    <span class="total-count">共找到 {{ searchResults.length }} 条记录</span>
+                    <span class="total-count">共找到 {{ total }} 条记录</span>
                 </div>
 
                 <el-table :data="paginatedData" v-loading="loading" border style="width: 100%"
                     @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="ID" width="70" />
+                    <el-table-column prop="id" label="产品编号" width="90" />
                     <el-table-column prop="name" label="产品名称" min-width="120" />
                     <el-table-column prop="type" label="产品类型" width="110">
                         <template #default="{ row }">
@@ -342,7 +347,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     <el-pagination
                         v-model:current-page="currentPage"
                         :page-size="pageSize"
-                        :total="searchResults.length"
+                        :total="total"
                         layout="prev, pager, next"
                         prev-text="上一页"
                         next-text="下一页"
@@ -362,11 +367,9 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
 
                 <el-form-item label="产品类型" required>
                     <el-select v-model="form.type" placeholder="请选择产品类型" style="width: 100%;">
-                        <el-option label="原材料" value="raw_material" />
-                        <el-option label="包装材料" value="packaging" />
-                        <el-option label="设备器具" value="equipment" />
-                        <el-option label="清洁用品" value="cleaning" />
-                        <el-option label="宣传物料" value="promote" />
+                        <el-option label="茶饮原料" value="茶饮原料" />
+                        <el-option label="包装物料" value="包装物料" />
+                        <el-option label="设备器具" value="设备器具" />
                     </el-select>
                 </el-form-item>