修改样式,增加公共组件滑动更新数据

src/components/ScrollLoading/index.js

@@ -1,66 +1,32 @@
 import { Spin } from 'antd';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 export default function ScrollLoading({
   loading,
   children,
-  totalLength, //当前请求到的数据总长度
-  pagination = { current: 1, total: 0 },
+  pagination = { current: 1, total: 0, pageSize: 20 },
   handleLoadData, //请求数据方法
   height = 90, //除滚动区域外其他高度(只是通用标题就是90)
 }) {
-  const bottomAreaOfList = useRef();
   const scrollContent = useRef();
-  // 是否已经发送请求 防止发送多次同样的请求
-  const load = useRef();
-
-  console.log('-----------------', pagination);
 
   const handleScroll = () => {
-    const { current, total } = pagination;
-    if (totalLength >= total) {
-      return;
-    }
-    const rect = bottomAreaOfList.current.getBoundingClientRect();
-    const isVisible =
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <=
-        (scrollContent.current.innerHeight ||
-          document.documentElement.clientHeight) &&
-      rect.right <=
-        (scrollContent.current.innerWidth ||
-          document.documentElement.clientWidth);
-
-    if (isVisible && !load.current) {
-      load.current = true;
+    const { current, total, pageSize } = pagination;
+    if (current * pageSize >= total) return;
+    const { scrollHeight, clientHeight, scrollTop } = scrollContent.current;
+    if (scrollHeight - clientHeight <= scrollTop + 1 && !loading) {
       handleLoadData(current + 1);
     }
   };
 
-  // 监听滚动事件
-  useEffect(() => {
-    load.current = false;
-    scrollContent.current.addEventListener('scroll', handleScroll);
-    return () => {
-      scrollContent.current.removeEventListener('scroll', handleScroll);
-    };
-  }, [loading]);
-
   return (
     <Spin spinning={loading}>
       <div
         ref={scrollContent}
-        style={{ overflowY: 'scroll', height: `calc(100vh - ${height + 1}px)` }}
+        onScroll={handleScroll}
+        style={{ overflowY: 'scroll', height: `calc(100vh - ${height}px)` }}
       >
         {children}
-        <div
-          ref={bottomAreaOfList}
-          style={{
-            height: '1px',
-          }}
-        />
-        <div />
       </div>
     </Spin>
   );

src/pages/SmartOps/HistoryRecord.js

@@ -1,9 +1,10 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
+import ScrollLoading from '@/components/ScrollLoading';
 import { getHistoryRecord } from '@/services/SmartOps';
 import { GetTokenFromUrl } from '@/utils/utils';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Button, DatePicker, Select, Spin, Table } from 'antd';
+import { Button, DatePicker, Select, Table } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
@@ -30,24 +31,29 @@ const HistoryRecord = (props) => {
     start_time: '',
     end_time: '',
     page: 1,
-    page_size: 10,
+    page_size: 20,
   };
-
+  const [data, setData] = useState([]);
+  const [pagination, setPagination] = useState({});
   const [queryParams, setQueryParams] = useState(defaultParams);
 
   const [formData, setFormData] = useState(
     convertObject2FormData(defaultParams),
   );
 
-  const {
-    data,
-    run: getList,
-    loading,
-  } = useRequest((params = formData) => getHistoryRecord(params), {
-    formatResult: (res) => {
-      return res?.data;
+  const { run: getList, loading } = useRequest(
+    (params = formData) => getHistoryRecord(params),
+    {
+      onSuccess: (res) => {
+        if (res.pagenation?.current == 1) {
+          setData(res?.list);
+        } else {
+          setData([...data, ...res?.list]);
+        }
+        setPagination(res.pagenation);
+      },
     },
-  });
+  );
 
   const columns = [
     {
@@ -118,18 +124,13 @@ const HistoryRecord = (props) => {
       start_time: queryParams.start_time || '',
       end_time: queryParams.end_time || '',
       page: queryParams.page || 1,
-      page_size: queryParams.page_size || 10,
+      page_size: queryParams.page_size || 20,
     };
     switch (key) {
       case 'date':
         if (value?.length === 2) {
           tempParams.start_time = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
           tempParams.end_time = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
-          console.log(
-            '----------------',
-            dayjs(value[0]).format('YYYY-MM-DD 00:00:00'),
-            dayjs(value[1]).format('YYYY-MM-DD 00:00:00'),
-          );
         } else {
           tempParams.start_time = '';
           tempParams.end_time = '';
@@ -142,7 +143,6 @@ const HistoryRecord = (props) => {
       default:
         break;
     }
-    console.log('-------------------', tempParams);
     setQueryParams(tempParams);
   };
 
@@ -163,37 +163,28 @@ const HistoryRecord = (props) => {
   return (
     <PageContent>
       <PageTitle returnable>历史记录</PageTitle>
-      <Spin spinning={loading}>
-        <div className={styles.searchContent}>
-          {/* <Button
-            className={[styles.marginBottom, styles.marginRight].join(' ')}
-            type="primary"
-            onClick={() => navigate(-1)}
-          >
-            返回
-          </Button> */}
-          {/* <div className={styles.searchContent}> */}
-          日期：
-          <RangePicker
-            className={styles.timePicker}
-            onChange={(value) => handleParamsChange('date', value)}
-          />
-          <Button
-            className={styles.marginLeft}
-            type="primary"
-            onClick={() => handleSearch()}
-          >
-            查询
-          </Button>
-          {/* </div> */}
-        </div>
-        <Table
-          dataSource={data?.list}
-          columns={columns}
-          pagination={data?.pagenation}
-          onChange={({ current }) => handleParamsChange('page', current)}
+      <div className={styles.searchContent}>
+        日期：
+        <RangePicker
+          className={styles.timePicker}
+          onChange={(value) => handleParamsChange('date', value)}
         />
-      </Spin>
+        <Button
+          className={styles.marginLeft}
+          type="primary"
+          onClick={() => handleSearch()}
+        >
+          查询
+        </Button>
+      </div>
+      <ScrollLoading
+        height={182}
+        loading={loading}
+        pagination={pagination}
+        handleLoadData={(current) => handleParamsChange('page', current)}
+      >
+        <Table dataSource={data} columns={columns} pagination={false} />
+      </ScrollLoading>
     </PageContent>
   );
 };

src/pages/SmartOps/OperationRecord.js

@@ -1,11 +1,12 @@
 import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import ScrollLoading from '@/components/ScrollLoading';
 import { getVarValues } from '@/services/DeviceInfo';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Button, DatePicker, Select, Spin, Table } from 'antd';
+import { Button, DatePicker, Select, Table } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
-import PageTitle from '@/components/PageTitle';
 
 const { RangePicker } = DatePicker;
 const { Option } = Select;
@@ -30,24 +31,29 @@ const OperationRecord = (props) => {
     e_time: '',
     cause_type: '',
     currentPage: 1,
-    pageSize: 10,
+    pageSize: 20,
   };
-
+  const [data, setData] = useState([]);
+  const [pagination, setPagination] = useState({});
   const [queryParams, setQueryParams] = useState(defaultParams);
 
   const [formData, setFormData] = useState(
     convertObject2FormData(defaultParams),
   );
 
-  const {
-    data,
-    run: getList,
-    loading,
-  } = useRequest((params = formData) => getVarValues(params), {
-    formatResult: (res) => {
-      return res?.data;
+  const { run: getList, loading } = useRequest(
+    (params = formData) => getVarValues(params),
+    {
+      onSuccess: (res) => {
+        if (res.pagination?.current == 1) {
+          setData(res?.list);
+        } else {
+          setData([...data, ...res?.list]);
+        }
+        setPagination(res.pagination);
+      },
     },
-  });
+  );
 
   const columns = [
     {
@@ -140,15 +146,15 @@ const OperationRecord = (props) => {
       s_time: queryParams.s_time || '',
       e_time: queryParams.e_time || '',
       cause_type: queryParams.cause_type || '',
-      currentPage: queryParams.currentPage || 1,
-      pageSize: queryParams.pageSize || 10,
+      currentPage: 1,
+      pageSize: queryParams.pageSize || 20,
     };
-    debugger;
     switch (key) {
       case 'cause_type':
         tempParams[key] = value;
         break;
       case 'date':
+        tempParams.currentPage = 1;
         if (value?.length === 2) {
           tempParams.s_time = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
           tempParams.e_time = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
@@ -183,48 +189,46 @@ const OperationRecord = (props) => {
   return (
     <PageContent>
       <PageTitle returnable>操作记录</PageTitle>
-      <Spin spinning={loading}>
-        <div className={styles.searchContent}>
-          {/* <Button
+
+      <div className={styles.searchContent}>
+        {/* <Button
             className={styles.marginRight}
             type="primary"
             onClick={() => navigate(-1)}
           >
             返回
           </Button> */}
-          日期：
-          <RangePicker
-            className={[styles.timePicker, styles.marginRight].join(' ')}
-            onChange={(value) => handleParamsChange('date', value)}
-          />
-          <span style={{ marginLeft: '20px' }}>来源:</span>
-          <Select
-            placeholder="请选择来源"
-            style={{ width: 200 }}
-            onChange={(value) => handleParamsChange('cause_type', value)}
-            allowClear
-          >
-            <Option value="0">自主操作</Option>
-            <Option value="1">工况建议</Option>
-          </Select>
-          <Button
-            className={styles.marginLeft}
-            type="primary"
-            onClick={() => handleSearch()}
-          >
-            查询
-          </Button>
-        </div>
-
-        <Table
-          dataSource={data?.list || []}
-          columns={columns}
-          pagination={data?.pagination}
-          onChange={({ current }) => {
-            handleParamsChange('page', current);
-          }}
+        日期：
+        <RangePicker
+          className={[styles.timePicker, styles.marginRight].join(' ')}
+          onChange={(value) => handleParamsChange('date', value)}
         />
-      </Spin>
+        <span style={{ marginLeft: '20px' }}>来源:</span>
+        <Select
+          placeholder="请选择来源"
+          style={{ width: 200 }}
+          onChange={(value) => handleParamsChange('cause_type', value)}
+          allowClear
+        >
+          <Option value="0">自主操作</Option>
+          <Option value="1">工况建议</Option>
+        </Select>
+        <Button
+          className={styles.marginLeft}
+          type="primary"
+          onClick={() => handleSearch()}
+        >
+          查询
+        </Button>
+      </div>
+      <ScrollLoading
+        height={182}
+        loading={loading}
+        pagination={pagination}
+        handleLoadData={(current) => handleParamsChange('page', current)}
+      >
+        <Table dataSource={data || []} columns={columns} pagination={false} />
+      </ScrollLoading>
     </PageContent>
   );
 };

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

@@ -23,7 +23,7 @@ import { Col, Collapse, CollapseProps, Divider, List, Row } from 'antd';
 import ScrollLoading from '@/components/ScrollLoading';
 import { getMandateList } from '@/services/TaskManage';
 import dayjs from 'dayjs';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './taskList.less';
 
 const TaskList: React.FC<IPropsType> = (props) => {
@@ -45,10 +45,11 @@ const TaskList: React.FC<IPropsType> = (props) => {
     pageSize: 20,
     currentPage: 1,
   });
-  const [isLoadAll, setIsLoadAll] = useState(false);
-  const [pagination, setPagination] = useState({ current: 1, total: 0 });
-
-  const bottomAreaOfList = useRef<HTMLDivElement>(null);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    total: 0,
+    pageSize: 20,
+  });
 
   const { run: getList, loading: loadData } = useRequest(getMandateList, {
     defaultParams: [
@@ -298,7 +299,6 @@ const TaskList: React.FC<IPropsType> = (props) => {
       <ScrollLoading
         height={180}
         loading={loading || loadData}
-        totalLength={mandateList?.length}
         pagination={pagination}
         handleLoadData={(current: number) =>
           getList({ ...currentParams, currentPage: current })