@xhuanlee/bpmn-process-designer 0.0.1-beta.1 • Public • Published 3 years ago
Bpmn Process Designer
fork from miyuesc/bpmn-process-designer
友情链接
vue-bpmn-modeler: vue-bpmn-modeler
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
4. 功能说明
工具栏:包含常见操作,比如打开文件、下载文件、预览、对齐方式、缩放管理、撤销删除等
常规信息:id、名称、扩展属性、元素文档
特殊节点属性:
流程全局消息与信号
执行监听器
用户任务节点 任务监听器
表单配置
任务配置
多实例任务
流转条件
内置常用 camunda
,flowable
,activiti
解析文件
自定义左侧元素栏 platte
与弹出菜单 contentPad
示例模块
自定义渲染方法 renderer
模块实例
5. 运行截图
5.1 初始界面
5.2 监听器
5.3 扩展属性
5.4 流转路径配置
5.5 任务配置
5.6 多实例任务
5.8 表单配置
5.9 预览
Package Sidebar Install npm i @xhuanlee/bpmn-process-designer
Downloads Weekly Downloads