diff --git a/src/components/CardOrTableComp/index.tsx b/src/components/CardOrTableComp/index.tsx index 966ab80d1b47512e5483396fc2cac8400ae7e652..0dbe307aaf9a1bdd8c429aad2da5b7c7c31a405a 100644 --- a/src/components/CardOrTableComp/index.tsx +++ b/src/components/CardOrTableComp/index.tsx @@ -29,52 +29,52 @@ interface PageType { ) => React.ReactNode | React.ReactNode[] | React.ReactElement; request?: (params: PageModel & { [key: string]: any }) => Promise< | { - result: T[] | undefined; - offset: number; - limit: number; - total: number; - } + result: T[] | undefined; + offset: number; + limit: number; + total: number; + } | undefined >; [key: string]: any; // 其他属性方法 } -// 泛型组件定义:用泛型 T 约束 props const Index: (props: PageType) => React.ReactElement = ({ - defaultPageType = 'table', // 默认表格视图 - showChangeBtn = true, // 预留切换按钮 - dataSource = [], // 缺省空数组 - columns = [], // 缺省空数组 - rowKey, - hideOperation = false, - operation, - showBtnType, - height, // 外部传入高度 - width, - parentRef, // 父级容器 ref - stripe = false, // 斑马纹默认关闭 - style, - onRow, - onChange, - renderCardContent, // 卡片渲染函数(预留) - headerTitle, - request, // 远程数据函数 - ...rest // ProTable 其它原生属性 -}) => { - // 计算后的高度,默认为 'auto' - const [defaultHeight, setDefaultHeight] = useState('auto'); + defaultPageType = 'table', + showChangeBtn = true, + dataSource = [], + columns = [], + rowKey, + hideOperation = false, + operation, + showBtnType, + height, + width, + parentRef, + stripe = false, + style, + onRow, + onChange, + renderCardContent, + headerTitle, + request, + ...rest + }) => { + const [defaultHeight, setDefaultHeight] = useState('auto'); //计算高度 - // 监听父级高度变化,动态计算表格可用高度 + // 监听父级高度 useEffect(() => { if (parentRef?.current) { let _height = parentRef.current.offsetHeight; - // 减去顶部工具栏高度(魔数 154/136) setDefaultHeight(_height > 200 ? _height - (headerTitle ? 154 : 136) : 200); } }, [parentRef]); - // 自动追加「操作列」(如果传了 operation 函数) + /** + * @desc: 渲染表格主体 + * @return {表格主体头部数组} + */ const resetColumns: ProColumns[] = useMemo(() => { let result = [...columns]; if (operation) { @@ -85,37 +85,37 @@ const Index: (props: PageType) => React.ReactElement = ({ valueType: 'option', fixed: 'right', render: (_text, record) => { - const items = operation(record); // 动态生成按钮 - if (!items || items.length === 0) return <>; - - // 根据 showBtnType 决定平铺还是下拉 - return showBtnType === 'unfold' - ? [...items] // 平铺 - : [ + const items = operation(record); + return items && items.length > 0 ? ( + showBtnType == 'unfold' ? ( + [...items] + ) : ( + [ - // 更多图标 + className={cls['operation-btn']} + menu={{ items: items }} + key="key"> + , - ]; + ] + ) + ) : ( + <> + ); }, }); } return result; }, [columns, operation]); - // ProTable 主体渲染(已缓存,避免重复创建) + // 表格主体 卡片与表格切换功能--增加缓存 const renderTable = useMemo(() => { return ( 100 ? width : 1000, // 横向滚动阈值 - y: height || defaultHeight, // 纵向滚动阈值 - }} - search={false} // 关闭 ProTable 自带查询表单 + scroll={{ x: width && width > 100 ? width : 1000, y: height || defaultHeight }} + search={false} headerTitle={headerTitle} rowKey={rowKey} pagination={{ @@ -123,16 +123,15 @@ const Index: (props: PageType) => React.ReactElement = ({ size: 'default', showSizeChanger: true, defaultCurrent: 1, - onChange, // 外部可监听分页 + onChange: (_) => {}, showTotal: (total: number) => `共 ${total} 条`, - total: dataSource.length, // 本地模式长度 + total: dataSource.length, }} - options={false} // 关闭默认工具栏 + options={false} onRow={onRow} params={{ filter: '' }} - dataSource={dataSource} // 本地数据(request 存在时会被覆盖) + dataSource={dataSource} request={async (params) => { - // 解构分页、过滤参数 const { current: pageIndex = 1, pageSize = 10, @@ -140,8 +139,6 @@ const Index: (props: PageType) => React.ReactElement = ({ keyword = '', ...other } = params; - - // 远程模式:调用 request 函数 if (request) { const page: PageModel = { filter: filter || keyword, @@ -157,32 +154,32 @@ const Index: (props: PageType) => React.ReactElement = ({ }; } return { total: 0, data: [], success: true }; + } else { + return { + data: + dataSource.length > 0 + ? dataSource.slice((pageIndex - 1) * pageSize, pageSize * pageIndex) + : [], + total: dataSource.length, + success: true, + }; } - - // 本地模式:直接 slice - const start = (pageIndex - 1) * pageSize; - return { - data: dataSource.slice(start, start + pageSize), - total: dataSource.length, - success: true, - }; }} - tableRender={(props, defaultDom, { toolbar }) => ( - // 可在此处插入自定义工具栏 -
{defaultDom}
- )} + tableRender={(props: any, defaultDom, { toolbar}) => { + return
{defaultDom}
; + }} rowClassName={ stripe - ? (_record: any, index: number) => - index % 2 !== 0 ? cls['stripe'] : '' // 斑马纹类名 + ? (_record: any, index: number) => { + return index % 2 !== 0 ? cls['stripe'] : ''; + } : '' } - {...rest} // 其余透传属性 + {...rest} /> ); }, [dataSource, resetColumns, defaultHeight]); - // 根节点渲染(目前仅渲染表格,卡片视图预留) return (
{renderTable} @@ -190,4 +187,4 @@ const Index: (props: PageType) => React.ReactElement = ({ ); }; -export default Index; \ No newline at end of file +export default Index;