A process designer that depends on bpmn.js , Vue 2.x and ElementUI.
一个基于 bpmn.js
,Vue 2.x
和 ElementUI
开发的流程设计器。
You can view and edit BPMN 2.0
diagrams in the browser.
您可以使用它在浏览器上查看和编辑符合 BPMN 2.0
规范的流程文件。
如果您对增加其他功能有建议,或者找到了原有功能的不足之处,您可以通过 issue 或者文末的公众号向我反馈,我会在第一时间对问题作出反馈或者更新。
再次感谢您的支持!
For on line demo, please visit MiyueFE Blog
在线demo请访问 MiyueFE Blog
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 |
- | 重置所有编辑过程并清空画布 |
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
bpmn-modeler |
初始化生成的 modeler 实例 |
Object | - | - |
prefix |
流程引擎对应扩展属性前缀 | String | camunda , activiti , flowable |
camunda |
width |
侧边栏宽度 | Number | - | 480 |
如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。
订阅号名称:前端小白MiyueFE