修复表格滚动

package.json

@@ -91,6 +91,7 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^6.33.1",
     "@monaco-editor/react": "4.2.1",
+    "@react-hook/resize-observer": "^1.2.6",
     "@sentry/react": "^7.12.1",
     "@types/body-parser": "^1.19.2",
     "@types/cors": "^2.8.12",

src/hooks/useTableScrollHeight.ts

@@ -0,0 +1,16 @@
+import { MutableRefObject, useLayoutEffect, useState } from 'react';
+import useResizeObserver from '@react-hook/resize-observer'
+import { getTableScroll } from '@/utils';
+
+export default <T extends HTMLElement>(target: MutableRefObject<T>, extraHeight?: number) => {
+  const [height, setHeight] = useState<number>()
+
+  useResizeObserver(target, (entry) => {
+    let _targe = entry.target as any
+    if (!_targe.classList.contains('ant-table-wrapper')) {
+      _targe = entry.target.querySelector('.ant-table-wrapper')
+    }
+    setHeight(getTableScroll({ extraHeight, target: _targe as HTMLElement }))
+  })
+  return height
+}

src/pages/crontab/index.tsx

@@ -43,14 +43,13 @@ import CronLogModal from './logModal';
 import CronDetailModal from './detail';
 import cron_parser from 'cron-parser';
 import { diffTime } from '@/utils/date';
-import { getTableScroll } from '@/utils/index';
 import { history, useOutletContext } from '@umijs/max';
 import './index.less';
 import ViewCreateModal from './viewCreateModal';
 import ViewManageModal from './viewManageModal';
-import pagination from 'antd/lib/pagination';
 import { FilterValue, SorterResult } from 'antd/lib/table/interface';
 import { SharedContext } from '@/layouts';
+import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -202,10 +201,10 @@ const Crontab = () => {
           >
             {record.last_execution_time
               ? new Date(record.last_execution_time * 1000)
-                  .toLocaleString(language, {
-                    hour12: false,
-                  })
-                  .replace(' 24:', ' 00:')
+                .toLocaleString(language, {
+                  hour12: false,
+                })
+                .replace(' 24:', ' 00:')
               : '-'}
           </span>
         );
@@ -376,7 +375,6 @@ const Crontab = () => {
     filters: any;
   }>({} as any);
   const [viewConf, setViewConf] = useState<any>();
-  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
   const [detailCron, setDetailCron] = useState<any>();
   const [searchValue, setSearchValue] = useState('');
@@ -389,6 +387,7 @@ const Crontab = () => {
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
   const [moreMenuActive, setMoreMenuActive] = useState(false);
   const tableRef = useRef<any>();
+  const tableScrollHeight = useTableScrollHeight(tableRef)
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -415,11 +414,10 @@ const Crontab = () => {
   const getCrons = () => {
     setLoading(true);
     const { page, size, sorter, filters } = pageConf;
-    let url = `${
-      config.apiPrefix
-    }crons?searchValue=${searchText}&page=${page}&size=${size}&filters=${JSON.stringify(
-      filters,
-    )}`;
+    let url = `${config.apiPrefix
+      }crons?searchValue=${searchText}&page=${page}&size=${size}&filters=${JSON.stringify(
+        filters,
+      )}`;
     if (sorter && sorter.field) {
       url += `&sorter=${JSON.stringify({
         field: sorter.field,
@@ -584,8 +582,7 @@ const Crontab = () => {
       onOk() {
         request
           .put(
-            `${config.apiPrefix}crons/${
-              record.isDisabled === 1 ? 'enable' : 'disable'
+            `${config.apiPrefix}crons/${record.isDisabled === 1 ? 'enable' : 'disable'
             }`,
             {
               data: [record.id],
@@ -628,8 +625,7 @@ const Crontab = () => {
       onOk() {
         request
           .put(
-            `${config.apiPrefix}crons/${
-              record.isPinned === 1 ? 'unpin' : 'pin'
+            `${config.apiPrefix}crons/${record.isPinned === 1 ? 'unpin' : 'pin'
             }`,
             {
               data: [record.id],
@@ -770,16 +766,10 @@ const Crontab = () => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
-
-    setTimeout(() => {
-      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
-        setTableScrollHeight(getTableScroll());
-      }
-    });
   };
 
   const rowSelection = {
-    selectedRowIds,
+    selectedRowKeys: selectedRowIds,
     onChange: onSelectChange,
   };
 
@@ -878,97 +868,6 @@ const Crontab = () => {
     getCronViews();
   }, []);
 
-  useEffect(() => {
-    if (tableRef.current) {
-      setTableScrollHeight(getTableScroll());
-    }
-  }, []);
-
-  const panelContent = (
-    <>
-      {selectedRowIds.length > 0 && (
-        <div style={{ marginBottom: 16 }}>
-          <Button type="primary" style={{ marginBottom: 5 }} onClick={delCrons}>
-            批量删除
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => operateCrons(0)}
-            style={{ marginLeft: 8, marginBottom: 5 }}
-          >
-            批量启用
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => operateCrons(1)}
-            style={{ marginLeft: 8, marginRight: 8 }}
-          >
-            批量禁用
-          </Button>
-          <Button
-            type="primary"
-            style={{ marginRight: 8 }}
-            onClick={() => operateCrons(2)}
-          >
-            批量运行
-          </Button>
-          <Button type="primary" onClick={() => operateCrons(3)}>
-            批量停止
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => operateCrons(4)}
-            style={{ marginLeft: 8, marginRight: 8 }}
-          >
-            批量置顶
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => operateCrons(5)}
-            style={{ marginLeft: 8, marginRight: 8 }}
-          >
-            批量取消置顶
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => setIsLabelModalVisible(true)}
-            style={{ marginLeft: 8, marginRight: 8 }}
-          >
-            批量修改标签
-          </Button>
-          <span style={{ marginLeft: 8 }}>
-            已选择
-            <a>{selectedRowIds?.length}</a>项
-          </span>
-        </div>
-      )}
-      <Table
-        ref={tableRef}
-        columns={columns}
-        pagination={{
-          current: pageConf.page,
-          pageSize: pageConf.size,
-          showSizeChanger: true,
-          simple: isPhone,
-          total,
-          showTotal: (total: number, range: number[]) =>
-            `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
-          pageSizeOptions: [10, 20, 50, 100, 200, 500, total || 10000].sort(
-            (a, b) => a - b,
-          ),
-        }}
-        dataSource={value}
-        rowKey="id"
-        size="middle"
-        scroll={{ x: 1000, y: tableScrollHeight }}
-        loading={loading}
-        rowSelection={rowSelection}
-        rowClassName={getRowClassName}
-        onChange={onPageChange}
-      />
-    </>
-  );
-
   const viewAction = (key: string) => {
     switch (key) {
       case 'new':
@@ -1090,24 +989,94 @@ const Crontab = () => {
           {
             key: 'all',
             label: '全部任务',
-            children: panelContent,
           },
           ...[...enabledCronViews].slice(0, 2).map((x) => ({
             key: x.id,
             label: x.name,
-            children: panelContent,
           })),
         ]}
-      >
-        <Tabs.TabPane tab="全部任务" key="all">
-          {panelContent}
-        </Tabs.TabPane>
-        {[...enabledCronViews].slice(0, 2).map((x) => (
-          <Tabs.TabPane tab={x.name} key={x.id}>
-            {panelContent}
-          </Tabs.TabPane>
-        ))}
-      </Tabs>
+      />
+      <div ref={tableRef}>
+        {selectedRowIds.length > 0 && (
+          <div style={{ marginBottom: 16 }}>
+            <Button type="primary" style={{ marginBottom: 5 }} onClick={delCrons}>
+              批量删除
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => operateCrons(0)}
+              style={{ marginLeft: 8, marginBottom: 5 }}
+            >
+              批量启用
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => operateCrons(1)}
+              style={{ marginLeft: 8, marginRight: 8 }}
+            >
+              批量禁用
+            </Button>
+            <Button
+              type="primary"
+              style={{ marginRight: 8 }}
+              onClick={() => operateCrons(2)}
+            >
+              批量运行
+            </Button>
+            <Button type="primary" onClick={() => operateCrons(3)}>
+              批量停止
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => operateCrons(4)}
+              style={{ marginLeft: 8, marginRight: 8 }}
+            >
+              批量置顶
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => operateCrons(5)}
+              style={{ marginLeft: 8, marginRight: 8 }}
+            >
+              批量取消置顶
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => setIsLabelModalVisible(true)}
+              style={{ marginLeft: 8, marginRight: 8 }}
+            >
+              批量修改标签
+            </Button>
+            <span style={{ marginLeft: 8 }}>
+              已选择
+              <a>{selectedRowIds?.length}</a>项
+            </span>
+          </div>
+        )}
+        <Table
+          columns={columns}
+          pagination={{
+            current: pageConf.page,
+            pageSize: pageConf.size,
+            showSizeChanger: true,
+            simple: isPhone,
+            total,
+            showTotal: (total: number, range: number[]) =>
+              `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
+            pageSizeOptions: [10, 20, 50, 100, 200, 500, total || 10000].sort(
+              (a, b) => a - b,
+            ),
+          }}
+          dataSource={value}
+          rowKey="id"
+          size="middle"
+          scroll={{ x: 1000, y: tableScrollHeight }}
+          loading={loading}
+          rowSelection={rowSelection}
+          rowClassName={getRowClassName}
+          onChange={onPageChange}
+        />
+      </div>
       <CronLogModal
         visible={isLogModalVisible}
         handleCancel={() => {

src/pages/dependence/index.tsx

@@ -27,10 +27,11 @@ import DependenceModal from './modal';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import './index.less';
-import { getTableScroll } from '@/utils/index';
 import DependenceLogModal from './logModal';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
+import useTableScrollHeight from '@/hooks/useTableScrollHeight';
+
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -164,11 +165,11 @@ const Dependence = () => {
   const [editedDependence, setEditedDependence] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
-  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [logDependence, setLogDependence] = useState<any>();
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [type, setType] = useState('nodejs');
   const tableRef = useRef<any>();
+  const tableScrollHeight = useTableScrollHeight(tableRef, 59)
 
   const getDependencies = () => {
     setLoading(true);
@@ -283,16 +284,10 @@ const Dependence = () => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
-
-    setTimeout(() => {
-      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
-        setTableScrollHeight(getTableScroll({ extraHeight: 59 }));
-      }
-    });
   };
 
   const rowSelection = {
-    selectedRowIds,
+    selectedRowKeys: selectedRowIds,
     onChange: onSelectChange,
   };
 
@@ -368,12 +363,6 @@ const Dependence = () => {
     getDependencies();
   }, [searchText, type]);
 
-  useEffect(() => {
-    if (tableRef.current) {
-      setTableScrollHeight(getTableScroll({ extraHeight: 59 }));
-    }
-  }, []);
-
   useEffect(() => {
     if (logDependence) {
       localStorage.setItem('logDependence', logDependence.id);
@@ -422,53 +411,6 @@ const Dependence = () => {
     }
   }, [socketMessage]);
 
-  const panelContent = () => (
-    <>
-      {selectedRowIds.length > 0 && (
-        <div style={{ marginBottom: 16 }}>
-          <Button
-            type="primary"
-            style={{ marginBottom: 5, marginLeft: 8 }}
-            onClick={() => handlereInstallDependencies()}
-          >
-            批量安装
-          </Button>
-          <Button
-            type="primary"
-            style={{ marginBottom: 5, marginLeft: 8 }}
-            onClick={() => delDependencies(false)}
-          >
-            批量删除
-          </Button>
-          <Button
-            type="primary"
-            style={{ marginBottom: 5, marginLeft: 8 }}
-            onClick={() => delDependencies(true)}
-          >
-            批量强制删除
-          </Button>
-          <span style={{ marginLeft: 8 }}>
-            已选择
-            <a>{selectedRowIds?.length}</a>项
-          </span>
-        </div>
-      )}
-      <DndProvider backend={HTML5Backend}>
-        <Table
-          ref={tableRef}
-          columns={columns}
-          rowSelection={rowSelection}
-          pagination={false}
-          dataSource={value}
-          rowKey="id"
-          size="middle"
-          scroll={{ x: 768, y: tableScrollHeight }}
-          loading={loading}
-        />
-      </DndProvider>
-    </>
-  );
-
   const onTabChange = (activeKey: string) => {
     setSelectedRowIds([]);
     setType(activeKey);
@@ -503,20 +445,60 @@ const Dependence = () => {
           {
             key: 'nodejs',
             label: 'NodeJs',
-            children: panelContent(),
           },
           {
             key: 'python3',
             label: 'Python3',
-            children: panelContent(),
           },
           {
             key: 'linux',
             label: 'Linux',
-            children: panelContent(),
           },
         ]}
       />
+      <div ref={tableRef}>
+        {selectedRowIds.length > 0 && (
+          <div style={{ marginBottom: 16 }}>
+            <Button
+              type="primary"
+              style={{ marginBottom: 5, marginLeft: 8 }}
+              onClick={() => handlereInstallDependencies()}
+            >
+              批量安装
+            </Button>
+            <Button
+              type="primary"
+              style={{ marginBottom: 5, marginLeft: 8 }}
+              onClick={() => delDependencies(false)}
+            >
+              批量删除
+            </Button>
+            <Button
+              type="primary"
+              style={{ marginBottom: 5, marginLeft: 8 }}
+              onClick={() => delDependencies(true)}
+            >
+              批量强制删除
+            </Button>
+            <span style={{ marginLeft: 8 }}>
+              已选择
+              <a>{selectedRowIds?.length}</a>项
+            </span>
+          </div>
+        )}
+        <DndProvider backend={HTML5Backend}>
+          <Table
+            columns={columns}
+            rowSelection={rowSelection}
+            pagination={false}
+            dataSource={value}
+            rowKey="id"
+            size="middle"
+            scroll={{ x: 768, y: tableScrollHeight }}
+            loading={loading}
+          />
+        </DndProvider>
+      </div>
       <DependenceModal
         visible={isModalVisible}
         handleCancel={handleCancel}

src/pages/env/index.tsx

@@ -28,9 +28,10 @@ import EditNameModal from './editNameModal';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import './index.less';
-import { exportJson, getTableScroll } from '@/utils/index';
+import { exportJson } from '@/utils/index';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
+import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -253,9 +254,9 @@ const Env = () => {
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
-  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [importLoading, setImportLoading] = useState(false);
   const tableRef = useRef<any>();
+  const tableScrollHeight = useTableScrollHeight(tableRef, 59)
 
   const getEnvs = () => {
     setLoading(true);
@@ -285,8 +286,7 @@ const Env = () => {
       onOk() {
         request
           .put(
-            `${config.apiPrefix}envs/${
-              record.status === Status.已禁用 ? 'enable' : 'disable'
+            `${config.apiPrefix}envs/${record.status === Status.已禁用 ? 'enable' : 'disable'
             }`,
             {
               data: [record.id],
@@ -408,16 +408,10 @@ const Env = () => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
-
-    setTimeout(() => {
-      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
-        setTableScrollHeight(getTableScroll({ extraHeight: 59 }));
-      }
-    });
   };
 
   const rowSelection = {
-    selectedRowIds,
+    selectedRowKeys: selectedRowIds,
     onChange: onSelectChange,
   };
 
@@ -509,12 +503,6 @@ const Env = () => {
     getEnvs();
   }, [searchText]);
 
-  useEffect(() => {
-    if (tableRef.current) {
-      setTableScrollHeight(getTableScroll({ extraHeight: 59 }));
-    }
-  }, []);
-
   return (
     <PageContainer
       className="ql-container-wrapper env-wrapper"

src/pages/subscription/index.tsx

@@ -29,11 +29,11 @@ import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import SubscriptionModal from './modal';
-import { getTableScroll } from '@/utils/index';
 import { history, useOutletContext } from '@umijs/max';
 import './index.less';
 import SubscriptionLogModal from './logModal';
 import { SharedContext } from '@/layouts';
+import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -243,11 +243,11 @@ const Subscription = () => {
   const [searchText, setSearchText] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
-  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [searchValue, setSearchValue] = useState('');
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [logSubscription, setLogSubscription] = useState<any>();
   const tableRef = useRef<any>();
+  const tableScrollHeight = useTableScrollHeight(tableRef)
 
   const runSubscription = (record: any, index: number) => {
     Modal.confirm({
@@ -542,12 +542,6 @@ const Subscription = () => {
     setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
   }, []);
 
-  useEffect(() => {
-    if (tableRef.current) {
-      setTableScrollHeight(getTableScroll());
-    }
-  }, []);
-
   return (
     <PageContainer
       className="ql-container-wrapper subscriptiontab-wrapper"

src/utils/index.ts

@@ -180,19 +180,15 @@ export default function browserType() {
  */
 export function getTableScroll({
   extraHeight,
-  id,
-}: { extraHeight?: number; id?: string } = {}) {
+  target,
+}: { extraHeight?: number; target?: HTMLElement } = {}) {
   if (typeof extraHeight == 'undefined') {
     //  47 + 40 + 12
     extraHeight = 99;
   }
   let tHeader = null;
-  if (id) {
-    tHeader = document.getElementById(id)
-      ? document
-          .getElementById(id)!
-          .getElementsByClassName('ant-table-thead')[0]
-      : null;
+  if (target) {
+    tHeader = target;
   } else {
     tHeader = document.querySelector('.ant-table-wrapper');
   }
@@ -202,7 +198,7 @@ export function getTableScroll({
   if (tHeader) {
     mainTop = tHeader.getBoundingClientRect().top;
   }
-
+  
   //窗体高度-表格内容顶部的高度-表格内容底部的高度
   let height = document.body.clientHeight - mainTop - extraHeight;
   return height;