vue3集成bpmn

---

前言

vue3 集成bpmn 配置工作流

一、依赖

“@bpmn-io/add-exporter”: “^0.2.0”,
“@bpmn-io/element-template-chooser”: “^1.0.0”,
“@bpmn-io/properties-panel”: “2.2.1”,
“bpmn-js”: “13.2.0”,
“bpmn-js-bpmnlint”: “0.21.0”,
“bpmn-js-color-picker”: “0.6.0”,
“bpmn-js-connectors-extension”: “^0.4.6”,
“bpmn-js-external-label-modeling”: “^1.0.3”,
“bpmn-js-properties-panel”: “2.1.0”,
“bpmn-js-token-simulation”: “^0.31.0”,
“bpmn-moddle”: “^8.0.1”,
“bpmnlint”: “8.3.2”,
“camunda-bpmn-moddle”: “^7.0.1”,
“diagram-js”: “12.2.0”,
“diagram-js-grid-bg”: “^1.0.1”,
“diagram-js-minimap”: “^4.1.0”

二、设计页面加载

<el-container>
    <el-main >
    <NConfigProvider  abstract  :componentOptions= DynamicInput :hljs=hljs >
      <NDialogProvider>
        <div :class="computedClasses" id="designer-container">
          <NMessageProvider>
            <Toolbar></Toolbar>
            <div class="main-content" >
              <Palette v-if="customPalette.value"></Palette>
              <Designer  v-model=desginModel></Designer>
              <Panel ></Panel>
<!--              <div  class="camunda-penal" id="camunda-penal"></div>-->
            </div>
<!--            <Setting v-model=settingModel></Setting>-->
            <ContextMenu></ContextMenu>
          </NMessageProvider>
        </div>
      </NDialogProvider>
    </NConfigProvider>
    </el-main>
  </el-container>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import ''@/flow/styles/index.scss''
import {defineComponent, computed, ref, onMounted, reactive, toRaw} from ''vue''
import Toolbar from ''@/flow/components/Toolbar''
import Palette from ''@/flow/components/Palette''
import Designer from ''@/flow/components/Designer''
import Panel from ''@/flow/components/Panel''
import Setting from ''@/flow/components/Setting''
import ContextMenu from ''@/flow/components/ContextMenu/index.vue''
import { EditorSettings } from ''types/editor/settings''
import {defaultSettings} from ''@/flow/config''

import hljs from ''highlight.js/lib/core''
import xml from ''highlight.js/lib/languages/xml''
import json from ''highlight.js/lib/languages/json''
import { NConfigProvider, NDialogProvider, NMessageProvider } from ''naive-ui''
import {useBpmnXml} from "@/api/flow/model";
import store from "@/store";
import router from "@/router";

import {useRoute} from "vue-router";
import modeler from "@/flow/store/modeler";
import editor from "@/flow/store/editor";


hljs.registerLanguage(''xml'', xml)
hljs.registerLanguage(''json'', json)
const DynamicInput ={ DynamicInput: { buttonSize: ''small'' } }
const editorSettings = ref<EditorSettings>({ ...defaultSettings })
const processXml = ref<string | undefined>(undefined)
const desginModel =ref([processXml.value,"xml"])
const settingModel = ref([editorSettings.value,''settings''])
const customPalette = computed<boolean>(() => editorSettings.value.paletteMode === ''custom'')
const customPenal = computed<boolean>(() => editorSettings.value.penalMode === ''custom'')
const showToolbar = computed<boolean>(() => editorSettings.value.toolbar)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

1.导入BPMN

代码如下（示例）：

const getBpmn = async () => {
  let modelId = data.query.modelId;
  mode.value= <string>data.query.mod;
  if (modelId) {
    // 获取详细信息
    const editorStore = editor()
    editorStore.getProcessDef.modelId=modelId
    useBpmnXml(modelId).then(res=>{
      if (res.code == 0){
        console.log(res)
        const modelerStore = modeler()
        if(res.data){
        modelerStore.getModeler!.importXML(res.data as string)}
      }
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

总结

如上图所示，基于bpmn.js对bpmn.xml进行解析加载

完善功能

在流程模型设计基础之上，逐步完善了
1.模型设计管理

2.模型历史查看

3.流程部署管理

致此，基于spring boot3 +flowable + vue3 +bpmn.js的业务流管理初版本已成型。

后端服务使用

<dependency>
            <groupId>org.flowable</groupId>
            <artifactId>flowable-spring-boot-starter</artifactId>
            <version>7.0.1</version>
</dependency>
1
2
3
4
5

参见：
bpmn文档
若依 flowable plus
vite-vue-bpmn-process

以上仅学习使用，如有侵权请联系本人删除