1 Star 2 Fork 206

soler / bpmn-process-designer

forked from MiyueSC / bpmn-process-designer 
Gitee — Enterprise-level DevOps R&D management platform
Join Gitee
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Bpmn Process Designer


针对之前的版本存在的问题,第二版采用了在 window 对象下添加新的命名空间来保存对应的实例对象。

原因是因为 通过 Props 传参会被 vue 进行响应式处理,会更改原对象的原型链指向。

更新后的流程设计器暂时还没有实现表单项的配置,后面会迭代上来。在原来的基础上增加了全局信号与全局消息事件,至于有新的需求的话,欢迎提 issue,或者关注公众号在后台提给我。


A process designer that depends on bpmn.js , Vue 2.x and ElementUI.

一个基于 bpmn.jsVue 2.xElementUI 开发的流程设计器。

You can view and edit BPMN 2.0 diagrams in the browser.

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

For on line demo, please visit MiyueFE Blog

在线demo请访问 MiyueFE Blog

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

如果您对增加其他功能有建议,或者找到了原有功能的不足之处,您可以通过 issue 或者文末的公众号向我反馈,我会在第一时间对问题作出反馈或者更新。

再次感谢您的支持!

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 - 重置所有编辑过程并清空画布

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

4. 运行截图

4.1 初始界面

image-20210122110458541

4.2 事件监听器

image-20210122110520746

4.3 扩展属性

image-20210122110601001

4.4 流转路径配置

image-20210122110659649

4.5 预览

image-20210122110726482

学习交流

如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。

订阅号名称:前端小白MiyueFE

Repository Comments ( 0 )

Sign in for post a comment

About

Base on Vue 2.x and ElementUI,基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器(前端部分),支持监听器,扩展属性,表单等配置,可自由扩展 expand collapse
Apache-2.0
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more
1
https://gitee.com/liuyadu/bpmn-process-designer.git
git@gitee.com:liuyadu/bpmn-process-designer.git
liuyadu
bpmn-process-designer
bpmn-process-designer
main

Search

181749 a2d7925e 1850385 181749 9f8568a7 1850385