import React, { useState, useEffect } from "react";
|
import {
|
useTranslate,
|
useListController,
|
ListContextProvider,
|
TextField,
|
NumberField,
|
Pagination,
|
DataTable,
|
} from 'react-admin';
|
import { Box, Grid, Card, CardContent, Typography } from '@mui/material';
|
import StickyDataTable from "@/page/components/StickyDataTable";
|
|
const ViewTable = ({ title, resource, filter, onClick, selectedId, columns }) => {
|
// 只有在有 filter 时才调用 useListController，避免不必要的请求
|
const shouldLoadData = !!filter;
|
|
const listContext = useListController({
|
resource: resource,
|
filter: filter || {},
|
perPage: 100,
|
sort: { field: 'id', order: 'ASC' },
|
disableSyncWithLocation: true,
|
queryOptions: {
|
enabled: shouldLoadData, // 只有在 shouldLoadData 为 true 时才执行查询
|
},
|
});
|
|
if (!shouldLoadData) {
|
return (
|
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
<Box p={1} borderBottom={1} borderColor="divider">
|
<Typography variant="subtitle1">{title}</Typography>
|
</Box>
|
<CardContent sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
<Typography variant="body2" color="textSecondary">
|
请先选择上一级数据
|
</Typography>
|
</CardContent>
|
</Card>
|
);
|
}
|
|
return (
|
<ListContextProvider value={listContext}>
|
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
<Box p={1} borderBottom={1} borderColor="divider">
|
<Typography variant="subtitle1">{title}</Typography>
|
</Box>
|
<Box flexGrow={1} overflow="auto" sx={{
|
'& .MuiTableCell-root': {
|
whiteSpace: 'nowrap',
|
},
|
}}>
|
<StickyDataTable
|
storeKey={`${resource}_flow_view`}
|
bulkActionButtons={false}
|
rowClick={(id, resource, record) => {
|
if (onClick) {
|
onClick(record);
|
}
|
return false;
|
}}
|
sx={{
|
'& .RaDatagrid-row': {
|
cursor: 'pointer',
|
'&:hover': {
|
backgroundColor: 'action.hover',
|
},
|
},
|
'& .RaDatagrid-row.Mui-selected': {
|
backgroundColor: 'action.selected',
|
}
|
|
}}
|
// Manually handle selection style if needed, or rely on StickyDataTable support
|
>
|
{columns.map((col, index) => (
|
<DataTable.Col
|
key={col.props.source}
|
source={col.props.source}
|
label={col.props.label}
|
>
|
{col}
|
</DataTable.Col>
|
))}
|
</StickyDataTable>
|
</Box>
|
<Pagination rowsPerPageOptions={[10, 25, 50, 100]} />
|
</Card>
|
</ListContextProvider>
|
);
|
};
|
|
const TaskTemplateFlowViewer = ({ record }) => {
|
const translate = useTranslate();
|
const [selectedNode, setSelectedNode] = useState(null);
|
const [selectedFlow, setSelectedFlow] = useState(null);
|
|
// Reset selection when record changes
|
useEffect(() => {
|
setSelectedNode(null);
|
setSelectedFlow(null);
|
}, [record]);
|
|
const handleNodeClick = (node) => {
|
if (!node) return;
|
setSelectedNode(node);
|
setSelectedFlow(null);
|
};
|
|
const handleFlowClick = (flow) => {
|
if (!flow) return;
|
setSelectedFlow(flow);
|
};
|
|
const nodeColumns = [
|
<NumberField source="nodeOrder" label="table.field.taskPathTemplateNode.nodeOrder" key="nodeOrder" />,
|
<TextField source="nodeCode" label="table.field.taskPathTemplateNode.nodeCode" key="nodeCode" />,
|
<TextField source="nodeName" label="table.field.taskPathTemplateNode.nodeName" key="nodeName" />,
|
<TextField source="systemCode" label="table.field.taskPathTemplateNode.systemCode" key="systemCode" />,
|
];
|
|
const flowColumns = [
|
<TextField source="flowCode" label="table.field.subsystemFlowTemplate.flowCode" key="flowCode" />,
|
<TextField source="flowName" label="table.field.subsystemFlowTemplate.flowName" key="flowName" />,
|
<TextField source="systemCode" label="table.field.subsystemFlowTemplate.systemCode" key="systemCode" />,
|
];
|
|
const stepColumns = [
|
<NumberField source="stepOrder" label="table.field.flowStepTemplate.stepOrder" key="stepOrder" />,
|
<TextField source="stepCode" label="table.field.flowStepTemplate.stepCode" key="stepCode" />,
|
<TextField source="stepName" label="table.field.flowStepTemplate.stepName" key="stepName" />,
|
<TextField source="stepType" label="table.field.flowStepTemplate.stepType" key="stepType" />,
|
];
|
|
if (!record) return null;
|
|
return (
|
<Box sx={{ height: '80vh', p: 1, backgroundColor: '#f0f0f0' }}>
|
<Grid container spacing={1} sx={{ height: '100%' }}>
|
<Grid item xs={4} sx={{ height: '100%' }}>
|
<ViewTable
|
title={translate('menu.taskPathTemplateNode')}
|
resource="taskPathTemplateNode"
|
filter={{ templateId: record.id }}
|
onClick={handleNodeClick}
|
selectedId={selectedNode?.id}
|
columns={nodeColumns}
|
/>
|
</Grid>
|
<Grid item xs={4} sx={{ height: '100%' }}>
|
<ViewTable
|
title={translate('menu.subsystemFlowTemplate')}
|
resource="subsystemFlowTemplate"
|
filter={selectedNode ? { flowCode: selectedNode.nodeCode } : null}
|
onClick={handleFlowClick}
|
selectedId={selectedFlow?.id}
|
columns={flowColumns}
|
/>
|
</Grid>
|
<Grid item xs={4} sx={{ height: '100%' }}>
|
<ViewTable
|
title={translate('menu.flowStepTemplate')}
|
resource="flowStepTemplate"
|
filter={selectedFlow ? { flowId: selectedFlow.id } : null}
|
columns={stepColumns}
|
/>
|
</Grid>
|
</Grid>
|
</Box>
|
);
|
};
|
|
export default TaskTemplateFlowViewer;
|
