fix：任务列表加载更多按钮可见性问题及删除按钮，改为滚动到最底部时加载更多

src/pages/TaskManage/Detail/TaskList/TaskList.tsx

@@ -18,20 +18,11 @@ import TopFilter from '@/pages/TaskManage/components/TopFilter';
 import { IMandateType } from '@/pages/TaskManage/index.types';
 import { useNavigate } from '@@/exports';
 import { DownOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Col,
-  Collapse,
-  CollapseProps,
-  Divider,
-  List,
-  Row,
-  Spin,
-} from 'antd';
+import { Col, Collapse, CollapseProps, Divider, List, Row, Spin } from 'antd';
 
 import { getMandateList } from '@/services/TaskManage';
 import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styles from './taskList.less';
 
 const TaskList: React.FC<IPropsType> = (props) => {
@@ -44,45 +35,60 @@ const TaskList: React.FC<IPropsType> = (props) => {
 
   const navigate = useNavigate();
 
-  // 用于展示的任务列表
-  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([]);
   // 顶部选择器配置
   const [topFiltersConfig, setTopFiltersConfig] = useState<ITopFilter[]>([]);
   const [mandateList, setMandateList] = useState<IMandateType[]>([]);
-  const [mandatePage, setMandatePage] = useState({
-    pageSize: 20,
-    total: 0,
-    current: 1,
-  });
   const [currentParams, setCurrentParams] = useState({
     project_id,
     mandate_type: mandateType,
     pageSize: 20,
-    currentPage: 2,
+    currentPage: 1,
   });
+
+  const bottomAreaOfList = useRef<HTMLDivElement>(null);
+
   const { run: getList, loading: loadData } = useRequest(getMandateList, {
     defaultParams: [
       {
-        project_id,
-        mandate_type: mandateType,
-        pageSize: mandatePage.pageSize,
-        currentPage: mandatePage.current,
+        ...currentParams,
       },
     ],
-
     formatResult: (result) => {
-      console.log(mandatePage);
+      const pageInfo = result.data.pagination;
       if (result.data.pagination.current === 1) {
         setMandateList(result.data.list);
       } else {
-        setMandateList([...mandateList, ...result.data.list]);
+        // 如果还有数据没加载
+        if (mandateList.length < pageInfo.total) {
+          setMandateList([...mandateList, ...result.data.list]);
+        }
       }
-      const pageInfo = result.data.pagination;
       pageInfo.current += 1;
-      setMandatePage(pageInfo);
+      setCurrentParams({
+        ...currentParams,
+        currentPage: pageInfo.current,
+      });
     },
   });
 
+  const handleScroll = () => {
+    if (bottomAreaOfList.current === null || loadData) {
+      return;
+    }
+    const rect = bottomAreaOfList.current.getBoundingClientRect();
+    const isVisible =
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+    if (isVisible) {
+      console.log(currentParams);
+      getList(currentParams);
+    }
+  };
+
   // 获取用户
   useEffect(() => {
     if (userList.length === 0) {
@@ -93,13 +99,17 @@ const TaskList: React.FC<IPropsType> = (props) => {
     }
   }, []);
 
-  // 首次获取任务数据
-
+  // 监听滚动事件
   useEffect(() => {
-    setMandateListShow(mandateList);
-  }, [mandateList]);
+    // 组件挂载时添加滚动事件监听
+    window.addEventListener('scroll', handleScroll);
+    // 组件卸载时移除滚动事件监听
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [loadData, currentParams]);
 
-  // 顶部下拉过滤器配置
+  // 配置顶部下拉过滤器
   useEffect(() => {
     const filters: ITopFilter[] = [];
     filters.push({
@@ -127,10 +137,8 @@ const TaskList: React.FC<IPropsType> = (props) => {
         };
       }),
     });
+
     setTopFiltersConfig(filters);
-    // setMandateListShow(
-    //   mandateList.filter((item) => item.MandateType === mandateType),
-    // );
   }, [mandateType]);
 
   /**
@@ -144,7 +152,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
     const params: any = {
       project_id,
       mandate_type: mandateType,
-      pageSize: mandatePage.pageSize,
+      pageSize: 20,
       currentPage: 1,
     };
     for (let i = 0; i < value.length; i++) {
@@ -152,40 +160,17 @@ const TaskList: React.FC<IPropsType> = (props) => {
         params[topFiltersConfig[i].key] = value[i];
       }
     }
-    getList(params);
-    params.currentPage += 1;
     setCurrentParams(params);
-  };
-
-  const loadMoreData = () => {
-    getList(currentParams);
-    if (mandateList.length < mandatePage.total) {
-      setCurrentParams({
-        ...currentParams,
-        currentPage: currentParams.currentPage + 1,
-      });
-    }
+    getList(params);
   };
 
   const loadMoreMandate = !loadData ? (
     <div
+      ref={bottomAreaOfList}
       style={{
-        textAlign: 'center',
-        marginTop: 12,
-        height: 32,
-        lineHeight: '32px',
-        fontSize: '28px',
+        height: '10px',
       }}
-    >
-      <Button
-        type="text"
-        size="large"
-        style={{ fontSize: '28px', height: '56px', width: '160px' }}
-        onClick={loadMoreData}
-      >
-        加载更多
-      </Button>
-    </div>
+    />
   ) : null;
 
   const goTaskDetail = (mandate: IMandateType) => {
@@ -343,7 +328,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
       <Spin spinning={loading || loadData}>
         <List
           itemLayout="horizontal"
-          dataSource={mandateListShow}
+          dataSource={mandateList}
           renderItem={buildTaskList}
           loadMore={loadMoreMandate}
         />

src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -67,8 +67,9 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
         Repairman:
           userList.find((item) => item.ID === temp.MaintenancePerson) || '-',
         DispatchMan:
-          userList.find((item) => (item.ID = temp.Operators[0]?.Operator?.ID)) ||
-          '-',
+          userList.find(
+            (item) => (item.ID = temp.Operators[0]?.Operator?.ID),
+          ) || '-',
         OrderStatus:
           OrderStatus.find((item) => item.value === temp.Status) || '-',
       };
@@ -81,10 +82,16 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
     manual: true,
     formatResult: (result: any) => {
       const temp = result.data.list[0];
+      if (temp === undefined) {
+        return;
+      }
       const tempDetail: IOrderInfo = {
         CreateTime: moment(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
         PlanTime: moment(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
-        RepairTime: temp.RepairTime && moment(temp.RepairTime).format('YYYY-MM-DD HH:mm') || '-',
+        RepairTime:
+          (temp.RepairTime &&
+            moment(temp.RepairTime).format('YYYY-MM-DD HH:mm')) ||
+          '-',
         Reason: temp.Reason,
         Repairman: userList.find((item) => item.ID === temp.Repairman) || '-',
         DispatchMan: