diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less index 7efd0c2da5a7971c1df2318b9a35dd2c7691625a..4e396c2346a23b6e4ef9771fafc08a1e217a3e11 100644 --- a/components/apolloTable/component/Cell.less +++ b/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; + } + } + } } } diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 0d4bb9c2d4c3a6ff539f1a4e502ee67361f8bbe7..6d6438ec043253a372a1c028effcd057d57f54a8 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'; import { Checkbox, message, Popover } from 'antd'; import classNames from 'classnames'; import _ from 'lodash'; +import memoizeOne from 'memoize-one'; import { config } from './base/config'; import { getFormat, setFormat } from './base'; import s from './Cell.less'; @@ -11,7 +12,18 @@ import expandIcon from '../assets/extend.png'; import { transferAttr } from './base/_utils/transferAttr'; import { emptyModel } from './base/_utils/setFormatter'; import { getGroupLevel } from '../utils/memCols'; +import IconFont from "@/submodule/components/IconFont/IconFont"; +// 获取数据列表的id +const getArrIds = (arr: any) => { + if (!Array.isArray(arr)) { + return []; + } + return arr.map((item: any) => { + return item.id || item; + }); +}; +export const memoSelected = memoizeOne(getArrIds); enum EDIT_STATUS { 'FREE', // 空闲 'EDITING', // 编辑中 @@ -40,6 +52,8 @@ const Cell = (props: CellProps) => { maxPopHeight, renderFirstLeft, position, + toggleGroup, + dataSource, } = props; const { columnType, @@ -51,16 +65,18 @@ const Cell = (props: CellProps) => { readOnlyFlag, columnAttrObj, } = columnConfig; + const { selectedRows } = rowSelection || {}; + const selectIds = memoSelected(selectedRows); const cellUnit = useRef(null); const [status, setStatus] = useState('detail'); - + // 重置回详情状态 const resetEditStatus = () => { setStatus('detail'); if (typeof onEmitMsg === 'function') { onEmitMsg({ status: EDIT_STATUS.FREE }); } }; - + // 进入编辑状态 const turnIntoEditStatus = (data: any) => { setStatus('edit'); if (typeof onEmitMsg === 'function') { @@ -129,6 +145,80 @@ const Cell = (props: CellProps) => { dom.classList.remove(s.hover); }); }; + // 获取当前分组是否全部选中 + const getGroupChecked = (level = 1) => { + const children = record[`group${level}Children`]; + if (!children) { + return false; + } + for (let i = 0; i < children.length; i++) { + if (!selectIds.includes(children[i])) { + return false; + } + } + return true; + }; + // 获取当前分组是否全部展开 + const getGroupExpanded = (level = 1) => { + // 获取当前分组的数据id + const children = record[`group${level}Children`]; + if (!children) { + return true; + } + for (let i = 0; i < children.length; i++) { + const item=dataSource.find(temp=>temp.id===children[i]); + if(item && !item.hidden){ + return true; + } + } + return false; + }; + // 切换当前分组全选/反选 + const onToggleGroup=(level = 1) => { + const checked = getGroupChecked(level); + const { onChange } = rowSelection; + const children = record[`group${level}Children`]; + if (typeof onChange === 'function') { + let data = []; + if (checked) { + data = selectIds.filter((s:number) => { + return !children.includes(s); + }); + } else { + data = children.filter((s:number) => { + return !selectIds.includes(s); + }); + data = data.concat(selectIds); + } + onChange(data); + } + }; + // 切换当前分组展开/收起 + const onToggleGroupClose = (level:number = 1) => { + const children = record[`group${level}Children`]; + if (typeof toggleGroup === 'function') { + const flag = getGroupExpanded(level); + toggleGroup(children,flag); + } + }; + // 获取当前行在所选列表中的index + const getCheckedIndex = () => { + return selectIds.findIndex((item: any) => { + return item === record.id; + }); + }; + const onToggle = (index: number) => { + const { selectedRows, onChange } = rowSelection; + if (typeof onChange === 'function') { + const data = _.cloneDeep(selectedRows); + if (index > -1) { + data.splice(index, 1); + } else { + data.push(record); + } + onChange(data); + } + }; const renderFirst = () => { const { current = 1, pageSize = 20 } = paginationConfig || {}; @@ -139,36 +229,11 @@ const Cell = (props: CellProps) => { } return (current - 1) * pageSize + rowIndex + 1; }; - // 获取当前行在所选列表中的index - const getCheckedIndex = () => { - if (!rowSelection) { - return -1; - } - const { selectedRows } = rowSelection; - const index = - selectedRows && - selectedRows.findIndex((item: any) => { - return item.id === record.id; - }); - return index; - }; + // 构造行复选框 const getCheckbox = () => { - const { selectedRows, onChange } = rowSelection; const index = getCheckedIndex(); - const checked = index > -1; - const onToggle = () => { - if (typeof onChange === 'function') { - const data = _.cloneDeep(selectedRows); - if (checked) { - data.splice(index, 1); - } else { - data.push(record); - } - onChange(data); - } - }; - return ; + return -1} onClick={onToggle.bind(null, index)} />; }; return (
@@ -424,12 +489,27 @@ const Cell = (props: CellProps) => { top: 0, paddingLeft: '16px', background: groupLevel === 3 ? '#EEEEEE' : groupLevel === 2 ? '#EDEDED' : '#F7F9FA', + zIndex: columnIndex === 0 ? 6 : 5, }} > - {columnIndex === 0 && - position !== 'right' && - record.groupConfig[0] && - `${record.groupConfig[0].colChsName}:${record.groupTextArr[0]}`} + {columnIndex === 0 && position !== 'right' && record.groupConfig[0] && ( +
+ +
+ +
+
+ {`${record.groupConfig[0].colChsName}:${record.groupTextArr[0]}`} + {`共：${record.group1Children.length}条`} +
+
+ )}
)} {record.classList && record.classList[1] && ( @@ -439,12 +519,27 @@ const Cell = (props: CellProps) => { top: record.classList[0] ? 40 : 0, paddingLeft: '32px', background: groupLevel === 3 ? '#F5F5F5' : '#F7F9FA', + zIndex: columnIndex === 0 ? 6 : 5, }} > - {columnIndex === 0 && - position !== 'right' && - record.groupConfig[1] && - `${record.groupConfig[1].colChsName}:${record.groupTextArr[1]}`} + {columnIndex === 0 && position !== 'right' && record.groupConfig[1] && ( +
+ +
+ +
+
+ {`${record.groupConfig[1].colChsName}:${record.groupTextArr[1]}`} + {`共：${record.group2Children.length}条`} +
+
+ )} )} {record.classList && record.classList[2] && ( @@ -454,12 +549,27 @@ const Cell = (props: CellProps) => { top: groupLevel === 3 ? 80 : groupLevel === 2 ? 40 : 0, paddingLeft: '48px', background: '#F7F9FA', + zIndex: columnIndex === 0 ? 6 : 5, }} > - {columnIndex === 0 && - position !== 'right' && - record.groupConfig[2] && - `${record.groupConfig[2].colChsName}:${record.groupTextArr[2]}`} + {columnIndex === 0 && position !== 'right' && record.groupConfig[2] && ( +
+ +
+ +
+
+ {`${record.groupConfig[2].colChsName}:${record.groupTextArr[2]}`} + {`共：${record.group3Children.length}条`} +
+
+ )} )} {columnIndex === 0 && position !== 'right' && renderFirst()} @@ -470,7 +580,7 @@ const Cell = (props: CellProps) => { 'cellUnit', `table_${tableId}`, `row_${rowIndex}`, - `col_${columnIndex}`, + `col_${columnIndex}` )} data-selected-cell="0" data-editing-cell="0" diff --git a/components/apolloTable/component/Column.tsx b/components/apolloTable/component/Column.tsx index 6f92394973c8c345932e1980e9c6f7f4c0c76db0..09261cab37c9a9592f1685dc4f6b4dcbdfb6b265 100644 --- a/components/apolloTable/component/Column.tsx +++ b/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 { changeSort = (type: string) => { @@ -29,14 +30,11 @@ export default class TableColumn extends PureComponent { 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 { } 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); diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 99aa842bb3fe21af10a14f10e48db6702662a6b5..311c6c7a82320f1ef890bf031f8d16d353b71f8b 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -61,12 +61,13 @@ export default class AirTable extends Component { memoizeTotalHeight: Function; static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) { - const { columns, dataSource } = prevState; + const { columns, prevPropsDataSource } = prevState; const nextState: TableState = { ...prevState, }; - if (JSON.stringify(dataSource) !== JSON.stringify(nextProps.dataSource)) { + if (JSON.stringify(prevPropsDataSource) !== JSON.stringify(nextProps.dataSource)) { nextState.dataSource = nextProps.dataSource; + nextState.prevPropsDataSource = nextProps.dataSource; } if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) { nextState.columns = nextProps.columns; @@ -82,6 +83,7 @@ export default class AirTable extends Component { dataSource, tableWidth: width || 0, tableHeight: height || 0, + toggleGroup: 0, }; this.config = getDefaultTableConfig(props); this.memoizeFormatColumns = memoizeOne(getFormatColumns); @@ -94,15 +96,36 @@ export default class AirTable extends Component { this.memoizeData = memoizeOne(this.filterData); } - componentDidUpdate(prevProps: Readonly): void { + componentDidUpdate(prevProps: Readonly, prevState): void { if ( JSON.stringify(this.props.dataSource) !== JSON.stringify(prevProps.dataSource) || JSON.stringify(this.props.groupConfig) !== JSON.stringify(prevProps.groupConfig) + || prevState.toggleGroup !== this.state.toggleGroup ) { this.recomputeGridSize(); } } + toggleGroup = (ids: number[], flag: boolean) => { + const { dataSource } = this.state; + const data: any[] = []; + dataSource.map((item) => { + const newItem = _.cloneDeep(item); + if (ids.includes(item.id)) { + data.push({ + ...newItem, + hidden: flag, + }); + } else { + data.push(newItem); + } + }); + this.setState({ + dataSource: data, + toggleGroup: Math.random(), + }); + }; + // 获取表格显示数据 filterData = (columns: ColumnProps[], dataSource: RowProps[]) => { if (columns.length === 0 || dataSource.length === 0) { @@ -154,6 +177,7 @@ export default class AirTable extends Component { this.grid6.recomputeGridSize(); } }; + // 页面大小变化回调 onResize = ({ width, height }: { width: number; height: number }) => { this.setState( @@ -183,6 +207,7 @@ export default class AirTable extends Component { this.recomputeGridSize, ); }; + // 拖拽自定义固定列前置动作 onResizeStartLeftDragFixed = () => { // 拖动开始，将表格滚动回最左端 @@ -190,6 +215,7 @@ export default class AirTable extends Component { this.grid4.scrollToPosition({ scrollLeft: 0 }); } }; + // 拖拽自定义固定列后置动作 onResizeStopLeftDragFixed = (columns: ColumnProps[]) => { this.setState( @@ -199,6 +225,7 @@ export default class AirTable extends Component { this.recomputeGridSize, ); }; + // 拖拽自定义固定列前置动作 onResizeStartRightDragFixed = () => { // 拖动开始，将表格滚动回最右端 @@ -208,6 +235,7 @@ export default class AirTable extends Component { this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 }); } }; + // 拖拽自定义固定列后置动作 onResizeStopRightDragFixed = (columns: ColumnProps[]) => { this.setState( @@ -217,6 +245,7 @@ export default class AirTable extends Component { this.recomputeGridSize, ); }; + // 拖拽滚动表格 onDragSortedMove = (direction: string, step: number) => { // 拖动超过视图范围，将表格左右滚动 @@ -234,6 +263,7 @@ export default class AirTable extends Component { } } }; + // 拖拽排序回调 onDragSortedCb = (columns: ColumnProps[]) => { this.setState( @@ -243,6 +273,7 @@ export default class AirTable extends Component { this.recomputeGridSize, ); }; + // 渲染表头 renderHeaderCell = ( { showColumns, position }: { showColumns: ColumnProps[]; position?: string }, @@ -425,13 +456,17 @@ export default class AirTable extends Component { tableId={tableId} maxPopHeight={maxPopHeight} renderFirstLeft={renderFirstLeft} + toggleGroup={this.toggleGroup} + dataSource={dataSource} /> ); }; render() { - const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr, onDragFixed } = this.props; - const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state; + const { + loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr, onDragFixed, + } = this.props; + const { columns, dataSource, tableWidth = 0, tableHeight = 0, toggleGroup } = this.state; const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config; const scrollbarWidth = scrollbarSize() || 0; const formatColumns = this.memoizeFormatColumns(columns, cachedFeAttr, tableId); @@ -439,9 +474,9 @@ export default class AirTable extends Component { const leftColumns = this.memoizeLeftColumns(showColumns); const rightColumns = this.memoizeRightColumns(showColumns); // 有隐藏列时，修正数据与列头不匹配问题 - const showData = this.memoizeData(showColumns, dataSource); - const leftData = this.memoizeData(leftColumns, dataSource); - const rightData = this.memoizeData(rightColumns, dataSource); + const showData = this.memoizeData(showColumns, dataSource, toggleGroup); + const leftData = this.memoizeData(leftColumns, dataSource, toggleGroup); + const rightData = this.memoizeData(rightColumns, dataSource, toggleGroup); // 左侧固定列数量 const leftCount = leftColumns.length; const rightCount = rightColumns.length; @@ -451,7 +486,7 @@ export default class AirTable extends Component { const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns, columnWidth, tableWidth); const tableBodyHeight: number = tableHeight - headerHeight; const { totalWidth } = this.memoizeTotalWidth(showColumns, columnWidth); - const totalHeight = this.memoizeTotalHeight(dataSource, rowHeight); + const totalHeight = this.memoizeTotalHeight(dataSource, rowHeight, toggleGroup); let realWidth = tableWidth; let paddingRight = 0; if (rowCount > 0 && totalHeight > tableBodyHeight) { @@ -460,316 +495,318 @@ export default class AirTable extends Component { } return ( - {({ locale }) => ( - - {({ onScroll, scrollLeft, scrollTop }: any) => { - return ( -
- {totalWidth > tableWidth && leftCount > 0 && ( -
- { + {({ locale }) => { + return ( + + {({ onScroll, scrollLeft, scrollTop }: any) => { + return ( +
+ {totalWidth > tableWidth && leftCount > 0 && ( +
+ { // 左侧表头 -
- { - this.grid1 = dom; +
-
- } - { + > + { + this.grid1 = dom; + }} + className={styles.headerGrid} + columnWidth={this.getColumnWidth.bind(this, { + columns: showColumns, + showColumns: leftColumns, + })} + columnCount={leftCount} + width={leftWidth} + rowHeight={headerHeight} + rowCount={1} + height={headerHeight} + cellRenderer={this.renderHeaderCell.bind(this, { + showColumns: leftColumns, + position: 'left', + })} + /> +
+ } + { // 左侧固定列 -
- { - this.grid2 = dom; +
) => { - onScroll({ scrollTop: arg[0].scrollTop }); - this.onScroll(arg[0]); - }} - columnCount={leftCount} - width={leftWidth + scrollbarWidth} - rowHeight={getRowHeight.bind(this, { - dataSource, - rowHeight, - })} - rowCount={rowCount} - height={tableBodyHeight - scrollbarWidth} - scrollTop={scrollTop} - /> -
- } -
- )} - {canFixed && ( - - )} -
- - {({ width, height }: any) => { - return ( -
- { + > + { + this.grid2 = dom; + }} + className={styles.sideGrid} + overscanRowCount={overscanRowCount} + cellRenderer={this.renderBodyCell.bind(this, { + showColumns: leftColumns, + showData: leftData, + position: 'left', + })} + columnWidth={this.getColumnWidth.bind(this, { + columns: showColumns, + showColumns: leftColumns, + })} + onScroll={(...arg: Array) => { + onScroll({ scrollTop: arg[0].scrollTop }); + this.onScroll(arg[0]); + }} + columnCount={leftCount} + width={leftWidth + scrollbarWidth} + rowHeight={getRowHeight.bind(this, { + dataSource, + rowHeight, + })} + rowCount={rowCount} + height={tableBodyHeight - scrollbarWidth} + scrollTop={scrollTop} + /> + + } + + )} + {canFixed && ( + + )} +
+ + {({ width, height }: any) => { + return ( +
+ { // 中部表头 -
- { - this.grid3 = dom; +
-
- } - { - // 中部内容 -
- {rowCount > 0 ? ( + > { - this.grid4 = dom; + this.grid3 = dom; }} - className={styles.centerGrid} + className={styles.headerGrid} overscanColumnCount={overscanColumnCount} - overscanRowCount={overscanRowCount} columnWidth={this.getColumnWidth.bind(this, { columns: showColumns, showColumns, })} columnCount={columnCount} - width={realWidth} - rowHeight={getRowHeight.bind(this, { - dataSource, - rowHeight, - })} - rowCount={rowCount} - onScroll={(...arg: Array) => { - onScroll(...arg); - this.onScroll(arg[0]); - }} - scrollTop={scrollTop} - height={tableBodyHeight} - cellRenderer={this.renderBodyCell.bind(this, { + width={width} + rowHeight={headerHeight} + rowCount={1} + height={headerHeight} + scrollLeft={scrollLeft} + cellRenderer={this.renderHeaderCell.bind(this, { showColumns, - showData, position: 'center', })} /> - ) : ( - columnCount > 0 && - !loading && ( - + } + { + // 中部内容 +
+ {rowCount > 0 ? ( + { + this.grid4 = dom; + }} + className={styles.centerGrid} + overscanColumnCount={overscanColumnCount} + overscanRowCount={overscanRowCount} + columnWidth={this.getColumnWidth.bind(this, { + columns: showColumns, + showColumns, + })} + columnCount={columnCount} + width={realWidth} + rowHeight={getRowHeight.bind(this, { + dataSource, + rowHeight, + })} + rowCount={rowCount} + onScroll={(...arg: Array) => { + onScroll(...arg); + this.onScroll(arg[0]); + }} + scrollTop={scrollTop} + height={tableBodyHeight} + cellRenderer={this.renderBodyCell.bind(this, { + showColumns, + showData, + position: 'center', + })} /> - ) - )} - - } - - ); - }} - - - {false && ( - - )} - {totalWidth > tableWidth && rightCount > 0 && ( -
- { + ) : ( + columnCount > 0 + && !loading && ( + + ) + )} +
+ } + + ); + }} + + + {false && ( + + )} + {totalWidth > tableWidth && rightCount > 0 && ( +
+ { // 右侧表头 -
- { - this.grid5 = dom; +
-
- } - { + > + { + this.grid5 = dom; + }} + className={styles.headerGrid} + columnWidth={this.getColumnWidth.bind(this, { + columns: showColumns, + showColumns: rightColumns, + })} + columnCount={rightCount} + width={rightWidth} + rowHeight={headerHeight} + rowCount={1} + height={headerHeight} + cellRenderer={this.renderHeaderCell.bind(this, { + showColumns: rightColumns, + position: 'right', + })} + /> +
+ } + { // 右侧固定列 -
- { - this.grid6 = dom; +
) => { - onScroll({ scrollTop: arg[0].scrollTop }); - this.onScroll(arg[0]); - }} - columnCount={rightCount} - width={rightWidth + scrollbarWidth} - rowHeight={getRowHeight.bind(this, { - dataSource, - rowHeight, - })} - rowCount={rowCount} - height={tableBodyHeight - scrollbarWidth} - scrollTop={scrollTop} - /> -
- } + > + { + this.grid6 = dom; + }} + className={styles.sideGrid} + overscanRowCount={overscanRowCount} + cellRenderer={this.renderBodyCell.bind(this, { + showColumns: rightColumns, + showData: rightData, + position: 'right', + })} + columnWidth={this.getColumnWidth.bind(this, { + columns: showColumns, + showColumns: rightColumns, + })} + onScroll={(...arg: Array) => { + onScroll({ scrollTop: arg[0].scrollTop }); + this.onScroll(arg[0]); + }} + columnCount={rightCount} + width={rightWidth + scrollbarWidth} + rowHeight={getRowHeight.bind(this, { + dataSource, + rowHeight, + })} + rowCount={rowCount} + height={tableBodyHeight - scrollbarWidth} + scrollTop={scrollTop} + /> + + } + + )} +
+
+ {loading && (loadComp || )}
- )} -
-
- {loading && (loadComp ? loadComp : )} -
-
-
+
+
+
+
-
-
- ); - }} - - )} + ); + }} + + ); + }} ); } diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 2e40c18ce8fd540d341a42661a70646e7707ca6d..7776ffe7d4029ead13f80397af3e4e3b1265d786 100644 --- a/components/apolloTable/component/index.tsx +++ b/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 { return (
- {operateConfig && } + {operateConfig && ( + + )}
{tableOperateConfig && (
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index 64a61c89cefa32894963941c65c82b0deb52b0ea..8566052dab93858f42a9715fd59116e955cd2149 100644 --- a/components/apolloTable/component/interface.tsx +++ b/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 { diff --git a/components/apolloTable/utils/memCols.ts b/components/apolloTable/utils/memCols.ts index f6b554d396135b64ffde91186700ee4a410c782e..12acc35db5871c77e1f402d7b1ed96d4a25fd4b4 100644 --- a/components/apolloTable/utils/memCols.ts +++ b/components/apolloTable/utils/memCols.ts @@ -1,6 +1,6 @@ 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 });