优化table

components/apolloTable/component/Column.less

@@ -6,6 +6,8 @@
     //justify-content: space-between;
     height: 100%;
     width: 100%;
+    padding: 0 @paddingLg;
+    overflow: hidden;
     .checkbox {
         margin-right: 10px;
     }

components/apolloTable/component/DragFixed.tsx

@@ -14,6 +14,7 @@ const DragFixed = (props: any) => {
         columns,
         onResizeStop,
         cachedFeAttr,
+        onDragFixed,
     } = props;
     // 表格
     const container: any = document.querySelector(`#apolloTable_${tableId}`);
@@ -120,6 +121,7 @@ const DragFixed = (props: any) => {
                     item.fixed = '';
                 }
             }
+            // 缓存
             if (cachedFeAttr) {
                 const cachedCols = getCache({ tableId });
                 if (cachedCols) {
@@ -132,8 +134,13 @@ const DragFixed = (props: any) => {
             }
             newColumns.push(item);
         });
+        // 业务回调
+        if (typeof onDragFixed === 'function') {
+            onDragFixed(newColumns);
+        }
+        // table回调
         if (typeof onResizeStop === 'function') {
-            onResizeStop({ columns: newColumns });
+            onResizeStop(newColumns);
         }
     };
 

components/apolloTable/component/DragResized.tsx

@@ -4,8 +4,10 @@ import { getCache, saveCache } from '../utils/cache';
 import styles from './DragResized.less';
 
 const DragResized = (props: any) => {
-    const { style, columnName, tableId, onResizeCb, cachedFeAttr } = props;
-
+    const { style, columnName, tableId, canResized, onDragResized, onDragResizedCb, cachedFeAttr, columns } = props;
+    if (!canResized) {
+        return <div style={style}>{props.children}</div>;
+    }
     // 表格
     const container: any = document.querySelector(`#apolloTable_${tableId}`);
     // 分割线wrap
@@ -28,16 +30,31 @@ const DragResized = (props: any) => {
     // 列伸缩结束
     const onResizeWidthStop = (e: any, { size }: { size: { width: number } }) => {
         dividerWrap.style.display = 'none';
-        const cachedCols = getCache({ tableId });
-        if (cachedFeAttr && cachedCols) {
-            cachedCols[columnName] = {
-                ...cachedCols[columnName],
-                width: size.width,
-            };
-            saveCache({ tableId, data: cachedCols });
+        const newColumns: any = [];
+        columns.map((item: any) => {
+            if (item.columnName === columnName) {
+                item.width = size.width;
+            }
+            newColumns.push(item);
+        });
+        // 业务回调
+        if (typeof onDragResized === 'function') {
+            onDragResized(newColumns);
         }
-        if (typeof onResizeCb === 'function') {
-            onResizeCb(columnName, size.width);
+        // table回调
+        if (typeof onDragResizedCb === 'function') {
+            onDragResizedCb(newColumns);
+        }
+        // 缓存操作
+        if (cachedFeAttr) {
+            const cachedCols = getCache({ tableId });
+            if (cachedCols) {
+                cachedCols[columnName] = {
+                    ...cachedCols[columnName],
+                    width: size.width,
+                };
+                saveCache({ tableId, data: cachedCols });
+            }
         }
     };
 

components/apolloTable/component/DragSorted.less

@@ -4,6 +4,3 @@
     width: 100%;
     height: 100%;
 }
-.draggableDiv {
-    cursor: move;
-}

components/apolloTable/component/DragSorted.tsx

 import React, { useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import s from './DragSorted.less';
+import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache';
 
 const DragSorted = (props: any) => {
-    const { className, columnName, orderNo, onDropFinish, onScroll, canDrag, tableId } = props;
+    const {
+        columnName,
+        orderNo,
+        onDragSortedCb,
+        onDragSortedMove,
+        tableId,
+        canSorted,
+        onDragSorted,
+        columns,
+        cachedFeAttr,
+    } = props;
+    if (!canSorted) {
+        return <div className={s.sortedWrap}>{props.children}</div>;
+    }
     // 长按计时器
     const timer: any = useRef(null);
     // 表格滚动计时器
@@ -59,7 +73,7 @@ const DragSorted = (props: any) => {
             }
         });
 
-        if (typeof onScroll === 'function') {
+        if (typeof onDragSortedMove === 'function') {
             let dir = '';
             let step = 10;
             // 设置鼠标超出表格左右固定列两侧时的滚动事件
@@ -84,7 +98,7 @@ const DragSorted = (props: any) => {
                     clearInterval(timerInterval.current);
                 }
                 timerInterval.current = setInterval(() => {
-                    onScroll(dir, step);
+                    onDragSortedMove(dir, step);
                 }, 350);
             } else {
                 // 需要停止，清除已有计时器
@@ -131,20 +145,62 @@ const DragSorted = (props: any) => {
             return;
         }
         // 拖动回调
-        if (typeof onDropFinish === 'function') {
-            onDropFinish(
-                { columnName: dragColumn, orderNo: Number(dragColumnOrder) },
-                { columnName: dropColumn, orderNo: Number(dropColumnOrder) },
-            );
+        const newColumns: any[] = [];
+        columns.map((item: any) => {
+            if (Number(dragColumnOrder) > Number(dropColumnOrder)) {
+                if (item.orderNo >= Number(dropColumnOrder) && item.orderNo <= Number(dragColumnOrder)) {
+                    if (item.columnName === dragColumn) {
+                        newColumns.push({
+                            ...item,
+                            orderNo: Number(dropColumnOrder),
+                        });
+                    } else {
+                        newColumns.push({
+                            ...item,
+                            orderNo: item.orderNo + 1,
+                        });
+                    }
+                } else {
+                    newColumns.push(item);
+                }
+            } else {
+                if (item.columnName === dragColumn) {
+                    newColumns.push({
+                        ...item,
+                        orderNo: Number(dropColumnOrder) - 1,
+                    });
+                } else if (item.orderNo >= Number(dragColumnOrder) && item.orderNo <= Number(dropColumnOrder)) {
+                    newColumns.push({
+                        ...item,
+                        orderNo: item.orderNo - 1,
+                    });
+                } else {
+                    newColumns.push(item);
+                }
+            }
+        });
+        if (cachedFeAttr) {
+            const cachedCols = getCache({ tableId });
+            if (cachedCols) {
+                newColumns.map((item: any) => {
+                    cachedCols[item.columnName] = {
+                        ...cachedCols[item.columnName],
+                        orderNo: item.orderNo,
+                    };
+                });
+                saveCache({ tableId, data: cachedCols });
+            }
+        }
+        if (typeof onDragSorted === 'function') {
+            onDragSorted(newColumns);
         }
-    }, [onDropFinish]);
+        // if (typeof onDragSortedCb === 'function') {
+        //     onDragSortedCb(newColumns);
+        // }
+    }, [onDragSortedCb, onDragSorted, columns]);
     // 监听鼠标按下
     const onMouseDown = useCallback(
         (e) => {
-            // 没有拖拽回调，默认不支持拖拽事件
-            if (!canDrag) {
-                return;
-            }
             // 不是左键点击不作处理
             if (e.button !== 0) {
                 return;
@@ -185,7 +241,7 @@ const DragSorted = (props: any) => {
 
     return (
         <div
-            className={classNames('draggableColumn', s.sortedWrap, className)}
+            className={classNames('draggableColumn', s.sortedWrap)}
             onMouseDown={onMouseDown}
             onMouseUp={onMouseUp}
             data-column-name={columnName}

components/apolloTable/component/RightDragFixed.tsx

@@ -15,6 +15,7 @@ const DragFixed = (props: any) => {
         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);
         }
     };
 

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 {

components/apolloTable/component/Table.tsx

@@ -124,21 +124,29 @@ export default class AirTable extends Component<TableProps, TableState> {
         }
         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<TableProps, TableState> {
     };
 
     // 列伸缩结束
-    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<TableProps, TableState> {
         }
     };
     // 拖拽自定义固定列后置动作
-    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<TableProps, TableState> {
         }
     };
     // 拖拽自定义固定列后置动作
-    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<TableProps, TableState> {
         }
     };
     // 拖拽排序回调
-    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<TableProps, TableState> {
         { 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<TableProps, TableState> {
                 columnName={columnName}
                 style={style}
                 tableId={tableId}
+                canResized={canResized}
+                onDragResized={onDragResized}
                 cachedFeAttr={cachedFeAttr}
-                onResizeCb={this.onResizeCb}
+                onDragResizedCb={this.onDragResizedCb}
+                columns={formatColumns}
             >
                 <DragSorted
                     columnName={columnName}
                     orderNo={orderNo}
-                    onDropFinish={this.onDragSorted}
-                    onScroll={this.onScrollHor}
-                    className={styles.headerCell}
-                    canDrag={!!onDragSorted}
+                    canSorted={canSorted}
+                    onDragSorted={onDragSorted}
+                    onDragSortedMove={this.onDragSortedMove}
+                    onDragSortedCb={this.onDragSortedCb}
+                    cachedFeAttr={cachedFeAttr}
                     tableId={tableId}
+                    columns={formatColumns}
                 >
                     <Column
                         columnType={String(columnType)}
@@ -437,7 +406,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     };
 
     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<TableProps, TableState> {
                                             columns={columns}
                                             onResizeStart={this.onResizeStartLeftDragFixed}
                                             onResizeStop={this.onResizeStopLeftDragFixed}
+                                            onDragFixed={onDragFixed}
                                             cachedFeAttr={cachedFeAttr}
                                         />
                                     )}
@@ -672,6 +642,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                             paddingRight={paddingRight}
                                             onResizeStart={this.onResizeStartRightDragFixed}
                                             onResizeStop={this.onResizeStopRightDragFixed}
+                                            onDragFixed={onDragFixed}
                                             cachedFeAttr={cachedFeAttr}
                                         />
                                     )}

components/apolloTable/component/index.tsx

@@ -82,9 +82,11 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             contentMenu,
             onScroll,
             loadComp,
-            showCondition,
+            canResized,
+            onDragResized,
             canFixed,
-            id,
+            onDragFixed,
+            canSorted,
             onDragSorted,
             onEmitMsg,
             tableId,
@@ -98,16 +100,13 @@ class AirTable extends React.Component<CommonProps, CommonState> {
         return (
             <Provider value={{ locale: this.getContext() }}>
                 <div
-                    id={id}
                     className={
                         onScroll
                             ? classNames(styles.container, styles.scroll, className)
                             : classNames(styles.container, className)
                     }
                 >
-                    {operateConfig && (
-                        <OperateConfig columns={columns} operateConfig={operateConfig} showCondition={showCondition} />
-                    )}
+                    {operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
                     <div
                         className={
                             onScroll
@@ -122,35 +121,39 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                         )}
                         <div className={styles.tableC}>
                             <Table
+                                tableId={tableId}
                                 columns={columns}
                                 dataSource={dataSource}
-                                onScroll={this.onScroll}
                                 rowStyle={rowStyle}
                                 rowClassName={rowClassName}
+                                onScroll={this.onScroll}
                                 distanceToLoad={distanceToLoad}
+                                cellEditable={cellEditable}
                                 emitChangeCell={emitChangeCell}
                                 bordered={bordered}
                                 width={width}
                                 height={height}
+                                rowHeight={rowHeight}
+                                headerHeight={headerHeight}
+                                columnWidth={columnWidth}
                                 sortConfig={sortConfig}
                                 paginationConfig={paginationConfig}
                                 showIndex={showIndex}
                                 showExpand={showExpand}
-                                emptyPlaceholder={emptyPlaceholder}
-                                cellEditable={cellEditable}
-                                rowHeight={rowHeight}
-                                headerHeight={headerHeight}
-                                columnWidth={columnWidth}
-                                loading={loading}
                                 rowSelection={rowSelection}
+                                loading={loading}
+                                loadComp={loadComp}
                                 noDataPlaceholder={noDataPlaceholder}
+                                emptyPlaceholder={emptyPlaceholder}
                                 contentMenu={contentMenu}
-                                loadComp={loadComp}
-                                canFixed={canFixed}
-                                onDragSorted={onDragSorted}
                                 onEmitMsg={onEmitMsg}
-                                tableId={tableId}
                                 cachedFeAttr={cachedFeAttr}
+                                canResized={canResized}
+                                onDragResized={onDragResized}
+                                canFixed={canFixed}
+                                onDragFixed={onDragFixed}
+                                canSorted={canSorted}
+                                onDragSorted={onDragSorted}
                             />
                         </div>
                     </div>

components/apolloTable/component/interface.tsx

-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 {}

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<Props> {
     };
 
     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 (

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 (
             <FormItem
                 name={columnName}
@@ -83,9 +80,6 @@ const EditForm = (props: any) => {
             } else {
                 detailConfig = config[String(columnType)] || config['1'];
             }
-            // if(key==='contactList'){
-            // debugger
-            // }
             const cellValueList = setFormat(detailConfig, item, values[key], value);
             newValues.push({
                 columnCode: key,

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;
 };