代码拉取完成,页面将自动刷新
一个基于 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 类型声明。React 项目也可以参考自定义插件和属性更新方式
体验请访问:vite-vue-bpmn-process
国内同步体验地址:vite-vue-bpmn-process
源码地址:github: vite-vue-bpmn-process, gitee: vite-vue-bpmn-process
付费咨询请加微信(二维码见下方赞助,毕竟生活太苦了😩😩😩)
生活不易,偷偷丢个赞赏码吧,各位大佬赏个饭钱🤪🤪🤪🤪~~~~
付费咨询联系微信:
npm install
// or yarn install
npm run demo
// or yarn run demo
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 |
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 |
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字符串 |
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
bpmn-modeler |
初始化生成的 modeler 实例,必须 |
Object | - | - |
prefix |
流程引擎对应扩展属性前缀 | String |
camunda , activiti , flowable
|
camunda |
width |
侧边栏宽度 | Number | - | 480 |
camunda
,flowable
,activiti
解析文件platte
与弹出菜单 contentPad
示例模块renderer
模块实例如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。
订阅号名称:前端小白MiyueFE
订阅号:前端小白MiyueFE
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。