{
onResizeStop,
paddingRight,
cachedFeAttr,
+ onDragFixed,
} = props;
// 表格
const container: any = document.querySelector(`#apolloTable_${tableId}`);
@@ -126,6 +127,7 @@ const DragFixed = (props: any) => {
item.fixed = '';
}
}
+ // 缓存
if (cachedFeAttr) {
const cachedCols = getCache({ tableId });
if (cachedCols) {
@@ -138,8 +140,13 @@ const DragFixed = (props: any) => {
}
newColumns.push(item);
});
+ // 业务回调
+ if (typeof onDragFixed === 'function') {
+ onDragFixed(newColumns);
+ }
+ // table回调
if (typeof onResizeStop === 'function') {
- onResizeStop({ columns: newColumns });
+ onResizeStop(newColumns);
}
};
diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less
index 4f4fbcae2dac336e09408840d0f0e0f83c7549b1..086dbe336a918d8f4f6b66484019c37b63a27fed 100644
--- a/components/apolloTable/component/Table.less
+++ b/components/apolloTable/component/Table.less
@@ -10,7 +10,6 @@
height: 100%;
.loading {
position: absolute;
- // top: 200px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
@@ -57,15 +56,10 @@
background-color: white;
}
-.sideGrid {
- // overflow: hidden !important;
+.sideGrid,.centerGrid {
outline: none;
}
-.centerGrid {
- outline: none;
-}
-.bodyRow {
-}
+
.bodyCell {
font-size: 20px;
color: @textGeneralColor;
@@ -76,24 +70,6 @@
overflow: hidden !important;
outline: none;
border-bottom: 1px solid #e8e8e8;
-
- .headerCell {
- padding: 0 @paddingLg;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- box-sizing: border-box;
- background: #f7f9fa;
-
- .cellNo {
- min-width: 50px;
- }
-
- .cellContent {
- flex: 1;
- height: 100%;
- }
- }
}
.fillHandleWrapper {
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 033796cf07feb9c10eabf9642926d2205b3bcdb8..e539c175c41d46e8a6a534d18fe6bfc817f92233 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -124,21 +124,29 @@ export default class AirTable extends Component
{
}
return colWidth;
};
-
+ // 重新计算单元格大小
+ recomputeGridSize = () => {
+ if (this.grid1 && this.grid2) {
+ this.grid1.recomputeGridSize();
+ this.grid2.recomputeGridSize();
+ }
+ if (this.grid3 && this.grid4) {
+ this.grid3.recomputeGridSize();
+ this.grid4.recomputeGridSize();
+ }
+ if (this.grid5 && this.grid6) {
+ this.grid5.recomputeGridSize();
+ this.grid6.recomputeGridSize();
+ }
+ };
+ // 页面大小变化回调
onResize = ({ width, height }: { width: number; height: number }) => {
this.setState(
{
tableWidth: width,
tableHeight: height,
},
- () => {
- this.grid1 && this.grid1.recomputeGridSize();
- this.grid2 && this.grid2.recomputeGridSize();
- this.grid3 && this.grid3.recomputeGridSize();
- this.grid4 && this.grid4.recomputeGridSize();
- this.grid5 && this.grid5.recomputeGridSize();
- this.grid6 && this.grid6.recomputeGridSize();
- },
+ this.recomputeGridSize,
);
};
@@ -152,27 +160,12 @@ export default class AirTable extends Component {
};
// 列伸缩结束
- onResizeCb = (columnName: string, width: number) => {
- const { columns } = this.state;
- const newColumns: any = [];
- columns.map((item) => {
- if (item.columnName === columnName) {
- item.width = width;
- }
- newColumns.push(item);
- });
+ onDragResizedCb = (columns: ColumnProps[]) => {
this.setState(
{
- columns: newColumns,
- },
- () => {
- this.grid1 && this.grid1.recomputeGridSize();
- this.grid2 && this.grid2.recomputeGridSize();
- this.grid3 && this.grid3.recomputeGridSize();
- this.grid4 && this.grid4.recomputeGridSize();
- this.grid5 && this.grid5.recomputeGridSize();
- this.grid6 && this.grid6.recomputeGridSize();
+ columns,
},
+ this.recomputeGridSize,
);
};
// 拖拽自定义固定列前置动作
@@ -183,15 +176,12 @@ export default class AirTable extends Component {
}
};
// 拖拽自定义固定列后置动作
- onResizeStopLeftDragFixed = ({ columns }) => {
+ onResizeStopLeftDragFixed = (columns: ColumnProps[]) => {
this.setState(
{
columns,
},
- () => {
- this.grid1 && this.grid1.recomputeGridSize();
- this.grid2 && this.grid2.recomputeGridSize();
- },
+ this.recomputeGridSize,
);
};
// 拖拽自定义固定列前置动作
@@ -204,19 +194,16 @@ export default class AirTable extends Component {
}
};
// 拖拽自定义固定列后置动作
- onResizeStopRightDragFixed = ({ columns }) => {
+ onResizeStopRightDragFixed = (columns: ColumnProps[]) => {
this.setState(
{
columns,
},
- () => {
- this.grid5 && this.grid5.recomputeGridSize();
- this.grid6 && this.grid6.recomputeGridSize();
- },
+ this.recomputeGridSize,
);
};
// 拖拽滚动表格
- onScrollHor = (direction: string, step: number) => {
+ onDragSortedMove = (direction: string, step: number) => {
// 拖动超过视图范围，将表格左右滚动
if (this.grid4) {
if (direction === 'right') {
@@ -233,49 +220,13 @@ export default class AirTable extends Component {
}
};
// 拖拽排序回调
- onDragSorted = (dragColumn: any, dropColumn: any) => {
- const { onDragSorted } = this.props;
- const { columns } = this.state;
- const newColumns: any[] = [];
- columns.map((item) => {
- if (dragColumn.orderNo > dropColumn.orderNo) {
- if (item.orderNo >= dropColumn.orderNo && item.orderNo <= dragColumn.orderNo) {
- if (item.columnName === dragColumn.columnName) {
- newColumns.push({
- ...item,
- orderNo: dropColumn.orderNo,
- });
- } else {
- newColumns.push({
- ...item,
- orderNo: item.orderNo + 1,
- });
- }
- } else {
- newColumns.push(item);
- }
- } else {
- if (item.columnName === dragColumn.columnName) {
- newColumns.push({
- ...item,
- orderNo: dropColumn.orderNo - 1,
- });
- } else if (item.orderNo >= dragColumn.orderNo && item.orderNo <= dropColumn.orderNo) {
- newColumns.push({
- ...item,
- orderNo: item.orderNo - 1,
- });
- } else {
- newColumns.push(item);
- }
- }
- });
- newColumns.sort((a, b) => {
- return a.orderNo - b.orderNo;
- });
- if (typeof onDragSorted === 'function') {
- onDragSorted(newColumns);
- }
+ onDragSortedCb = (columns: ColumnProps[]) => {
+ this.setState(
+ {
+ columns,
+ },
+ this.recomputeGridSize,
+ );
};
// 渲染表头
renderHeaderCell = (
@@ -283,7 +234,20 @@ export default class AirTable extends Component {
{ columnIndex, key, style }: any,
) => {
if (showColumns.length === 0) return null;
- const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted, tableId, cachedFeAttr } = this.props;
+ const {
+ sortConfig,
+ showIndex,
+ rowSelection,
+ dataSource,
+ canResized,
+ onDragResized,
+ canSorted,
+ onDragSorted,
+ tableId,
+ cachedFeAttr,
+ } = this.props;
+ const { columns } = this.state;
+ const formatColumns = this.memoizeFormatColumns(columns, cachedFeAttr, tableId);
const {
columnType = 1,
columnName,
@@ -301,17 +265,22 @@ export default class AirTable extends Component {
columnName={columnName}
style={style}
tableId={tableId}
+ canResized={canResized}
+ onDragResized={onDragResized}
cachedFeAttr={cachedFeAttr}
- onResizeCb={this.onResizeCb}
+ onDragResizedCb={this.onDragResizedCb}
+ columns={formatColumns}
>
{
};
render() {
- const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr } = this.props;
+ const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr, onDragFixed } = this.props;
const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
const scrollbarWidth = scrollbarSize() || 0;
@@ -567,6 +536,7 @@ export default class AirTable extends Component {
columns={columns}
onResizeStart={this.onResizeStartLeftDragFixed}
onResizeStop={this.onResizeStopLeftDragFixed}
+ onDragFixed={onDragFixed}
cachedFeAttr={cachedFeAttr}
/>
)}
@@ -672,6 +642,7 @@ export default class AirTable extends Component {
paddingRight={paddingRight}
onResizeStart={this.onResizeStartRightDragFixed}
onResizeStop={this.onResizeStopRightDragFixed}
+ onDragFixed={onDragFixed}
cachedFeAttr={cachedFeAttr}
/>
)}
diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx
index dafe5caa9fb2c955449ac08edb316dee944b2a5c..cc61da9bf145d3dc66e2f24c7bf996806d82a677 100644
--- a/components/apolloTable/component/index.tsx
+++ b/components/apolloTable/component/index.tsx
@@ -82,9 +82,11 @@ class AirTable extends React.Component {
contentMenu,
onScroll,
loadComp,
- showCondition,
+ canResized,
+ onDragResized,
canFixed,
- id,
+ onDragFixed,
+ canSorted,
onDragSorted,
onEmitMsg,
tableId,
@@ -98,16 +100,13 @@ class AirTable extends React.Component {
return (
- {operateConfig && (
-
- )}
+ {operateConfig &&
}
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx
index 64a4025b393c117df65c0ca82b18c77c446139e2..4b769852452052f62dec3959c1b571a4cca0715b 100644
--- a/components/apolloTable/component/interface.tsx
+++ b/components/apolloTable/component/interface.tsx
@@ -1,86 +1,89 @@
-import React from 'react';
-
// 列配置
export interface ColumnProps {
- columnType: string;
- columnChsName: string;
- columnName: string;
- width?: number;
- columnAttrObj?: any;
- sortFlag?: boolean;
- sortConfig?: any;
- isMobile?: boolean;
- columnIndex?: number;
- showIndex?: boolean;
- questionText?: string;
+ columnType: string; // 组件类型
+ columnChsName: string; // 列名
+ columnName: string; // 列key
+ width?: number; // 列宽度
+ columnAttrObj?: any; // 组件属性
+ sortFlag?: boolean; // 是否可排序
+ sortConfig?: any; // 排序配置（当前已有排序及排序功能）
+ columnIndex?: number; // 列下标
+ showIndex?: boolean; // 是否前面添加序号
+ questionText?: string; // 后面添加问号解释名称
[propName: string]: any;
}
// 单元格基本数据格式
export interface CellDataProps {
- text: string;
- value: any;
- extraData?: any;
- readonlyFlag?: boolean;
+ text: string; // 文本
+ value: any; // 值
+ extraData?: any; // 额外数据
+ readonlyFlag?: boolean; // 单元格只读
}
// 行数据格式
export interface RowDataProps {
- colChsName: string;
- colName: string;
- cellValueList: CellDataProps[];
- dynamicCellConfigDTO?: any;
- linkObjRowDateList?: any;
+ colChsName: string; // 列名
+ colName: string; // 列key
+ cellValueList: CellDataProps[]; // 单元格数据
+ dynamicCellConfigDTO?: any; // 单元格动态配置
+ linkObjRowDateList?: any; // 关联数据
}
// 行记录格式
export interface RowProps {
- id: number;
- rowData: RowDataProps[];
+ id: number; // 行id（唯一索引）
+ rowData: RowDataProps[]; // 行数据
[propName: string]: any;
}
export interface OperateConfigProps {
- menusGroup?: Object[];
- buttonsGroup?: Object[];
- moreGroup?: Object[];
- renderCustomNode?: Function;
+ menusGroup?: Object[]; // 菜单栏（隐藏、筛选、分组、排序四大功能）
+ buttonsGroup?: Object[]; // 自定义按钮组
+ moreGroup?: Object[]; // 按钮太多时可按更多分组
+ renderCustomNode?: Function; // 自定义渲染节点
+ showCondition?:boolean; // 是否展示筛选条件
}
export interface LoadConfigProps {
- onScroll?: Function;
- distanceToLoad?: number;
+ onScroll?: Function; // 滚动加载功能
+ distanceToLoad?: number; // 触发滚动距离
}
export interface TableProps extends LoadConfigProps {
+ // 表格必须属性
tableId: string | number; // 表格唯一id
columns: ColumnProps[]; // 列配置
dataSource: RowProps[]; // 数据源
+ // 样式
rowClassName?: string | Function; // 行class
rowStyle?: Object | Function; // 行style
- rowRenderer?: Function;
bordered?: boolean; // 是否显示边框
height?: number; // 表格高度
width?: number; // 表格宽度
- emitChangeCell?: Function; // 单元格修改回调
- sortConfig?: any;
- paginationConfig?: any; // 分页配置
- showIndex?: boolean; // 是否显示序号
- showExpand?: any; // 是否显示展开详情图标
- emptyPlaceholder?: string; // 数据为空时默认显示
- cellEditable?: boolean; // 单元格是否可编辑
rowHeight?: number; // 初始化行高
headerHeight?: number; // 初始化表头高度
columnWidth?: number; // 初始化单元格宽度
- loading?: boolean; // 是否加载中
+ rowRenderer?: Function; // 自定义渲染行（未实现）
+ // 第一单元格功能
+ showIndex?: boolean; // 是否显示序号
+ showExpand?: any; // 是否显示展开详情图标
rowSelection?: any; // 复选配置
- noDataPlaceholder?: any; // 无数据时显示文案
+ // 琐碎功能
+ cellEditable?: boolean; // 单元格是否可编辑
+ emitChangeCell?: Function; // 单元格修改回调
+ sortConfig?: any; // 表头快捷排序（正倒序）
+ paginationConfig?: any; // 分页配置（与onScroll互斥）
+ noDataPlaceholder?: any; // 表格无数据时显示文案
+ emptyPlaceholder?: string; // 单元格数据为空时默认显示
contentMenu?: any; // 右键菜单
- loadComp?: any; // 加载动画组件
+ loading?: boolean; // 是否加载中
+ loadComp?: any; // 自定义加载动画组件
canFixed?: boolean; // 是否可以拖拽自定义固定列
canSorted?: boolean; // 是否可以拖拽自定义列排序
canResized?: boolean; // 是否可以拖拽自定义列伸缩
onDragSorted?: Function; // 拖拽更改列排序回调
- onDragFixed?: Function; // 拖拽更改列排序回调
- onEmitMsg?: Function;// 是否支持消息协同
- cachedFeAttr?:boolean;// 是否启用前端缓存
+ onDragFixed?: Function; // 拖拽更改列固定回调
+ onDragResized?: Function; // 拖拽更改列伸缩回调
+ onEmitMsg?: Function; // 是否支持消息协同
+ cachedFeAttr?: boolean; // 是否启用前端缓存
}
export interface TableState {
columns: ColumnProps[];
@@ -89,15 +92,11 @@ export interface TableState {
tableWidth?: number;
}
export interface CommonProps extends TableProps {
- operateConfig?: OperateConfigProps;
- tableOperateConfig?: OperateConfigProps;
- paginationConfig?: any;
- locale?: any;
- className?: string;
- tableClassName?: string;
- showCondition?: boolean;
- id?: string;
- onEmitMsg?: Function;
+ operateConfig?: OperateConfigProps; // 操作栏
+ tableOperateConfig?: OperateConfigProps; // 表格顶部操作栏
+ locale?: any; // 语言
+ className?: string; // 整体wrap样式
+ tableClassName?: string; // 表格wrap样式
}
export interface CommonState extends TableState {}
diff --git a/components/apolloTable/component/operate/index.tsx b/components/apolloTable/component/operate/index.tsx
index 03c30248f4611b5a304f8121353f8280f3f843f1..3a100d78b32e4da71aef96a37d75d4617126f1bf 100644
--- a/components/apolloTable/component/operate/index.tsx
+++ b/components/apolloTable/component/operate/index.tsx
@@ -12,7 +12,6 @@ import { OperateConfigProps, ColumnProps } from '../interface';
interface Props {
operateConfig?: OperateConfigProps;
columns: ColumnProps[];
- showCondition?: boolean;
}
/**
* 操作栏
@@ -48,12 +47,11 @@ export default class Operate extends Component
{
};
render() {
- const { operateConfig, columns, showCondition } = this.props;
- const { menusGroup, buttonsGroup, renderCustomNode }: any = operateConfig || {};
+ const { operateConfig, columns } = this.props;
+ const { menusGroup, buttonsGroup, renderCustomNode, showCondition }: any = operateConfig || {};
- const filter: any =
- menusGroup &&
- menusGroup.find((item: any) => {
+ const filter: any = menusGroup
+ && menusGroup.find((item: any) => {
return item.type === 'filter';
});
return (
diff --git a/components/apolloTable/editForm/index.tsx b/components/apolloTable/editForm/index.tsx
index 17edd7281a8e99c7df80fe5a1877563e74dec00b..8555c8c990596f5c180e4da98ae13d3347e06931 100644
--- a/components/apolloTable/editForm/index.tsx
+++ b/components/apolloTable/editForm/index.tsx
@@ -46,9 +46,6 @@ const EditForm = (props: any) => {
...(columnAttrObj || {}),
};
const transferColumn = transferAttr(columnType, newProps);
- // if(item.columnName==='emails'){
- // debugger
- // }
return (
{
} else {
detailConfig = config[String(columnType)] || config['1'];
}
- // if(key==='contactList'){
- // debugger
- // }
const cellValueList = setFormat(detailConfig, item, values[key], value);
newValues.push({
columnCode: key,
diff --git a/components/apolloTable/utils/memCols.ts b/components/apolloTable/utils/memCols.ts
index dc3f232b335a886b47bc253436c814627f2b5219..bdb3279dee7fce243da69baa819c5ae906cd942f 100644
--- a/components/apolloTable/utils/memCols.ts
+++ b/components/apolloTable/utils/memCols.ts
@@ -69,9 +69,6 @@ export const getLeftWidth = (
// 格式化列数据（添加缓存的前端属性）
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) {
@@ -93,8 +90,13 @@ export const getFormatColumns = (columns: ColumnProps[], cachedFeAttr: boolean,
orderNo: item.orderNo,
};
});
- saveCache({ tableId, data });
+ if (columns.length > 0) {
+ saveCache({ tableId, data });
+ }
}
}
+ columns.sort((a, b) => {
+ return a.orderNo - b.orderNo;
+ });
return columns;
};