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>

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.导入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)}
      }
    })
  }
}

总结

如上图所示，基于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>

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

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