商品管理的商品列表分页

src/views/Commodity/MerchandiseCenter.vue

@@ -250,16 +250,16 @@
 import { ElMessage } from 'element-plus';
 import { ref, onMounted } from 'vue';
 import myAxios from "@/api/myAxios";
-const pageNum = ref(0);
-const pageSize = ref(0);
+//总页数
 const total = ref(0);
 const id = ref([]);
-onMounted(() => {
-  load();
-});
-const handleSelectionChange = (row: any) => {
-  id.value = JSON.parse(JSON.stringify(row));
-};
+//封装分页
+const searchParams: any = ref({
+  //当前页码
+  current: 1,
+  //每页显示条数
+  pageSize: 5
+})
 const username = ref('');
 const detailDialogVisible = ref(false);
 const editDialogVisible = ref(false);
@@ -267,6 +267,7 @@ const types = ref('');
 const Region = ref('');
 let selectedProduct = ref('');
 const loading = ref(false)
+const tableData = ref([]);
 let editForm = ref({
   id: '',
   goodImg: '',
@@ -280,6 +281,13 @@ let editForm = ref({
   label: '',
   introDetail: '',
 });
+//页面加载时获取商品列表
+onMounted(() => {
+  getGoodList()
+})
+const handleSelectionChange = (row: any) => {
+  id.value = JSON.parse(JSON.stringify(row));
+};
 const handleView = (index: number, row: any) => {
   selectedProduct = row;
   detailDialogVisible.value = true;
@@ -298,9 +306,7 @@ const handleOff = (index: number, row: any) => {
     row.attribute = '上架';
   }
 };
-onMounted(() => {
-  getTableData()
-})
+
 const handleDelete = (index: number, row: any) => {
   const confirmDelete = window.confirm('您确定要删除该商品吗？');
   if (confirmDelete) {
@@ -311,13 +317,15 @@ const handleDelete = (index: number, row: any) => {
     });
   }
 };
-const searchParams: any = ref({})
-const getTableData = async () => {
+
+const getGoodList = async () => {
   loading.value = true;
   try {
-    const res = await myAxios.post('/api/goods/update', {...tableData.value });
+    const res = await myAxios.post('/goods/list/page', {...searchParams.value });
+    console.log(res.data)
     if (res.data.code === 1) {
       tableData.value = res.data.data.records;
+      total.value = parseInt(res.data.data.total)
     } else {
       ElMessage({
         message: '获取数据失败',
@@ -327,73 +335,65 @@ const getTableData = async () => {
     ElMessage({
       message: '发生错误',
     });
-  } finally {
-    loading.value = false;
   }
 }
-
-const tableData = ref([
-  {
-    id: '',
-    goodImg: '',
-    name: '',
-    price: '',
-    type: '',
-    inventory: '',//库存
-    isShelves: '',
-    region: '',
-    label: '',//
-    introDetail: '',//商品详情介绍
-    attribute:'',
-  },
-]);
+//处理行数大小变化
+const handleSizeChange =(newSize : any)=>{
+  searchParams.value.pageSize = newSize //新的页面数
+  getGoodList()
+}
+//处理当前页面变化
+const handleCurrentChange = (Current : any) => {
+  searchParams.value.current = Current 
+  getGoodList()
+}
 const reset = () => {
   username.value = '';
   types.value = '';
   Region.value = '';
 };
-const saveEdit = () => {
-  const indexToUpdate = tableData.findIndex(item => item.id === editForm.value.id);
-  if (indexToUpdate!== -1) {
-    tableData[indexToUpdate] = {
-      ...tableData[indexToUpdate],
-      ...editForm.value,
-    };
-    ElMessage({
-      message: '编辑成功',
-      type: 'success',
-    });
-    editDialogVisible.value = false;
-  };
-};
+// const saveEdit = () => {
+//   const indexToUpdate = tableData.findIndex(item => item.id === editForm.value.id);
+//   if (indexToUpdate!== -1) {
+//     tableData[indexToUpdate] = {
+//       ...tableData[indexToUpdate],
+//       ...editForm.value,
+//     };
+//     ElMessage({
+//       message: '编辑成功',
+//       type: 'success',
+//     });
+//     editDialogVisible.value = false;
+//   };
+// };
 
-const load = async () => {
-  await instance.get('/admin/findAllUsers').then(res => {
-    console.log(res.data.data);
-    res.data.data.forEach(item => {
-      console.log(item);
-    });
-    tableData.value = res.data.data;
-  });
-};
+// const getListPage = async () => {
+//   await instance.post('/goods/list/page').then(res => {
+//     console.log(res.data.data);
+//     res.data.data.forEach(item => {
+//       console.log(item);
+//     });
+//     tableData.value = res.data.data;
+//   });
+// };
 const delBatchSuccess = () => {
   ElMessage({
     message: '批量删除成功',
     type: 'success',
   });
 };
-const delBatch = async () => {
-  await instance.post('').then(res => {
-    if (res.data.code === '200') {
-      load();
-    } else {
-      ElMessage({
-        message: '批量删除失败',
-        type: 'error',
-      });
-    }
-  });
-};
+// const delBatch = async () => {
+//   await instance.post('').then(res => {
+//     if (res.data.code === '200') {
+//       load();
+//     } else {
+//       ElMessage({
+//         message: '批量删除失败',
+//         type: 'error',
+//       });
+//     }
+//   });
+// };
 </script>
 
 <style scoped>

src/views/User/UserManagement.vue

@@ -72,7 +72,6 @@
 import { ElMessage } from 'element-plus';
 import myAxios from '@/api/myAxios';
 import {ref, onMounted} from 'vue'
-import { da } from 'element-plus/es/locales.mjs';
 
 //获取的所有数据
 const tableData = ref([])
@@ -114,7 +113,7 @@ const getUserList = async () => {
 const handleSelectionChange  = (val:any)=>{
   console.log(val)
 }
-// 处理页大小变化
+// 处理行数大小变化
 const handleSizeChange = (newSize:any) => {
   searchParams.value.pageSize = newSize //新的页面条数
   getUserList() //重新发起请求