Bpmn Process Designer

项目简介

一个基于 bpmn.js，Vue 2.x 和 ElementUI 开发的流程设计器。

您可以使用它在浏览器上查看和编辑符合 BPMN 2.0 规范的流程文件。

在线demo请访问 MiyueFE Blog

码云同步镜像请访问 Gitee/MiyueSC Process Designer

🚀🚀🚀

Vite + Vue 3 + pinia + naiveUI 新项目，取消了window命名空间保存bpmn实例的方式，并进行了大部分显示自定义功能，完成了 bpmn.js 基本依赖的 typescript 类型声明。

体验请访问：vite-vue-bpmn-process

国内同步体验地址：vite-vue-bpmn-process

友情链接

Me: Bpmn.js 中文文档、json描述文件说明等
Yiuman: 低代码平台 citrus ，已集成 activiti7 工作流引擎后端部分
霖呆呆（掘金五级大佬）: 《全网最详bpmn.js教材目录》，关于bpmn.js交流群的说明
PL-FE: Bpmn Document
芋道源码: ruoyi-vue-pro ,一套全部开源的企业级的快速开发平台，毫无保留给个人及企业免费使用。
运维咖啡吧: 《BPMN系列原创文章》

友情赞助

生活不易，偷偷丢个赞赏码吧，各位大佬赏个饭钱🤪🤪🤪🤪~~~~

1. 安装依赖 Installation

npm install
// or yarn install

2. 运行 Quick Start

npm run demo
// or yarn run demo

3. 文档说明 Documentation

3.1 MyProcessDesigner

3.1.1 Attributes

Attribute	Description	Type	Accepted Values	Default
`value/v-model`	初始化流程对应的 `xml` 字符串	String	-	-
`translations`	翻译文件	Object	-	zh.js
`additionalModel`	自定义的附加模块	Object[] / Object	-	-
`moddleExtension`	自定义的扩展模块	Object	-	-
`onlyCustomizeAddi`	仅使用开发时的自定义附加模块	Boolean	-	`false`
`onlyCustomizeModdle`	仅使用开发时的自定义扩展模块	Boolean	-	`false`
`prefix`	流程引擎对应扩展属性前缀	String	`camunda`, `activiti`, `flowable`	`camunda`
`events`	需要使用的事件列表，可用事件见 Bpmn.js 中文文档	Array	-	`[element.click]`
`headerButtonSize`	头部按钮组的大小	String	`"default", "medium", "small", "mini"`	`small`

3.1.2 Events

Event Name	Description	Callback Parameters
`init-finished`	流程实例等初始化完成之后	`modeler`
`change`	流程发生可监听的改变时 ( `EventBus.on("commandStack.changed")`)	`XMLString`
`destroy`	组件准备销毁时，此时流程实例已经销毁	`modeler`
`BpmnEvents`	Like `element.click`, will replace `.` to `-` (`ex: "element.click" => "element-click"` ). If you want to use an event, you must add the event name to the "`events`" parameter 传入参数 `events` 对应的事件发生时触发，会将 `events` 数组内部的事件名称中的 `.` 替换成 `-` 来适配 `vue` 的自定义监听事件。比如 `"element.click"` 会变成 `element-click`	`element, InternalEventInstance`

3.1.3 Methods

Method Name	Parameters	Description
`downloadProcessAsXml`	`name: string = "diagram"`	下载文件为 `${name}.xml` 格式的文件
`downloadProcessAsBpmn`	`name: string = "diagram"`	下载文件为 `${name}.bpmn` 格式的文件
`downloadProcessAsSvg`	`name: string = "diagram"`	下载文件为 `${name}.svg` 格式的文件
`processRedo`	-	恢复上次操作
`processUndo`	-	撤销本次操作
`processZoomIn`	`newZoom: number = 0.1`	按照指定倍率缩小视图（小数点后两位）
`processZoomOut`	`newZoom: number = 1`	按照指定倍率放大视图（小数点后两位）
`processZoomTo`	`newZoom: number = 1`	缩放视图到指定倍率
`processReZoom`	-	重置缩放倍率并居中显示全部元素
`processRestart`	-	重置所有编辑过程并清空画布
`createNewDiagram`	`xml: string`	重新导入新的xml字符串

3.2 MyProcessPenal

3.2.1 Attributes

Attribute	Description	Type	Accepted Values	Default
`bpmn-modeler`	初始化生成的 `modeler` 实例，必须	Object	-	-
`prefix`	流程引擎对应扩展属性前缀	String	`camunda`, `activiti`, `flowable`	`camunda`
`width`	侧边栏宽度	Number	-	480