bpmn.js整合bpmn-js-lint

ruoyi-ui/package.json

@@ -39,6 +39,10 @@
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "bpmn-js": "^11.1.0",
+    "bpmnlint": "^6.4.0",
+    "bpmn-js-bpmnlint": "^0.15.0",
+    "bpmnlint-loader": "^0.1.4",
+    "file-drops": "^0.4.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "diagram-js": "^11.4.1",

ruoyi-ui/src/components/Process/.bpmnlintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "bpmnlint:recommended"
+}

ruoyi-ui/src/components/Process/index.vue

@@ -29,6 +29,7 @@
             </el-tooltip>
           </div>
           <div>
+            <el-button size="mini" icon="el-icon-s-check" @click="verifyXML">校验xml</el-button>
             <el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button>
             <el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
             <el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
@@ -51,7 +52,9 @@
 <script>
 // 汉化
 import customTranslate from './common/customTranslate'
+import lintModule from 'bpmn-js-bpmnlint';
 import Modeler from 'bpmn-js/lib/Modeler'
+import bpmnlintConfig from './.bpmnlintrc';
 import panel from './PropertyPanel'
 import getInitStr from './flowable/init'
 // 引入flowable的节点文件
@@ -107,11 +110,15 @@ export default {
     this.modeler = new Modeler({
       container: this.$refs.canvas,
       additionalModules: [
+        lintModule,
         customControlsModule,
         { //汉化
           translate: ['value', customTranslate]
         },
       ],
+      linting: {
+        bpmnlint: bpmnlintConfig
+      },
       moddleExtensions: {
         flowable: FlowableModule
       }
@@ -179,6 +186,11 @@ export default {
         if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
       }
     },
+    async verifyXML(){
+      const linting = this.modeler.get('linting')
+      console.log(linting)
+      linting.toggle(true);
+    },
     async saveXML(download = false) {
       try {
         const { xml } = await this.modeler.saveXML({ format: true })
@@ -243,6 +255,7 @@ export default {
 @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";
+@import "~bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css";
 .view-mode {
   .el-header, .el-aside, .djs-palette, .bjs-powered-by {
     display: none;
@@ -289,7 +302,7 @@ export default {
   }
 
   .djs-container svg {
-    min-height: 650px;
+    //min-height: 650px;
   }
 
    .highlight.djs-shape .djs-visual > :nth-child(1) {

ruoyi-ui/vue.config.js

@@ -89,6 +89,12 @@ module.exports = {
         symbolId: 'icon-[name]'
       })
       .end()
+    config.module
+      .rule('bpmnlintrc')
+      .test(/\.bpmnlintrc$/)
+      .use('bpmnlint-loader')
+      .loader('bpmnlint-loader')
+      .end()
 
     config
       .when(process.env.NODE_ENV !== 'development',