修复表格滚动样式和交互

src/pages/crontab/index.less

@@ -0,0 +1,3 @@
+.ant-table-pagination.ant-pagination {
+  margin-bottom: 0;
+}

src/pages/crontab/index.tsx

@@ -34,6 +34,8 @@ import CronModal from './modal';
 import CronLogModal from './logModal';
 import cron_parser from 'cron-parser';
 import { diffTime } from '@/utils/date';
+import { getTableScroll } from '@/utils/index';
+import './index.less';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -66,7 +68,7 @@ enum OperationPath {
 }
 
 const Crontab = ({ headerStyle, isPhone }: any) => {
-  const columns = [
+  const columns: any = [
     {
       title: '任务名',
       dataIndex: 'name',
@@ -324,6 +326,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
+  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
 
   const getCrons = () => {
     setLoading(true);
@@ -673,6 +676,12 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
+
+    setTimeout(() => {
+      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
+        setTableScrollHeight(getTableScroll());
+      }
+    });
   };
 
   const rowSelection = {
@@ -754,6 +763,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
 
   useEffect(() => {
     setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
+    setTableScrollHeight(getTableScroll());
   }, []);
 
   return (
@@ -839,7 +849,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
         dataSource={value}
         rowKey="_id"
         size="middle"
-        scroll={{ x: 1000 }}
+        scroll={{ x: 1000, y: tableScrollHeight }}
         loading={loading}
         rowSelection={rowSelection}
         rowClassName={getRowClassName}

src/pages/env/index.tsx

@@ -25,6 +25,7 @@ import EditNameModal from './editNameModal';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import './index.less';
+import { getTableScroll } from '@/utils/index';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -96,7 +97,7 @@ const DragableBodyRow = ({
 };
 
 const Env = ({ headerStyle, isPhone, theme }: any) => {
-  const columns = [
+  const columns: any = [
     {
       title: '序号',
       align: 'center' as const,
@@ -205,6 +206,7 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
+  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
 
   const getEnvs = () => {
     setLoading(true);
@@ -361,6 +363,12 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
+
+    setTimeout(() => {
+      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
+        setTableScrollHeight(getTableScroll({ extraHeight: 40 }));
+      }
+    });
   };
 
   const rowSelection = {
@@ -426,6 +434,10 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
     getEnvs();
   }, [searchText]);
 
+  useEffect(() => {
+    setTableScrollHeight(getTableScroll({ extraHeight: 40 }));
+  }, []);
+
   return (
     <PageContainer
       className="ql-container-wrapper env-wrapper"
@@ -490,7 +502,7 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
           dataSource={value}
           rowKey="_id"
           size="middle"
-          scroll={{ x: 768 }}
+          scroll={{ x: 768, y: tableScrollHeight }}
           components={components}
           loading={loading}
           onRow={(record: any, index: number) => {

src/utils/hooks.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import browserType from './browser';
+import browserType from './index';
 
 export const useCtx = () => {
   const [width, setWidth] = useState('100%');

src/utils/index.ts

@@ -170,3 +170,38 @@ export default function browserType() {
 
   return result;
 }
+
+/**
+ * 获取第一个表格的可视化高度
+ * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74)
+ * @param {*} id 当前页面中有多个table时需要制定table的id
+ */
+export function getTableScroll({
+  extraHeight,
+  id,
+}: { extraHeight?: number; id?: string } = {}) {
+  if (typeof extraHeight == 'undefined') {
+    //  默认底部分页64 + 边距10
+    extraHeight = 80;
+  }
+  let tHeader = null;
+  if (id) {
+    tHeader = document.getElementById(id)
+      ? document
+          .getElementById(id)!
+          .getElementsByClassName('ant-table-thead')[0]
+      : null;
+  } else {
+    tHeader = document.getElementsByClassName('ant-table-thead')[0];
+  }
+
+  //表格内容距离顶部的距离
+  let tHeaderBottom = 0;
+  if (tHeader) {
+    tHeaderBottom = tHeader.getBoundingClientRect().bottom;
+  }
+
+  //窗体高度-表格内容顶部的高度-表格内容底部的高度
+  let height = document.body.clientHeight - tHeaderBottom - extraHeight;
+  return height;
+}