bpmn2 vue 设计器_vue-activiti-demo

前端：vue+bpmn-js实现activiti的流程设计器，后端Springboot+Activiti开发工作流

前端：vue + bpmn-js项目，实现activiti设计器， 后端： springboot + activiti

ps: 咋都没有人issues里提问呢？

鉴于广大程序员们开发设计器苦不堪言以及后端不知道怎么解析自定义属性，于是我就开发了这个基础版本的demo，供广大程序员们学习用，如果有问题请在issue中提问👏👏👏

项目中有什么问题欢迎指出，也欢迎👏👏👏大家帮我一起完善demo

看我这么辛苦为你们整理demo，不给个star你们肯定都不好意思😄😄😄

如果你是后端开发，请从最后面开始往上看😄

一 前端启动项目🌟

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

二 详细介绍🌟

关于bpmn-js如何使用建议搭建去github上面搜索，这里贴上官网地址： https://github.com/bpmn-io/bpmn-js

由于bpmn-js官方是适配camunda的，所以对activiti存在不兼容的地方，为了让bpmn-js能使用activiti，我们需要在BpmnModeler中扩展activiti 主要代码如下：

import activitiModdleDescriptor from '../js/activiti.json';

this.bpmnModeler = new BpmnModeler({

container: canvas,

//添加属性面板，添加翻译模块

additionalModules: [

customTranslateModule,

customControlsModule

],

//模块拓展，拓展activiti的描述

moddleExtensions: {

activiti: activitiModdleDescriptor

}

});

1 关于activiti.json文件怎么配置🌟

{

"name": "Activiti", // 标识是activiti

"uri": "http://activiti.org/bpmn", // 添加activiti的命名空间

"prefix": "activiti", // 属性前缀

"xml": {

"tagAlias": "lowerCase"

},

"associations": [],

"types": [

{

"name": "Process", // 标签

"isAbstract": true,

"extends": [

"bpmn:Process" // 继承自

],

"properties": [ // 这个标签的属性

{

"name": "candidateStarterGroups", // 属性名