Skip to content

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

temp

parent 8b6603d0
Expand all Show whitespace changes
Inline Side-by-side
Showing with 791 additions and 35 deletions
components/apolloTable/component/Cell.less
View file @ a3356272
...@@ -73,6 +73,19 @@ ...@@ -73,6 +73,19 @@
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.groupLevel {
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: @textFontGen;
height: 40px;
line-height: 40px;
color: @textPrimaryColor;
z-index: 5;
}
} }
.detailCell { .detailCell {
...@@ -104,7 +117,6 @@ ...@@ -104,7 +117,6 @@
// } // }
//} //}
.content { .content {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
...@@ -132,3 +144,9 @@ ...@@ -132,3 +144,9 @@
box-shadow: inset 0 0 0 1px @primaryColor; box-shadow: inset 0 0 0 1px @primaryColor;
} }
:global(.groupLevel3) {
}
:global(.groupLevel2) {
}
:global(.groupLevel1) {
}
components/apolloTable/component/Cell.tsx
View file @ a3356272
...@@ -10,6 +10,7 @@ import FormHelper from '../utils/formHelper'; ...@@ -10,6 +10,7 @@ import FormHelper from '../utils/formHelper';
import expandIcon from '../assets/extend.png'; import expandIcon from '../assets/extend.png';
import { transferAttr } from './base/_utils/transferAttr'; import { transferAttr } from './base/_utils/transferAttr';
import { emptyModel } from './base/_utils/setFormatter'; import { emptyModel } from './base/_utils/setFormatter';
import { getGroupLevel } from '../utils/memCols';
enum EDIT_STATUS { enum EDIT_STATUS {
'FREE', // 空闲 'FREE', // 空闲
...@@ -394,7 +395,7 @@ const Cell = (props: CellProps) => { ...@@ -394,7 +395,7 @@ const Cell = (props: CellProps) => {
</div> </div>
); );
}; };
const groupLevel = getGroupLevel(record.classList);
return ( return (
<div <div
className={classNames( className={classNames(
...@@ -403,11 +404,62 @@ const Cell = (props: CellProps) => { ...@@ -403,11 +404,62 @@ const Cell = (props: CellProps) => {
`row_${rowIndex}`, `row_${rowIndex}`,
`col_${columnIndex}`, `col_${columnIndex}`,
cellClassName, cellClassName,
...(record.classList || []),
)} )}
style={cellStyle} style={{
...cellStyle,
paddingLeft:
columnIndex === 0 && position !== 'right' && record.groupLevel ? `${record.groupLevel * 16}px` : 0,
paddingTop: `${groupLevel * 40}px`,
}}
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
> >
{record.classList && record.classList[0] && (
<div
className={s.groupLevel}
style={{
top: 0,
paddingLeft: '16px',
background: groupLevel === 3 ? '#EEEEEE' : groupLevel === 2 ? '#EDEDED' : '#F7F9FA',
}}
>
{columnIndex === 0 &&
position !== 'right' &&
record.groupConfig[0] &&
`${record.groupConfig[0].colChsName}:${record.groupTextArr[0]}`}
</div>
)}
{record.classList && record.classList[1] && (
<div
className={s.groupLevel}
style={{
top: record.classList[0] ? 40 : 0,
paddingLeft: '32px',
background: groupLevel === 3 ? '#F5F5F5' : '#F7F9FA',
}}
>
{columnIndex === 0 &&
position !== 'right' &&
record.groupConfig[1] &&
`${record.groupConfig[1].colChsName}:${record.groupTextArr[1]}`}
</div>
)}
{record.classList && record.classList[2] && (
<div
className={s.groupLevel}
style={{
top: groupLevel === 3 ? 80 : groupLevel === 2 ? 40 : 0,
paddingLeft: '48px',
background: '#F7F9FA',
}}
>
{columnIndex === 0 &&
position !== 'right' &&
record.groupConfig[3] &&
`${record.groupConfig[2].colChsName}:${record.groupTextArr[2]}`}
</div>
)}
{columnIndex === 0 && position !== 'right' && renderFirst()} {columnIndex === 0 && position !== 'right' && renderFirst()}
<div <div
id={`cellUnit_${tableId}_${record.id}_${columnName}`} id={`cellUnit_${tableId}_${record.id}_${columnName}`}
......
components/apolloTable/component/Table.tsx
View file @ a3356272
...@@ -21,6 +21,8 @@ import { ...@@ -21,6 +21,8 @@ import {
getLeftWidth, getLeftWidth,
getTotalWidth, getTotalWidth,
getFormatColumns, getFormatColumns,
getTotalHeight,
getRowHeight,
} from '../utils/memCols'; } from '../utils/memCols';
import { getDefaultTableConfig } from './defaultConfig'; import { getDefaultTableConfig } from './defaultConfig';
import { Consumer } from './context'; import { Consumer } from './context';
...@@ -56,8 +58,10 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -56,8 +58,10 @@ export default class AirTable extends Component<TableProps, TableState> {
memoizeTotalWidth: Function; memoizeTotalWidth: Function;
memoizeTotalHeight: Function;
static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) { static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) {
const { columns, dataSource } = prevState; const { columns, dataSource, groupConfig } = prevState;
const nextState: TableState = { const nextState: TableState = {
...prevState, ...prevState,
}; };
...@@ -67,15 +71,19 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -67,15 +71,19 @@ export default class AirTable extends Component<TableProps, TableState> {
if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) { if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) {
nextState.columns = nextProps.columns; nextState.columns = nextProps.columns;
} }
if (JSON.stringify(groupConfig) !== JSON.stringify(nextProps.groupConfig)) {
nextState.groupConfig = nextProps.groupConfig;
}
return nextState; return nextState;
} }
constructor(props: TableProps) { constructor(props: TableProps) {
super(props); super(props);
const { columns, dataSource, width, height } = props; const { columns, dataSource, groupConfig, width, height } = props;
this.state = { this.state = {
columns, columns,
dataSource, dataSource,
groupConfig,
tableWidth: width || 0, tableWidth: width || 0,
tableHeight: height || 0, tableHeight: height || 0,
}; };
...@@ -86,9 +94,16 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -86,9 +94,16 @@ export default class AirTable extends Component<TableProps, TableState> {
this.memoizeColumns = memoizeOne(getShowColumns); this.memoizeColumns = memoizeOne(getShowColumns);
this.memoizeLeftWidth = memoizeOne(getLeftWidth); this.memoizeLeftWidth = memoizeOne(getLeftWidth);
this.memoizeTotalWidth = memoizeOne(getTotalWidth); this.memoizeTotalWidth = memoizeOne(getTotalWidth);
this.memoizeTotalHeight = memoizeOne(getTotalHeight);
this.memoizeData = memoizeOne(this.filterData); this.memoizeData = memoizeOne(this.filterData);
} }
componentWillReceiveProps(prevProps: Readonly<TableProps>, prevState: Readonly<TableState>, snapshot?: any): void {
if (JSON.stringify(prevState.groupConfig) !== JSON.stringify(this.state.groupConfig)) {
this.recomputeGridSize();
}
}
// 获取表格显示数据 // 获取表格显示数据
filterData = (columns: ColumnProps[], dataSource: RowProps[]) => { filterData = (columns: ColumnProps[], dataSource: RowProps[]) => {
if (columns.length === 0 || dataSource.length === 0) { if (columns.length === 0 || dataSource.length === 0) {
...@@ -124,6 +139,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -124,6 +139,7 @@ export default class AirTable extends Component<TableProps, TableState> {
} }
return colWidth; return colWidth;
}; };
// 重新计算单元格大小 // 重新计算单元格大小
recomputeGridSize = () => { recomputeGridSize = () => {
if (this.grid1 && this.grid2) { if (this.grid1 && this.grid2) {
...@@ -434,11 +450,12 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -434,11 +450,12 @@ export default class AirTable extends Component<TableProps, TableState> {
const rowCount = showData.length; const rowCount = showData.length;
const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns, columnWidth, tableWidth); const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns, columnWidth, tableWidth);
const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns, columnWidth, tableWidth); const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns, columnWidth, tableWidth);
const totalHeight: number = tableHeight - headerHeight; const tableBodyHeight: number = tableHeight - headerHeight;
const { totalWidth } = this.memoizeTotalWidth(showColumns, columnWidth); const { totalWidth } = this.memoizeTotalWidth(showColumns, columnWidth);
const totalHeight = this.memoizeTotalHeight(dataSource, rowHeight);
let realWidth = tableWidth; let realWidth = tableWidth;
let paddingRight = 0; let paddingRight = 0;
if (rowCount > 0 && rowCount * rowHeight > totalHeight) { if (rowCount > 0 && totalHeight > tableBodyHeight) {
realWidth = tableWidth + scrollbarWidth; realWidth = tableWidth + scrollbarWidth;
paddingRight = scrollbarWidth; paddingRight = scrollbarWidth;
} }
...@@ -460,7 +477,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -460,7 +477,7 @@ export default class AirTable extends Component<TableProps, TableState> {
className={styles.leftSideContainer} className={styles.leftSideContainer}
style={{ style={{
width: `${leftWidth}px`, width: `${leftWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`, height: `${tableBodyHeight - scrollbarWidth + headerHeight}px`,
}} }}
> >
{ {
...@@ -522,9 +539,9 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -522,9 +539,9 @@ export default class AirTable extends Component<TableProps, TableState> {
}} }}
columnCount={leftCount} columnCount={leftCount}
width={leftWidth + scrollbarWidth} width={leftWidth + scrollbarWidth}
rowHeight={rowHeight} rowHeight={getRowHeight.bind(null, { dataSource, rowHeight })}
rowCount={rowCount} rowCount={rowCount}
height={totalHeight - scrollbarWidth} height={tableBodyHeight - scrollbarWidth}
scrollTop={scrollTop} scrollTop={scrollTop}
/> />
</div> </div>
...@@ -587,7 +604,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -587,7 +604,7 @@ export default class AirTable extends Component<TableProps, TableState> {
// 中部内容 // 中部内容
<div <div
style={{ style={{
height: totalHeight, height: tableBodyHeight,
width: tableWidth, width: tableWidth,
}} }}
> >
...@@ -605,14 +622,17 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -605,14 +622,17 @@ export default class AirTable extends Component<TableProps, TableState> {
})} })}
columnCount={columnCount} columnCount={columnCount}
width={realWidth} width={realWidth}
rowHeight={rowHeight} rowHeight={getRowHeight.bind(null, {
dataSource,
rowHeight,
})}
rowCount={rowCount} rowCount={rowCount}
onScroll={(...arg: Array<Object>) => { onScroll={(...arg: Array<Object>) => {
onScroll(...arg); onScroll(...arg);
this.onScroll(arg[0]); this.onScroll(arg[0]);
}} }}
scrollTop={scrollTop} scrollTop={scrollTop}
height={totalHeight} height={tableBodyHeight}
cellRenderer={this.renderBodyCell.bind(this, { cellRenderer={this.renderBodyCell.bind(this, {
showColumns, showColumns,
showData, showData,
...@@ -658,7 +678,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -658,7 +678,7 @@ export default class AirTable extends Component<TableProps, TableState> {
className={styles.rightSideContainer} className={styles.rightSideContainer}
style={{ style={{
width: `${rightWidth}px`, width: `${rightWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`, height: `${tableBodyHeight - scrollbarWidth + headerHeight}px`,
right: paddingRight, right: paddingRight,
}} }}
> >
...@@ -723,9 +743,9 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -723,9 +743,9 @@ export default class AirTable extends Component<TableProps, TableState> {
}} }}
columnCount={rightCount} columnCount={rightCount}
width={rightWidth + scrollbarWidth} width={rightWidth + scrollbarWidth}
rowHeight={rowHeight} rowHeight={getRowHeight.bind(null, { dataSource, rowHeight })}
rowCount={rowCount} rowCount={rowCount}
height={totalHeight - scrollbarWidth} height={tableBodyHeight - scrollbarWidth}
scrollTop={scrollTop} scrollTop={scrollTop}
/> />
</div> </div>
...@@ -733,7 +753,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -733,7 +753,7 @@ export default class AirTable extends Component<TableProps, TableState> {
</div> </div>
)} )}
<div className={styles.fillHandleWrapper} /> <div className={styles.fillHandleWrapper} />
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}> <div className={styles.loading} style={{ top: `${tableBodyHeight / 2}px` }}>
{loading && (loadComp ? loadComp : <Spin />)} {loading && (loadComp ? loadComp : <Spin />)}
</div> </div>
<div className={styles.widthHandleWrapper} id={`dividerWrap_${tableId}`}> <div className={styles.widthHandleWrapper} id={`dividerWrap_${tableId}`}>
......
components/apolloTable/component/index.less
View file @ a3356272
...@@ -27,3 +27,99 @@ ...@@ -27,3 +27,99 @@
} }
} }
} }
.groupContainer {
padding: 16px 0;
background: #EAEAEA;
min-height: 100%;
//position: absolute;
//min-width: 100%;
:global( .ant-table.ant-table-bordered .ant-table-footer) {
border-color: transparent;
}
:global(.ant-table-bordered .ant-table-body > table) {
border-color: transparent;
border-top-color: #DBDBDB;
}
:global(.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
left: 10px;
}
:global(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
padding: 4px 30px 10px 33px;
}
:global(.ant-collapse-content) {
background: transparent;
}
:global(.ant-collapse-content > .ant-collapse-content-box) {
padding: 0;
}
.groupFloor1 {
background: #E8E8E8;
border-radius: 4px;
border: 1px solid #CBCBCB;
margin: 0 16px 16px 16px;
.groupFloor2 {
background: #EDEDED;
border-radius: 4px;
border: 1px solid #CBCBCB;
margin: 0 16px 16px 16px;
.groupFloor3 {
background: #F7F9FA;
border-radius: 4px;
border: 1px solid #DBDBDB;
margin: 0 16px 16px 16px;
}
}
}
.floorContainer {
//padding: 4px 10px;
font-size: 12px;
font-family: PingFangSC;
font-weight: 400;
.groupName {
color: #5A6876;
margin-bottom: 4px;
}
.groupText {
display: flex;
align-items: flex-start;
color: #2C3F53;
.groupTextColor {
border-radius: 12px;
padding: 0 10px;
height: 20px;
line-height: 20px;
}
.groupTextColorNormal {
border-radius: 4px;
padding: 0 10px;
background: #E9EEF9;
height: 20px;
line-height: 20px;
}
.groupTextNormal {
}
.groupNumber {
margin-left: 12px;
color: #666666;
width: 100px;
}
}
}
}
components/apolloTable/component/index.tsx
View file @ a3356272
import React from 'react'; import React from 'react';
import { Pagination } from 'antd'; import { Pagination } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import _ from 'lodash';
import styles from './index.less'; import styles from './index.less';
import { CommonProps, CommonState } from './interface'; import { CommonProps, CommonState } from './interface';
import Table from './Table'; import Table from './Table';
...@@ -9,9 +11,115 @@ import TableOperateConfig from './tableOperate'; ...@@ -9,9 +11,115 @@ import TableOperateConfig from './tableOperate';
import { defaultLocale } from '../locale'; import { defaultLocale } from '../locale';
import { Provider } from './context'; import { Provider } from './context';
/**
* 获取每个单元格的值用'_'相连
* @param cell
*/
const getCellKey = (cell: any) => {
const arr1: any = [];
const arr2: any = [];
if (Array.isArray(cell.cellValueList) && cell.cellValueList.length > 0) {
cell.cellValueList.map((data: any) => {
arr1.push(data.value);
arr2.push(data.text);
});
} else {
return {
key: '(Empty)',
text: '(空)',
};
}
return {
key: arr1.join('_'),
text: arr2.join('_'),
};
};
/**
*
* @param {*} config
* @param {*} dataSource
* @params {*renderGroupText} 自定义渲染分组名称
*/
// 分组数据添加class
const formatData = (config: string[], dataSource: any[]) => {
if (!config || !config.length) {
return dataSource;
}
const map: any = {};
// 一级分组条件
const group1 = config[0];
// 二级分组条件
const group2 = config[1];
// 三级分组条件
const group3 = config[2];
// 遍历数据默认已排序，根据分组级别给每行添加分组class
return dataSource.map((row: any) => {
const groupKeyArr: string[] = [];
const groupTextArr: string[] = [];
row.rowData.map((cell: any) => {
if (group1 && cell.colName === group1.colName) {
const group1Cell = getCellKey(cell);
groupKeyArr[0] = group1Cell.key;
groupTextArr[0] = group1Cell.text;
}
if (group2 && cell.colName === group2.colName) {
const group2Cell = getCellKey(cell);
groupKeyArr[1] = group2Cell.key;
groupTextArr[1] = group2Cell.text;
}
if (group3 && cell.colName === group3.colName) {
const group3Cell = getCellKey(cell);
groupKeyArr[2] = group3Cell.key;
groupTextArr[2] = group3Cell.text;
}
});
if (groupKeyArr[0]) {
const group1Key = groupKeyArr[0];
const group1Text = groupTextArr[0];
if (!map[group1Key]) {
map[group1Key] = group1Text;
if (row.classList) {
row.classList[0] = 'groupLevel1';
} else {
row.classList = ['groupLevel1'];
}
}
}
if (groupKeyArr[1]) {
const group2Key = `${groupKeyArr[0]}-${groupKeyArr[1]}`;
const group2Text = `${groupTextArr[0]}-${groupTextArr[1]}`;
if (!map[group2Key]) {
map[group2Key] = group2Text;
if (row.classList) {
row.classList[1] = 'groupLevel2';
} else {
row.classList = ['', 'groupLevel2', ''];
}
}
}
if (groupKeyArr[2]) {
const group3Key = groupKeyArr.join('-');
const group3Text = groupTextArr.join('-');
if (!map[group3Key]) {
map[group3Key] = group3Text;
if (row.classList) {
row.classList[2] = 'groupLevel3';
} else {
row.classList = ['', '', 'groupLevel3'];
}
}
}
row.groupLevel = groupKeyArr.length;
row.groupKeyArr = groupKeyArr;
row.groupTextArr = groupTextArr;
row.groupConfig = config;
return row;
});
};
const memoizeData = memoizeOne(formatData);
class AirTable extends React.Component<CommonProps, CommonState> { class AirTable extends React.Component<CommonProps, CommonState> {
static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) { static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
const { columns, dataSource } = prevState; const { columns, dataSource, groupConfig } = prevState;
const nextState: CommonState = { const nextState: CommonState = {
...prevState, ...prevState,
...@@ -22,6 +130,16 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -22,6 +130,16 @@ class AirTable extends React.Component<CommonProps, CommonState> {
if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) { if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) {
nextState.columns = nextProps.columns; nextState.columns = nextProps.columns;
} }
const operateConfig = nextProps.operateConfig;
const nextGroupConfig: any =
operateConfig &&
operateConfig.menusGroup &&
operateConfig.menusGroup.find((item: any) => {
return item.type === 'group';
});
if (nextGroupConfig && JSON.stringify(groupConfig) !== JSON.stringify(nextGroupConfig.value)) {
nextState.groupConfig = nextGroupConfig.value;
}
return nextState; return nextState;
} }
...@@ -31,6 +149,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -31,6 +149,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
this.state = { this.state = {
columns, columns,
dataSource, dataSource,
groupConfig: [],
}; };
} }
...@@ -55,7 +174,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -55,7 +174,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
}; };
render() { render() {
const { columns, dataSource } = this.state; const { columns, dataSource, groupConfig } = this.state;
const { const {
className, className,
tableClassName, tableClassName,
...@@ -94,20 +213,18 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -94,20 +213,18 @@ class AirTable extends React.Component<CommonProps, CommonState> {
renderFirstLeft, renderFirstLeft,
leftMargin, leftMargin,
} = this.props; } = this.props;
const sortConfig = operateConfig const sortConfig =
&& operateConfig.menusGroup operateConfig &&
&& operateConfig.menusGroup.find((item: any) => { operateConfig.menusGroup &&
operateConfig.menusGroup.find((item: any) => {
return item.type === 'sort'; return item.type === 'sort';
}); });
const memDataSource = memoizeData(groupConfig, dataSource);
return ( return (
<Provider value={{ locale: this.getContext() }}> <Provider value={{ locale: this.getContext() }}>
<div <div className={classNames(styles.container, className)}>
className={classNames(styles.container, className)}
>
{operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />} {operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
<div <div className={classNames(styles.tableContainer, tableClassName)}>
className={classNames(styles.tableContainer, tableClassName)}
>
{tableOperateConfig && ( {tableOperateConfig && (
<div className={styles.tableOperateContainer}> <div className={styles.tableOperateContainer}>
<TableOperateConfig operateConfig={tableOperateConfig} /> <TableOperateConfig operateConfig={tableOperateConfig} />
...@@ -117,7 +234,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -117,7 +234,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
<Table <Table
tableId={tableId} tableId={tableId}
columns={columns} columns={columns}
dataSource={dataSource} dataSource={memDataSource}
rowStyle={rowStyle} rowStyle={rowStyle}
rowClassName={rowClassName} rowClassName={rowClassName}
onScroll={onScroll ? this.onScroll : undefined} onScroll={onScroll ? this.onScroll : undefined}
...@@ -131,6 +248,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -131,6 +248,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
headerHeight={headerHeight} headerHeight={headerHeight}
columnWidth={columnWidth} columnWidth={columnWidth}
sortConfig={sortConfig} sortConfig={sortConfig}
groupConfig={groupConfig}
paginationConfig={paginationConfig} paginationConfig={paginationConfig}
showIndex={showIndex} showIndex={showIndex}
showExpand={showExpand} showExpand={showExpand}
......
components/apolloTable/component/interface.tsx
View file @ a3356272
...@@ -39,7 +39,7 @@ export interface OperateConfigProps { ...@@ -39,7 +39,7 @@ export interface OperateConfigProps {
buttonsGroup?: Object[]; // 自定义按钮组 buttonsGroup?: Object[]; // 自定义按钮组
moreGroup?: Object[]; // 按钮太多时可按更多分组 moreGroup?: Object[]; // 按钮太多时可按更多分组
renderCustomNode?: Function; // 自定义渲染节点 renderCustomNode?: Function; // 自定义渲染节点
showCondition?:boolean; // 是否展示筛选条件 showCondition?: boolean; // 是否展示筛选条件
} }
export interface LoadConfigProps { export interface LoadConfigProps {
...@@ -70,6 +70,7 @@ export interface TableProps extends LoadConfigProps { ...@@ -70,6 +70,7 @@ export interface TableProps extends LoadConfigProps {
cellEditable?: boolean; // 单元格是否可编辑 cellEditable?: boolean; // 单元格是否可编辑
emitChangeCell?: Function; // 单元格修改回调 emitChangeCell?: Function; // 单元格修改回调
sortConfig?: any; // 表头快捷排序（正倒序） sortConfig?: any; // 表头快捷排序（正倒序）
groupConfig?: any; // 表头快捷分组
paginationConfig?: any; // 分页配置（与onScroll互斥） paginationConfig?: any; // 分页配置（与onScroll互斥）
noDataPlaceholder?: any; // 表格无数据时显示文案 noDataPlaceholder?: any; // 表格无数据时显示文案
emptyPlaceholder?: string; // 单元格数据为空时默认显示 emptyPlaceholder?: string; // 单元格数据为空时默认显示
...@@ -84,12 +85,13 @@ export interface TableProps extends LoadConfigProps { ...@@ -84,12 +85,13 @@ export interface TableProps extends LoadConfigProps {
onDragResized?: Function; // 拖拽更改列伸缩回调 onDragResized?: Function; // 拖拽更改列伸缩回调
onEmitMsg?: Function; // 是否支持消息协同 onEmitMsg?: Function; // 是否支持消息协同
cachedFeAttr?: boolean; // 是否启用前端缓存 cachedFeAttr?: boolean; // 是否启用前端缓存
renderFirstLeft?:Function; // 第一个单元格特殊渲染 renderFirstLeft?: Function; // 第一个单元格特殊渲染
leftMargin?: number; // 第一个表头左侧对齐距离 leftMargin?: number; // 第一个表头左侧对齐距离
} }
export interface TableState { export interface TableState {
columns: ColumnProps[]; columns: ColumnProps[];
dataSource: RowProps[]; dataSource: RowProps[];
groupConfig?: any[];
tableHeight?: number; tableHeight?: number;
tableWidth?: number; tableWidth?: number;
} }
......
components/apolloTable/component/operate/index.tsx
View file @ a3356272
...@@ -3,7 +3,7 @@ import { Button } from 'antd'; ...@@ -3,7 +3,7 @@ import { Button } from 'antd';
import Hide from '../hide'; import Hide from '../hide';
import Filter from '../filter'; import Filter from '../filter';
import Sort from '../sort'; import Sort from '../sort';
// import Group from '../setgroup'; import Group from '../setgroup';
import FilterCondition from '../filter-condition'; import FilterCondition from '../filter-condition';
import s from './index.less'; import s from './index.less';
...@@ -29,8 +29,8 @@ export default class Operate extends Component<Props> { ...@@ -29,8 +29,8 @@ export default class Operate extends Component<Props> {
return <Hide columns={columns} operate={operate} />; return <Hide columns={columns} operate={operate} />;
case 'filter': case 'filter':
return <Filter columns={columns} operate={operate} />; return <Filter columns={columns} operate={operate} />;
// case 'group': case 'group':
// return <Group columns={columns} operate={operate} />; return <Group columns={columns} operate={operate} />;
case 'sort': case 'sort':
return <Sort columns={columns} operate={operate} />; return <Sort columns={columns} operate={operate} />;
default: default:
......
components/apolloTable/component/setgroup/index.less 0 → 100644
View file @ a3356272
@import '../../common';
@import '../../media';
@import '../filter/index.less';
.optionsModal {
min-width: 325px;
.mediaMax(750px,{
min-width: 0;
});
}
.optionItem {
.optionLeft {
flex: 1;
.mediaMax(750px,{
width: auto;
});
}
.optionMid {
max-width: 112px;
.mediaMax(750px,{
max-width: 30%;
width: auto;
});
.sortBtn {
width: 54px;
padding: 0 5px;
border-color: @supportColor;
&.primary{
background: @supportColor;
color: white;
}
}
}
.optionRight {
margin-left: 20px;
}
.optionDel {
}
}
.btns {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 15px;
.btn {
text-align: center;
cursor: pointer;
color: @supportColor;
margin-left: 10px;
width: 60px;
border-radius: @borderRadius;
height: 30px;
line-height: 30px;
&.reset {
background: white;
border: 1px solid @supportColor;
}
}
}
components/apolloTable/component/setgroup/index.tsx 0 → 100644
View file @ a3356272
This diff is collapsed.
components/apolloTable/utils/memCols.ts
View file @ a3356272
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import { ColumnProps } from '../component/interface'; import { ColumnProps, RowProps } from '../component/interface';
import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache'; import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache';
// 获取左侧固定列数量 // 获取左侧固定列数量
...@@ -47,6 +47,43 @@ export const getTotalWidth = (columns: ColumnProps[], columnWidth: number) => { ...@@ -47,6 +47,43 @@ export const getTotalWidth = (columns: ColumnProps[], columnWidth: number) => {
defaultWidthLen, defaultWidthLen,
}; };
}; };
// 获取分组级别
export const getGroupLevel = (classList) => {
let len = 0;
if (classList) {
classList.map((item) => {
if (item) {
len++;
}
});
}
return len;
};
// 获取每列的宽度
export const getRowHeight = (
{ dataSource, rowHeight }: { dataSource: RowProps[]; rowHeight: number },
{ index }: { index: number },
) => {
const { classList } = dataSource[index];
let len = 1;
if (classList) {
classList.map((item) => {
if (item) {
len++;
}
});
}
return rowHeight * len;
};
// 获取数据总高度
export const getTotalHeight = (dataSource: RowProps[], rowHeight: number) => {
let height = 0;
dataSource.map((item: any, index: number) => {
height += getRowHeight({ dataSource, rowHeight }, { index });
});
return height;
};
// 获取左侧固定列总宽度 // 获取左侧固定列总宽度
export const getLeftWidth = ( export const getLeftWidth = (
......
components/apolloTable/utils/utils.tsx
View file @ a3356272
...@@ -135,3 +135,19 @@ export function isNumber(data: any) { ...@@ -135,3 +135,19 @@ export function isNumber(data: any) {
// eslint-disable-next-line no-restricted-globals // eslint-disable-next-line no-restricted-globals
return !isNaN(data); return !isNaN(data);
} }
/**
* 按key去重
* @param data 原数组
* @param key 过滤键
* @returns {unknown[]} 键数组
*/
export function getKeys(data, key) {
const result = [];
if (Array.isArray(data)) {
data.map((item) => {
result.push(item[key]);
});
}
const temp = new Set(result);
return Array.from(temp);
}
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