0
点赞
收藏
分享

微信扫一扫

在jeecgboot中集成bpmn-process-designer流程设计器


1.将下面地址的代码下载到本地
​​​ https://gitee.com/MiyueSC/bpmn-process-designer#https://github.com/bpmn-io/bpmn-js​​

2.替换dependencies和devDependencies
打开下载的代码,找到package.json里的dependencies,将自己缺少的复制到自己dependencies,另外需要将devDependencies内的bpmn-js和bpmn-js-properties-panel复制到自己的devDependencies内,否则会报错,重新npm install

3.拷贝package目录
将package目录拷贝到您的项目中,如放在src下。这个package是核心文件夹,如果要定制化,都到这里面找。

4.在main.js引入代码

// 加载基础ElementUI,如果您的项目是基于elementUI,则这段代码不需要
import ElementUI from “element-ui”;
Vue.use(ElementUI);
i// 引入bpmn-process-designer插件 add by nbacheng 2022-09-29
import "@/plugins/package/theme/element-variables.scss";
import "@/plugins/package/theme/index.scss";import { vuePlugin } from "@/plugins/package/highlight";
import "highlight.js/styles/atom-one-dark-reasonable.css";
Vue.use(vuePlugin);// 引入bpmn插件
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";

5.拷贝src
将下载的src里面的文件都拷贝到自己项目的src下面,修改引入地址即可。
主要是

在jeecgboot中集成bpmn-process-designer流程设计器_css

 

在jeecgboot中集成bpmn-process-designer流程设计器_css_02

 

6.拷贝App.vue代码
下载的src目录的App.vue就是流程图文件了,将里面的代码拷贝到自己需要使用的文件中,修改引用地址,即集成成功

7、为了兼容原有的流程设计器,所以做了多处修改,包括

ElementBaseInfo.vue

ElementMultiInstance.vue

UserTask.vue

最后效果如下:

在jeecgboot中集成bpmn-process-designer流程设计器_javascript_03

 

举报

相关推荐

0 条评论