在jeecgboot中集成bpmn-process-designer流程设计器-阿里云开发者社区

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

2024-05-10 9

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在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";