diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index fe0087b2f5d390d08020cd0c86875f7489343ca6..7f546e7f3d3b62cac13c11a850e764725924f795 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/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') { diff --git a/components/apolloTable/component/DragResized.tsx b/components/apolloTable/component/DragResized.tsx index 96219636ddb05707367eaa137f46a84b1dd783bb..952870ca42898184d2181f26cf0568b6d8fa2ddb 100644 --- a/components/apolloTable/component/DragResized.tsx +++ b/components/apolloTable/component/DragResized.tsx @@ -1,9 +1,10 @@ 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); diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index c9337c0a94da6183ac0b6ec9164ae7eb75dcc8a9..576cf53d6989d04f16d4bd9fdd751874eec8de46 100644 --- a/components/apolloTable/component/Table.tsx +++ b/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 { grid6: any; - memoizeFormatColumns:Function; + memoizeFormatColumns: Function; memoizeData: Function; @@ -77,7 +78,7 @@ export default class AirTable extends Component { 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 { 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 { // 获取表格显示列 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 { { 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 { { 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); diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 71571fb7756edf25584c0d7c70305f93675f4408..dafe5caa9fb2c955449ac08edb316dee944b2a5c 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -88,7 +88,7 @@ class AirTable extends React.Component { onDragSorted, onEmitMsg, tableId, - onDragFixed, + cachedFeAttr, } = this.props; const sortConfig = operateConfig && operateConfig.menusGroup @@ -150,7 +150,7 @@ class AirTable extends React.Component { onDragSorted={onDragSorted} onEmitMsg={onEmitMsg} tableId={tableId} - onDragFixed={onDragFixed} + cachedFeAttr={cachedFeAttr} /> diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index f6ecb9d9aedda10b0c9ebdfe07aefe7160e881f4..64a4025b393c117df65c0ca82b18c77c446139e2 100644 --- a/components/apolloTable/component/interface.tsx +++ b/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 { diff --git a/components/apolloTable/utils/cache.ts b/components/apolloTable/utils/cache.ts index ceac6b0c3b6ca4c71a989f53e39c516e8e22c534..c1f7c24ecf8048750770ba11d035d15391bd2cd2 100644 --- a/components/apolloTable/utils/cache.ts +++ b/components/apolloTable/utils/cache.ts @@ -1,16 +1,20 @@ 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失败'); }