diff --git a/package.json b/package.json index 9ba54a15..21897310 100644 --- a/package.json +++ b/package.json @@ -147,6 +147,7 @@ "typescript": "4.8.4", "umi-request": "^1.4.0", "vh-check": "^2.0.5", + "virtualizedtableforantd4": "1.3.0", "webpack": "^5.70.0", "yorkie": "^2.0.0" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f7f9e0e1..c2dcb294 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,7 @@ specifiers: umi-request: ^1.4.0 uuid: ^8.3.2 vh-check: ^2.0.5 + virtualizedtableforantd4: 1.3.0 webpack: ^5.70.0 winston: ^3.6.0 yargs: ^17.3.1 @@ -189,6 +190,7 @@ devDependencies: typescript: 4.8.4 umi-request: 1.4.0 vh-check: 2.0.5 + virtualizedtableforantd4: 1.3.0_eyanc6viuzknyw5lsn6lba32mq webpack: 5.75.0 yorkie: 2.0.0 @@ -13564,7 +13566,7 @@ packages: /rxjs/7.8.0: resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==} dependencies: - tslib: 2.4.1 + tslib: 2.5.0 dev: true /safe-buffer/5.1.2: @@ -15195,6 +15197,25 @@ packages: resolution: {integrity: sha512-vHtIYWt9uLl2P2tLlatVpMwv9+ezuJCtMNjUVIpzd5Pa/dJXN8AtqkKmVRcNSlmXyCjkCkbMQX/Vs9axmdlfgg==} dev: true + /virtualizedtableforantd4/1.3.0_eyanc6viuzknyw5lsn6lba32mq: + resolution: {integrity: sha512-V7y4/yFMo1xr/20Q3up6wPNPe9K5xvkPuj/LnSouDzM7pxWOwdvp/qndr86BISpH2OIzfAoZjSIivKktOXP4dQ==} + peerDependencies: + antd: ^4.0.0 || ^5.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18 + peerDependenciesMeta: + antd: + optional: true + react: + optional: true + react-dom: + optional: true + dependencies: + antd: 4.24.8_biqbaboplfbrettd7655fr4n2y + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: true + /vite/4.1.4_uakuilq6iygkg5ll5cv37w4i7m: resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less index 47e103b9..a68ffc3e 100644 --- a/src/pages/crontab/index.less +++ b/src/pages/crontab/index.less @@ -192,3 +192,9 @@ tr.drop-over-upward td { margin: -24px; } } + +.crontab-wrapper { + .ant-table-cell { + height: 69px !important; + } +} diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx index aa7567ae..cf5fc845 100644 --- a/src/pages/crontab/index.tsx +++ b/src/pages/crontab/index.tsx @@ -53,7 +53,7 @@ import { SharedContext } from '@/layouts'; import useTableScrollHeight from '@/hooks/useTableScrollHeight'; import { getCommandScript, parseCrontab } from '@/utils'; import { ColumnProps } from 'antd/lib/table'; -import { VList } from '../../components/vlist'; +import { useVT } from 'virtualizedtableforantd4'; const { Text, Paragraph } = Typography; const { Search } = Input; @@ -330,7 +330,6 @@ const Crontab = () => { { - setReset(false); e.stopPropagation(); runCron(record, index); }} @@ -343,7 +342,6 @@ const Crontab = () => { { - setReset(false); e.stopPropagation(); stopCron(record, index); }} @@ -355,7 +353,6 @@ const Crontab = () => { { - setReset(false); e.stopPropagation(); setLogCron({ ...record, timestamp: Date.now() }); }} @@ -399,10 +396,6 @@ const Crontab = () => { const [moreMenuActive, setMoreMenuActive] = useState(false); const tableRef = useRef(); const tableScrollHeight = useTableScrollHeight(tableRef); - const resetRef = useRef(true); - const setReset = (v) => { - resetRef.current = v; - }; const goToScriptManager = (record: any) => { const result = getCommandScript(record.command); @@ -686,7 +679,6 @@ const Crontab = () => { items: getMenuItems(record), onClick: ({ key, domEvent }) => { domEvent.stopPropagation(); - setReset(false); action(key, record, index); }, }} @@ -722,7 +714,6 @@ const Crontab = () => { }; const onSearch = (value: string) => { - setReset(true); setSearchText(value.trim()); }; @@ -750,10 +741,6 @@ const Crontab = () => { setSelectedRowIds(selectedIds); }; - useEffect(() => { - setReset(false); - }, [selectedRowIds]); - const rowSelection = { selectedRowKeys: selectedRowIds, onChange: onSelectChange, @@ -781,7 +768,6 @@ const Crontab = () => { }; const operateCrons = (operationStatus: number) => { - setReset(false); Modal.confirm({ title: `确认${OperationName[operationStatus]}`, content: <>确认{OperationName[operationStatus]}选中的定时任务吗, @@ -808,7 +794,6 @@ const Crontab = () => { sorter: SorterResult | SorterResult[], ) => { const { current, pageSize } = pagination; - setReset(true); setPageConf({ page: current as number, size: pageSize as number, @@ -923,21 +908,14 @@ const Crontab = () => { const tabClick = (key: string) => { const view = enabledCronViews.find((x) => x.id == key); setSelectedRowIds([]); - setReset(true); setPageConf({ ...pageConf, page: 1 }); setViewConf(view ? view : null); }; - const vComponents = useMemo(() => { - return VList({ - height: tableScrollHeight, - reset: resetRef.current, - rowHeight: 69, - scrollTop: resetRef.current - ? 0 - : tableRef.current?.querySelector('.ant-table-body')?.scrollTop, - }); - }, [tableScrollHeight, resetRef.current]); + const [vt] = useVT( + () => ({ scroll: { y: tableScrollHeight } }), + [tableScrollHeight], + ); return ( { rowSelection={rowSelection} rowClassName={getRowClassName} onChange={onPageChange} - components={vComponents} + components={vt} /> { const [importLoading, setImportLoading] = useState(false); const tableRef = useRef(); const tableScrollHeight = useTableScrollHeight(tableRef, 59); - const resetRef = useRef(true); - const setReset = (v) => { - resetRef.current = v; - }; const getEnvs = () => { setLoading(true); @@ -234,7 +230,6 @@ const Env = () => { }; const enabledOrDisabledEnv = (record: any, index: number) => { - setReset(false); Modal.confirm({ title: `确认${record.status === Status.已禁用 ? '启用' : '禁用'}`, content: ( @@ -280,19 +275,16 @@ const Env = () => { }; const addEnv = () => { - setReset(false); setEditedEnv(null as any); setIsModalVisible(true); }; const editEnv = (record: any, index: number) => { - setReset(false); setEditedEnv(record); setIsModalVisible(true); }; const deleteEnv = (record: any, index: number) => { - setReset(false); Modal.confirm({ title: '确认删除', content: ( @@ -332,20 +324,13 @@ const Env = () => { getEnvs(); }; - const vComponents = useMemo(() => { - return VList({ - height: tableScrollHeight!, - reset: resetRef.current, - rowHeight: 48, - scrollTop: resetRef.current - ? 0 - : tableRef.current?.querySelector('.ant-table-body')?.scrollTop, - }); - }, [tableScrollHeight, resetRef.current]); + const [vt, setVT] = useVT( + () => ({ scroll: { y: tableScrollHeight } }), + [tableScrollHeight], + ); - const DragableBodyRow = (props: any) => { + const DragableBodyRow = React.forwardRef((props: any, ref) => { const { index, moveRow, className, style, ...restProps } = props; - const ref = useRef(); const [{ isOver, dropClassName }, drop] = useDrop({ accept: type, collect: (monitor) => { @@ -373,31 +358,27 @@ const Env = () => { useEffect(() => { drop(drag(ref)); - }, [drag, drop]); + }, [ref]); - const components = useMemo(() => vComponents.body.row, []); + return ( + + ); + }); - const tempProps = useMemo(() => { - return { - ref: ref, - className: `${className}${isOver ? dropClassName : ''}`, - style: { cursor: 'move', ...style }, - ...restProps, - }; - }, [className, dropClassName, restProps, style, isOver]); - - return <> {components(tempProps, ref)} ; - }; - - const components = useMemo(() => { - return { - ...vComponents, - body: { - ...vComponents.body, - row: DragableBodyRow, - }, - }; - }, [vComponents]); + useEffect( + () => + setVT({ + body: { + row: DragableBodyRow, + }, + }), + [], + ); const moveRow = useCallback( (dragIndex: number, hoverIndex: number) => { @@ -425,17 +406,12 @@ const Env = () => { setSelectedRowIds(selectedIds); }; - useEffect(() => { - setReset(false); - }, [selectedRowIds]); - const rowSelection = { selectedRowKeys: selectedRowIds, onChange: onSelectChange, }; const delEnvs = () => { - setReset(false); Modal.confirm({ title: '确认删除', content: <>确认删除选中的变量吗, @@ -457,7 +433,6 @@ const Env = () => { }; const operateEnvs = (operationStatus: number) => { - setReset(false); Modal.confirm({ title: `确认${OperationName[operationStatus]}`, content: <>确认{OperationName[operationStatus]}选中的变量吗, @@ -490,7 +465,6 @@ const Env = () => { }; const onSearch = (value: string) => { - setReset(true); setSearchText(value.trim()); }; @@ -607,7 +581,7 @@ const Env = () => { rowKey="id" size="middle" scroll={{ x: 1000, y: tableScrollHeight }} - components={components} + components={vt} loading={loading} onRow={(record: any, index: number | undefined) => { return {