修改定时任务列表滚动

2025-05-22 22:36:06 +08:00 · 2023-03-22 22:30:47 +08:00 · 2023-03-22 22:30:47 +08:00 · c3a548ece3
commit c3a548ece3
parent b431e39f8f
5 changed files with 61 additions and 81 deletions
--- 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"
  }
--- 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}
--- 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;
+  }
+}
--- 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 = () => {
              <Tooltip title={isPc ? '运行' : ''}>
                <a
                  onClick={(e) => {
-                    setReset(false);
                    e.stopPropagation();
                    runCron(record, index);
                  }}
@ -343,7 +342,6 @@ const Crontab = () => {
              <Tooltip title={isPc ? '停止' : ''}>
                <a
                  onClick={(e) => {
-                    setReset(false);
                    e.stopPropagation();
                    stopCron(record, index);
                  }}
@ -355,7 +353,6 @@ const Crontab = () => {
            <Tooltip title={isPc ? '日志' : ''}>
              <a
                onClick={(e) => {
-                  setReset(false);
                  e.stopPropagation();
                  setLogCron({ ...record, timestamp: Date.now() });
                }}
@ -399,10 +396,6 @@ const Crontab = () => {
  const [moreMenuActive, setMoreMenuActive] = useState(false);
  const tableRef = useRef<any>();
  const tableScrollHeight = useTableScrollHeight(tableRef);
-  const resetRef = useRef<boolean>(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<any> | SorterResult<any>[],
  ) => {
    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 (
    <PageContainer
@ -1073,7 +1051,7 @@ const Crontab = () => {
          rowSelection={rowSelection}
          rowClassName={getRowClassName}
          onChange={onPageChange}
-          components={vComponents}
+          components={vt}
        />
      </div>
      <CronLogModal
--- a/src/pages/env/index.tsx
+++ b/src/pages/env/index.tsx
@ -39,7 +39,7 @@ import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import Copy from '../../components/copy';
-import { VList } from '../../components/vlist';
+import { useVT } from 'virtualizedtableforantd4';

 const { Text } = Typography;
 const { Search } = Input;
@ -216,10 +216,6 @@ const Env = () => {
  const [importLoading, setImportLoading] = useState(false);
  const tableRef = useRef<any>();
  const tableScrollHeight = useTableScrollHeight(tableRef, 59);
-  const resetRef = useRef<boolean>(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 (
+      <tr
+        ref={ref}
+        className={`${className}${isOver ? dropClassName : ''}`}
+        style={{ cursor: 'move', ...style }}
+        {...restProps}
+      />
+    );
+  });

-    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 {