调整虚拟table

src/index.less

@@ -215,6 +215,10 @@ tr.drop-over-upward td {
   color: #5B5B5B;
 }
 
+.anchor {
+  background-color: #e7f7ff;
+}
+
 .m-common {
   margin: 20px 15px;
 }

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

@@ -248,8 +248,6 @@ const ExpandedModelTable = (props) => {
 
   useEffect(() => {
     setSelectedRowKeys(checked?[id]:[]);
-
-    console.log('data map', dataMap);
     if (dataMap.has(id)) {
       setData([dataMap.get(id)]);
     } else {

src/view/Manage/Model/Component/ModelTable.jsx

@@ -357,7 +357,7 @@ const ModelTable = (props) => {
     expandedDataMapRef.current.set(id, value);
   }
 
-  let expandRow = undefined;
+  let expandable = undefined;
   let needExpand = false;
   (data||[]).forEach(record => {
     if (record?.alreadyCheckedOut) {
@@ -366,22 +366,26 @@ const ModelTable = (props) => {
   })
 
   if (needExpand) {
-    expandRow = (_pid, row) => {
-      if (!row?.alreadyCheckedOut) return null;
-
-      return (
-        <div style={{ padding: 10 }}>
-          <ExpandedModelTable 
-            id={row?.checkedOutId}
-            pid={row?.id}
-            checked={expandedSelectedRowKeys.indexOf(row?.checkedOutId)!==-1}
-            dataMap={expandedDataMapRef.current}
-            onExpandedSelect={onExpandedTableSelectChange}
-            onExpandedChange={onExpandedDataMapChange}
-            {...props} 
-          />
-        </div>
-      )
+    expandable = {
+      expandedRowHeight: 100,
+      rowExpandable: (row) => {
+        return row?.alreadyCheckedOut;
+      },
+      expandRowRender: (row) => {
+        return (
+          <div style={{ padding: 10 }}>
+            <ExpandedModelTable 
+              id={row?.checkedOutId}
+              pid={row?.id}
+              checked={expandedSelectedRowKeys.indexOf(row?.checkedOutId)!==-1}
+              dataMap={expandedDataMapRef.current}
+              onExpandedSelect={onExpandedTableSelectChange}
+              onExpandedChange={onExpandedDataMapChange}
+              {...props} 
+            />
+          </div>
+        )
+      }
     }
   }
 
@@ -480,15 +484,13 @@ const ModelTable = (props) => {
         columns={columns}
         rows={data||[]}
         rowHeight={51}
-        expandedRowHeight={100}
-        rowExpandable={(row) => {
-          return row?.alreadyCheckedOut;
+        rowClassName={(row) => {
+          return (row.id === anchorId)?'anchor':''
         }}
-        anchorId={anchorId}
+        expandable={expandable}
         contextMenu={{
           menu: onMenuRender
         }}
-        expandRow={expandRow}
         selectedRows={selectedRowKeys}
         onSelectedRowsChange={onSelectChange}
         getComparator={getComparator}

src/view/Manage/VirtualTable/index.less

-.anchor {
-  background-color: #e7f7ff;
-}
\ No newline at end of file

src/view/Manage/VirtualTable/index.tsx

@@ -10,8 +10,6 @@ import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { nanoid } from 'nanoid';
 import { downNode, upNode } from './virtual-table-helper';
 
-import './index.less';
-
 export enum RowAction {
   None, Expand, Select
 }
@@ -32,22 +30,23 @@ export interface RowData {
 }
 
 interface Props<Row> {
+  gridRef?: React.RefObject<DataGridHandle>
   contextMenu?: {
     id: string
     menu: (row: RowData | undefined) => ReactElement
   }
   checkable: Boolean
-  gridRef?: React.RefObject<DataGridHandle>
-  // setRows?: (rows: any) => void
-  expandRow?: (pid: string, row: Row) => React.ReactElement
-  rowExpandable?: (row: Row) => Boolean
+  expandable?: {
+    expandedRowHeight?: number
+    rowExpandable?: (row: Row) => Boolean
+    expandRowRender?: (row: Row) => React.ReactElement
+  }
   getComparator?: (sortColumn: string) => (a: Row, b: Row) => number
   loadMoreRows?: (length: number) => Promise<Row[]> | undefined
   selectedRows?: Array<any>
   onSelectedRowsChange?: (selectedRows: Array<any>) => void
   rowHeight?: number
-  expandedRowHeight?: number
-  anchorId?: string
+  rowClassName?: (row: RowData) => string
 }
 
 const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
@@ -60,12 +59,11 @@ const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
   }
 );
 
-export function getExpandingCol<Row extends RowData, SR>({ colSpan, expand, expandable }: {
+export function getExpandingCol<Row extends RowData, SR>({ colSpan, expandRender, expandable }: {
   colSpan: () => number
-  expand?: (pid: string, row: Row) => React.ReactElement
+  expandRender?: (row: Row) => React.ReactElement
   expandable?: (row: Row) => Boolean
 }) {
-  console.log('span', colSpan());
   const col: Column<Row, SR> = {
     key: 'expanded',
     name: '',
@@ -79,15 +77,15 @@ export function getExpandingCol<Row extends RowData, SR>({ colSpan, expand, expa
     },
     formatter({ row, isCellSelected, onRowChange }) {
       if (row.__type__ === RowType.Detail) {
-        if (expand) {
-          return expand(row.__pid__!, row.__row__)
+        if (expandRender) {
+          return expandRender(row.__row__)
         }
         return (
           <div>{row.__pid__}</div>
         );
       }
 
-      if (!expandable || !expandable(row)) return <></>;
+      if (!expandable || !expandable(row)) return null;
 
       // 展开收起
       return (
@@ -111,13 +109,12 @@ export function getExpandingCol<Row extends RowData, SR>({ colSpan, expand, expa
 function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: DataGridProps<Row, SR, K> & Props<Row>) {
   const {
     gridRef,
-    expandRow,
-    rowExpandable,
+    expandable,
     getComparator,
     loadMoreRows,
     onSelectedRowsChange,
-    contextMenu, columns, rows, checkable, selectedRows, rowHeight = 45, expandedRowHeight = 1000, anchorId, ...rest } = props
-
+    contextMenu, columns, rows, checkable, selectedRows, rowHeight = 45, rowClassName, ...rest } = props
+  
   const rowKeyGetter = (row: Row): K => {
     return row.id as K;
   }
@@ -174,19 +171,19 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
   // 组装功能s列
   const cols = useMemo(() => {
-    if (expandRow && checkable) {
+    if (expandable && checkable) {
       const cols: readonly Column<Row, SR>[] = [
         getExpandingCol<Row, SR>({
-          colSpan: () => columns.length+2, expand: expandRow, expandable: rowExpandable
+          colSpan: () => columns.length+2, expandRender: expandable.expandRowRender, expandable: expandable.rowExpandable
         }),
         { ...SelectColumn, key: 'select', frozen: false },
         ...columns,
       ]
       return cols
-    } else if (expandRow) {
+    } else if (expandable) {
       const cols: readonly Column<Row, SR>[] = [
         getExpandingCol<Row, SR>({
-          colSpan: () => columns.length+1, expand: expandRow, expandable: rowExpandable
+          colSpan: () => columns.length+1, expandRender: expandable.expandRowRender, expandable: expandable.rowExpandable
         }),
         ...columns,
       ]
@@ -202,7 +199,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
     return columns
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columns, expandRow, checkable])
+  }, [columns, expandable, checkable])
 
   // 处理滚动
   const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
@@ -231,7 +228,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
                 disable={props.row.__type__===RowType.Detail}
               >
                 <GridRow
-                  className={(props.row.id===anchorId)?'anchor': ''}
+                  className={rowClassName(props.row)}
                   id={`row-${props.row.id}`} 
                   onContextMenu={(e: React.MouseEvent) => {
                     setContextItem(props.row);
@@ -248,7 +245,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         onRowsChange={onRowsChange}
 
         // headerRowHeight={45}
-        rowHeight={(args) => (args.type === 'ROW' && args.row.__type__ === RowType.Detail ? expandedRowHeight : rowHeight)}
+        rowHeight={(args) => (args.type === 'ROW' && args.row.__type__ === RowType.Detail ? (expandable.expandedRowHeight||100) : rowHeight)}
 
         // defaultColumnOptions={{
         //   sortable: true,