From d23eb6d53cb10362de2b961e77f45c27ec38196d Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期三, 04 二月 2026 15:03:46 +0800
Subject: [PATCH] #页面持久化
---
rsf-admin/src/page/components/StickyDataTable.jsx | 232 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 178 insertions(+), 54 deletions(-)
diff --git a/rsf-admin/src/page/components/StickyDataTable.jsx b/rsf-admin/src/page/components/StickyDataTable.jsx
index fe4189b..4fbae7a 100644
--- a/rsf-admin/src/page/components/StickyDataTable.jsx
+++ b/rsf-admin/src/page/components/StickyDataTable.jsx
@@ -1,76 +1,200 @@
-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>
);
};
--
Gitblit v1.9.1