Bpmn-design-antd NPM

Bpmn Process Designer

A process designer that depends on bpmn.js , Vue 2.x and ant-design-vue.

一个基于 bpmn.js，Vue 2.x 和 ant-design-vue 开发的流程设计器。

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

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

由于个人精力有限，除bug之外，该项目不再维护新功能

在大佬Element的版本基础上修改为ant-design-vue版本，并进行了二次封装，基本文档请参考Gitee/MiyueSC Process Designer

1. 安装

yarn add bpmn-design-antd
// or yarn install

2. 本地运行

yarn
yarn demo
// or yarn install

4.使用说明（最简 demo）

4.1人员选择、组任务、多实例集合选择支持插槽方式

<template>
   <div>
      <BpmnDesignAntd ref="BpmnDesignAntd" :design="design" v-model="flowXml" style="width:100%;height:100%;">
         <!-- 人员、角色选择没有封装到组件内，可以通过传参的方式来传递人员列表，也可以通过这种插槽的方式 -->
         <!-- 使用插槽需要自己手动把值更新到xml上 -->
         <!-- 办理人 -->
         <template #assignee="{assignee}">
            <BpmnUser key="assignee" :multi="false" :value="assignee" @change="handleEditTask('assignee',$event)" />
         </template>
         <!-- 候选用户 -->
         <template #candidateUsers="{candidateUsers}">
            <BpmnUser key="candidateUsers" :multi="false" :value="candidateUsers" @change="handleEditTask('candidateUsers',$event)" />
         </template>
         <!-- 候选组 -->
         <template #candidateGroups="{candidateGroups}">
            <JSelectRole :value="candidateGroups" @change="handleEditTask('candidateGroups',$event)" />
         </template>
         <!-- 会签人员列表 -->
         <template #collection="{collection}">
            <BpmnUser key="collection" :value="collection" @change="handleEditCollection" />
         </template>
      </BpmnDesignAntd>
   </div>
</template>
<script>
import 'bpmn-design-antd/lib/bpmn-design-antd.css'
import { BpmnDesignAntd } from "bpmn-design-antd"
export default {
  components: {
    BpmnDesignAntd
  },
  data(){
     return {
        flowXml: "", // 后端查询到的xml
        design:{
            processId: '', //流程编码
            processName: '',//流程名称
            simulation: true,
            labelEditing: false,
            labelVisible: false,
            prefix: 'activiti',
            headerButtonSize: 'small'
        }
     }
  },
  methods: {
     handleEditTask(key, val) {
        //人员，角色插槽选择用updateElementTask方法来更新数据
      this.$refs.BpmnDesignAntd.updateElementTask(key, val)
    },
    handleEditCollection(val) {
       //多实例集合选择用updateLoop方法来更新数据
      if (val) {
        this.$refs.BpmnDesignAntd.updateLoop('collection', '${testUser.resolveUsersForTask(execution,"' + val + '")}')
      } else {
        this.$refs.BpmnDesignAntd.updateLoop('collection', '')
      }
    }
  }
}

3. 文档说明 Documentation

3.1 BpmnDesignAntd

3.1.1 Attributes

Attribute	Description	Type	Accepted Values	Default
`value/v-model`	初始化流程对应的 `xml` 字符串	String	-	-
`design`	MyProcessDesigner组件对象		Object	-
`penal`	MyProcessPenal组件对象		Object	-

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. 文档说明 Documentation

3.1 MyProcessDesigner(因打包的时候，组装过一次，所有参数都放到BpmnDesignAntd组件design对象下)

3.1.1 Attributes

Attribute	Description	Type	Accepted Values	Default
`value/v-model`	初始化流程对应的 `xml` 字符串	String	-	-
`design.translations`	翻译文件	Object	-	zh.js
`design.additionalModel`	自定义的附加模块	Object[] / Object	-	-
`design.moddleExtension`	自定义的扩展模块	Object	-	-
`design.onlyCustomizeAddi`	仅使用开发时的自定义附加模块	Boolean	-	`false`
`design.onlyCustomizeModdle`	仅使用开发时的自定义扩展模块	Boolean	-	`false`
`design.prefix`	流程引擎对应扩展属性前缀	String	`camunda`, `activiti`, `flowable`	`design.camunda`
`design.events`	需要使用的事件列表，可用事件见 Bpmn.js 中文文档	Array	-	`[element.click]`
`design.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(因打包的时候，组装过一次，所有参数都放到BpmnDesignAntd组件penal对象下)

3.2.1 Attributes

Attribute	Description	Type	Accepted Values	Default
`bpmn-modeler`	初始化生成的 `modeler` 实例，必须	Object	-	-
`penal.prefix`	流程引擎对应扩展属性前缀	String	`camunda`, `activiti`, `flowable`	`camunda`
`penal.width`	侧边栏宽度	Number	-	480
`penal.assignee`	办理人列表	Array	-	[]
`penal.candidateUsers`	候选人列表	Array	-	[]
`penal.candidateGroups`	组人员列表	Array	-	[]