| | |
|---|
| | | |
|---|
| | | import React from 'react'; |
|---|
| | | import { DataTable } from 'react-admin'; |
|---|
| | | import React, { useMemo } from 'react'; |
|---|
| | | import { DataTable, useDataTableDataContext, useTranslate } from 'react-admin'; |
|---|
| | | import { TableFooter, TableRow, TableCell } from '@mui/material'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 计算函数映射 |
|---|
| | | */ |
|---|
| | | const calculators = { |
|---|
| | | sum: (data, field) => data.reduce((acc, record) => acc + (Number(record[field]) || 0), 0), |
|---|
| | | count: (data, field) => data.filter(record => record[field] != null && record[field] !== '').length, |
|---|
| | | avg: (data, field) => { |
|---|
| | | const validData = data.filter(record => record[field] != null); |
|---|
| | | if (validData.length === 0) return 0; |
|---|
| | | const sum = validData.reduce((acc, record) => acc + (Number(record[field]) || 0), 0); |
|---|
| | | return (sum / validData.length).toFixed(2); |
|---|
| | | }, |
|---|
| | | min: (data, field) => { |
|---|
| | | const values = data.map(record => Number(record[field]) || 0); |
|---|
| | | return values.length > 0 ? Math.min(...values) : 0; |
|---|
| | | }, |
|---|
| | | max: (data, field) => { |
|---|
| | | const values = data.map(record => Number(record[field]) || 0); |
|---|
| | | return values.length > 0 ? Math.max(...values) : 0; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 计算类型的中文前缀映射 |
|---|
| | | */ |
|---|
| | | const typeLabels = { |
|---|
| | | sum: '合计', |
|---|
| | | count: '数量', |
|---|
| | | avg: '平均', |
|---|
| | | min: '最小', |
|---|
| | | max: '最大', |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 固定列样式常量 |
|---|
| | | */ |
|---|
| | | const stickyLeftStyle = { |
|---|
| | | position: 'sticky', |
|---|
| | | left: 0, |
|---|
| | | zIndex: 2, |
|---|
| | | backgroundColor: '#FFFFFF', |
|---|
| | | '.MuiTableRow-root:not(.MuiTableRow-head):hover &': { |
|---|
| | | backgroundColor: '#f5f5f5' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const stickyRightStyle = { |
|---|
| | | position: 'sticky', |
|---|
| | | right: 0, |
|---|
| | | zIndex: 2, |
|---|
| | | backgroundColor: '#FFFFFF', |
|---|
| | | '.MuiTableRow-root:not(.MuiTableRow-head):hover &': { |
|---|
| | | backgroundColor: '#f5f5f5' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * DataTable 样式常量 |
|---|
| | | */ |
|---|
| | | const tableStyles = { |
|---|
| | | '& .MuiTableCell-head': { |
|---|
| | | zIndex: 4, |
|---|
| | | borderBottom: 'none' |
|---|
| | | }, |
|---|
| | | '& .MuiTableFooter-root': { |
|---|
| | | position: 'sticky', |
|---|
| | | bottom: 0, |
|---|
| | | zIndex: 3, |
|---|
| | | backgroundColor: '#FFFFFF', |
|---|
| | | }, |
|---|
| | | '& .MuiTableFooter-root .MuiTableCell-root': { |
|---|
| | | backgroundColor: '#f5f5f5', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | borderTop: '2px solid #e0e0e0', |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 内部 Footer 组件 |
|---|
| | | * @param {Object} props |
|---|
| | | * @param {Array} props.footerConfig - footer 配置数组 |
|---|
| | | * @param {string} props.footerLabel - 第一列显示的标签，默认'合计' |
|---|
| | | */ |
|---|
| | | const StickyTableFooter = ({ footerConfig, footerLabel = '合计' }) => { |
|---|
| | | const data = useDataTableDataContext(); |
|---|
| | | const translate = useTranslate(); |
|---|
| | | |
|---|
| | | // 缓存计算结果，避免不必要的重复计算 |
|---|
| | | const results = useMemo(() => footerConfig.map(config => { |
|---|
| | | const { field, type = 'sum', label, render } = config; |
|---|
| | | const calculator = calculators[type]; |
|---|
| | | const value = calculator ? calculator(data, field) : 0; |
|---|
| | | const typePrefix = typeLabels[type] || '合计'; |
|---|
| | | |
|---|
| | | // 支持自定义渲染 |
|---|
| | | if (render) { |
|---|
| | | return { label, value: render(value, data), typePrefix }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 获取翻译后的标签 |
|---|
| | | const displayLabel = label ? (label.startsWith('table.') || label.startsWith('common.') ? translate(label) : label) : field; |
|---|
| | | return { label: displayLabel, value, typePrefix }; |
|---|
| | | }), [footerConfig, data, translate]); |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <TableFooter> |
|---|
| | | <TableRow> |
|---|
| | | {results.map((item, index) => ( |
|---|
| | | <TableCell key={index} variant="footer" align="left"> |
|---|
| | | {item.label} {item.typePrefix}: {item.value} |
|---|
| | | </TableCell> |
|---|
| | | ))} |
|---|
| | | <TableCell colSpan={99} /> |
|---|
| | | </TableRow> |
|---|
| | | </TableFooter> |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * StickyDataTable Component |
|---|
| | | * |
|---|
| | | * 封装 react-admin 的 DataTable，实现传入列名即可固定列。 |
|---|
| | | * 封装 react-admin 的 DataTable，实现传入列名即可固定列，支持配置化 footer 汇总。 |
|---|
| | | * |
|---|
| | | * @param {Object} props |
|---|
| | | * @param {string[]} props.stickyLeft - 需要固定在左侧的字段 source 列表 |
|---|
| | | * @param {string[]} props.stickyRight - 需要固定在右侧的字段 source 列表 |
|---|
| | | * @param {Array} props.footerConfig - footer 汇总配置，格式：[{ field: 'anfme', type: 'sum', label: 'table.field.xxx' }] |
|---|
| | | * - field: 要计算的字段名 |
|---|
| | | * - type: 计算类型，支持 'sum' | 'count' | 'avg' | 'min' | 'max'，默认 'sum' |
|---|
| | | * - label: 显示的标签，支持翻译 key 或直接显示的文本 |
|---|
| | | * - render: 可选，自定义渲染函数 (value, data) => ReactNode |
|---|
| | | * @param {string} props.footerLabel - footer 第一列标签，默认'合计' |
|---|
| | | */ |
|---|
| | | export const StickyDataTable = ({ stickyLeft = [], stickyRight = [], children, ...props }) => { |
|---|
| | | export const StickyDataTable = ({ |
|---|
| | | stickyLeft = [], |
|---|
| | | stickyRight = [], |
|---|
| | | footerConfig, |
|---|
| | | footerLabel = '合计', |
|---|
| | | children, |
|---|
| | | ...props |
|---|
| | | }) => { |
|---|
| | | |
|---|
| | | // 递归处理 Children，确保即便是 Fragment 包裹的列也能被处理 |
|---|
| | | const processChildren = (children) => { |
|---|
| | | return React.Children.map(children, (child) => { |
|---|
| | | if (!React.isValidElement(child)) return child; |
|---|
| | | // 使用 Set 优化查找性能 O(n) -> O(1) |
|---|
| | | const stickyLeftSet = useMemo(() => new Set(stickyLeft), [stickyLeft]); |
|---|
| | | const stickyRightSet = useMemo(() => new Set(stickyRight), [stickyRight]); |
|---|
| | | |
|---|
| | | // 如果是 Fragment，递归处理其 children |
|---|
| | | if (child.type === React.Fragment) { |
|---|
| | | return <React.Fragment>{processChildren(child.props.children)}</React.Fragment>; |
|---|
| | | } |
|---|
| | | // 缓存处理后的 children，避免不必要的重新计算 |
|---|
| | | const processedChildren = useMemo(() => { |
|---|
| | | const processChildren = (children) => { |
|---|
| | | return React.Children.map(children, (child) => { |
|---|
| | | if (!React.isValidElement(child)) return child; |
|---|
| | | |
|---|
| | | const source = child.props.source; |
|---|
| | | let stickyStyle = {}; |
|---|
| | | // 如果是 Fragment，递归处理其 children |
|---|
| | | if (child.type === React.Fragment) { |
|---|
| | | return <React.Fragment>{processChildren(child.props.children)}</React.Fragment>; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 左侧固定 |
|---|
| | | if (stickyLeft.includes(source)) { |
|---|
| | | stickyStyle = { |
|---|
| | | position: 'sticky', |
|---|
| | | left: 0, |
|---|
| | | zIndex: 2, // 比普通内容高 |
|---|
| | | backgroundColor: '#FFFFFF', |
|---|
| | | '.MuiTableRow-root:not(.MuiTableRow-head):hover &': { |
|---|
| | | backgroundColor: '#f5f5f5' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const source = child.props.source; |
|---|
| | | let stickyStyle = null; |
|---|
| | | |
|---|
| | | // 右侧固定 |
|---|
| | | if (stickyRight.includes(source)) { |
|---|
| | | stickyStyle = { |
|---|
| | | position: 'sticky', |
|---|
| | | right: 0, |
|---|
| | | zIndex: 2, |
|---|
| | | backgroundColor: '#FFFFFF', |
|---|
| | | '.MuiTableRow-root:not(.MuiTableRow-head):hover &': { |
|---|
| | | backgroundColor: '#f5f5f5' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | // 左侧固定 |
|---|
| | | if (stickyLeftSet.has(source)) { |
|---|
| | | stickyStyle = stickyLeftStyle; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (Object.keys(stickyStyle).length > 0) { |
|---|
| | | // 合并 sx |
|---|
| | | return React.cloneElement(child, { |
|---|
| | | sx: { ...child.props.sx, ...stickyStyle } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // 右侧固定 |
|---|
| | | if (stickyRightSet.has(source)) { |
|---|
| | | stickyStyle = stickyRightStyle; |
|---|
| | | } |
|---|
| | | |
|---|
| | | return child; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | if (stickyStyle) { |
|---|
| | | // 合并 sx |
|---|
| | | return React.cloneElement(child, { |
|---|
| | | sx: { ...child.props.sx, ...stickyStyle } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return child; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | return processChildren(children); |
|---|
| | | }, [children, stickyLeftSet, stickyRightSet]); |
|---|
| | | |
|---|
| | | // 缓存 footerComponent，避免每次渲染创建新函数 |
|---|
| | | const footerComponent = useMemo(() => { |
|---|
| | | if (!footerConfig?.length) return undefined; |
|---|
| | | return () => <StickyTableFooter footerConfig={footerConfig} footerLabel={footerLabel} />; |
|---|
| | | }, [footerConfig, footerLabel]); |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <DataTable {...props} sx={{ |
|---|
| | | '& .MuiTableCell-head': { |
|---|
| | | zIndex: 4, |
|---|
| | | borderBottom: 'none' // 遵循之前的优化，去除表头下边框 |
|---|
| | | }, |
|---|
| | | }}> |
|---|
| | | {processChildren(children)} |
|---|
| | | <DataTable {...props} foot={footerComponent} sx={tableStyles}> |
|---|
| | | {processedChildren} |
|---|
| | | </DataTable> |
|---|
| | | ); |
|---|
| | | }; |
|---|
