简介

本项目是一款基于 bpmn.js 的流程设计器。 在线预览

• 暂不提供源码
• 支持 设计/预览 模式
• 支持camunda，flowable，activiti的基本xml配置
• 由于本人对流程引擎配置了解有限，缺少什么配置欢迎提issue，并附上xml。感谢！

依赖（请自行安装）

element-ui 2.13.2+

$ npm i element-ui

或自行引入 cdn

安装

组件

$ npm i @sscfaith/vue-bpmn
或
$ yarn add @sscfaith/vue-bpmn

源码

github

$ yarn
$ yarn serve

html

详见 examples

使用

import VueBpmn from "@sscfaith/vue-bpmn"

export default {
  components: { VueBpmn }
}

<vue-bpmn style="height: 100vh;"
          option="option"
          storage></vue-bpmn>

属性

参数	说明	类型	默认值
option	组件配置（详情见下）	Object	{}
storage	开启缓存配置	Boolean	false

option 字段配置

参数	说明	类型	默认值	可选值
mode	设计/预览模式	String	'edit'	'edit', 'view'
toolbar	顶部工具栏	Array	['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview', 'get', 'download-xml', 'download-svg']	-
engine	流程引擎	String	'camunda'	'camunda', 'flowable', 'activiti'
xml	初始xml	String	''	-
lint	是否开启模型校验	Boolean	true	true/false
flows	流转节点颜色配置(mode='view')时生效	Array	[]	-

flows 字段配置

属性	说明	类型	可选值
id	节点id	String	-
class	节点class名（可自定义）	String	'nodeSuccess', 'nodeWarn', 'nodeError', 'lineSuccess', 'lineWarn', 'lineError'
tips	节点提示	String	-

事件

名称	说明	回调参数
get	获取xml回调	当前配置的xml

TODO

• 支持 设计/预览 模式
• 支持camunda，flowable，activiti的基本xml配置

流程配置

• id 流程id
• name 名称
• document 描述

Start Event

• id 节点id
• name 名称
• document 描述
• executionListener 执行监听
• form 表单配置

Sequence Flow

• id 节点id
• name 名称
• document 描述
• conditionExpression 流转条件
• executionListener 执行监听

Gateway

• id 节点id
• name 名称
• document 描述

User Task

• id 节点id
• name 名称
• document 描述
• assignee 审批人（目前只支持填写）
• candidateUsers 候选用户（目前只支持填写）
• candidateGroups 候选用户组（目前只支持填写）
• multiInstanceLoopCharacteristics 多实例
• loopCardinality 多实例 - 循环基数
• collection 多实例 - 集合
• elementVariable 多实例 - 元素变量
• completionCondition 多实例 - 完成条件
• taskListener 任务监听
• executionListener 执行监听
• form 表单配置

捐赠

如果你觉得本项目帮助到你的话，可以给作者买杯咖啡。

License

MIT Copyright (c) 2020-present SSC([email protected])