feat(workflow): add workflow engine module (Phase 4)
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
This commit is contained in:
iven
243
apps/web/src/pages/workflow/ProcessDesigner.tsx
Normal file
243
apps/web/src/pages/workflow/ProcessDesigner.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { Button, Form, Input, message, Space } from 'antd';
|
||||
import {
|
||||
ReactFlow,
|
||||
Controls,
|
||||
Background,
|
||||
addEdge,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
type Connection,
|
||||
type Node,
|
||||
type Edge,
|
||||
BackgroundVariant,
|
||||
MarkerType,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import {
|
||||
type CreateProcessDefinitionRequest,
|
||||
type NodeDef,
|
||||
type EdgeDef,
|
||||
} from '../../api/workflowDefinitions';
|
||||
|
||||
const NODE_TYPES_MAP: Record<string, { label: string; color: string }> = {
|
||||
StartEvent: { label: '开始', color: '#52c41a' },
|
||||
EndEvent: { label: '结束', color: '#ff4d4f' },
|
||||
UserTask: { label: '用户任务', color: '#1890ff' },
|
||||
ServiceTask: { label: '服务任务', color: '#722ed1' },
|
||||
ExclusiveGateway: { label: '排他网关', color: '#fa8c16' },
|
||||
ParallelGateway: { label: '并行网关', color: '#13c2c2' },
|
||||
};
|
||||
|
||||
const PALETTE_ITEMS = Object.entries(NODE_TYPES_MAP).map(([type, info]) => ({
|
||||
type,
|
||||
label: info.label,
|
||||
color: info.color,
|
||||
}));
|
||||
|
||||
function createFlowNode(type: string, label: string, position: { x: number; y: number }): Node {
|
||||
return {
|
||||
id: `node_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
|
||||
type: 'default',
|
||||
position,
|
||||
data: { label: `${label}`, nodeType: type, name: label },
|
||||
style: {
|
||||
background: NODE_TYPES_MAP[type]?.color || '#f0f0f0',
|
||||
color: '#fff',
|
||||
padding: '8px 16px',
|
||||
borderRadius: type.includes('Gateway') ? 0 : type === 'StartEvent' || type === 'EndEvent' ? 50 : 6,
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
border: '2px solid rgba(255,255,255,0.3)',
|
||||
width: type.includes('Gateway') ? 80 : 140,
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
interface ProcessDesignerProps {
|
||||
definitionId: string | null;
|
||||
onSave: (req: CreateProcessDefinitionRequest) => void;
|
||||
}
|
||||
|
||||
export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
|
||||
const [form] = Form.useForm();
|
||||
const [selectedNode, setSelectedNode] = useState<Node | null>(null);
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([
|
||||
createFlowNode('StartEvent', '开始', { x: 250, y: 50 }),
|
||||
createFlowNode('UserTask', '审批', { x: 250, y: 200 }),
|
||||
createFlowNode('EndEvent', '结束', { x: 250, y: 400 }),
|
||||
]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([
|
||||
{
|
||||
id: 'e_start_approve',
|
||||
source: nodes[0].id,
|
||||
target: nodes[1].id,
|
||||
markerEnd: { type: MarkerType.ArrowClosed },
|
||||
},
|
||||
{
|
||||
id: 'e_approve_end',
|
||||
source: nodes[1].id,
|
||||
target: nodes[2].id,
|
||||
markerEnd: { type: MarkerType.ArrowClosed },
|
||||
},
|
||||
]);
|
||||
|
||||
const onConnect = useCallback(
|
||||
(connection: Connection) => {
|
||||
setEdges((eds) =>
|
||||
addEdge(
|
||||
{ ...connection, markerEnd: { type: MarkerType.ArrowClosed } },
|
||||
eds,
|
||||
),
|
||||
);
|
||||
},
|
||||
[setEdges],
|
||||
);
|
||||
|
||||
const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
|
||||
setSelectedNode(node);
|
||||
}, []);
|
||||
|
||||
const handleAddNode = (type: string) => {
|
||||
const info = NODE_TYPES_MAP[type];
|
||||
if (!info) return;
|
||||
const newNode = createFlowNode(type, info.label, {
|
||||
x: 100 + Math.random() * 400,
|
||||
y: 100 + Math.random() * 300,
|
||||
});
|
||||
setNodes((nds) => [...nds, newNode]);
|
||||
};
|
||||
|
||||
const handleDeleteNode = () => {
|
||||
if (!selectedNode) return;
|
||||
setNodes((nds) => nds.filter((n) => n.id !== selectedNode.id));
|
||||
setEdges((eds) =>
|
||||
eds.filter((e) => e.source !== selectedNode.id && e.target !== selectedNode.id),
|
||||
);
|
||||
setSelectedNode(null);
|
||||
};
|
||||
|
||||
const handleUpdateNodeName = (name: string) => {
|
||||
if (!selectedNode) return;
|
||||
setNodes((nds) =>
|
||||
nds.map((n) =>
|
||||
n.id === selectedNode.id
|
||||
? { ...n, data: { ...n.data, label: name, name } }
|
||||
: n,
|
||||
),
|
||||
);
|
||||
setSelectedNode((prev) => (prev ? { ...prev, data: { ...prev.data, label: name, name } } : null));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
form.validateFields().then((values) => {
|
||||
const flowNodes: NodeDef[] = nodes.map((n) => ({
|
||||
id: n.id,
|
||||
type: (n.data.nodeType as NodeDef['type']) || 'UserTask',
|
||||
name: n.data.name || String(n.data.label),
|
||||
}));
|
||||
const flowEdges: EdgeDef[] = edges.map((e) => ({
|
||||
id: e.id,
|
||||
source: e.source,
|
||||
target: e.target,
|
||||
}));
|
||||
onSave({
|
||||
...values,
|
||||
nodes: flowNodes,
|
||||
edges: flowEdges,
|
||||
});
|
||||
}).catch(() => {
|
||||
message.error('请填写必要字段');
|
||||
});
|
||||
};
|
||||
|
||||
const defaultEdgeOptions = useMemo(
|
||||
() => ({
|
||||
markerEnd: { type: MarkerType.ArrowClosed },
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, height: 500 }}>
|
||||
{/* 左侧工具面板 */}
|
||||
<div style={{ width: 180, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<p style={{ fontWeight: 500, margin: '0 0 4px' }}>添加节点</p>
|
||||
{PALETTE_ITEMS.map((item) => (
|
||||
<Button
|
||||
key={item.type}
|
||||
size="small"
|
||||
style={{ textAlign: 'left' }}
|
||||
onClick={() => handleAddNode(item.type)}
|
||||
>
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 2,
|
||||
background: item.color,
|
||||
marginRight: 6,
|
||||
}} />
|
||||
{item.label}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
{selectedNode && (
|
||||
<div style={{ marginTop: 16, padding: 8, background: '#f5f5f5', borderRadius: 6 }}>
|
||||
<p style={{ fontWeight: 500, margin: '0 0 8px', fontSize: 12 }}>节点属性</p>
|
||||
<Input
|
||||
size="small"
|
||||
value={selectedNode.data.name || ''}
|
||||
onChange={(e) => handleUpdateNodeName(e.target.value)}
|
||||
placeholder="节点名称"
|
||||
style={{ marginBottom: 8 }}
|
||||
/>
|
||||
<Button size="small" danger onClick={handleDeleteNode} block>
|
||||
删除节点
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 中间画布 */}
|
||||
<div style={{ flex: 1, border: '1px solid #d9d9d9', borderRadius: 6 }}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
onNodeClick={onNodeClick}
|
||||
defaultEdgeOptions={defaultEdgeOptions}
|
||||
fitView
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} gap={16} size={1} />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
{/* 右侧表单 */}
|
||||
<div style={{ width: 220, overflow: 'auto' }}>
|
||||
<Form form={form} layout="vertical" size="small">
|
||||
<Form.Item name="name" label="流程名称" rules={[{ required: true, message: '请输入' }]}>
|
||||
<Input placeholder="请假审批" />
|
||||
</Form.Item>
|
||||
<Form.Item name="key" label="流程编码" rules={[{ required: true, message: '请输入' }]}>
|
||||
<Input placeholder="leave_approval" />
|
||||
</Form.Item>
|
||||
<Form.Item name="category" label="分类">
|
||||
<Input placeholder="leave" />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSave}>保存</Button>
|
||||
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user