Skip to content

S
submodule
Commit 5f73e904 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update

parent 3e9fd63d
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 127 deletions
components/apolloTable/component/DragFixed.tsx
View file @ 5f73e904
import React from 'react';
import { ResizableBox } from 'react-resizable';
import styles from './DragFixed.less';
import { getCache, saveCache } from '../utils/cache';
const DragFixed = (props: any) => {
const { tableId, initLeft, initTop, onResizeStart, showColumns, columnWidth, columns, onResizeStop } = props;
const {
tableId,
initLeft,
initTop,
onResizeStart,
showColumns,
columnWidth,
columns,
onResizeStop,
cachedFeAttr,
} = props;
// 表格
const container: any = document.querySelector(`#apolloTable_${tableId}`);
// 滑块wrap
......@@ -109,6 +120,16 @@ const DragFixed = (props: any) => {
item.fixed = '';
}
}
if (cachedFeAttr) {
const cachedCols = getCache({ tableId });
if (cachedCols) {
cachedCols[item.columnName] = {
...cachedCols[item.columnName],
fixed: item.fixed,
};
saveCache({ tableId, data: cachedCols });
}
}
newColumns.push(item);
});
if (typeof onResizeStop === 'function') {
......
components/apolloTable/component/DragResized.less
View file @ 5f73e904
......@@ -9,4 +9,7 @@
cursor: ew-resize;
z-index: 1;
background: #ececec;
&:hover {
background-color: rgb(33, 150, 243);
}
}
components/apolloTable/component/RightDragFixed.tsx
View file @ 5f73e904
import React from 'react';
import { ResizableBox } from 'react-resizable';
import styles from './DragFixed.less';
import { getCache, saveCache } from '../utils/cache';
const DragFixed = (props: any) => {
const {
......@@ -13,6 +14,7 @@ const DragFixed = (props: any) => {
columns,
onResizeStop,
paddingRight,
cachedFeAttr,
} = props;
// 表格
const container: any = document.querySelector(`#apolloTable_${tableId}`);
......@@ -124,6 +126,16 @@ const DragFixed = (props: any) => {
item.fixed = '';
}
}
if (cachedFeAttr) {
const cachedCols = getCache({ tableId });
if (cachedCols) {
cachedCols[item.columnName] = {
...cachedCols[item.columnName],
fixed: item.fixed,
};
saveCache({ tableId, data: cachedCols });
}
}
newColumns.push(item);
});
if (typeof onResizeStop === 'function') {
......
components/apolloTable/component/Table.tsx
View file @ 5f73e904
......@@ -14,7 +14,15 @@ import RightDragFixed from './RightDragFixed';
import DragSorted from './DragSorted';
import DragResized from './DragResized';
import { getMergeClassName, getMergeStyle } from '../utils/utils';
import { saveCache, getCache } from '../utils/cache';
import {
getLeftColumns,
getRightColumns,
getShowColumns,
getLeftWidth,
getTotalWidth,
getFormatColumns,
} from '../utils/memCols';
import { getDefaultTableConfig } from './defaultConfig';
import { Consumer } from './context';
const borderStyle = '1px solid #ececec';
......@@ -64,127 +72,23 @@ export default class AirTable extends Component<TableProps, TableState> {
constructor(props: TableProps) {
super(props);
const { columns, dataSource, width = 0, height = 0, rowHeight, headerHeight, columnWidth } = props;
const { columns, dataSource, width, height } = props;
this.state = {
columns,
dataSource,
tableWidth: width,
tableHeight: height,
tableWidth: width || 0,
tableHeight: height || 0,
};
this.config = {
overscanColumnCount: 5,
overscanRowCount: 5,
columnWidth: columnWidth || 150,
rowHeight: rowHeight || 80,
headerHeight: headerHeight || 60,
};
this.memoizeFormatColumns = memoizeOne(this.getFormatColumns);
this.memoizeLeftColumns = memoizeOne(this.getLeftColumns);
this.memoizeRightColumns = memoizeOne(this.getRightColumns);
this.memoizeColumns = memoizeOne(this.getShowColumns);
this.memoizeLeftWidth = memoizeOne(this.getLeftWidth);
this.memoizeTotalWidth = memoizeOne(this.getTotalWidth);
this.config = getDefaultTableConfig(props);
this.memoizeFormatColumns = memoizeOne(getFormatColumns);
this.memoizeLeftColumns = memoizeOne(getLeftColumns);
this.memoizeRightColumns = memoizeOne(getRightColumns);
this.memoizeColumns = memoizeOne(getShowColumns);
this.memoizeLeftWidth = memoizeOne(getLeftWidth);
this.memoizeTotalWidth = memoizeOne(getTotalWidth);
this.memoizeData = memoizeOne(this.filterData);
}
// 格式化列数据（添加缓存的前端属性）
getFormatColumns = (columns: ColumnProps[]) => {
columns.sort((a, b) => {
return a.orderNo - b.orderNo;
});
const { cachedFeAttr, tableId } = this.props;
if (cachedFeAttr) {
const cachedCols = getCache({ tableId });
if (cachedCols) {
columns = columns.map((item: any) => {
return {
...item,
...cachedCols[item.columnName],
};
});
} else {
const data: any = {};
columns.map((item: any) => {
data[item.columnName] = {
columnName: item.columnName,
width: item.width,
align: item.align,
fixed: item.fixed,
hideScope: item.hideScope,
orderNo: item.orderNo,
};
});
saveCache({ tableId, data });
}
}
return columns;
};
// 获取左侧固定列数量
getLeftColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && item.fixed && item.fixed !== 'right';
});
};
// 获取右侧固定列数量
getRightColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && item.fixed === 'right';
});
};
// 获取表格显示列
getShowColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && (!item.hideScope || item.hideScope.indexOf('LIST') === -1);
});
};
// 获取左侧固定列总宽度
getLeftWidth = (leftColumns: ColumnProps[], columns: ColumnProps[]) => {
const { tableWidth = 0 } = this.state;
const { totalWidth, configWidth, defaultWidthLen } = this.memoizeTotalWidth(columns);
const { columnWidth } = this.config;
let colWidth = columnWidth;
if (totalWidth < tableWidth) {
colWidth = _.floor((tableWidth - configWidth) / defaultWidthLen);
}
let total = 0;
leftColumns.map((item) => {
total += item.width || colWidth;
});
return total;
};
// 获取右侧列总宽度
getTotalWidth = (columns: ColumnProps[]) => {
const { columnWidth } = this.config;
let configWidth = 0;
let configWidthLen = 0;
let defaultWidth = 0;
let defaultWidthLen = 0;
columns.map((item: any) => {
if (item.width) {
configWidth += item.width;
configWidthLen += 1;
} else {
defaultWidth += columnWidth;
defaultWidthLen += 1;
}
});
const totalWidth = configWidth + defaultWidth;
return {
configWidth,
defaultWidth,
totalWidth,
configWidthLen,
defaultWidthLen,
};
};
// 获取表格显示数据
filterData = (columns: ColumnProps[], dataSource: RowProps[]) => {
if (columns.length === 0 || dataSource.length === 0) {
......@@ -208,8 +112,8 @@ export default class AirTable extends Component<TableProps, TableState> {
{ index }: { index: number },
) => {
const { tableWidth = 0 } = this.state;
const { totalWidth, configWidth, defaultWidthLen } = this.memoizeTotalWidth(columns);
const { columnWidth } = this.config;
const { totalWidth, configWidth, defaultWidthLen } = this.memoizeTotalWidth(columns, columnWidth);
let colWidth = columnWidth;
if (totalWidth < tableWidth) {
colWidth = _.floor((tableWidth - configWidth) / defaultWidthLen);
......@@ -299,19 +203,29 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 });
}
};
// 拖拽自定义固定列后置动作
onResizeStopRightDragFixed = ({ columns }) => {
this.setState(
{
columns,
},
() => {
this.grid5 && this.grid5.recomputeGridSize();
this.grid6 && this.grid6.recomputeGridSize();
},
);
};
// 拖拽滚动表格
onScrollHor = (direction: string, step: number) => {
// 拖动超过视图范围，将表格左右滚动
if (this.grid4) {
if (direction === 'right') {
if (this.grid4.state.scrollLeft >= this.grid4.getTotalColumnsWidth() - this.state.tableWidth - 100) {
console.log('已经到最右侧了');
return;
}
this.grid4.scrollToPosition({ scrollLeft: this.grid4.state.scrollLeft + step });
} else {
if (this.grid4.state.scrollLeft <= 0) {
console.log('已经到最左侧了');
return;
}
this.grid4.scrollToPosition({ scrollLeft: this.grid4.state.scrollLeft - step });
......@@ -383,6 +297,7 @@ export default class AirTable extends Component<TableProps, TableState> {
} = showColumns[columnIndex];
return (
<DragResized
key={key}
columnName={columnName}
style={style}
tableId={tableId}
......@@ -395,7 +310,6 @@ export default class AirTable extends Component<TableProps, TableState> {
onDropFinish={this.onDragSorted}
onScroll={this.onScrollHor}
className={styles.headerCell}
key={key}
canDrag={!!onDragSorted}
tableId={tableId}
>
......@@ -523,11 +437,11 @@ export default class AirTable extends Component<TableProps, TableState> {
};
render() {
const { loading, noDataPlaceholder, loadComp, canFixed, tableId } = this.props;
const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr } = this.props;
const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
const scrollbarWidth = scrollbarSize() || 0;
const formatColumns = this.memoizeFormatColumns(columns);
const formatColumns = this.memoizeFormatColumns(columns, cachedFeAttr, tableId);
const showColumns = this.memoizeColumns(formatColumns);
const leftColumns = this.memoizeLeftColumns(showColumns);
const rightColumns = this.memoizeRightColumns(showColumns);
......@@ -540,10 +454,10 @@ export default class AirTable extends Component<TableProps, TableState> {
const rightCount = rightColumns.length;
const columnCount = showColumns.length;
const rowCount = showData.length;
const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns);
const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns);
let totalHeight: number = tableHeight - headerHeight;
const { totalWidth } = this.memoizeTotalWidth(showColumns);
const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns, columnWidth, tableWidth);
const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns, columnWidth, tableWidth);
const totalHeight: number = tableHeight - headerHeight;
const { totalWidth } = this.memoizeTotalWidth(showColumns, columnWidth);
let realWidth = tableWidth;
let paddingRight = 0;
if (rowCount > 0 && rowCount * rowHeight > totalHeight) {
......@@ -653,6 +567,7 @@ export default class AirTable extends Component<TableProps, TableState> {
columns={columns}
onResizeStart={this.onResizeStartLeftDragFixed}
onResizeStop={this.onResizeStopLeftDragFixed}
cachedFeAttr={cachedFeAttr}
/>
)}
<div className={styles.centerContainer}>
......@@ -756,7 +671,8 @@ export default class AirTable extends Component<TableProps, TableState> {
columns={columns}
paddingRight={paddingRight}
onResizeStart={this.onResizeStartRightDragFixed}
onResizeStop={this.onResizeStopLeftDragFixed}
onResizeStop={this.onResizeStopRightDragFixed}
cachedFeAttr={cachedFeAttr}
/>
)}
{totalWidth > tableWidth && rightCount > 0 && (
......
components/apolloTable/component/defaultConfig.ts 0 → 100644
View file @ 5f73e904
export const getDefaultTableConfig = (config: any) => {
const { rowHeight, headerHeight, columnWidth } = config;
return {
overscanColumnCount: 5,
overscanRowCount: 5,
columnWidth: columnWidth || 150,
rowHeight: rowHeight || 80,
headerHeight: headerHeight || 60,
};
};
components/apolloTable/utils/memCols.ts 0 → 100644
View file @ 5f73e904
import memoizeOne from 'memoize-one';
import { ColumnProps } from '../component/interface';
import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache';
// 获取左侧固定列数量
export const getLeftColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && item.fixed && item.fixed !== 'right';
});
};
// 获取右侧固定列数量
export const getRightColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && item.fixed === 'right';
});
};
// 获取表格显示列
export const getShowColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && (!item.hideScope || item.hideScope.indexOf('LIST') === -1);
});
};
// 获取右侧列总宽度
export const getTotalWidth = (columns: ColumnProps[], columnWidth: number) => {
let configWidth = 0;
let configWidthLen = 0;
let defaultWidth = 0;
let defaultWidthLen = 0;
columns.map((item: any) => {
if (item.width) {
configWidth += item.width;
configWidthLen += 1;
} else {
defaultWidth += columnWidth;
defaultWidthLen += 1;
}
});
const totalWidth = configWidth + defaultWidth;
return {
configWidth,
defaultWidth,
totalWidth,
configWidthLen,
defaultWidthLen,
};
};
// 获取左侧固定列总宽度
export const getLeftWidth = (
leftColumns: ColumnProps[],
columns: ColumnProps[],
columnWidth: number,
tableWidth: number,
) => {
const { totalWidth, configWidth, defaultWidthLen } = memoizeOne(getTotalWidth(columns, columnWidth));
let colWidth = columnWidth;
if (totalWidth < tableWidth) {
colWidth = Math.floor((tableWidth - configWidth) / defaultWidthLen);
}
let total = 0;
leftColumns.map((item) => {
total += item.width || colWidth;
});
return total;
};
// 格式化列数据（添加缓存的前端属性）
export const getFormatColumns = (columns: ColumnProps[], cachedFeAttr: boolean, tableId: number | string) => {
columns.sort((a, b) => {
return a.orderNo - b.orderNo;
});
if (cachedFeAttr) {
const cachedCols = getCache({ tableId });
if (cachedCols) {
columns = columns.map((item: any) => {
return {
...item,
...cachedCols[item.columnName],
};
});
} else {
const data: any = {};
columns.map((item: any) => {
data[item.columnName] = {
columnName: item.columnName,
width: item.width,
align: item.align,
fixed: item.fixed,
hideScope: item.hideScope,
orderNo: item.orderNo,
};
});
saveCache({ tableId, data });
}
}
return columns;
};
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