分页无效的问题

src/main.ts

@@ -34,7 +34,7 @@ import Logger from '@/utils/Logger'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
 
 import Print from 'vue3-print-nb'
-import { ElInfiniteScroll } from 'element-plus'
+
 
 
 import Flex from '@/components/Flex/Flex.vue'
@@ -44,7 +44,7 @@ export const MAIN_VERSION = '4.4.9'
 
 const setupAll = async () => {
   const app = createApp(App)
-  app.directive('infinite-scroll', ElInfiniteScroll) // 指令名必须为 'infinite-scroll'
+
   app.use(fetchPlugin)
 
   await setupI18n(app)

src/views/bpm/task/process-list/index.vue

@@ -58,8 +58,7 @@
         </el-checkbox>
       </div>
       <div
-        v-infinite-scroll="load"
-        style="overflow: auto; height: 70vh; padding: 1vh 0; margin: 0; list-style: none"
+        class="list-wrapper"
         v-loading="loading"
         v-show="list.length"
       >
@@ -98,6 +97,28 @@
           </el-card>
         </el-checkbox-group>
       </div>
+      <div class="pagination-bar" v-show="total > 0">
+        <div class="pagination-info">
+          共 <span class="total-num">{{ total }}</span> 条
+        </div>
+        <div class="pagination-controls">
+          <el-button
+            size="small"
+            :disabled="queryParams.pageNo <= 1"
+            @click="prevPage"
+            :icon="ArrowLeft"
+            circle
+          />
+          <span class="page-text">{{ queryParams.pageNo }} / {{ totalPages }}</span>
+          <el-button
+            size="small"
+            :disabled="queryParams.pageNo >= totalPages"
+            @click="nextPage"
+            :icon="ArrowRight"
+            circle
+          />
+        </div>
+      </div>
       <div class="no-content" v-show="list.length <= 0">
         <span>暂无数据</span>
       </div>
@@ -126,6 +147,7 @@ import { config } from '@/config/axios/config'
 import ProcessDetail from './detail.vue'
 import axios from '@/config/axios'
 import { ElMessage } from 'element-plus'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 defineOptions({ name: 'BpmProcessList' })
 const { base_url } = config
 const activeName = ref('1')
@@ -140,16 +162,24 @@ const queryParams = reactive({
   queryType: '1',
   templateContent: ''
 })
+
+const tabPageMap = reactive<Record<string, number>>({
+  '1': 1,
+  '2': 1,
+  '3': 1,
+  '4': 1
+})
 const queryFormRef = ref()
 const show = ref(true)
 const batchLoading = ref(false) // 批量审批按钮
 // 点击tab页签
 const handleClick = (tab) => {
+  tabPageMap[activeName.value] = queryParams.pageNo
   activeName.value = tab.paneName
   queryParams.queryType = tab.paneName
   list.value = []
   processInstanceIds.value = []
-  queryParams.pageNo = 1
+  queryParams.pageNo = tabPageMap[tab.paneName] || 1
   getList()
 
   // 清空路由
@@ -159,18 +189,16 @@ const handleClick = (tab) => {
 }
 
 const currItem: any = ref({})
+
+const totalPages = computed(() => Math.ceil(total.value / queryParams.pageSize) || 1)
+
 const getList = async (flag: boolean = false, refresh = false) => {
-  // flag 存在数据， refresh 是否重载页面数据
   try {
     loading.value = true
     const res = await ProcessInstanceApi.getMyPage(queryParams)
-    if (refresh) {
-      list.value = res.list
-    } else {
-      list.value = list.value.concat(res.list)
-    }
-    total.value = res.total
-    if (flag && res.list[0]) {
+    list.value = res.list || []
+    total.value = res.total || 0
+    if (flag && res.list && res.list[0]) {
       handleClickCard(res.list[0])
       currItem.value = res.list[0]
     }
@@ -179,10 +207,20 @@ const getList = async (flag: boolean = false, refresh = false) => {
   }
 }
 
-const load = () => {
-  console.log('加载。。。')
-  if (queryParams.pageNo * queryParams.pageSize < total.value) {
+const prevPage = () => {
+  if (queryParams.pageNo > 1) {
+    queryParams.pageNo -= 1
+    tabPageMap[activeName.value] = queryParams.pageNo
+    processInstanceIds.value = []
+    getList()
+  }
+}
+
+const nextPage = () => {
+  if (queryParams.pageNo < totalPages.value) {
     queryParams.pageNo += 1
+    tabPageMap[activeName.value] = queryParams.pageNo
+    processInstanceIds.value = []
     getList()
   }
 }
@@ -200,6 +238,7 @@ const handleClickCard = (item: any) => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
+  tabPageMap[activeName.value] = 1
   processInstanceIds.value = []
   getList()
 }
@@ -327,6 +366,49 @@ onMounted(async () => {
     font-weight: bold;
   }
 
+  .list-wrapper {
+    overflow-y: auto;
+    height: calc(70vh );
+    padding: 10px 0 0 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .pagination-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    padding: 0 12px;
+    margin-top: 8px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    .pagination-info {
+      font-size: 13px;
+      color: #909399;
+
+      .total-num {
+        color: #409eff;
+        font-weight: 600;
+        margin: 0 2px;
+      }
+    }
+
+    .pagination-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .page-text {
+        font-size: 13px;
+        color: #606266;
+        min-width: 50px;
+        text-align: center;
+      }
+    }
+  }
+
   .card-item {
     position: relative;
     margin-bottom: 5px;