Sfoglia il codice sorgente

```
feat(pagination): 添加分页组件的页面大小切换功能

- 在Pagination组件中新增page-sizes属性和size-change事件监听
- 添加handleSizeChange方法处理页面大小变化
- 更新组件props定义,增加pageSizes配置选项
- 修改emit事件,添加update:pageSize事件类型

perf(request): 增加API请求超时时间从10秒到30秒

- 将axios实例的timeout配置从1000毫秒调整为300毫秒

feat(components): 统一所有页面组件的分页处理逻辑

- 修改LearningSystem、pinglun、xuxibiji等组件的handlePageChange方法
- 支持页面大小参数传递,更新对应的pageSize值
- 调整SearchPlatform默认页面大小从16到20
```

zhangningning 1 settimana fa
parent
commit
736a3ecba2

+ 1 - 1
src/api/request.js

@@ -5,7 +5,7 @@ import { useAppStore } from '@/pinia/appStore'
 // 创建 axios 实例
 const request = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
-  timeout: 10000,
+  timeout: 30000,
   headers: {
     'Content-Type': 'application/json;charset=UTF-8'
   }

+ 14 - 3
src/components/Pagination.vue

@@ -7,10 +7,12 @@
     <div class="pagination-container">
       <el-pagination
         background
-        layout="prev, pager, next, total"
+        layout="sizes, prev, pager, next, total"
         :total="total"
         :page-size="pageSize"
+        :page-sizes="pageSizes"
         :current-page="currentPage"
+        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </div>
@@ -30,15 +32,24 @@ defineProps({
   currentPage: {
     type: Number,
     default: 1
+  },
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 50]
   }
 })
 
-const emit = defineEmits(['update:currentPage', 'pageChange'])
+const emit = defineEmits(['update:currentPage', 'pageChange','update:pageSize'])
 
 const handleCurrentChange = (page) => {
   emit('update:currentPage', page)
   emit('pageChange', page)
-}
+};
+const handleSizeChange = (size) => {
+  console.log('Size changed to:', size);
+  emit('update:pageSize', size)
+  emit('pageChange', 1, size) // Reset to first page on size change
+};
 </script>
 
 <style lang="scss">

+ 2 - 1
src/pages/LearningSystem/LearningSystem.vue

@@ -230,8 +230,9 @@
       listTotal.value = res.total || 0;
     }
   }
-  const handlePageChange = (page) => {
+  const handlePageChange = (page, pageSize) => {
     searchFom.pageNum = page
+    if(pageSize)searchFom.pageSize = pageSize;
     // 这里可以添加获取数据的逻辑
     console.log('当前页:', page)
     getList();

+ 3 - 2
src/pages/LearningSystem/components/pinglun.vue

@@ -85,8 +85,9 @@ onActivated(() => {
     getList('init');
   }
 })
-const handlePageChange = (page) => {
-  searchFom.pageNum = page
+const handlePageChange = (page, pageSize) => {
+  searchFom.pageNum = page;
+  if(pageSize)searchFom.pageSize = pageSize;
   // 这里可以添加获取数据的逻辑
   console.log('当前页:', page);
   getList();

+ 3 - 2
src/pages/LearningSystem/components/xuxibiji.vue

@@ -86,8 +86,9 @@ const searchFom = reactive({
 })
 const list = ref([]);
 
-const handlePageChange = (page) => {
-  searchFom.pageNum = page
+const handlePageChange = (page, pageSize) => {
+  searchFom.pageNum = page;
+  if(pageSize)searchFom.pageSize = pageSize;
   // 这里可以添加获取数据的逻辑
   console.log('当前页:', page);
   getList();

+ 2 - 1
src/pages/Personal/BusinessManagement.vue

@@ -318,8 +318,9 @@ const changePhone = (e) => {
   getemployeeList();
 }
 
-const handlePageChange = (pageNum) => {
+const handlePageChange = (pageNum, pageSize) => {
   form.value.pageNum = pageNum;
+  if(pageSize)form.value.pageSize = pageSize;
   getemployeeList();
 }
 

+ 2 - 1
src/pages/Personal/Collection.vue

@@ -68,9 +68,10 @@ const getList = async () => {
   form.value.total = res.total;
   list.value = res.rows
 }
-const handlePageChange = (page) => {
+const handlePageChange = (page, pageSize) => {
   list.value = []
   form.value.pageNum = page;
+  if(pageSize)form.value.pageSize = pageSize;
   getList()
 }
 // 跳转详情

+ 2 - 1
src/pages/Personal/Demand.vue

@@ -330,9 +330,10 @@ const getList = async () => {
   form.value.total = res.total;
 }
 
-const handlePageChange = (page) => {
+const handlePageChange = (page, pageSize) => {
   list.value = []
   form.value.pageNum = page;
+  if(pageSize)form.value.pageSize = pageSize;
   getList()
 }
 

+ 2 - 1
src/pages/Personal/MemberDetails.vue

@@ -44,9 +44,10 @@ const getList = async () => {
   form.value.total = res?.total;
   list.value = res?.rows || [];
 }
-const handlePageChange = (page) => {
+const handlePageChange = (page, pageSize) => {
   list.value = []
   form.value.pageNum = page;
+  if(pageSize)form.value.pageSize = pageSize;
   getList()
 }
 onMounted(() => {

+ 2 - 1
src/pages/Personal/Orders.vue

@@ -329,8 +329,9 @@ const getList = async () => {
   list.value = res.rows || [];
   form.value.total = res.total;
 }
-const handlePageChange = (page) => {
+const handlePageChange = (page, pageSize) => {
   form.value.pageNum = page;
+  if(pageSize)form.value.pageSize = pageSize;
   getList()
 }
 

+ 2 - 1
src/pages/Personal/Wallet.vue

@@ -465,9 +465,10 @@ const getList = async () => {
   form.value.total = res.total;
 }
 
-const handlePageChange = (newPage: number) => {
+const handlePageChange = (newPage: number, pageSize?: number) => {
   // list.value = []
   form.value.pageNum = newPage;
+  if(pageSize)form.value.pageSize = pageSize;
   getList()
 }
 // 获取用户信息

+ 2 - 1
src/pages/Personal/Workflow.vue

@@ -132,9 +132,10 @@ const getList = async () => {
   form.value.total = res.total;
   list.value = res.rows
 }
-const handlePageChange = (page) => {
+const handlePageChange = (page, pageSize) => {
   list.value = []
   form.value.pageNum = page;
+  if(pageSize)form.value.pageSize = pageSize;
   getList()
 }
 onMounted(() => {

+ 2 - 1
src/pages/PersonalCenter.vue

@@ -737,8 +737,9 @@ const sendSmsCode = async () => {
 }
 
 
-const handlePageChange = (page) => {
+const handlePageChange = (page, pageSize) => {
   workForm.value.pageNum = page;
+  if(pageSize)workForm.value.pageSize = pageSize;
   getList()
 }
 

+ 4 - 3
src/pages/SearchPlatform.vue

@@ -132,7 +132,7 @@
     categoryId3: '',
     workflowTitle: '',
     pageNum: 1,
-    pageSize: 16,
+    pageSize: 20,
     orderByColumn: 'publishId',
     isAsc: 'desc'
   })
@@ -158,8 +158,9 @@
       listTotal.value = res.total || 0;
     }
   }
-  const handlePageChange = (page) => {
-    searchFom.pageNum = page
+  const handlePageChange = (page, pageSize) => {
+    searchFom.pageNum = page;
+    if(pageSize)searchFom.pageSize = pageSize;
     // 这里可以添加获取数据的逻辑
     console.log('当前页:', page)
     getList();

+ 3 - 2
src/pages/mibiShop/mibiShop.vue

@@ -71,8 +71,9 @@ onMounted(() => {
   getList('init');
 });
 
-const handlePageChange = (page) => {
-  searchFom.pageNum = page
+const handlePageChange = (page, pageSize) => {
+  searchFom.pageNum = page;
+  if(pageSize)searchFom.pageSize = pageSize;
   // 这里可以添加获取数据的逻辑
   console.log('当前页:', page);
   getList();

+ 2 - 1
src/pages/workflowTrade/workflowTrade.vue

@@ -209,9 +209,10 @@
     getList('init');
     getCategoryListFn();
   })
-  const handlePageChange = (page) => {
+  const handlePageChange = (page, pageSize) => {
     searchFom.pageNum = page
     // 这里可以添加获取数据的逻辑
+    if(pageSize)searchFom.pageSize = pageSize;
     console.log('当前页:', page);
     getList();
   }