Skip to content

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

temp

parent 8b6603d0
Expand all Hide 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 @@
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) {
}
components/apolloTable/component/Cell.tsx
View file @ a3356272
......@@ -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) => {
</div>
);
};
const groupLevel = getGroupLevel(record.classList);
return (
<div
className={classNames(
......@@ -403,11 +404,62 @@ const Cell = (props: CellProps) => {
`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] && (
<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()}
<div
id={`cellUnit_${tableId}_${record.id}_${columnName}`}
......
components/apolloTable/component/Table.tsx
View file @ a3356272
......@@ -21,6 +21,8 @@ import {
getLeftWidth,
getTotalWidth,
getFormatColumns,
getTotalHeight,
getRowHeight,
} from '../utils/memCols';
import { getDefaultTableConfig } from './defaultConfig';
import { Consumer } from './context';
......@@ -56,8 +58,10 @@ export default class AirTable extends Component<TableProps, TableState> {
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<TableProps, TableState> {
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<TableProps, TableState> {
this.memoizeColumns = memoizeOne(getShowColumns);
this.memoizeLeftWidth = memoizeOne(getLeftWidth);
this.memoizeTotalWidth = memoizeOne(getTotalWidth);
this.memoizeTotalHeight = memoizeOne(getTotalHeight);
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[]) => {
if (columns.length === 0 || dataSource.length === 0) {
......@@ -124,6 +139,7 @@ export default class AirTable extends Component<TableProps, TableState> {
}
return colWidth;
};
// 重新计算单元格大小
recomputeGridSize = () => {
if (this.grid1 && this.grid2) {
......@@ -434,11 +450,12 @@ export default class AirTable extends Component<TableProps, TableState> {
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<TableProps, TableState> {
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<TableProps, TableState> {
}}
columnCount={leftCount}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowHeight={getRowHeight.bind(null, { dataSource, rowHeight })}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
height={tableBodyHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div>
......@@ -587,7 +604,7 @@ export default class AirTable extends Component<TableProps, TableState> {
// 中部内容
<div
style={{
height: totalHeight,
height: tableBodyHeight,
width: tableWidth,
}}
>
......@@ -605,14 +622,17 @@ export default class AirTable extends Component<TableProps, TableState> {
})}
columnCount={columnCount}
width={realWidth}
rowHeight={rowHeight}
rowHeight={getRowHeight.bind(null, {
dataSource,
rowHeight,
})}
rowCount={rowCount}
onScroll={(...arg: Array<Object>) => {
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<TableProps, TableState> {
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<TableProps, TableState> {
}}
columnCount={rightCount}
width={rightWidth + scrollbarWidth}
rowHeight={rowHeight}
rowHeight={getRowHeight.bind(null, { dataSource, rowHeight })}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
height={tableBodyHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div>
......@@ -733,7 +753,7 @@ export default class AirTable extends Component<TableProps, TableState> {
</div>
)}
<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 />)}
</div>
<div className={styles.widthHandleWrapper} id={`dividerWrap_${tableId}`}>
......
components/apolloTable/component/index.less
View file @ a3356272
......@@ -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 { 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<CommonProps, CommonState> {
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<CommonProps, CommonState> {
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<CommonProps, CommonState> {
this.state = {
columns,
dataSource,
groupConfig: [],
};
}
......@@ -55,7 +174,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
};
render() {
const { columns, dataSource } = this.state;
const { columns, dataSource, groupConfig } = this.state;
const {
className,
tableClassName,
......@@ -94,20 +213,18 @@ class AirTable extends React.Component<CommonProps, CommonState> {
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 (
<Provider value={{ locale: this.getContext() }}>
<div
className={classNames(styles.container, className)}
>
<div className={classNames(styles.container, className)}>
{operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
<div
className={classNames(styles.tableContainer, tableClassName)}
>
<div className={classNames(styles.tableContainer, tableClassName)}>
{tableOperateConfig && (
<div className={styles.tableOperateContainer}>
<TableOperateConfig operateConfig={tableOperateConfig} />
......@@ -117,7 +234,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
<Table
tableId={tableId}
columns={columns}
dataSource={dataSource}
dataSource={memDataSource}
rowStyle={rowStyle}
rowClassName={rowClassName}
onScroll={onScroll ? this.onScroll : undefined}
......@@ -131,6 +248,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
headerHeight={headerHeight}
columnWidth={columnWidth}
sortConfig={sortConfig}
groupConfig={groupConfig}
paginationConfig={paginationConfig}
showIndex={showIndex}
showExpand={showExpand}
......
components/apolloTable/component/interface.tsx
View file @ a3356272
......@@ -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;
}
......
components/apolloTable/component/operate/index.tsx
View file @ a3356272
......@@ -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<Props> {
return <Hide columns={columns} operate={operate} />;
case 'filter':
return <Filter columns={columns} operate={operate} />;
// case 'group':
// return <Group columns={columns} operate={operate} />;
case 'group':
return <Group columns={columns} operate={operate} />;
case 'sort':
return <Sort columns={columns} operate={operate} />;
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 { 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 = (
......
components/apolloTable/utils/utils.tsx
View file @ a3356272
......@@ -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);
}
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