关于java:没有一个顺手的流程绘制工具好吧自己动手丰衣足食

38次阅读

共计 4774 个字符，预计需要花费 12 分钟才能阅读完成。

流程绘制工具感觉也挺罕用的，而且流程图基本上也都标准化了，标准化的货色其实是最容易做的，然而 IDEA 上却始终没有一个称手的流程绘制工具，其实这也是一个机会吧哈哈，本人搞一个 IDEA 插件～

不过这个机会留给各位正在浏览本文的小伙伴吧，松哥明天跟大家介绍另外一个工具 bpmn.js，利用这个，再联合大家相熟的 Vue，咱们就能够开发出一个本人的流程绘制工具，一起来看下。

先看下效果图：

好了，不废话了，开搞！

1. bpmn.js

bpmn.js 是一个工具包，利用这个工具包，咱们能够十分不便的在浏览器中创立、嵌入或者扩大一个 BPMN 流程图，重要的是，这个过程十分 Easy，咱们只须要大量代码即可实现这一指标。

不晓得看文章的小伙伴们日常工作中接触流程图多不多，如果常常接触的话，我预计有不少小伙伴可能都见过基于 bpmn.js 构建进去的流程图绘制工具。

因为 flowable-ui 这种太重量级了，如果咱们单纯的只是想在本人的我的项目中嵌入一个流程绘制工具，那么显然 bpmn.js 是最佳抉择。

网上其实也有不少对于 bpmn.js 的文章，不过当和 Vue 整合的时候，基本上都用的是 Vue2，而这个工具在 Vue2 和 Vue3 的应用中，还是有不少差别的，明天松哥就以 Vue3 为例，来和小伙伴们分享一下这个工具在 Vue3 中的应用。

2. + Vue3

2.1 我的项目创立

首先咱们执行如下命令，来创立一个 Vue3 我的项目：

npm create vite@latest bpmn_demo --template vue
cd bpmn_demo
npm install
npm run dev

创立实现后，咱们先来装上 bpmn.js 所须要的依赖，一共是三个依赖：

  • bpmn-js

这是最外围的流程绘制工具了。

  • bpmn-js-properties-panel

这是 bpmn-js 的属性面板，流程图中的每一个节点都有属性，如果须要配置这些数据，就须要用到这个依赖，小伙伴们看看下图中左边的局部，就是这个依赖实现的性能：

  • camunda-bpmn-moddle

如果你的流程引擎应用了 Camunda，那么能够通过 camunda-bpmn-moddle 模块来配置该流程所反对的工作属性。

好啦，废话不多说，先把这三个依赖顺次装置上：

npm install bpmn-js
npm install bpmn-js-properties-panel
npm install camunda-bpmn-moddle

另外，松哥亲测，还须要装置 @bpmn-io/properties-panel 和 inherits 用以解决依赖外部的兼容性问题，装置命令如下：

npm i @bpmn-io/properties-panel
npm i inherits

另外，我的项目中用到了一个 ElementUI 的按钮，所以须要装置上 ElementUI-Plus，如下：

npm install element-plus --save

装好之后，我给大家看下我装置的版本，都是目前最新版：

{
  "name": "bpmn_demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@bpmn-io/properties-panel": "^0.19.0",
    "bpmn-js": "^9.4.0",
    "bpmn-js-properties-panel": "^1.5.0",
    "camunda-bpmn-moddle": "^6.1.2",
    "element-plus": "^2.2.14",
    "inherits": "^2.0.4",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "vite": "^3.0.7"
  }
}

松哥亲测，如果应用 Webpack 而不是 Vite 来构建我的项目的话，那么能够不必装置 inherits，这个小伙伴们依据本人的理论状况装置即可，我的项目创立实现后，如果提醒短少这个组件就装置一下，如果不提醒那就疏忽即可。

2.2 开发页面

用 Vite 新建的我的项目默认没有装置路由，配路由也比拟麻烦，所以我这里就省事一些，我间接新建一个组件来写咱们的页面，未来在 App.vue 中引入我这个新建的组件即可。

首先我新建一个名为 BpmnView 的组件，而后在这个组件中配置 bpmn.js，内容如下：


<div>
    <div class="containers" style="display: flex;width:100%;height: 96vh">
        <div class="canvas" style="width: 100%" id="canvas"></div>
        <div id="properties">
        </div>
    </div>
    <div style="display:flex;justify-content: flex-end">
        <el-button @click="downloadXML" type="primary" :icon="Download"> 下载 </el-button>
    </div>
</div>

小伙伴们看到，这个页面整体上分为两局部，下面是咱们绘制的主区域，包含绘图区以及属性设置区；上面则放了一个下载流程图 XML 文件的按钮。

在下面的主绘制区，咱们放了两个货色，一个是画布 canvas，另一个是属性 properties，canvas 就是流程图绘制时候的外围区域，properties 则是流程中的每一个节点的属性配置。

参考下图，大家就晓得 canvas 和 properties 别离示意什么了：

接下来咱们先来初始化右边的 canvas。

2.2.1 canvas

首先咱们来看下右边的 Canvas 该如何初始化。

<script setup>
    import {onMounted} from 'vue';

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

    let bpmnModeler;
    onMounted(() => {
        // 建模
        bpmnModeler = new BpmnModeler({container: '#canvas'})
        bpmnModeler.createDiagram();})
</script>

这个初始化工作在 onMounted 回调中实现。

  1. 创立 BpmnModeler 并设置画布。
  2. 调用 createDiagram 办法开始绘图。

配置实现后，还要记得在 main.js 中引入款式文件，如下：

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'

当初就能够了，右边能够开始画流程图了。

2.2.2 properties

再来看左边属性的配置。

首先在 main.js 中退出左边属性的款式文件：

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

而后持续在 BpmnView.vue 中进行配置即可：

<script setup>
    import {onMounted} from 'vue';

    import BpmnModeler from 'bpmn-js/lib/Modeler';
    import {
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule
    } from 'bpmn-js-properties-panel';
    import CamundaExtensionModule from 'camunda-bpmn-moddle/lib';
    import camundaModdleDescriptors from 'camunda-bpmn-moddle/resources/camunda';

    let bpmnModeler;
    onMounted(() => {
        // 建模
        bpmnModeler = new BpmnModeler({
            container: '#canvas', propertiesPanel: {parent: '#properties'},
            additionalModules: [
                BpmnPropertiesPanelModule,
                BpmnPropertiesProviderModule,
                CamundaPlatformPropertiesProviderModule,
                CamundaExtensionModule
            ],
            moddleExtensions: {camunda: camundaModdleDescriptors}
        })
        bpmnModeler.createDiagram();})
</script>

在创立 BpmnModeler 的时候，通过 propertiesPanel 去指定 parent 的地位，再把另外五个额定的模块挂载下来就行了，这五个模块别离代表不同的属性，我就不挨个说了，小伙伴们能够自行尝试删除掉一个属性，看看哪些属性少了，就晓得这个模块的性能了。

2.2.3 下载按钮

最初再来看看下载按钮的点击事件。

function downloadXML() {bpmnModeler.saveXML({format: true}, (err, xml) => {if (!err) {console.log(xml);
            // 获取文件名
            const name = getFileName(xml);
            // 把输就转换为 URI，下载要用到的
            const encodedData = encodeURIComponent(xml);
            const downloadLink = document.createElement('a');
            if (xml) {
                // 将数据给到链接
                downloadLink.href =
                    "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
                // 设置文件名
                downloadLink.download = name;
                // 触发点击事件开始下载
                downloadLink.click();}
        }
    })
}
function getFileName(xml) {let split = xml.split('process id="');
    return split[1].split('"')[0]+".bpmn20.xml";
}

调用 bpmnModeler.saveXML 办法，回调中的 xml 参数就是生成的流程图 XML 文件，而后创立一个虚构的 a 标签，模仿一个点击事件即可实现下载。

getFileName 办法则是从下载的 XML 文件中截取进去 bpmn:process 标签的 id 值作为文件名，这也合乎咱们日常的命名习惯。

好啦，功败垂成！当前就能够应用咱们本人的流程绘制工具来画流程图了。

不过有一个小小遗憾，就是这个是针对 Camunda 这个流程引擎的，如果所以他画进去的流程图并不能间接用在 Flowable 中，如果想在 Flowable 中应用，还须要一点额定的定制，这个咱们当前再说。

3. 小结

bpmn.js 最大的劣势在于能够依据本人我的项目的需要，不便的嵌入到已有我的项目中。好啦，公众号江南一点雨后盾回复 bpmn_demo 能够下载文本残缺案例。

正文完
java
发表至： java
2022-08-29
 0
关于java:解决-MySQL-MyBatisPlus-分页数据重复问题
这个Maven依赖的问题你敢说你没遇到过
关于java:工作两年如果你连java中的这些String都不知道那你有点危险了
关于java:mysql从0到01SQL是怎么执行的下