91ecaa3ed7
Implement complete workflow engine with BPMN subset support: Backend (erp-workflow crate): - Token-driven execution engine with exclusive/parallel gateway support - BPMN parser with flow graph validation - Expression evaluator for conditional branching - Process definition CRUD with draft/publish lifecycle - Process instance management (start, suspend, terminate) - Task service (pending, complete, delegate) - PostgreSQL advisory locks for concurrent safety - 5 database tables: process_definitions, process_instances, tokens, tasks, process_variables - 13 API endpoints with RBAC protection - Timeout checker framework (placeholder) Frontend: - Workflow page with 4 tabs (definitions, pending, completed, monitor) - React Flow visual process designer (@xyflow/react) - Process viewer with active node highlighting - 3 API client modules for workflow endpoints - Sidebar menu integration
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { useMemo } from 'react';
|
|
import {
|
|
ReactFlow,
|
|
Controls,
|
|
Background,
|
|
BackgroundVariant,
|
|
MarkerType,
|
|
type Node,
|
|
type Edge,
|
|
} from '@xyflow/react';
|
|
import '@xyflow/react/dist/style.css';
|
|
import type { NodeDef, EdgeDef } from '../../api/workflowDefinitions';
|
|
|
|
const NODE_TYPE_STYLES: Record<string, { color: string; radius: number; width: number }> = {
|
|
StartEvent: { color: '#52c41a', radius: 50, width: 100 },
|
|
EndEvent: { color: '#ff4d4f', radius: 50, width: 100 },
|
|
UserTask: { color: '#1890ff', radius: 6, width: 160 },
|
|
ServiceTask: { color: '#722ed1', radius: 6, width: 160 },
|
|
ExclusiveGateway: { color: '#fa8c16', radius: 0, width: 100 },
|
|
ParallelGateway: { color: '#13c2c2', radius: 0, width: 100 },
|
|
};
|
|
|
|
interface ProcessViewerProps {
|
|
nodes: NodeDef[];
|
|
edges: EdgeDef[];
|
|
activeNodeIds?: string[];
|
|
}
|
|
|
|
export default function ProcessViewer({ nodes, edges, activeNodeIds = [] }: ProcessViewerProps) {
|
|
const flowNodes: Node[] = useMemo(() =>
|
|
nodes.map((n, i) => {
|
|
const style = NODE_TYPE_STYLES[n.type] || NODE_TYPE_STYLES.UserTask;
|
|
const isActive = activeNodeIds.includes(n.id);
|
|
return {
|
|
id: n.id,
|
|
type: 'default',
|
|
position: n.position || { x: 200, y: i * 120 + 50 },
|
|
data: { label: n.name },
|
|
style: {
|
|
background: isActive ? '#fff3cd' : style.color,
|
|
color: isActive ? '#856404' : '#fff',
|
|
padding: '8px 16px',
|
|
borderRadius: style.radius,
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
border: isActive ? '3px solid #ffc107' : '2px solid rgba(255,255,255,0.3)',
|
|
width: style.width,
|
|
textAlign: 'center' as const,
|
|
boxShadow: isActive ? '0 0 8px rgba(255,193,7,0.5)' : 'none',
|
|
},
|
|
};
|
|
}),
|
|
[nodes, activeNodeIds],
|
|
);
|
|
|
|
const flowEdges: Edge[] = useMemo(() =>
|
|
edges.map((e) => ({
|
|
id: e.id,
|
|
source: e.source,
|
|
target: e.target,
|
|
label: e.label || e.condition,
|
|
markerEnd: { type: MarkerType.ArrowClosed },
|
|
style: { stroke: '#999' },
|
|
})),
|
|
[edges],
|
|
);
|
|
|
|
return (
|
|
<div style={{ height: 400, border: '1px solid #d9d9d9', borderRadius: 6 }}>
|
|
<ReactFlow
|
|
nodes={flowNodes}
|
|
edges={flowEdges}
|
|
fitView
|
|
proOptions={{ hideAttribution: true }}
|
|
nodesDraggable={false}
|
|
nodesConnectable={false}
|
|
elementsSelectable={false}
|
|
>
|
|
<Controls showInteractive={false} />
|
|
<Background variant={BackgroundVariant.Dots} gap={16} size={1} />
|
|
</ReactFlow>
|
|
</div>
|
|
);
|
|
}
|