Skip to content

S
submodule
Commit 133f9e6b authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

增加分组全选、展开

parent fe9b0f1d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 552 additions and 358 deletions
components/apolloTable/component/Cell.less
View file @ 133f9e6b
......@@ -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/Cell.tsx
View file @ 133f9e6b
This diff is collapsed.
components/apolloTable/component/Column.tsx
View file @ 133f9e6b
......@@ -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/Table.tsx
View file @ 133f9e6b
......@@ -61,12 +61,13 @@ export default class AirTable extends Component<TableProps, TableState> {
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<TableProps, TableState> {
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<TableProps, TableState> {
this.memoizeData = memoizeOne(this.filterData);
}
componentDidUpdate(prevProps: Readonly<TableProps>): void {
componentDidUpdate(prevProps: Readonly<TableProps>, 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<TableProps, TableState> {
this.grid6.recomputeGridSize();
}
};
// 页面大小变化回调
onResize = ({ width, height }: { width: number; height: number }) => {
this.setState(
......@@ -183,6 +207,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.recomputeGridSize,
);
};
// 拖拽自定义固定列前置动作
onResizeStartLeftDragFixed = () => {
// 拖动开始，将表格滚动回最左端
......@@ -190,6 +215,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid4.scrollToPosition({ scrollLeft: 0 });
}
};
// 拖拽自定义固定列后置动作
onResizeStopLeftDragFixed = (columns: ColumnProps[]) => {
this.setState(
......@@ -199,6 +225,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.recomputeGridSize,
);
};
// 拖拽自定义固定列前置动作
onResizeStartRightDragFixed = () => {
// 拖动开始，将表格滚动回最右端
......@@ -208,6 +235,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 });
}
};
// 拖拽自定义固定列后置动作
onResizeStopRightDragFixed = (columns: ColumnProps[]) => {
this.setState(
......@@ -217,6 +245,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.recomputeGridSize,
);
};
// 拖拽滚动表格
onDragSortedMove = (direction: string, step: number) => {
// 拖动超过视图范围，将表格左右滚动
......@@ -234,6 +263,7 @@ export default class AirTable extends Component<TableProps, TableState> {
}
}
};
// 拖拽排序回调
onDragSortedCb = (columns: ColumnProps[]) => {
this.setState(
......@@ -243,6 +273,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.recomputeGridSize,
);
};
// 渲染表头
renderHeaderCell = (
{ showColumns, position }: { showColumns: ColumnProps[]; position?: string },
......@@ -425,13 +456,17 @@ export default class AirTable extends Component<TableProps, TableState> {
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<TableProps, TableState> {
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<TableProps, TableState> {
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,7 +495,8 @@ export default class AirTable extends Component<TableProps, TableState> {
}
return (
<Consumer>
{({ locale }) => (
{({ locale }) => {
return (
<ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => {
return (
......@@ -642,8 +678,8 @@ export default class AirTable extends Component<TableProps, TableState> {
})}
/>
) : (
columnCount > 0 &&
!loading && (
columnCount > 0
&& !loading && (
<Empty
className={styles.defaultEmpty}
description={
......@@ -759,7 +795,7 @@ export default class AirTable extends Component<TableProps, TableState> {
)}
<div className={styles.fillHandleWrapper} />
<div className={styles.loading} style={{ top: `${tableBodyHeight / 2}px` }}>
{loading && (loadComp ? loadComp : <Spin />)}
{loading && (loadComp || <Spin />)}
</div>
<div className={styles.widthHandleWrapper} id={`dividerWrap_${tableId}`}>
<div className={styles.widthHandle} id={`divider_${tableId}`} />
......@@ -769,7 +805,8 @@ export default class AirTable extends Component<TableProps, TableState> {
);
}}
</ScrollSync>
)}
);
}}
</Consumer>
);
}
......
components/apolloTable/component/index.tsx
View file @ 133f9e6b
......@@ -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
View file @ 133f9e6b
......@@ -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
View file @ 133f9e6b
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 });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment