基于SpringBoot+Vue3+LogicFlow的可视化工作审批流程设计器实现方案

14 阅读1分钟

本文将介绍一种基于SpringBoot后端框架、Vue3前端技术栈以及LogicFlow流程图引擎的工作审批流程设计器实现方案,提供一套完整的可视化流程设计解决方案。

技术栈组成

后端框架:SpringBoot 3.x

前端框架:Vue3 + TypeScript + Vite

流程引擎:LogicFlow 1.3.x(核心库) + @logicflow/extension(插件集)

UI组件库:Element Plus

可视化流程设计器

拖拽式建模:支持BPMN标准元素(开始/结束事件、用户任务、网关等)

动态表单绑定:节点属性面板集成表单设计器,支持JSON Schema配置

状态可视化:根据审批状态(待审/通过/驳回)动态切换样式

多人审批:支持会签/或签模式,头像列表显示当前处理人

子流程:嵌套显示子流程状态概览

审批人动态指定:用户在申请时动态指定审批人

GitHub地址:github.com/337547038/a…

在线体验:337547038.github.io/ak-flow/

wechat_2025-09-09_145047_681.png

wechat_2025-09-09_145130_704.png

wechat_2025-09-09_145142_520.png

wechat_2025-09-09_145214_376.png

wechat_2025-09-09_145220_174.png

wechat_2025-09-09_145240_718.png

wechat_2025-09-09_145300_111.png

wechat_2025-09-09_145306_117.png

wechat_2025-09-09_145320_150.png