update

components/apolloTable/component/Cell.tsx

@@ -9,7 +9,7 @@ import { CellProps, CellDataProps } from './interface';
 import FormHelper from '../utils/formHelper';
 import expandIcon from '../assets/extend.png';
 import { transferAttr } from './base/_utils/transferAttr';
-import { emptyModel } from '@/submodule/components/apolloTable/component/base/_utils/setFormatter';
+import { emptyModel } from './base/_utils/setFormatter';
 
 enum EDIT_STATUS {
     'FREE', // 空闲
@@ -50,9 +50,6 @@ const Cell = (props: CellProps) => {
     const cellUnit = useRef(null);
     const [status, setStatus] = useState('detail');
 
-    // useEffect(() => {
-    //     setStatus('detail');
-    // }, [cellData]);
     const resetEditStatus = () => {
         setStatus('detail');
         if (typeof onEmitMsg === 'function') {

components/apolloTable/component/DragResized.tsx

 import React from 'react';
 import { ResizableBox } from 'react-resizable';
+import { getCache, saveCache } from '../utils/cache';
 import styles from './DragResized.less';
 
 const DragResized = (props: any) => {
-    const { style, columnName, onDragFixed, tableId, onResizeCb } = props;
+    const { style, columnName, tableId, onResizeCb, cachedFeAttr } = props;
 
     // 表格
     const container: any = document.querySelector(`#apolloTable_${tableId}`);
@@ -27,8 +28,13 @@ const DragResized = (props: any) => {
     // 列伸缩结束
     const onResizeWidthStop = (e: any, { size }: { size: { width: number } }) => {
         dividerWrap.style.display = 'none';
-        if (typeof onDragFixed === 'function') {
-            onDragFixed([{ columnName, width: size.width }]);
+        const cachedCols = getCache({ tableId });
+        if (cachedFeAttr && cachedCols) {
+            cachedCols[columnName] = {
+                ...cachedCols[columnName],
+                width: size.width,
+            };
+            saveCache({ tableId, data: cachedCols });
         }
         if (typeof onResizeCb === 'function') {
             onResizeCb(columnName, size.width);

components/apolloTable/component/Table.tsx

@@ -14,6 +14,7 @@ import RightDragFixed from './RightDragFixed';
 import DragSorted from './DragSorted';
 import DragResized from './DragResized';
 import { getMergeClassName, getMergeStyle } from '../utils/utils';
+import { saveCache, getCache } from '../utils/cache';
 import { Consumer } from './context';
 
 const borderStyle = '1px solid #ececec';
@@ -33,7 +34,7 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     grid6: any;
 
-    memoizeFormatColumns:Function;
+    memoizeFormatColumns: Function;
 
     memoizeData: Function;
 
@@ -77,7 +78,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             rowHeight: rowHeight || 80,
             headerHeight: headerHeight || 60,
         };
-        this.memoizeFormatColumns = memoizeOne(this.memoizeFormatColumns);
+        this.memoizeFormatColumns = memoizeOne(this.getFormatColumns);
         this.memoizeLeftColumns = memoizeOne(this.getLeftColumns);
         this.memoizeRightColumns = memoizeOne(this.getRightColumns);
         this.memoizeColumns = memoizeOne(this.getShowColumns);
@@ -87,11 +88,39 @@ export default class AirTable extends Component<TableProps, TableState> {
 
         this.memoizeData = memoizeOne(this.filterData);
     }
-    // 格式化列数据（添加缓存的前端属性）
-    memoizeFormatColumns=(columns: ColumnProps[])=>{
-        const {cachedFeAttr}=this.props;
 
-    }
+    // 格式化列数据（添加缓存的前端属性）
+    getFormatColumns = (columns: ColumnProps[]) => {
+        columns.sort((a, b) => {
+            return a.orderNo - b.orderNo;
+        });
+        const { cachedFeAttr, tableId } = this.props;
+        if (cachedFeAttr) {
+            const cachedCols = getCache({ tableId });
+            if (cachedCols) {
+                columns = columns.map((item: any) => {
+                    return {
+                        ...item,
+                        ...cachedCols[item.columnName],
+                    };
+                });
+            } else {
+                const data: any = {};
+                columns.map((item: any) => {
+                    data[item.columnName] = {
+                        columnName: item.columnName,
+                        width: item.width,
+                        align: item.align,
+                        fixed: item.fixed,
+                        hideScope: item.hideScope,
+                        orderNo: item.orderNo,
+                    };
+                });
+                saveCache({ tableId, data });
+            }
+        }
+        return columns;
+    };
 
     // 获取左侧固定列数量
     getLeftColumns = (columns: ColumnProps[]) => {
@@ -110,7 +139,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     // 获取表格显示列
     getShowColumns = (columns: ColumnProps[]) => {
         return columns.filter((item) => {
-            return !item.hideScope || item.hideScope.indexOf('LIST') === -1;
+            return !!item.showStatus && (!item.hideScope || item.hideScope.indexOf('LIST') === -1);
         });
     };
 
@@ -340,7 +369,7 @@ 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, onDragFixed } = this.props;
+        const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted, tableId, cachedFeAttr } = this.props;
         const {
             columnType = 1,
             columnName,
@@ -356,8 +385,8 @@ export default class AirTable extends Component<TableProps, TableState> {
             <DragResized
                 columnName={columnName}
                 style={style}
-                onDragFixed={onDragFixed}
                 tableId={tableId}
+                cachedFeAttr={cachedFeAttr}
                 onResizeCb={this.onResizeCb}
             >
                 <DragSorted
@@ -499,10 +528,9 @@ export default class AirTable extends Component<TableProps, TableState> {
         const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
         const scrollbarWidth = scrollbarSize() || 0;
         const formatColumns = this.memoizeFormatColumns(columns);
-        const showColumns = this.memoizeColumns(columns);
-
-        const leftColumns = this.memoizeLeftColumns(columns);
-        const rightColumns = this.memoizeRightColumns(columns);
+        const showColumns = this.memoizeColumns(formatColumns);
+        const leftColumns = this.memoizeLeftColumns(showColumns);
+        const rightColumns = this.memoizeRightColumns(showColumns);
         // 有隐藏列时，修正数据与列头不匹配问题
         const showData = this.memoizeData(showColumns, dataSource);
         const leftData = this.memoizeData(leftColumns, dataSource);

components/apolloTable/component/index.tsx

@@ -88,7 +88,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             onDragSorted,
             onEmitMsg,
             tableId,
-            onDragFixed,
+            cachedFeAttr,
         } = this.props;
         const sortConfig = operateConfig
             && operateConfig.menusGroup
@@ -150,7 +150,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                                 onDragSorted={onDragSorted}
                                 onEmitMsg={onEmitMsg}
                                 tableId={tableId}
-                                onDragFixed={onDragFixed}
+                                cachedFeAttr={cachedFeAttr}
                             />
                         </div>
                     </div>

components/apolloTable/component/interface.tsx

@@ -50,36 +50,37 @@ export interface LoadConfigProps {
 }
 
 export interface TableProps extends LoadConfigProps {
-    columns: ColumnProps[];// 列配置
-    dataSource: RowProps[];// 数据源
-    rowClassName?: string | Function;// 行class
-    rowStyle?: Object | Function;// 行style
+    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;// 单元格修改回调
+    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;// 是否加载中
-    rowSelection?: any;// 复选配置
-    noDataPlaceholder?: any;// 无数据时显示文案
-    contentMenu?: any;// 右键菜单
-    loadComp?: any;// 加载动画组件
-    canFixed?: boolean;// 是否可以拖拽自定义固定列
-    canSorted?: boolean;// 是否可以拖拽自定义列排序
-    canResized?: boolean;// 是否可以拖拽自定义列伸缩
-    onDragSorted?:Function;// 拖拽更改列排序回调
-    onDragFixed?:Function;// 拖拽更改列排序回调
-    onEmitMsg?: Function;
-    tableId?:string|number;// tableId
+    paginationConfig?: any; // 分页配置
+    showIndex?: boolean; // 是否显示序号
+    showExpand?: any; // 是否显示展开详情图标
+    emptyPlaceholder?: string; // 数据为空时默认显示
+    cellEditable?: boolean; // 单元格是否可编辑
+    rowHeight?: number; // 初始化行高
+    headerHeight?: number; // 初始化表头高度
+    columnWidth?: number; // 初始化单元格宽度
+    loading?: boolean; // 是否加载中
+    rowSelection?: any; // 复选配置
+    noDataPlaceholder?: any; // 无数据时显示文案
+    contentMenu?: any; // 右键菜单
+    loadComp?: any; // 加载动画组件
+    canFixed?: boolean; // 是否可以拖拽自定义固定列
+    canSorted?: boolean; // 是否可以拖拽自定义列排序
+    canResized?: boolean; // 是否可以拖拽自定义列伸缩
+    onDragSorted?: Function; // 拖拽更改列排序回调
+    onDragFixed?: Function; // 拖拽更改列排序回调
+    onEmitMsg?: Function;// 是否支持消息协同
+    cachedFeAttr?:boolean;// 是否启用前端缓存
 }
 export interface TableState {
     columns: ColumnProps[];
@@ -95,8 +96,8 @@ export interface CommonProps extends TableProps {
     className?: string;
     tableClassName?: string;
     showCondition?: boolean;
-    id?:string;
-    onEmitMsg?:Function;
+    id?: string;
+    onEmitMsg?: Function;
 }
 
 export interface CommonState extends TableState {}
@@ -135,8 +136,8 @@ export interface CellProps {
     changeSelectedCell?: Function;
     position: string;
     onEmitMsg?: Function;
-    tableId?:string|number;
-    maxPopHeight?:string|number;
+    tableId?: string | number;
+    maxPopHeight?: string | number;
 }
 
 export interface EditCellProps {

components/apolloTable/utils/cache.ts

 const cachePrefix = 'TABLE_COLS';
 
-const getKey = (tableId) => {
+const getKey = (tableId: number | string) => {
     return `${cachePrefix}_${tableId}`;
 };
 
-export const saveCache = ({ tableId, data }) => {
+export const saveCache = ({ tableId, data }: { tableId: number | string; data: any }) => {
     localStorage.setItem(getKey(tableId), JSON.stringify(data));
 };
 
-export const getCache = ({ tableId }) => {
+export const getCache = ({ tableId }: { tableId: number | string }) => {
+    const data = localStorage.getItem(getKey(tableId));
+    if (!data) {
+        return null;
+    }
     try {
-        return JSON.parse(localStorage.getItem(getKey(tableId)));
+        return JSON.parse(data);
     } catch (e) {
         console.warn('获取localStorage失败');
     }