大家好，我是立东，一名全栈工程师，专注于Java与Vue技术栈的开发。我在工作流业务领域有着丰富的经验，并在2023年至2024年间陆续开源了多个相关项目，包括工作流设计器、工作流引擎以及工作流管理系统。
- 个人网站：www.mldong.com/
- B站主页：space.bilibili.com/1395438398
今天，我将为大家详细介绍其中的一款重要工具——工作流设计器。希望通过这篇文章，能够帮助大家更好地理解和使用这款工具，提升工作效率。
技术栈
源码运行
兼容性注意
- 因Vite 需要 Node.js 版本 18+ 或 20+。当你的包管理器发出警告时，请注意升级你的 Node 版本。
- 本项目是在 Node.js 版本 16+的环境下测试通过。
下载
git clone https://gitee.com/mldong/flow-designer.git
进入目录
cd flow-designer
安装依赖
npm install --registry=https://registry.npmmirror.com
运行
npm run dev
浏览器打开
依赖使用方式
注：目前该组件弹窗等UI依赖于antd4.x或element-plus，所以需要框架中支持该两种UI框架之一才能使用完整的功能。
安装
yarn add mldong-flow-designer-plus --registry=https://registry.npmmirror.com
# 或者
npm install mldong-flow-designer-plus --registry=https://registry.npmmirror.com
全局注册
import { createApp } from 'vue'
import FlowDesigner from 'mldong-flow-designer-plus'
import 'mldong-flow-designer-plus/lib/style.css'
const app = createApp(App)
// 注：uiLibrary和当前项目使用的UI库保持一致
// 如果为局部注册，则需要指定uiLibrary
// app.config.globalProperties.$uiLibrary= 'element-plus'
app.use(FlowDesigner,{
// 指定UI库：antd | element-plus
uiLibrary: 'element-plus'
})
使用样例
编辑模式
<template>
<MldongFlowDesignerPlus v-model:value="graphData" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const graphData = ref({
name: 'leave1',
displayName: '请假流程',
postInterceptors: "leave_postInterceptors",
nodes: [
{
id: "1",
type: "snaker:start",
x: 100,
y: 100,
properties: {
// state: 'history'
postInterceptors: "start_postInterceptors"
}
},
{
id: "2",
type: "snaker:task",
x: 300,
y: 200,
text: "节点2",
properties: {
// state: 'active'
form: 'leaveForm',
postInterceptors: "task_postInterceptors"
}
},
{
id: "3",
type: "snaker:end",
x: 500,
y: 600,
text: "结束",
properties: {
postInterceptors: "end_postInterceptors"
}
},
],
edges: [
{
id: "1-2",
sourceNodeId: "1",
targetNodeId: "2",
type: "snaker:transition",
text: "连线",
properties: {
// state: 'history'
expr: "${a} == 1"
}
},
{
id: "2-3",
sourceNodeId: "2",
targetNodeId: "3",
type: "snaker:transition",
text: "连线2",
properties: {
// state: 'history'
expr: "${a} == 2"
}
},
],
})
</script>
只读模式
<template>
<MldongFlowDesignerPlus :viewer="true" v-model:value="graphData" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const graphData = ref({
name: 'leave1',
displayName: '请假流程',
postInterceptors: "leave_postInterceptors",
nodes: [
{
id: "1",
type: "snaker:start",
x: 100,
y: 100,
properties: {
// state: 'history'
postInterceptors: "start_postInterceptors"
}
},
{
id: "2",
type: "snaker:task",
x: 300,
y: 200,
text: "节点2",
properties: {
// state: 'active'
form: 'leaveForm',
postInterceptors: "task_postInterceptors"
}
},
{
id: "3",
type: "snaker:end",
x: 500,
y: 600,
text: "结束",
properties: {
postInterceptors: "end_postInterceptors"
}
},
],
edges: [
{
id: "1-2",
sourceNodeId: "1",
targetNodeId: "2",
type: "snaker:transition",
text: "连线",
properties: {
// state: 'history'
expr: "${a} == 1"
}
},
{
id: "2-3",
sourceNodeId: "2",
targetNodeId: "3",
type: "snaker:transition",
text: "连线2",
properties: {
// state: 'history'
expr: "${a} == 2"
}
},
],
})
</script>
二开实战项目
在vben5框架下集成mldong-flow-designer-plus，并对其进行了二次开发。
下载
git clone https://gitee.com/mldong/mldong-vben5.git
进入目录
cd mldong-vben5
安装依赖
注：因为vben5需要nodeJs的版本为V20+及以上，所以请根据要求，调整nodejs版本，推荐使用nvm去管理。
# 如pnpm未安装，先安装pnpm
npm install pnpm -g --registry=https://registry.npmmirror.com
# 安装依赖
pnpm install
运行
pnpm run dev:antd
浏览器打开
在菜单【业务模块】->【流程设计器】下
二开后的任务节点表单
