bpmn2 vue 设计器_在vue中使用bpmn-js(一)_诺曼叔叔的博客-程序员秘密

技术标签: bpmn2 vue 设计器  

由于之前的公司的项目中的工作流管理要用到流程图,而bpmn-js官方的文档是全英的而且使用的js框架是jQuery,可能是比较新的技术,官方也还在不断的更新,相关的文档或者资料很少很难找,只好自己不断爬坑填坑了。

什么是bpmn-js?

1.先从简单开始,能获取服务器上的流程图并显示出来:

安装相关的依赖都是必须的,可以在官方文档上查看,在这里就不详细讲了。

html: (界面很简单,这些都是必需的。)

js:

// 引入相关的依赖

import BpmnViewer from 'bpmn-js'

import BpmnModeler from 'bpmn-js/lib/Modeler'

import propertiesPanelModule from 'bpmn-js-properties-panel'

import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'

import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

export default {

data(){

return {

// bpmn建模器

bpmnModeler: null,

container: null,

canvas: null

}

},

methods:{

createNewDiagram() {

const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +

'\n' +

' \n' +

' \n' +

' SequenceFlow_0nrfbee\n' +

' \n' +

' \n' +

' SequenceFlow_0nrfbee\n' +

' SequenceFlow_00ho26x\n' +

' \n' +

' \n' +

' SequenceFlow_00ho26x\n' +

' SequenceFlow_18df8vb\n' +

' \n' +

' \n' +

' SequenceFlow_18df8vb\n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

'\n'

// 将字符串转换成图显示出来

this.bpmnModeler.importXML(bpmnXmlStr, function (err) {

if (err) {

console.error(err);

}

else {

// 这里还没用到这个,先注释掉吧

// that.success()

}

})

}

},

mounted(){

// 获取到属性ref为“content”的dom节点

this.container = this.$refs.content

// 获取到属性ref为“canvas”的dom节点

const canvas = this.$refs.canvas

// 建模,官方文档这里讲的很详细

this.bpmnModeler = new BpmnModeler({

container: canvas,

//添加控制板

propertiesPanel: {

parent: '#js-properties-panel'

},

additionalModules: [

// 左边工具栏以及节点

propertiesProviderModule,

// 右边的工具栏

propertiesPanelModule

],

moddleExtensions: {

camunda: camundaModdleDescriptor

}

});

this.createNewDiagram(this.bpmnModeler);

}

}

css: (记得引入样式,否则左边的工具栏无法显示T_T 别问我怎么知道的)

/*左边工具栏以及编辑节点的样式*/

@import 'bpmn-js/dist/assets/diagram-js.css';

@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';

@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

/*右边工具栏样式*/

@import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

.containers{

position: absolute;

background-color: #ffffff;

width: 100%;

height: 100%;

}

.canvas{

width: 100%;

height: 100%;

}

.panel{

position: absolute;

right: 0;

top: 0;

width: 300px;

}

有图有真相

完整项目地址:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42361495/article/details/111968610

智能推荐

UnicodeEncodeError: ‘ascii‘ codec can‘t encode characters in position问题的解决办法_jazz2013的博客-程序员秘密

UnicodeEncodeError: 'ascii' codec can't encode characters in position问题的解决办法

VS2013打开老版本的VC++6.0遇到错误:“CException”: 不能实例化抽象类_wwwlyj123321的博客-程序员秘密

说明:工程在vc6++6.0编译通过,在2013版本中出现“CException”: 不能实例化抽象类 的错误。VS2003之后的版本中,CException的定义与VC++6.0中不同。用一个CException派生类代替CException。CDib中把“throw new CException ”中的CException改为CFileException就可以了。

FPGA驱动DAC芯片输出(以TLV5618为例)_StrangerZhou1的博客-程序员秘密_dac fpga

一、任务使用FPGA芯片控制DAC采集芯片,输出指定的电压值。二、硬件部分为了将FPGA输出的数字电压转换成模拟电压,我们使用到了数模转换芯片(简称DAC)TLV5618。进行设计前,我们先到网上检索并查看了该芯片的数据手册。1.芯片功能图2.端口功能表从功能图和功能表中我们可以看出,TLV5618有四个输入端口:片选信号CS、数据串行输入端口DIN、模拟参考电压REF、数字时钟SCLK。两个输出端分别为OUTA和OUTB,均为对应的模拟电压输出端。3.时序图从时序图中我们可以看到

【简单表格分页功能】前端用springboot写一个简单的表格分页功能并交互显示在网页上【详细注释,简易版本】_接口写好了吗的博客-程序员秘密_springboot分页前端代码

提醒:如果前端小伙伴没有看懂这里一些逻辑和功能什么意思的,建议先去看我另一个帖子,里面详细注释用前端听得懂的话说了一遍后端的创建项目后各个文件是干什么用的,以及接口返回数据等逻辑,看了你再来看这个就会明白了。哪里说的很详细了,这里有些就不详细再说一遍了。如果看完了还是不理解可以问,我会的话就跟你说。帖子:【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释,详细注释,谁都看得懂】如果不知道实体类是啥的,可以理解成就是前端的对象。流程逻辑解释:用前端听的懂的大白

图解!一文彻底弄懂九大常见数据结构!_吃鱼的羊的博客-程序员秘密

https://www.sohu.com/a/403025294_120052431数据结构想必大家都不会陌生,对于一个成熟的程序员而言,熟悉和掌握数据结构和算法也是基本功之一。数据结构本身其实不过是数据按照特点关系进行存储或者组织的集合,特殊的结构在不同的应用场景中往往会带来不一样的处理效率。常用的数据结构可根据数据访问的特点分为线性结构和非线性结构。线性结构包括常见的链表、栈、队列等,非线性结构包括树、图等。数据结构种类繁多,本文将通过图解的方式对常用的数据结构进行理论上的介绍和讲解,以方便大家

C++ 动态数组_恋恋风辰的博客-程序员秘密_c++动态数组

C++语言和标准库提供了两种一次分配一个对象数组的方法。C++语言定义了另一种new表达式语法,可以分配并初始化一个对象数组。标准库中包含一个名为allocator的类,允许我们将分配和初始化分离。使用allocator通常会提供更好的性能和更灵活的内存管理能力。new和数组为了让new分配一个对象数组,我们要在类型名之后跟一对方括号,在其中指明要分配的对象的数目。在下例中,new分配要求数量的对象并(假定分配成功后)返回指向第一个对象的指针:int get_size_new(){ ret

随便推点

深度学习-20:神经科学、脑科学和稀疏特性_MTVideoAI的博客-程序员秘密

深度学习-20:神经科学、脑科学和稀疏特性CSDN专栏: 机器学习&amp;amp;amp;amp;amp;amp;深度学习(理论/实践)第二次世界大战之后,美苏在全维度展开了霸权竞赛,人工智能研究伴随着计算机的发展也开始进入佳境。经过经过半个多世纪的发展,人工智能逐渐形成:符号学派、贝叶斯学派和联结学派三个流派。符号学派:以谓词逻辑表示法理论为基础的符号主义占据了绝对的主流,但是到了上世纪90年代,符号主义具有的先天缺陷开...

Bootstrap(前端开发框架)_顾轻舟。的博客-程序员秘密_前端bootstrap框架

目录前端框架的理解一、3个WWW1、what?是什么2、why?为什么使用3、where?使用领域二、环境安装1、下载Bootstrap库2、页面中引入库三、案例以网上书城为例案例1:查询按钮原生态实现对比Bootstrap方式实现案例2:演示Bootstrap页面在手机浏览器中展示效果 案例3:首页导航&amp;搜索区域原生态实现(div+css)案例4:首页导航&amp;搜索区域Bootstrap实现&amp;搭首页框架前端框架的理解...

空间音频技术是如何增强沉浸式体验的?| ARVR_shadowcz007的博客-程序员秘密

- Apple的3D声音Apple正在开发一种新的音频格式,即使在用户移动,戴着“ Apple Glass ”或其他AR设备时,也可以更轻松沉浸式地在用户周围放置“3d声音”。Apple...