From 90af5801ee070109e2c75b7328eb66c13ab283d2 Mon Sep 17 00:00:00 2001 From: whyour Date: Fri, 4 Nov 2022 19:14:03 +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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/hooks/useTableScrollHeight.ts | 16 +++ src/pages/crontab/index.tsx | 221 +++++++++++++----------------- src/pages/dependence/index.tsx | 112 +++++++-------- src/pages/env/index.tsx | 22 +-- src/pages/subscription/index.tsx | 10 +- src/utils/index.ts | 14 +- 7 files changed, 171 insertions(+), 225 deletions(-) create mode 100644 src/hooks/useTableScrollHeight.ts diff --git a/package.json b/package.json index 4d94e88b..57b2c2b4 100644 --- a/package.json +++ b/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", diff --git a/src/hooks/useTableScrollHeight.ts b/src/hooks/useTableScrollHeight.ts new file mode 100644 index 00000000..9d32412b --- /dev/null +++ b/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 (target: MutableRefObject, extraHeight?: number) => { + const [height, setHeight] = useState() + + 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 +} \ No newline at end of file diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx index e2152d94..2e873e00 100644 --- a/src/pages/crontab/index.tsx +++ b/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:') : '-'} ); @@ -376,7 +375,6 @@ const Crontab = () => { filters: any; }>({} as any); const [viewConf, setViewConf] = useState(); - const [tableScrollHeight, setTableScrollHeight] = useState(); const [isDetailModalVisible, setIsDetailModalVisible] = useState(false); const [detailCron, setDetailCron] = useState(); const [searchValue, setSearchValue] = useState(''); @@ -389,6 +387,7 @@ const Crontab = () => { const [enabledCronViews, setEnabledCronViews] = useState([]); const [moreMenuActive, setMoreMenuActive] = useState(false); const tableRef = useRef(); + 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 && ( -
- - - - - - - - - - 已选择 - {selectedRowIds?.length}项 - -
- )} - - `第 ${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, })), ]} - > - - {panelContent} - - {[...enabledCronViews].slice(0, 2).map((x) => ( - - {panelContent} - - ))} - + /> +
+ {selectedRowIds.length > 0 && ( +
+ + + + + + + + + + 已选择 + {selectedRowIds?.length}项 + +
+ )} +
+ `第 ${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} + /> + { diff --git a/src/pages/dependence/index.tsx b/src/pages/dependence/index.tsx index e506801c..15e2a2b2 100644 --- a/src/pages/dependence/index.tsx +++ b/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([]); const [searchText, setSearchText] = useState(''); - const [tableScrollHeight, setTableScrollHeight] = useState(); const [logDependence, setLogDependence] = useState(); const [isLogModalVisible, setIsLogModalVisible] = useState(false); const [type, setType] = useState('nodejs'); const tableRef = useRef(); + 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 && ( -
- - - - - 已选择 - {selectedRowIds?.length}项 - -
- )} - -
- - - ); - 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(), }, ]} /> +
+ {selectedRowIds.length > 0 && ( +
+ + + + + 已选择 + {selectedRowIds?.length}项 + +
+ )} + +
+ + { const [editedEnv, setEditedEnv] = useState(); const [selectedRowIds, setSelectedRowIds] = useState([]); const [searchText, setSearchText] = useState(''); - const [tableScrollHeight, setTableScrollHeight] = useState(); const [importLoading, setImportLoading] = useState(false); const tableRef = useRef(); + 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 ( { const [searchText, setSearchText] = useState(''); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(20); - const [tableScrollHeight, setTableScrollHeight] = useState(); const [searchValue, setSearchValue] = useState(''); const [isLogModalVisible, setIsLogModalVisible] = useState(false); const [logSubscription, setLogSubscription] = useState(); const tableRef = useRef(); + 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 (