feat: add Node/Edge API types, designer route, design button

This commit is contained in:
向宁 2026-05-21 14:52:49 +08:00
parent 9a50d06752
commit 209c0be5e1
3 changed files with 154 additions and 1 deletions

View File

@ -120,6 +120,139 @@ export function disableWorkflowDefinitionApi(id: string) {
return workflowRequestClient.post(`/workflow-definitions/${id}/disable`);
}
// --- Enums ---
export enum NodeType {
Start = 0,
End = 1,
Approval = 2,
Cc = 3,
Condition = 4,
Parallel = 5,
SubProcess = 6,
}
export enum EdgeType {
Normal = 0,
Approved = 1,
Rejected = 2,
}
// --- Types ---
export interface WorkflowNodeDto {
id: string;
nodeType: NodeType;
name: string;
config: string | null;
positionX: number;
positionY: number;
}
export interface WorkflowEdgeDto {
id: string;
sourceNodeId: string;
targetNodeId: string;
edgeType: EdgeType;
label: string | null;
condition: string | null;
order: number;
}
export interface WorkflowDefinitionDetailDto extends WorkflowDefinitionDto {
nodes: WorkflowNodeDto[];
edges: WorkflowEdgeDto[];
}
// --- Definition Detail ---
export function getWorkflowDefinitionDetailApi(id: string) {
return workflowRequestClient.get<WorkflowDefinitionDetailDto>(
`/workflow-definitions/${id}`,
);
}
// --- Workflow Nodes ---
export function createNodeApi(
definitionId: string,
data: {
nodeType: NodeType;
name: string;
config?: string;
positionX: number;
positionY: number;
},
) {
return workflowRequestClient.post<WorkflowNodeDto>(
`/workflow-definitions/${definitionId}/nodes`,
data,
);
}
export function updateNodeApi(
definitionId: string,
nodeId: string,
data: {
name: string;
config?: string;
positionX: number;
positionY: number;
},
) {
return workflowRequestClient.put<WorkflowNodeDto>(
`/workflow-definitions/${definitionId}/nodes/${nodeId}`,
data,
);
}
export function deleteNodeApi(definitionId: string, nodeId: string) {
return workflowRequestClient.delete(
`/workflow-definitions/${definitionId}/nodes/${nodeId}`,
);
}
// --- Workflow Edges ---
export function createEdgeApi(
definitionId: string,
data: {
sourceNodeId: string;
targetNodeId: string;
edgeType: EdgeType;
label?: string;
condition?: string;
order: number;
},
) {
return workflowRequestClient.post<WorkflowEdgeDto>(
`/workflow-definitions/${definitionId}/edges`,
data,
);
}
export function updateEdgeApi(
definitionId: string,
edgeId: string,
data: {
edgeType: EdgeType;
label?: string;
condition?: string;
order: number;
},
) {
return workflowRequestClient.put<WorkflowEdgeDto>(
`/workflow-definitions/${definitionId}/edges/${edgeId}`,
data,
);
}
export function deleteEdgeApi(definitionId: string, edgeId: string) {
return workflowRequestClient.delete(
`/workflow-definitions/${definitionId}/edges/${edgeId}`,
);
}
// --- Workflow Instances ---
export function getWorkflowInstancesApi(params?: {

View File

@ -55,6 +55,15 @@ const routes: RouteRecordRaw[] = [
title: '流程监控',
},
},
{
name: 'WorkflowDesigner',
path: '/workflow/designer/:id',
component: () => import('#/views/workflow/designer/index.vue'),
meta: {
title: '流程设计器',
hideInMenu: true,
},
},
],
},
];

View File

@ -1,6 +1,8 @@
<script lang="ts" setup>
import { h, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import {
@ -27,6 +29,12 @@ import {
type WorkflowDefinitionDto,
} from '#/api/core';
const router = useRouter();
function openDesigner(record: WorkflowDefinitionDto) {
router.push(`/workflow/designer/${record.id}`);
}
const loading = ref(false);
const data = ref<WorkflowDefinitionDto[]>([]);
const total = ref(0);
@ -69,7 +77,7 @@ const columns = [
customRender: ({ record }: { record: WorkflowDefinitionDto }) =>
h(Tag, { color: record.isEnabled ? 'green' : 'default' }, () => record.isEnabled ? '是' : '否'),
},
{ title: '操作', key: 'actions', width: 280 },
{ title: '操作', key: 'actions', width: 340 },
];
async function loadData() {
@ -206,6 +214,9 @@ onMounted(() => loadData());
<template #bodyCell="{ column, record: record }">
<template v-if="column.key === 'actions'">
<Space>
<Button size="small" @click="openDesigner(record as WorkflowDefinitionDto)">
设计
</Button>
<Button
v-if="(record as WorkflowDefinitionDto).status === DefinitionStatus.Published && (record as WorkflowDefinitionDto).isEnabled"
size="small"