增加分组全选、展开

components/apolloTable/component/Cell.less

@@ -76,15 +76,42 @@
     .groupLevel {
         position: absolute;
         left: 0;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        min-width: 100%;
         white-space: nowrap;
         font-size: @textFontGen;
         height: 40px;
-        line-height: 40px;
         color: @textPrimaryColor;
         z-index: 5;
+        .groupContainer{
+            display: flex;
+            align-items: center;
+            height: 100%;
+            .groupCheck{
+                width: 16px;
+                margin-right: @marginSm;
+            }
+            .groupExpand{
+                width: 16px;
+                margin-right: @marginSm;
+                cursor: pointer;
+            }
+            .groupContent{
+                flex: 1;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                font-size: @textFontSm;
+                .groupText{
+                    color: @textPrimaryColor;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .groupCount{
+                    color: @textSupplyColor;
+                }
+            }
+        }
     }
 }
 

components/apolloTable/component/Column.tsx

@@ -4,6 +4,7 @@ import { Checkbox, Tooltip } from 'antd';
 import _ from 'lodash';
 import s from './Column.less';
 import { ColumnProps } from './interface';
+import { memoSelected } from './Cell';
 
 export default class TableColumn extends PureComponent<ColumnProps> {
     changeSort = (type: string) => {
@@ -29,14 +30,11 @@ export default class TableColumn extends PureComponent<ColumnProps> {
     getCheckbox = () => {
         const { rowSelection, dataSource } = this.props;
         const { selectedRows, onChange } = rowSelection;
+        const selectIds = memoSelected(selectedRows);
         let checked = false;
         if (dataSource.length > 0 && selectedRows.length > 0) {
             for (let i = 0; i < dataSource.length; i++) {
-                if (
-                    !selectedRows.some((item) => {
-                        return item.id === dataSource[i].id;
-                    })
-                ) {
+                if (!selectIds.includes(dataSource[i].id)) {
                     break;
                 }
                 if (i === dataSource.length - 1) {
@@ -46,10 +44,10 @@ export default class TableColumn extends PureComponent<ColumnProps> {
         }
         const onToggle = () => {
             if (typeof onChange === 'function') {
-                const data = _.cloneDeep(selectedRows);
+                const data = _.cloneDeep(selectIds);
                 dataSource.map((item: any) => {
                     const index = data.findIndex((temp: any) => {
-                        return temp.id === item.id;
+                        return temp === item.id;
                     });
                     if (checked) {
                         index > -1 && data.splice(index, 1);

components/apolloTable/component/index.tsx

@@ -47,11 +47,11 @@ const formatData = (config: string[], dataSource: any[]) => {
     }
     const map: any = {};
     // 一级分组条件
-    const group1 = config[0];
+    const group1:any = config[0];
     // 二级分组条件
-    const group2 = config[1];
+    const group2:any = config[1];
     // 三级分组条件
-    const group3 = config[2];
+    const group3:any = config[2];
     // 遍历数据默认已排序，根据分组级别给每行添加分组class
     return dataSource.map((row: any) => {
         const groupKeyArr: string[] = [];
@@ -79,37 +79,52 @@ const formatData = (config: string[], dataSource: any[]) => {
             const group1Key = groupKeyArr[0];
             const group1Text = groupTextArr[0];
             if (!map[group1Key]) {
-                map[group1Key] = group1Text;
+                map[group1Key] = {
+                    text: group1Text,
+                    children: [],
+                };
                 if (row.classList) {
                     row.classList[0] = 'groupLevel1';
                 } else {
                     row.classList = ['groupLevel1'];
                 }
+                row.group1Children = map[group1Key].children;
             }
+            map[group1Key].children.push(row.id);
         }
         if (groupKeyArr[1]) {
             const group2Key = `${groupKeyArr[0]}-${groupKeyArr[1]}`;
             const group2Text = `${groupTextArr[0]}-${groupTextArr[1]}`;
             if (!map[group2Key]) {
-                map[group2Key] = group2Text;
+                map[group2Key] = {
+                    text: group2Text,
+                    children: [],
+                };
                 if (row.classList) {
                     row.classList[1] = 'groupLevel2';
                 } else {
                     row.classList = ['', 'groupLevel2', ''];
                 }
+                row.group2Children = map[group2Key].children;
             }
+            map[group2Key].children.push(row.id);
         }
         if (groupKeyArr[2]) {
             const group3Key = groupKeyArr.join('-');
             const group3Text = groupTextArr.join('-');
             if (!map[group3Key]) {
-                map[group3Key] = group3Text;
+                map[group3Key] = {
+                    text: group3Text,
+                    children: [],
+                };
                 if (row.classList) {
                     row.classList[2] = 'groupLevel3';
                 } else {
                     row.classList = ['', '', 'groupLevel3'];
                 }
+                row.group3Children = map[group3Key].children;
             }
+            map[group3Key].children.push(row.id);
         }
         row.groupLevel = groupKeyArr.length;
         row.groupKeyArr = groupKeyArr;
@@ -224,7 +239,9 @@ class AirTable extends React.Component<CommonProps, CommonState> {
         return (
             <Provider value={{ locale: this.getContext() }}>
                 <div className={classNames(styles.container, className)}>
-                    {operateConfig && <OperateConfig selfClass={selfClass} columns={columns} operateConfig={operateConfig} />}
+                    {operateConfig && (
+                        <OperateConfig selfClass={selfClass} columns={columns} operateConfig={operateConfig} />
+                    )}
                     <div className={classNames(styles.tableContainer, tableClassName)}>
                         {tableOperateConfig && (
                             <div className={styles.tableOperateContainer}>

components/apolloTable/component/interface.tsx

@@ -94,6 +94,8 @@ export interface TableState {
     groupConfig?: any[];
     tableHeight?: number;
     tableWidth?: number;
+    toggleGroup?: number;
+    prevPropsDataSource?: RowProps[];
 }
 export interface CommonProps extends TableProps {
     operateConfig?: OperateConfigProps; // 操作栏
@@ -142,6 +144,8 @@ export interface CellProps {
     tableId?: string | number;
     maxPopHeight?: string | number;
     renderFirstLeft?: Function;
+    toggleGroup: Function;
+    dataSource: RowProps[];
 }
 
 export interface EditCellProps {

components/apolloTable/utils/memCols.ts

 import memoizeOne from 'memoize-one';
-import { ColumnProps, RowProps } from '../component/interface';
 import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache';
+import { ColumnProps, RowProps } from '../component/interface';
 
 // 获取左侧固定列数量
 export const getLeftColumns = (columns: ColumnProps[]) => {
@@ -64,8 +64,8 @@ export const getRowHeight = (
     { dataSource, rowHeight }: { dataSource: RowProps[]; rowHeight: number },
     { index }: { index: number },
 ) => {
-    const { classList } = dataSource[index];
-    let len = 1;
+    const { classList, hidden } = dataSource[index];
+    let len = 0;
     if (classList) {
         classList.map((item) => {
             if (item) {
@@ -73,11 +73,12 @@ export const getRowHeight = (
             }
         });
     }
-    return rowHeight * len;
+    const basic = hidden ? 0 : rowHeight;
+    return 40 * len + basic;
 };
 
 // 获取数据总高度
-export const getTotalHeight = (dataSource: RowProps[], rowHeight: number) => {
+export const getTotalHeight = (dataSource: RowProps[], rowHeight: number, toggleGroup:boolean) => {
     let height = 0;
     dataSource.map((item: any, index: number) => {
         height += getRowHeight({ dataSource, rowHeight }, { index });