调整代码

src/view/Manage/Model/Component/SubModelTable.jsx → src/view/Manage/Model/Component/ExpandedModelTable.jsx

-import React, { useState, useEffect, useRef } from "react";
-import { Tooltip, Modal, Pagination, Table, Typography } from 'antd';
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
-import SmoothScroll from 'smooth-scroll';
+import React, { useState, useEffect } from "react";
+import { Tooltip, Modal, Table, Typography } from 'antd';
 import classnames from 'classnames';
 import { Resizable } from 'react-resizable';
 import ResizeObserver from 'rc-resize-observer';
 import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
 import { nanoid } from 'nanoid';
 import { createPortal } from 'react-dom';
-import { MenuItem, SubMenu } from 'react-contextmenu';
+import { MenuItem } from 'react-contextmenu';
 
 import { dispatch } from '../../../../model'; 
-import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
-import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
+import { showMessage, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
+import { Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
 // import Tag from "../../Tag";
 
 import './ModelTable.less';
-import 'react-contexify/dist/ReactContexify.css';
 
 const { Text } = Typography;
 const { Column } = Table;
@@ -128,17 +125,18 @@ const ResizeableHeaderCell = props => {
   );
 };
 
-const SubModelTable = (props) => {
+const ExpandedModelTable = (props) => {
 
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, checked, dataMap, onDataMapChange } = props;
+  const { onChange, onItemAction, onHistory, onAutoCreateTable, onExpandedSelect, onExpandedChange, catalogId, keyword, id = null, pid = null, view, user, checked, dataMap } = props;
   
   const [ tableWidth, setTableWidth ] = useState(0);
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
-  const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
-  // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
-  const [ sortRule, setSortRule ] = useState(null); 
-  const [ filterData, setFilterData ] = useState([]);
-  const [ subData, setSubData ] = useState([]);
+  const [ data, setData ] = useState([]);
+
+  const [ columns, setColumns ] = useState([]);
+  const [ currentItem, setCurrentItem ] = useState(null);
+  
+  const [modal, contextHolder] = Modal.useModal();
 
   const cols = [
     {
@@ -146,8 +144,6 @@ const SubModelTable = (props) => {
       dataIndex: 'name',
       width: isSzseEnv?360:160,
       ellipsis: true,
-      sorter: true,
-      sortDirections: ['ascend', 'descend'],
       render: (text, record, index) => {
         return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
       }
@@ -157,8 +153,6 @@ const SubModelTable = (props) => {
       dataIndex: 'cnName',
       width: isSzseEnv?420:160,
       ellipsis: true,
-      sorter: true,
-      sortDirections: ['ascend', 'descend'],
       render: (text, _, __) => {
         return (
           <Tooltip title={text||''}>
@@ -172,8 +166,6 @@ const SubModelTable = (props) => {
       dataIndex: 'state',
       width: 100,
       ellipsis: true,
-      sorter: true,
-      sortDirections: ['ascend', 'descend'],
       render: (_, record) => {
 
         let color = '';
@@ -198,16 +190,12 @@ const SubModelTable = (props) => {
       dataIndex: 'editor',
       width: 100,
       ellipsis: true,
-      sorter: true,
-      sortDirections: ['ascend', 'descend'],
     },
     {
       title: '版本号',
       dataIndex: 'modifiedTs',
       width: 170,
       ellipsis: true,
-      sorter: true,
-      sortDirections: ['ascend', 'descend'],
       render: (_,record) => {
         return `V_${formatDate(record.modifiedTs)}`;
       }
@@ -234,8 +222,6 @@ const SubModelTable = (props) => {
       title: '模型描述',
       dataIndex: 'remark',
       ellipsis: true,
-      sorter: true,
-      sortDirections: ['ascend', 'descend'],
       render: (text, _, __) => {
         return (
           <Tooltip title={text||''} overlayClassName='tooltip-common'>
@@ -251,8 +237,6 @@ const SubModelTable = (props) => {
     dataIndex: 'path',
     width: 120,
     ellipsis: true,
-    sorter: true,
-    sortDirections: ['ascend', 'descend'],
     render: (text, _, __) => {
       return (
         <Tooltip title={text||''}>
@@ -262,21 +246,11 @@ const SubModelTable = (props) => {
     }
   };
 
-  const [ columns, setColumns ] = useState([]);
-  const [ currentItem, setCurrentItem ] = useState(null);
-  
-  const [modal, contextHolder] = Modal.useModal();
-
-  const anchorId = getQueryParam(AnchorId, props.location.search);
-  const anchorTimestamp = getQueryParam(AnchorTimestamp, props.location.search);
-
-  const shouldScrollRef = useRef(false);
-
   useEffect(() => {
-    setSelectedRowKeys(checked?[modelId]:[]);
+    setSelectedRowKeys(checked?[id]:[]);
 
-    if (dataMap.has(modelId)) {
-      setSubData([dataMap.get(modelId)]);
+    if (dataMap.has(id)) {
+      setData([dataMap.get(id)]);
     } else {
       getCheckoutDataModel();
     }
@@ -311,14 +285,11 @@ const SubModelTable = (props) => {
     dispatch({
       type: 'datamodel.getCheckoutDataModel',
       payload: {
-        id: modelPid
+        id: pid
       },
       callback: data => {
-        setSubData(data?[data]:[]);
-        onDataMapChange && onDataMapChange(modelId, data);
-      },
-      error: () => {
-
+        setData(data?[data]:[]);
+        onExpandedChange && onExpandedChange(id, data);
       }
     })
   }
@@ -386,9 +357,9 @@ const SubModelTable = (props) => {
     onHistory && onHistory(record.id);
   }
 
-  const onSelectChange = keys => {
+  const onExpandedSelectChange = keys => {
     setSelectedRowKeys(keys);
-    onSubSelect && onSubSelect(keys, subData[0].id);
+    onExpandedSelect && onExpandedSelect(keys, data[0].id);
   };
 
   const handleResize = index => (e, { size }) => {
@@ -404,12 +375,12 @@ const SubModelTable = (props) => {
 
   const rowSelection = {
     selectedRowKeys,
-    onChange: onSelectChange,
+    onChange: onExpandedSelectChange,
     hideSelectAll: true,
   };
 
   const classes = classnames('model-table', {
-    'model-table-sub': modelId
+    'model-table-sub': id
   });  
 
   const handleItemClick = (e, data) => {
@@ -499,7 +470,7 @@ const SubModelTable = (props) => {
           }}
           columns={mergedColumns()}
           rowKey={'id'}
-          dataSource={subData||[]}
+          dataSource={data||[]}
           pagination={false}
           size='small'
           onRow={(record, index) => {
@@ -558,4 +529,4 @@ const SubModelTable = (props) => {
   );
 }
 
-export default SubModelTable;
+export default ExpandedModelTable;
\ No newline at end of file

src/view/Manage/VirtualTable/test-table.tsx

-import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import React, { ReactElement, useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
-import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SelectCellFormatter, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
-import type { RowRendererProps, DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
+import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
+import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
 import classNames from 'classnames';
 import { Checkbox, Empty } from 'antd';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
@@ -123,7 +123,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
     return row.id as K;
   }
 
-  const [checkAll, setCheckAll] = useState(false)
   const [contextItem, setContextItem] = useState<RowData|undefined>(undefined)
 
   // 初始化onRowsChange
@@ -164,11 +163,8 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
           }
           return 0;
         })
-      setCheckAll(false)
     }
 
-    console.log('new rows', newRows);
-
     (newRows||[]).forEach((item, index) => {
       item.index = `${index+1}`;
     })
@@ -194,7 +190,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
           colSpan: () => columns.length+1, expand: expandRow, expandable: rowExpandable
         }),
         ...columns,
-
       ]
       return cols
     } else if (checkable) {
@@ -206,14 +201,9 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
     }
 
     return columns
-  }, [columns, expandRow, checkable])
 
-  // 取得选中
-  const getSelected = useCallback(() => {
-    const selected = _rows.filter((item) => item.__selected__ === true).map(item => item.id)
-    console.debug('selected', selected, selected.length)
-    return selected
-  }, [_rows])
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, expandRow, checkable])
 
   // 处理滚动
   const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {