fix: 工单列表添加分页加载按钮

src/pages/Center/MyTask/List/WorkOrderList.js

@@ -3,7 +3,7 @@ import PageTitle from '@/components/PageTitle';
 import { OrderStatus, OrderType } from '@/pages/TaskManage/constent';
 import { getUserWorkOrderList } from '@/services/TaskManage';
 import { connect, useLocation, useNavigate, useRequest } from '@umijs/max';
-import { Button, Col, Empty, Row, Tabs } from 'antd';
+import { Button, Col, Empty, Row, Spin, Tabs } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './WorkOrderList.less';
@@ -32,7 +32,7 @@ const WorkOrderList = (props) => {
 
   const [activedStatus, setActivedStatus] = useState();
 
-  const [workOrderList, setWorkOrderList] = useState(null);
+  const [workOrderListDOM, setWorkOrderList] = useState(null);
 
   const goWorkOrderDetail = (order) => {
     const orderID = order.id || order.Id;
@@ -95,7 +95,7 @@ const WorkOrderList = (props) => {
     return '-';
   };
 
-  const { run: getWorkOrderList } = useRequest(
+  const { run: getWorkOrderList, loading } = useRequest(
     (status) => {
       return getUserWorkOrderList({
         project_id,
@@ -146,7 +146,13 @@ const WorkOrderList = (props) => {
         {OrderStatus.map((item) => {
           return (
             <TabPane tab={item.label} key={String(item.value)}>
-              {workOrderList}
+              <Spin spinning={loading}>
+                <div
+                  style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}
+                >
+                  {workOrderListDOM}
+                </div>
+              </Spin>
             </TabPane>
           );
         })}

src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.js

@@ -8,7 +8,7 @@ import {
   getRepairRecordList,
 } from '@/services/TaskManage';
 import { connect, useLocation, useNavigate, useRequest } from '@umijs/max';
-import { Button, Col, Empty, Row, Tabs } from 'antd';
+import { Button, Col, Empty, Row, Spin, Tabs } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { OrderStatus, OrderType } from '../../constent';
@@ -40,7 +40,8 @@ const WorkOrderList = (props) => {
     currentPage: 1,
     total: 0,
   });
-  const [workOrderList, setWorkOrderList] = useState(null);
+  const [recordList, setRecordList] = useState([]);
+  const [workOrderListDOM, setWorkOrderList] = useState(null);
 
   const goWorkOrderDetail = (order) => {
     const orderID = order.id || order.Id;
@@ -107,8 +108,8 @@ const WorkOrderList = (props) => {
     return '-';
   };
 
-  const { run: getWorkOrderList } = useRequest(
-    (status) => {
+  const { run: getWorkOrderList, loading } = useRequest(
+    (status, pageInfo) => {
       switch (order_type) {
         case 1:
         case 6:
@@ -117,25 +118,45 @@ const WorkOrderList = (props) => {
             project_id,
             status: status || 0,
             types: order_type === 1 ? 0 : order_type === 6 ? 1 : 2,
+            pageSize: pageInfo?.pageSize || pagination.pageSize,
+            currentPage: pageInfo?.currentPage || pagination.currentPage,
           });
         case 2:
           return getRepairRecordList({
             project_id,
             acceptanceStatus: status || 0,
+            pageSize: pageInfo?.pageSize || pagination.pageSize,
+            currentPage: pageInfo?.currentPage || pagination.currentPage,
           });
         case 3:
-          return getMaintainRecordList({ project_id, status: status || 0 });
+          return getMaintainRecordList({
+            project_id,
+            status: status || 0,
+            pageSize: pageInfo?.pageSize || pagination.pageSize,
+            currentPage: pageInfo?.currentPage || pagination.currentPage,
+          });
         case 4:
-          return getPatrolMandateRecord({ project_id, status: status || 0 });
+          return getPatrolMandateRecord({
+            project_id,
+            status: status || 0,
+            pageSize: pageInfo?.pageSize || pagination.pageSize,
+            currentPage: pageInfo?.currentPage || pagination.currentPage,
+          });
         case 5:
-          return getReagentOrderList({ project_id, status: status || 0 });
+          return getReagentOrderList({
+            project_id,
+            status: status || 0,
+            pageSize: pageInfo?.pageSize || pagination.pageSize,
+            currentPage: pageInfo?.currentPage || pagination.currentPage,
+          });
       }
     },
     {
       throwOnError: true,
       formatResult: (result) => {
+        let temp = [];
         if (result?.data?.list) {
-          const temp = result.data.list.map((item) => {
+          temp = result.data.list.map((item) => {
             return {
               ...item,
               CreateTime: formatCreateTime(item),
@@ -167,23 +188,48 @@ const WorkOrderList = (props) => {
               }),
             };
           });
-          renderTabPannal(temp);
         }
 
         if (result?.data?.pagination) {
+          const tempPageInfo = {
+            pageSize:
+              result.data.pagination?.PageSize ||
+              result.data.pagination?.pageSize,
+            current:
+              result.data.pagination?.Current ||
+              result.data.pagination?.current,
+            total:
+              result.data.pagination?.Total || result.data.pagination?.total,
+          };
+          if (tempPageInfo.current === 1) {
+            setRecordList(temp);
+          } else {
+            setRecordList([...recordList, ...temp]);
+          }
+
+          if ([...recordList, ...temp].length < tempPageInfo.total) {
+            tempPageInfo.current++;
+          }
+
           setPagination({
-            pageSize: result.data.pagination.PageSize,
-            currentPage: result.data.pagination.Current,
-            total: result.data.pagination.Total,
+            pageSize: tempPageInfo.pageSize,
+            currentPage: tempPageInfo.current,
+            total: tempPageInfo.total,
           });
         }
       },
     },
   );
 
+  useEffect(() => {
+    renderTabPannal(recordList);
+  }, [recordList]);
+
   const onTabChange = (key) => {
     setActivedStatus(key);
-    getWorkOrderList(Number(key));
+    setRecordList([]);
+    setPagination({ pageSize: 20, currentPage: 1, total: 0 });
+    getWorkOrderList(Number(key), { pageSize: 20, currentPage: 1, total: 0 });
   };
 
   return (
@@ -201,9 +247,26 @@ const WorkOrderList = (props) => {
         {OrderStatus.map((item) => {
           return (
             <TabPane tab={item.label} key={String(item.value)}>
-              <div style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}>
-                {workOrderList}
-              </div>
+              <Spin spinning={loading}>
+                <div
+                  style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}
+                >
+                  {workOrderListDOM}
+                  <div className={styles.loadMoreBtn}>
+                    {recordList.length < pagination.total && (
+                      <Button
+                        style={{ fontSize: '24px' }}
+                        type="link"
+                        onClick={() => {
+                          getWorkOrderList(activedStatus);
+                        }}
+                      >
+                        加载更多
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </Spin>
             </TabPane>
           );
         })}

src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.less

@@ -23,6 +23,13 @@
   align-items: center;
 }
 
+.loadMoreBtn {
+  margin: 20px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .fontS24 {
   font-size: 24px;
 }