From d6ebd2699ee023e10f416bf5aba836c9fc50ca14 Mon Sep 17 00:00:00 2001 From: hanhh <18330117883@163.com> Date: Fri, 8 Oct 2021 22:39:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A1=A8=E6=A0=BC=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/crontab/index.less | 3 +++ src/pages/crontab/index.tsx | 14 ++++++++++-- src/pages/env/index.tsx | 16 ++++++++++++-- src/utils/hooks.ts | 2 +- src/utils/{browser.ts => index.ts} | 35 ++++++++++++++++++++++++++++++ 5 files changed, 65 insertions(+), 5 deletions(-) rename src/utils/{browser.ts => index.ts} (86%) diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less index e69de29b..1decf2e9 100644 --- a/src/pages/crontab/index.less +++ b/src/pages/crontab/index.less @@ -0,0 +1,3 @@ +.ant-table-pagination.ant-pagination { + margin-bottom: 0; +} diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx index 39b5ed8c..67cf20db 100644 --- a/src/pages/crontab/index.tsx +++ b/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([]); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(20); + const [tableScrollHeight, setTableScrollHeight] = useState(); 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} diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx index 3b58102d..25f71fe3 100644 --- a/src/pages/env/index.tsx +++ b/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([]); const [searchText, setSearchText] = useState(''); + const [tableScrollHeight, setTableScrollHeight] = useState(); 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 ( { dataSource={value} rowKey="_id" size="middle" - scroll={{ x: 768 }} + scroll={{ x: 768, y: tableScrollHeight }} components={components} loading={loading} onRow={(record: any, index: number) => { diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index c3094c11..a4dffff7 100644 --- a/src/utils/hooks.ts +++ b/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%'); diff --git a/src/utils/browser.ts b/src/utils/index.ts similarity index 86% rename from src/utils/browser.ts rename to src/utils/index.ts index bffa81b4..09e2522b 100644 --- a/src/utils/browser.ts +++ b/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; +}