From a3356272e18cea9a83394ab65c33b862c19b22ee Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Fri, 18 Dec 2020 22:13:10 +0800 Subject: [PATCH] temp --- components/apolloTable/component/Cell.less | 20 +- components/apolloTable/component/Cell.tsx | 56 ++- components/apolloTable/component/Table.tsx | 48 ++- components/apolloTable/component/index.less | 96 +++++ components/apolloTable/component/index.tsx | 142 +++++++- .../apolloTable/component/interface.tsx | 6 +- .../apolloTable/component/operate/index.tsx | 6 +- .../apolloTable/component/setgroup/index.less | 67 ++++ .../apolloTable/component/setgroup/index.tsx | 330 ++++++++++++++++++ components/apolloTable/utils/memCols.ts | 39 ++- components/apolloTable/utils/utils.tsx | 16 + 11 files changed, 791 insertions(+), 35 deletions(-) create mode 100644 components/apolloTable/component/setgroup/index.less create mode 100644 components/apolloTable/component/setgroup/index.tsx diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less index 1748d46..2437257 100644 --- a/components/apolloTable/component/Cell.less +++ b/components/apolloTable/component/Cell.less @@ -73,6 +73,19 @@ flex: 1; 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 { @@ -104,7 +117,6 @@ // } //} - .content { flex: 1; overflow: hidden; @@ -132,3 +144,9 @@ box-shadow: inset 0 0 0 1px @primaryColor; } +:global(.groupLevel3) { +} +:global(.groupLevel2) { +} +:global(.groupLevel1) { +} diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 012c447..96b1948 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -10,6 +10,7 @@ import FormHelper from '../utils/formHelper'; import expandIcon from '../assets/extend.png'; import { transferAttr } from './base/_utils/transferAttr'; import { emptyModel } from './base/_utils/setFormatter'; +import { getGroupLevel } from '../utils/memCols'; enum EDIT_STATUS { 'FREE', // 空闲 @@ -394,7 +395,7 @@ const Cell = (props: CellProps) => { ); }; - + const groupLevel = getGroupLevel(record.classList); return (
{ `row_${rowIndex}`, `col_${columnIndex}`, 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} onMouseLeave={onMouseLeave} > + {record.classList && record.classList[0] && ( +
+ {columnIndex === 0 && + position !== 'right' && + record.groupConfig[0] && + `${record.groupConfig[0].colChsName}:${record.groupTextArr[0]}`} +
+ )} + {record.classList && record.classList[1] && ( +
+ {columnIndex === 0 && + position !== 'right' && + record.groupConfig[1] && + `${record.groupConfig[1].colChsName}:${record.groupTextArr[1]}`} +
+ )} + {record.classList && record.classList[2] && ( +
+ {columnIndex === 0 && + position !== 'right' && + record.groupConfig[3] && + `${record.groupConfig[2].colChsName}:${record.groupTextArr[2]}`} +
+ )} {columnIndex === 0 && position !== 'right' && renderFirst()}
{ memoizeTotalWidth: Function; + memoizeTotalHeight: Function; + static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) { - const { columns, dataSource } = prevState; + const { columns, dataSource, groupConfig } = prevState; const nextState: TableState = { ...prevState, }; @@ -67,15 +71,19 @@ export default class AirTable extends Component { if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) { nextState.columns = nextProps.columns; } + if (JSON.stringify(groupConfig) !== JSON.stringify(nextProps.groupConfig)) { + nextState.groupConfig = nextProps.groupConfig; + } return nextState; } constructor(props: TableProps) { super(props); - const { columns, dataSource, width, height } = props; + const { columns, dataSource, groupConfig, width, height } = props; this.state = { columns, dataSource, + groupConfig, tableWidth: width || 0, tableHeight: height || 0, }; @@ -86,9 +94,16 @@ export default class AirTable extends Component { this.memoizeColumns = memoizeOne(getShowColumns); this.memoizeLeftWidth = memoizeOne(getLeftWidth); this.memoizeTotalWidth = memoizeOne(getTotalWidth); + this.memoizeTotalHeight = memoizeOne(getTotalHeight); this.memoizeData = memoizeOne(this.filterData); } + componentWillReceiveProps(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { + if (JSON.stringify(prevState.groupConfig) !== JSON.stringify(this.state.groupConfig)) { + this.recomputeGridSize(); + } + } + // 获取表格显示数据 filterData = (columns: ColumnProps[], dataSource: RowProps[]) => { if (columns.length === 0 || dataSource.length === 0) { @@ -124,6 +139,7 @@ export default class AirTable extends Component { } return colWidth; }; + // 重新计算单元格大小 recomputeGridSize = () => { if (this.grid1 && this.grid2) { @@ -434,11 +450,12 @@ export default class AirTable extends Component { const rowCount = showData.length; const leftWidth = this.memoizeLeftWidth(leftColumns, 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 totalHeight = this.memoizeTotalHeight(dataSource, rowHeight); let realWidth = tableWidth; let paddingRight = 0; - if (rowCount > 0 && rowCount * rowHeight > totalHeight) { + if (rowCount > 0 && totalHeight > tableBodyHeight) { realWidth = tableWidth + scrollbarWidth; paddingRight = scrollbarWidth; } @@ -460,7 +477,7 @@ export default class AirTable extends Component { className={styles.leftSideContainer} style={{ width: `${leftWidth}px`, - height: `${totalHeight - scrollbarWidth + headerHeight}px`, + height: `${tableBodyHeight - scrollbarWidth + headerHeight}px`, }} > { @@ -522,9 +539,9 @@ export default class AirTable extends Component { }} columnCount={leftCount} width={leftWidth + scrollbarWidth} - rowHeight={rowHeight} + rowHeight={getRowHeight.bind(null, { dataSource, rowHeight })} rowCount={rowCount} - height={totalHeight - scrollbarWidth} + height={tableBodyHeight - scrollbarWidth} scrollTop={scrollTop} />
@@ -587,7 +604,7 @@ export default class AirTable extends Component { // 中部内容
@@ -605,14 +622,17 @@ export default class AirTable extends Component { })} columnCount={columnCount} width={realWidth} - rowHeight={rowHeight} + rowHeight={getRowHeight.bind(null, { + dataSource, + rowHeight, + })} rowCount={rowCount} onScroll={(...arg: Array) => { onScroll(...arg); this.onScroll(arg[0]); }} scrollTop={scrollTop} - height={totalHeight} + height={tableBodyHeight} cellRenderer={this.renderBodyCell.bind(this, { showColumns, showData, @@ -658,7 +678,7 @@ export default class AirTable extends Component { className={styles.rightSideContainer} style={{ width: `${rightWidth}px`, - height: `${totalHeight - scrollbarWidth + headerHeight}px`, + height: `${tableBodyHeight - scrollbarWidth + headerHeight}px`, right: paddingRight, }} > @@ -723,9 +743,9 @@ export default class AirTable extends Component { }} columnCount={rightCount} width={rightWidth + scrollbarWidth} - rowHeight={rowHeight} + rowHeight={getRowHeight.bind(null, { dataSource, rowHeight })} rowCount={rowCount} - height={totalHeight - scrollbarWidth} + height={tableBodyHeight - scrollbarWidth} scrollTop={scrollTop} /> @@ -733,7 +753,7 @@ export default class AirTable extends Component { )}
-
+
{loading && (loadComp ? loadComp : )}
diff --git a/components/apolloTable/component/index.less b/components/apolloTable/component/index.less index b3e196e..f57130a 100644 --- a/components/apolloTable/component/index.less +++ b/components/apolloTable/component/index.less @@ -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; + } + } + } +} diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 1191b8f..fbd266b 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Pagination } from 'antd'; import classNames from 'classnames'; +import memoizeOne from 'memoize-one'; +import _ from 'lodash'; import styles from './index.less'; import { CommonProps, CommonState } from './interface'; import Table from './Table'; @@ -9,9 +11,115 @@ import TableOperateConfig from './tableOperate'; import { defaultLocale } from '../locale'; 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 { static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) { - const { columns, dataSource } = prevState; + const { columns, dataSource, groupConfig } = prevState; const nextState: CommonState = { ...prevState, @@ -22,6 +130,16 @@ class AirTable extends React.Component { if (JSON.stringify(columns) !== JSON.stringify(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; } @@ -31,6 +149,7 @@ class AirTable extends React.Component { this.state = { columns, dataSource, + groupConfig: [], }; } @@ -55,7 +174,7 @@ class AirTable extends React.Component { }; render() { - const { columns, dataSource } = this.state; + const { columns, dataSource, groupConfig } = this.state; const { className, tableClassName, @@ -94,20 +213,18 @@ class AirTable extends React.Component { renderFirstLeft, leftMargin, } = this.props; - const sortConfig = operateConfig - && operateConfig.menusGroup - && operateConfig.menusGroup.find((item: any) => { + const sortConfig = + operateConfig && + operateConfig.menusGroup && + operateConfig.menusGroup.find((item: any) => { return item.type === 'sort'; }); + const memDataSource = memoizeData(groupConfig, dataSource); return ( -
+
{operateConfig && } -
+
{tableOperateConfig && (
@@ -117,7 +234,7 @@ class AirTable extends React.Component { { headerHeight={headerHeight} columnWidth={columnWidth} sortConfig={sortConfig} + groupConfig={groupConfig} paginationConfig={paginationConfig} showIndex={showIndex} showExpand={showExpand} diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index ee1478e..64a61c8 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -39,7 +39,7 @@ export interface OperateConfigProps { buttonsGroup?: Object[]; // 自定义按钮组 moreGroup?: Object[]; // 按钮太多时可按更多分组 renderCustomNode?: Function; // 自定义渲染节点 - showCondition?:boolean; // 是否展示筛选条件 + showCondition?: boolean; // 是否展示筛选条件 } export interface LoadConfigProps { @@ -70,6 +70,7 @@ export interface TableProps extends LoadConfigProps { cellEditable?: boolean; // 单元格是否可编辑 emitChangeCell?: Function; // 单元格修改回调 sortConfig?: any; // 表头快捷排序（正倒序） + groupConfig?: any; // 表头快捷分组 paginationConfig?: any; // 分页配置（与onScroll互斥） noDataPlaceholder?: any; // 表格无数据时显示文案 emptyPlaceholder?: string; // 单元格数据为空时默认显示 @@ -84,12 +85,13 @@ export interface TableProps extends LoadConfigProps { onDragResized?: Function; // 拖拽更改列伸缩回调 onEmitMsg?: Function; // 是否支持消息协同 cachedFeAttr?: boolean; // 是否启用前端缓存 - renderFirstLeft?:Function; // 第一个单元格特殊渲染 + renderFirstLeft?: Function; // 第一个单元格特殊渲染 leftMargin?: number; // 第一个表头左侧对齐距离 } export interface TableState { columns: ColumnProps[]; dataSource: RowProps[]; + groupConfig?: any[]; tableHeight?: number; tableWidth?: number; } diff --git a/components/apolloTable/component/operate/index.tsx b/components/apolloTable/component/operate/index.tsx index 3a100d7..bc99925 100644 --- a/components/apolloTable/component/operate/index.tsx +++ b/components/apolloTable/component/operate/index.tsx @@ -3,7 +3,7 @@ import { Button } from 'antd'; import Hide from '../hide'; import Filter from '../filter'; import Sort from '../sort'; -// import Group from '../setgroup'; +import Group from '../setgroup'; import FilterCondition from '../filter-condition'; import s from './index.less'; @@ -29,8 +29,8 @@ export default class Operate extends Component { return ; case 'filter': return ; - // case 'group': - // return ; + case 'group': + return ; case 'sort': return ; default: diff --git a/components/apolloTable/component/setgroup/index.less b/components/apolloTable/component/setgroup/index.less new file mode 100644 index 0000000..5084993 --- /dev/null +++ b/components/apolloTable/component/setgroup/index.less @@ -0,0 +1,67 @@ +@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; + } + } +} diff --git a/components/apolloTable/component/setgroup/index.tsx b/components/apolloTable/component/setgroup/index.tsx new file mode 100644 index 0000000..80285db --- /dev/null +++ b/components/apolloTable/component/setgroup/index.tsx @@ -0,0 +1,330 @@ +import React, { Component } from 'react'; +import _ from 'lodash'; +import { Popover, Button, Select } from 'antd'; +import classNames from 'classnames'; +import s from '../hide/index.less'; +import styles from './index.less'; +import groupIcon from '../../assets/group.png'; +import closeIcon from '../../assets/close.png'; +import { ColumnProps } from '../interface'; +import { Consumer } from '../context'; + +interface Props { + columns: any; + operate: any; +} +interface State { + visible: boolean; + groupConfig: any; + temp: any; +} +/** + * 操作栏显隐控制 + * 参数 + * @configs 操作栏配置 + * @columns 表头列表配置 + * @onChange 显隐变化回调 + */ +export default class Sort extends Component { + constructor(props: Props) { + super(props); + this.state = { + visible: false, + groupConfig: [], + temp: { + // 临时排序数据，不上传接口 + colName: undefined, + colChsName: undefined, + sortType: 'ASC', + }, + }; + } + + componentDidMount() { + const { + operate: { value }, + } = this.props; + this.setState({ + groupConfig: value && value.length > 0 ? value : [], + }); + } + + UNSAFE_componentWillReceiveProps(nextProps: Props) { + const oldGroupConfig = this.props.operate.value; + const newGroupConfig = nextProps.operate.value; + if (JSON.stringify(oldGroupConfig) !== JSON.stringify(newGroupConfig)) { + this.setState({ + groupConfig: newGroupConfig && newGroupConfig.length > 0 ? newGroupConfig : [], + temp: { + colName: undefined, + colChsName: undefined, + sortType: 'ASC', + }, + }); + } + } + + getGroupColumns = (columns: ColumnProps[]) => { + return columns.filter((item) => { + return !!item.groupFlag; + }); + }; + + toggleOption = () => { + const { visible } = this.state; + this.setState({ + visible: !visible, + }); + }; + + // 修改临时排序条件 + changeColName = (value: string) => { + const { temp } = this.state; + const { columns } = this.props; + const groupColumnConfig = this.getGroupColumns(columns); + const group: any = groupColumnConfig.find((item) => { + return item.columnName === value; + }); + const newTemp = _.assign({}, temp, { colName: value, colChsName: group.columnChsName }); + this.addGroupItem(newTemp); + }; + + // 修改临时排序顺序 + changeNewSortType = (value: string) => { + const { temp } = this.state; + const newTemp = _.assign({}, temp, { sortType: value }); + this.addGroupItem(newTemp); + }; + + // 添加一条 + addGroupItem = async (data: any) => { + if (data.colName && data.sortType) { + const { groupConfig } = this.state; + const temp = _.cloneDeep(groupConfig) || []; + temp.push(data); + // 条件填齐后回调保存 + this.onChange(temp); + } else { + this.setState({ + temp: data, + }); + } + }; + + // 删除一条 + delGroupItem = (index: number) => { + const { groupConfig } = this.state; + const temp = _.cloneDeep(groupConfig); + temp.splice(index, 1); + this.onChange(temp); + }; + + // 重置 + resetGroupItem = () => { + this.onChange([]); + }; + + // 改变已有排序条件 + changeGroupKey = (index: number, value: any) => { + const { groupConfig } = this.state; + const { columns } = this.props; + const groupColumnConfig = this.getGroupColumns(columns); + const temp = _.cloneDeep(groupConfig); + temp[index].colName = value; + const group: any = groupColumnConfig.find((item) => { + return item.columnName === value; + }); + temp[index].colChsName = group.columnChsName; + this.onChange(temp); + }; + + // 改变已有排序顺序 + changeGroupType = (index: number, value: any) => { + const { groupConfig } = this.state; + const temp = _.cloneDeep(groupConfig); + temp[index].sortType = value; + this.onChange(temp); + }; + + // 回调表格更改操作栏方法 + onChange = (config: any[]) => { + const { + operate: { onChange }, + } = this.props; + if (typeof onChange === 'function') { + onChange({ type: 'groupConfig', config }); + } + }; + + getFilterConfig = () => { + const { groupConfig, temp } = this.state; + const { columns } = this.props; + const groupColumnConfig = this.getGroupColumns(columns); + const tempConfig = _.cloneDeep(groupColumnConfig); + return tempConfig.map((item: any) => { + item.disabled = + groupConfig.some((group: any) => { + return group.colName === item.columnName; + }) || temp.colName === item.columnName; + return item; + }); + }; + + renderContent = (locale) => { + const { groupConfig, temp } = this.state; + const filterConfig = this.getFilterConfig(); + return ( +
+ {groupConfig.map((item: any, i: number) => { + return ( +
+
+ +
+
+ + + + +
+
+ +
+
+ ); + })} + {groupConfig.length < 3 && ( +
+
+ +
+
+ + + + +
+
+ )} +
+
+ {locale.sortReset} +
+
+
+ ); + }; + + render() { + const { visible } = this.state; + const { + operate: { value }, + } = this.props; + const len = value && value.length; + let bg = ''; + if (len > 0) { + bg = 'rgba(92,153,255,0.2)'; + } + return ( + + {({ locale }) => { + const txt = locale.group === '分组' ? `${len}条分组` : `Grouped by ${len} fields`; + return ( + +
+ + {len > 0 ? txt : locale.group} +
+ + ); + }} + + ); + } +} diff --git a/components/apolloTable/utils/memCols.ts b/components/apolloTable/utils/memCols.ts index 552cab5..5b74100 100644 --- a/components/apolloTable/utils/memCols.ts +++ b/components/apolloTable/utils/memCols.ts @@ -1,5 +1,5 @@ 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'; // 获取左侧固定列数量 @@ -47,6 +47,43 @@ export const getTotalWidth = (columns: ColumnProps[], columnWidth: number) => { 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 = ( diff --git a/components/apolloTable/utils/utils.tsx b/components/apolloTable/utils/utils.tsx index a5d3c7d..f15147a 100644 --- a/components/apolloTable/utils/utils.tsx +++ b/components/apolloTable/utils/utils.tsx @@ -135,3 +135,19 @@ export function isNumber(data: any) { // eslint-disable-next-line no-restricted-globals 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); +} -- 2.21.0