Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

src/pages/SafetyManagement/doorDetail.js

@@ -3,11 +3,23 @@ import PageTitle from '@/components/PageTitle';
 import { queryGateOpList } from '@/services/safety';
 import { useParams, useRequest } from '@umijs/max';
 import { Table } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 const DoorDetail = () => {
   const { projectId } = useParams();
+  const [list, setList] = useState([]);
+  const [curPagination, setCurPagination] = useState({});
 
-  const { data, loading } = useRequest(queryGateOpList, {
+  const bottomAreaOfList = useRef();
+  // 是否已经发送请求 防止发送多次同样的请求
+  const load = useRef();
+
+  const { run, loading } = useRequest((data) => queryGateOpList(data), {
     defaultParams: [{ project_id: projectId }],
+    onSuccess: (data) => {
+      load.current = false;
+      setList([...list, ...data.list]);
+      setCurPagination(data.pagination);
+    },
   });
   const columns = [
     {
@@ -53,6 +65,33 @@ const DoorDetail = () => {
     },
   ];
 
+  const handleScroll = () => {
+    const { current, total } = curPagination;
+    if (list.length >= total) {
+      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 && !load.current) {
+      load.current = true;
+      run({ project_id: projectId, current: current + 1 });
+    }
+  };
+
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [loading]);
+
   return (
     <PageContent closeable={false}>
       <PageTitle children="门禁日志" returnable />
@@ -60,10 +99,17 @@ const DoorDetail = () => {
       <Table
         loading={loading}
         style={{ marginTop: '30px' }}
-        dataSource={data?.list}
+        dataSource={list}
         columns={columns}
         pagination={false}
       />
+      <div
+        ref={bottomAreaOfList}
+        style={{
+          height: '1px',
+        }}
+      />
+      <div />
     </PageContent>
   );
 };