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
@@ -11,6 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.1.1",
|
||||
"@xyflow/react": "^12.10.2",
|
||||
"antd": "^6.3.5",
|
||||
"axios": "^1.15.0",
|
||||
"react": "^19.2.4",
|
||||
|
||||
189
apps/web/pnpm-lock.yaml
generated
189
apps/web/pnpm-lock.yaml
generated
@@ -11,6 +11,9 @@ importers:
|
||||
'@ant-design/icons':
|
||||
specifier: ^6.1.1
|
||||
version: 6.1.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
'@xyflow/react':
|
||||
specifier: ^12.10.2
|
||||
version: 12.10.2(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
antd:
|
||||
specifier: ^6.3.5
|
||||
version: 6.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
@@ -28,7 +31,7 @@ importers:
|
||||
version: 7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
zustand:
|
||||
specifier: ^5.0.12
|
||||
version: 5.0.12(@types/react@19.2.14)(react@19.2.5)
|
||||
version: 5.0.12(@types/react@19.2.14)(react@19.2.5)(use-sync-external-store@1.6.0(react@19.2.5))
|
||||
devDependencies:
|
||||
'@eslint/js':
|
||||
specifier: ^9.39.4
|
||||
@@ -756,6 +759,24 @@ packages:
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
|
||||
|
||||
'@types/d3-color@3.1.3':
|
||||
resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
|
||||
|
||||
'@types/d3-drag@3.0.7':
|
||||
resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
|
||||
|
||||
'@types/d3-interpolate@3.0.4':
|
||||
resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
|
||||
|
||||
'@types/d3-selection@3.0.11':
|
||||
resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
|
||||
|
||||
'@types/d3-transition@3.0.9':
|
||||
resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
|
||||
|
||||
'@types/d3-zoom@3.0.8':
|
||||
resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
|
||||
|
||||
'@types/estree@1.0.8':
|
||||
resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
|
||||
|
||||
@@ -845,6 +866,15 @@ packages:
|
||||
babel-plugin-react-compiler:
|
||||
optional: true
|
||||
|
||||
'@xyflow/react@12.10.2':
|
||||
resolution: {integrity: sha512-CgIi6HwlcHXwlkTpr0fxLv/0sRVNZ8IdwKLzzeCscaYBwpvfcH1QFOCeaTCuEn1FQEs/B8CjnTSjhs8udgmBgQ==}
|
||||
peerDependencies:
|
||||
react: '>=17'
|
||||
react-dom: '>=17'
|
||||
|
||||
'@xyflow/system@0.0.76':
|
||||
resolution: {integrity: sha512-hvwvnRS1B3REwVDlWexsq7YQaPZeG3/mKo1jv38UmnpWmxihp14bW6VtEOuHEwJX2FvzFw8k77LyKSk/wiZVNA==}
|
||||
|
||||
acorn-jsx@5.3.2:
|
||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||
peerDependencies:
|
||||
@@ -916,6 +946,9 @@ packages:
|
||||
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
classcat@5.0.5:
|
||||
resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
|
||||
|
||||
clsx@2.1.1:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -951,6 +984,44 @@ packages:
|
||||
csstype@3.2.3:
|
||||
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
|
||||
|
||||
d3-color@3.1.0:
|
||||
resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-dispatch@3.0.1:
|
||||
resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-drag@3.0.0:
|
||||
resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-ease@3.0.1:
|
||||
resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-interpolate@3.0.1:
|
||||
resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-selection@3.0.0:
|
||||
resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-timer@3.0.1:
|
||||
resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-transition@3.0.1:
|
||||
resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
|
||||
engines: {node: '>=12'}
|
||||
peerDependencies:
|
||||
d3-selection: 2 - 3
|
||||
|
||||
d3-zoom@3.0.0:
|
||||
resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
dayjs@1.11.20:
|
||||
resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
|
||||
|
||||
@@ -1544,6 +1615,11 @@ packages:
|
||||
uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
|
||||
use-sync-external-store@1.6.0:
|
||||
resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
vite@8.0.8:
|
||||
resolution: {integrity: sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
@@ -1612,6 +1688,21 @@ packages:
|
||||
zod@4.3.6:
|
||||
resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
|
||||
|
||||
zustand@4.5.7:
|
||||
resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
|
||||
engines: {node: '>=12.7.0'}
|
||||
peerDependencies:
|
||||
'@types/react': '>=16.8'
|
||||
immer: '>=9.0.6'
|
||||
react: '>=16.8'
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
immer:
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
|
||||
zustand@5.0.12:
|
||||
resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==}
|
||||
engines: {node: '>=12.20.0'}
|
||||
@@ -2357,6 +2448,27 @@ snapshots:
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@types/d3-color@3.1.3': {}
|
||||
|
||||
'@types/d3-drag@3.0.7':
|
||||
dependencies:
|
||||
'@types/d3-selection': 3.0.11
|
||||
|
||||
'@types/d3-interpolate@3.0.4':
|
||||
dependencies:
|
||||
'@types/d3-color': 3.1.3
|
||||
|
||||
'@types/d3-selection@3.0.11': {}
|
||||
|
||||
'@types/d3-transition@3.0.9':
|
||||
dependencies:
|
||||
'@types/d3-selection': 3.0.11
|
||||
|
||||
'@types/d3-zoom@3.0.8':
|
||||
dependencies:
|
||||
'@types/d3-interpolate': 3.0.4
|
||||
'@types/d3-selection': 3.0.11
|
||||
|
||||
'@types/estree@1.0.8': {}
|
||||
|
||||
'@types/json-schema@7.0.15': {}
|
||||
@@ -2469,6 +2581,29 @@ snapshots:
|
||||
'@rolldown/pluginutils': 1.0.0-rc.7
|
||||
vite: 8.0.8(@types/node@24.12.2)(jiti@2.6.1)
|
||||
|
||||
'@xyflow/react@12.10.2(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
|
||||
dependencies:
|
||||
'@xyflow/system': 0.0.76
|
||||
classcat: 5.0.5
|
||||
react: 19.2.5
|
||||
react-dom: 19.2.5(react@19.2.5)
|
||||
zustand: 4.5.7(@types/react@19.2.14)(react@19.2.5)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
- immer
|
||||
|
||||
'@xyflow/system@0.0.76':
|
||||
dependencies:
|
||||
'@types/d3-drag': 3.0.7
|
||||
'@types/d3-interpolate': 3.0.4
|
||||
'@types/d3-selection': 3.0.11
|
||||
'@types/d3-transition': 3.0.9
|
||||
'@types/d3-zoom': 3.0.8
|
||||
d3-drag: 3.0.0
|
||||
d3-interpolate: 3.0.1
|
||||
d3-selection: 3.0.0
|
||||
d3-zoom: 3.0.0
|
||||
|
||||
acorn-jsx@5.3.2(acorn@8.16.0):
|
||||
dependencies:
|
||||
acorn: 8.16.0
|
||||
@@ -2592,6 +2727,8 @@ snapshots:
|
||||
ansi-styles: 4.3.0
|
||||
supports-color: 7.2.0
|
||||
|
||||
classcat@5.0.5: {}
|
||||
|
||||
clsx@2.1.1: {}
|
||||
|
||||
color-convert@2.0.1:
|
||||
@@ -2620,6 +2757,42 @@ snapshots:
|
||||
|
||||
csstype@3.2.3: {}
|
||||
|
||||
d3-color@3.1.0: {}
|
||||
|
||||
d3-dispatch@3.0.1: {}
|
||||
|
||||
d3-drag@3.0.0:
|
||||
dependencies:
|
||||
d3-dispatch: 3.0.1
|
||||
d3-selection: 3.0.0
|
||||
|
||||
d3-ease@3.0.1: {}
|
||||
|
||||
d3-interpolate@3.0.1:
|
||||
dependencies:
|
||||
d3-color: 3.1.0
|
||||
|
||||
d3-selection@3.0.0: {}
|
||||
|
||||
d3-timer@3.0.1: {}
|
||||
|
||||
d3-transition@3.0.1(d3-selection@3.0.0):
|
||||
dependencies:
|
||||
d3-color: 3.1.0
|
||||
d3-dispatch: 3.0.1
|
||||
d3-ease: 3.0.1
|
||||
d3-interpolate: 3.0.1
|
||||
d3-selection: 3.0.0
|
||||
d3-timer: 3.0.1
|
||||
|
||||
d3-zoom@3.0.0:
|
||||
dependencies:
|
||||
d3-dispatch: 3.0.1
|
||||
d3-drag: 3.0.0
|
||||
d3-interpolate: 3.0.1
|
||||
d3-selection: 3.0.0
|
||||
d3-transition: 3.0.1(d3-selection@3.0.0)
|
||||
|
||||
dayjs@1.11.20: {}
|
||||
|
||||
debug@4.4.3:
|
||||
@@ -3143,6 +3316,10 @@ snapshots:
|
||||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
use-sync-external-store@1.6.0(react@19.2.5):
|
||||
dependencies:
|
||||
react: 19.2.5
|
||||
|
||||
vite@8.0.8(@types/node@24.12.2)(jiti@2.6.1):
|
||||
dependencies:
|
||||
lightningcss: 1.32.0
|
||||
@@ -3171,7 +3348,15 @@ snapshots:
|
||||
|
||||
zod@4.3.6: {}
|
||||
|
||||
zustand@5.0.12(@types/react@19.2.14)(react@19.2.5):
|
||||
zustand@4.5.7(@types/react@19.2.14)(react@19.2.5):
|
||||
dependencies:
|
||||
use-sync-external-store: 1.6.0(react@19.2.5)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.2.14
|
||||
react: 19.2.5
|
||||
|
||||
zustand@5.0.12(@types/react@19.2.14)(react@19.2.5)(use-sync-external-store@1.6.0(react@19.2.5)):
|
||||
optionalDependencies:
|
||||
'@types/react': 19.2.14
|
||||
react: 19.2.5
|
||||
use-sync-external-store: 1.6.0(react@19.2.5)
|
||||
|
||||
@@ -9,6 +9,7 @@ import Roles from './pages/Roles';
|
||||
import Users from './pages/Users';
|
||||
import Organizations from './pages/Organizations';
|
||||
import Settings from './pages/Settings';
|
||||
import Workflow from './pages/Workflow';
|
||||
import { useAuthStore } from './stores/auth';
|
||||
import { useAppStore } from './stores/app';
|
||||
|
||||
@@ -46,6 +47,7 @@ export default function App() {
|
||||
<Route path="/users" element={<Users />} />
|
||||
<Route path="/roles" element={<Roles />} />
|
||||
<Route path="/organizations" element={<Organizations />} />
|
||||
<Route path="/workflow" element={<Workflow />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Routes>
|
||||
</MainLayout>
|
||||
|
||||
89
apps/web/src/api/workflowDefinitions.ts
Normal file
89
apps/web/src/api/workflowDefinitions.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import client from './client';
|
||||
import type { PaginatedResponse } from './users';
|
||||
|
||||
export interface NodeDef {
|
||||
id: string;
|
||||
type: 'StartEvent' | 'EndEvent' | 'UserTask' | 'ServiceTask' | 'ExclusiveGateway' | 'ParallelGateway';
|
||||
name: string;
|
||||
assignee_id?: string;
|
||||
candidate_groups?: string[];
|
||||
service_type?: string;
|
||||
position?: { x: number; y: number };
|
||||
}
|
||||
|
||||
export interface EdgeDef {
|
||||
id: string;
|
||||
source: string;
|
||||
target: string;
|
||||
condition?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export interface ProcessDefinitionInfo {
|
||||
id: string;
|
||||
name: string;
|
||||
key: string;
|
||||
version: number;
|
||||
category?: string;
|
||||
description?: string;
|
||||
nodes: NodeDef[];
|
||||
edges: EdgeDef[];
|
||||
status: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateProcessDefinitionRequest {
|
||||
name: string;
|
||||
key: string;
|
||||
category?: string;
|
||||
description?: string;
|
||||
nodes: NodeDef[];
|
||||
edges: EdgeDef[];
|
||||
}
|
||||
|
||||
export interface UpdateProcessDefinitionRequest {
|
||||
name?: string;
|
||||
category?: string;
|
||||
description?: string;
|
||||
nodes?: NodeDef[];
|
||||
edges?: EdgeDef[];
|
||||
}
|
||||
|
||||
export async function listProcessDefinitions(page = 1, pageSize = 20) {
|
||||
const { data } = await client.get<{ success: boolean; data: PaginatedResponse<ProcessDefinitionInfo> }>(
|
||||
'/workflow/definitions',
|
||||
{ params: { page, page_size: pageSize } },
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function getProcessDefinition(id: string) {
|
||||
const { data } = await client.get<{ success: boolean; data: ProcessDefinitionInfo }>(
|
||||
`/workflow/definitions/${id}`,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function createProcessDefinition(req: CreateProcessDefinitionRequest) {
|
||||
const { data } = await client.post<{ success: boolean; data: ProcessDefinitionInfo }>(
|
||||
'/workflow/definitions',
|
||||
req,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function updateProcessDefinition(id: string, req: UpdateProcessDefinitionRequest) {
|
||||
const { data } = await client.put<{ success: boolean; data: ProcessDefinitionInfo }>(
|
||||
`/workflow/definitions/${id}`,
|
||||
req,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function publishProcessDefinition(id: string) {
|
||||
const { data } = await client.post<{ success: boolean; data: ProcessDefinitionInfo }>(
|
||||
`/workflow/definitions/${id}/publish`,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
65
apps/web/src/api/workflowInstances.ts
Normal file
65
apps/web/src/api/workflowInstances.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import client from './client';
|
||||
import type { PaginatedResponse } from './users';
|
||||
|
||||
export interface TokenInfo {
|
||||
id: string;
|
||||
node_id: string;
|
||||
status: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ProcessInstanceInfo {
|
||||
id: string;
|
||||
definition_id: string;
|
||||
definition_name?: string;
|
||||
business_key?: string;
|
||||
status: string;
|
||||
started_by: string;
|
||||
started_at: string;
|
||||
completed_at?: string;
|
||||
created_at: string;
|
||||
active_tokens: TokenInfo[];
|
||||
}
|
||||
|
||||
export interface StartInstanceRequest {
|
||||
definition_id: string;
|
||||
business_key?: string;
|
||||
variables?: Array<{ name: string; var_type?: string; value: unknown }>;
|
||||
}
|
||||
|
||||
export async function startInstance(req: StartInstanceRequest) {
|
||||
const { data } = await client.post<{ success: boolean; data: ProcessInstanceInfo }>(
|
||||
'/workflow/instances',
|
||||
req,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function listInstances(page = 1, pageSize = 20) {
|
||||
const { data } = await client.get<{ success: boolean; data: PaginatedResponse<ProcessInstanceInfo> }>(
|
||||
'/workflow/instances',
|
||||
{ params: { page, page_size: pageSize } },
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function getInstance(id: string) {
|
||||
const { data } = await client.get<{ success: boolean; data: ProcessInstanceInfo }>(
|
||||
`/workflow/instances/${id}`,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function suspendInstance(id: string) {
|
||||
const { data } = await client.post<{ success: boolean; data: null }>(
|
||||
`/workflow/instances/${id}/suspend`,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function terminateInstance(id: string) {
|
||||
const { data } = await client.post<{ success: boolean; data: null }>(
|
||||
`/workflow/instances/${id}/terminate`,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
61
apps/web/src/api/workflowTasks.ts
Normal file
61
apps/web/src/api/workflowTasks.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import client from './client';
|
||||
import type { PaginatedResponse } from './users';
|
||||
|
||||
export interface TaskInfo {
|
||||
id: string;
|
||||
instance_id: string;
|
||||
token_id: string;
|
||||
node_id: string;
|
||||
node_name?: string;
|
||||
assignee_id?: string;
|
||||
candidate_groups?: unknown;
|
||||
status: string;
|
||||
outcome?: string;
|
||||
form_data?: unknown;
|
||||
due_date?: string;
|
||||
completed_at?: string;
|
||||
created_at: string;
|
||||
definition_name?: string;
|
||||
business_key?: string;
|
||||
}
|
||||
|
||||
export interface CompleteTaskRequest {
|
||||
outcome: string;
|
||||
form_data?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface DelegateTaskRequest {
|
||||
delegate_to: string;
|
||||
}
|
||||
|
||||
export async function listPendingTasks(page = 1, pageSize = 20) {
|
||||
const { data } = await client.get<{ success: boolean; data: PaginatedResponse<TaskInfo> }>(
|
||||
'/workflow/tasks/pending',
|
||||
{ params: { page, page_size: pageSize } },
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function listCompletedTasks(page = 1, pageSize = 20) {
|
||||
const { data } = await client.get<{ success: boolean; data: PaginatedResponse<TaskInfo> }>(
|
||||
'/workflow/tasks/completed',
|
||||
{ params: { page, page_size: pageSize } },
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function completeTask(id: string, req: CompleteTaskRequest) {
|
||||
const { data } = await client.post<{ success: boolean; data: TaskInfo }>(
|
||||
`/workflow/tasks/${id}/complete`,
|
||||
req,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function delegateTask(id: string, req: DelegateTaskRequest) {
|
||||
const { data } = await client.post<{ success: boolean; data: TaskInfo }>(
|
||||
`/workflow/tasks/${id}/delegate`,
|
||||
req,
|
||||
);
|
||||
return data.data;
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
SettingOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
PartitionOutlined,
|
||||
LogoutOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@@ -21,6 +22,7 @@ const menuItems = [
|
||||
{ key: '/users', icon: <UserOutlined />, label: '用户管理' },
|
||||
{ key: '/roles', icon: <SafetyOutlined />, label: '权限管理' },
|
||||
{ key: '/organizations', icon: <ApartmentOutlined />, label: '组织架构' },
|
||||
{ key: '/workflow', icon: <PartitionOutlined />, label: '工作流' },
|
||||
{ key: '/settings', icon: <SettingOutlined />, label: '系统设置' },
|
||||
];
|
||||
|
||||
|
||||
25
apps/web/src/pages/Workflow.tsx
Normal file
25
apps/web/src/pages/Workflow.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useState } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import ProcessDefinitions from './workflow/ProcessDefinitions';
|
||||
import PendingTasks from './workflow/PendingTasks';
|
||||
import CompletedTasks from './workflow/CompletedTasks';
|
||||
import InstanceMonitor from './workflow/InstanceMonitor';
|
||||
|
||||
export default function Workflow() {
|
||||
const [activeKey, setActiveKey] = useState('definitions');
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24 }}>
|
||||
<Tabs
|
||||
activeKey={activeKey}
|
||||
onChange={setActiveKey}
|
||||
items={[
|
||||
{ key: 'definitions', label: '流程定义', children: <ProcessDefinitions /> },
|
||||
{ key: 'pending', label: '我的待办', children: <PendingTasks /> },
|
||||
{ key: 'completed', label: '我的已办', children: <CompletedTasks /> },
|
||||
{ key: 'instances', label: '流程监控', children: <InstanceMonitor /> },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
apps/web/src/pages/workflow/CompletedTasks.tsx
Normal file
56
apps/web/src/pages/workflow/CompletedTasks.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { listCompletedTasks, type TaskInfo } from '../../api/workflowTasks';
|
||||
|
||||
const outcomeLabels: Record<string, { color: string; text: string }> = {
|
||||
approved: { color: 'green', text: '同意' },
|
||||
rejected: { color: 'red', text: '拒绝' },
|
||||
delegated: { color: 'blue', text: '已委派' },
|
||||
};
|
||||
|
||||
export default function CompletedTasks() {
|
||||
const [data, setData] = useState<TaskInfo[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listCompletedTasks(page, 20);
|
||||
setData(res.data);
|
||||
setTotal(res.total);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetch(); }, [page]);
|
||||
|
||||
const columns: ColumnsType<TaskInfo> = [
|
||||
{ title: '任务名称', dataIndex: 'node_name', key: 'node_name' },
|
||||
{ title: '流程', dataIndex: 'definition_name', key: 'definition_name' },
|
||||
{ title: '业务键', dataIndex: 'business_key', key: 'business_key' },
|
||||
{
|
||||
title: '结果', dataIndex: 'outcome', key: 'outcome', width: 100,
|
||||
render: (o: string) => {
|
||||
const info = outcomeLabels[o] || { color: 'default', text: o };
|
||||
return <Tag color={info.color}>{info.text}</Tag>;
|
||||
},
|
||||
},
|
||||
{ title: '完成时间', dataIndex: 'completed_at', key: 'completed_at', width: 180,
|
||||
render: (v: string) => v ? new Date(v).toLocaleString() : '-',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
78
apps/web/src/pages/workflow/InstanceMonitor.tsx
Normal file
78
apps/web/src/pages/workflow/InstanceMonitor.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, message, Space, Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import {
|
||||
listInstances,
|
||||
terminateInstance,
|
||||
type ProcessInstanceInfo,
|
||||
} from '../../api/workflowInstances';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
running: 'processing',
|
||||
suspended: 'warning',
|
||||
completed: 'green',
|
||||
terminated: 'red',
|
||||
};
|
||||
|
||||
export default function InstanceMonitor() {
|
||||
const [data, setData] = useState<ProcessInstanceInfo[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listInstances(page, 20);
|
||||
setData(res.data);
|
||||
setTotal(res.total);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetch(); }, [page]);
|
||||
|
||||
const handleTerminate = async (id: string) => {
|
||||
try {
|
||||
await terminateInstance(id);
|
||||
message.success('已终止');
|
||||
fetch();
|
||||
} catch {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<ProcessInstanceInfo> = [
|
||||
{ title: '流程', dataIndex: 'definition_name', key: 'definition_name' },
|
||||
{ title: '业务键', dataIndex: 'business_key', key: 'business_key' },
|
||||
{
|
||||
title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
||||
render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
|
||||
},
|
||||
{ title: '当前节点', key: 'current_nodes', width: 150,
|
||||
render: (_, record) => record.active_tokens.map(t => t.node_id).join(', ') || '-',
|
||||
},
|
||||
{ title: '发起时间', dataIndex: 'started_at', key: 'started_at', width: 180,
|
||||
render: (v: string) => new Date(v).toLocaleString(),
|
||||
},
|
||||
{
|
||||
title: '操作', key: 'action', width: 100,
|
||||
render: (_, record) => (
|
||||
record.status === 'running' ? (
|
||||
<Button size="small" danger onClick={() => handleTerminate(record.id)}>终止</Button>
|
||||
) : null
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
97
apps/web/src/pages/workflow/PendingTasks.tsx
Normal file
97
apps/web/src/pages/workflow/PendingTasks.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, message, Modal, Space, Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import {
|
||||
listPendingTasks,
|
||||
completeTask,
|
||||
type TaskInfo,
|
||||
} from '../../api/workflowTasks';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: 'processing',
|
||||
};
|
||||
|
||||
export default function PendingTasks() {
|
||||
const [data, setData] = useState<TaskInfo[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [completeModal, setCompleteModal] = useState<TaskInfo | null>(null);
|
||||
const [outcome, setOutcome] = useState('approved');
|
||||
|
||||
const fetch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listPendingTasks(page, 20);
|
||||
setData(res.data);
|
||||
setTotal(res.total);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetch(); }, [page]);
|
||||
|
||||
const handleComplete = async () => {
|
||||
if (!completeModal) return;
|
||||
try {
|
||||
await completeTask(completeModal.id, { outcome });
|
||||
message.success('审批完成');
|
||||
setCompleteModal(null);
|
||||
fetch();
|
||||
} catch {
|
||||
message.error('审批失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<TaskInfo> = [
|
||||
{ title: '任务名称', dataIndex: 'node_name', key: 'node_name' },
|
||||
{ title: '流程', dataIndex: 'definition_name', key: 'definition_name' },
|
||||
{ title: '业务键', dataIndex: 'business_key', key: 'business_key' },
|
||||
{
|
||||
title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
||||
render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180,
|
||||
render: (v: string) => new Date(v).toLocaleString(),
|
||||
},
|
||||
{
|
||||
title: '操作', key: 'action', width: 120,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" type="primary" onClick={() => { setCompleteModal(record); setOutcome('approved'); }}>
|
||||
审批
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
|
||||
/>
|
||||
<Modal
|
||||
title="审批任务"
|
||||
open={!!completeModal}
|
||||
onOk={handleComplete}
|
||||
onCancel={() => setCompleteModal(null)}
|
||||
>
|
||||
<p>任务: {completeModal?.node_name}</p>
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => setOutcome('approved')} ghost={outcome !== 'approved'}>
|
||||
同意
|
||||
</Button>
|
||||
<Button danger onClick={() => setOutcome('rejected')} ghost={outcome !== 'rejected'}>
|
||||
拒绝
|
||||
</Button>
|
||||
</Space>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
122
apps/web/src/pages/workflow/ProcessDefinitions.tsx
Normal file
122
apps/web/src/pages/workflow/ProcessDefinitions.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, message, Modal, Space, Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import {
|
||||
listProcessDefinitions,
|
||||
createProcessDefinition,
|
||||
publishProcessDefinition,
|
||||
type ProcessDefinitionInfo,
|
||||
type CreateProcessDefinitionRequest,
|
||||
} from '../../api/workflowDefinitions';
|
||||
import ProcessDesigner from './ProcessDesigner';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
draft: 'default',
|
||||
published: 'green',
|
||||
deprecated: 'red',
|
||||
};
|
||||
|
||||
export default function ProcessDefinitions() {
|
||||
const [data, setData] = useState<ProcessDefinitionInfo[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [designerOpen, setDesignerOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
|
||||
const fetch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listProcessDefinitions(page, 20);
|
||||
setData(res.data);
|
||||
setTotal(res.total);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetch(); }, [page]);
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingId(null);
|
||||
setDesignerOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
setEditingId(id);
|
||||
setDesignerOpen(true);
|
||||
};
|
||||
|
||||
const handlePublish = async (id: string) => {
|
||||
try {
|
||||
await publishProcessDefinition(id);
|
||||
message.success('发布成功');
|
||||
fetch();
|
||||
} catch {
|
||||
message.error('发布失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (req: CreateProcessDefinitionRequest) => {
|
||||
try {
|
||||
await createProcessDefinition(req);
|
||||
message.success('创建成功');
|
||||
setDesignerOpen(false);
|
||||
fetch();
|
||||
} catch {
|
||||
message.error('创建失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<ProcessDefinitionInfo> = [
|
||||
{ title: '名称', dataIndex: 'name', key: 'name' },
|
||||
{ title: '编码', dataIndex: 'key', key: 'key' },
|
||||
{ title: '版本', dataIndex: 'version', key: 'version', width: 80 },
|
||||
{ title: '分类', dataIndex: 'category', key: 'category', width: 120 },
|
||||
{
|
||||
title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
||||
render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '操作', key: 'action', width: 200,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
{record.status === 'draft' && (
|
||||
<>
|
||||
<Button size="small" onClick={() => handleEdit(record.id)}>编辑</Button>
|
||||
<Button size="small" type="primary" onClick={() => handlePublish(record.id)}>发布</Button>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button type="primary" onClick={handleCreate}>新建流程</Button>
|
||||
</div>
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
|
||||
/>
|
||||
<Modal
|
||||
title={editingId ? '编辑流程' : '新建流程'}
|
||||
open={designerOpen}
|
||||
onCancel={() => setDesignerOpen(false)}
|
||||
footer={null}
|
||||
width={1200}
|
||||
destroyOnClose
|
||||
>
|
||||
<ProcessDesigner
|
||||
definitionId={editingId}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
84
apps/web/src/pages/workflow/ProcessViewer.tsx
Normal file
84
apps/web/src/pages/workflow/ProcessViewer.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user