模型增加总条数和已选条数

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

@@ -14,7 +14,7 @@ import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify"
 import './ModelTable.less';
 import 'react-contexify/dist/ReactContexify.css';
 
-const { Text } = Typography;
+const { Paragraph, Text } = Typography;
 
 const ModelNameColumn = (props) => {
   const { text, record, detailItem } = props;
@@ -226,6 +226,12 @@ const ModelTable = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [view, keyword]);
 
+  const summarySelectedCount = useMemo(() => {
+    const newSelectedRowKeys = Array.from(new Set([...selectedRowKeys, ...expandedSelectedRowKeys]));
+    
+    return (newSelectedRowKeys||[]).length;
+  }, [selectedRowKeys, expandedSelectedRowKeys, data])
+
   useEffect(() => {
     window?.addEventListener("storage", modelEventChange);
     return () => {
@@ -450,9 +456,23 @@ const ModelTable = (props) => {
 
   return (
     <div>
+      <div className='flex' style={{ height: 20, alignItems: 'center', marginBottom: 12 }}>
+        <Paragraph style={{ overflow: 'hidden' }}>
+          <Text className='title-color'  ellipsis={true}>
+            总条数：
+            <Text className='text-color'>{(data||[]).length}</Text>
+          </Text>
+        </Paragraph>
+        <Paragraph style={{ overflow: 'hidden', marginLeft: 20 }}>
+          <Text className='title-color'  ellipsis={true}>
+            已选条数：
+            <Text className='text-color'>{summarySelectedCount}</Text>
+          </Text>
+        </Paragraph>
+      </div>
       <DataGrid 
         gridRef={gridRef}
-        style={{ blockSize: 'calc(100vh - 94px - 37px - 57px - 24px)' }}
+        style={{ blockSize: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
         checkable
         columns={columns}
         rows={data||[]}