添加自定义流程相关字段

ruoyi-ui/src/views/bpmprocess/components/preview.vue

@@ -7,7 +7,7 @@
       >缩小</el-button
     >
     <el-button type="info" size="small" @click="handleZoom(1)">适中</el-button>
-    <div class="canvas" ref="canvas"></div>
+    <div id="canvas" class="canvas" ref="canvas"></div>
   </div>
 </template>
 
@@ -24,7 +24,7 @@ export default {
   watch: {},
   created() {},
   methods: {
-    getImg(xmlUrl) {
+    async getImg(xmlUrl) {
       this.bpmnViewer && this.bpmnViewer.destroy();
       // this.$refs.canvas.innerHTML = "";
       this.scale = 1; // 放大缩小比例
@@ -51,11 +51,14 @@ export default {
           self.setNodeColor(nodeCodes, "nodeSuccess", canvas);
         }
       });
+      await this.preventMenu();
     },
     // 设置高亮颜色的class
     setNodeColor(nodeCodes, colorClass, canvas) {
       for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
+        try {
+          canvas.addMarker(nodeCodes[i], colorClass);
+        } catch (error) {}
       }
     },
     // 放大缩小，这里尽量设置flag的值小一点，这样每次放大缩小不会很多，避免放大超出父元素
@@ -79,13 +82,12 @@ export default {
     Provence(ev) {
       ev.preventDefault();
     },
-  },
-  async mounted() {
-    document.body.addEventListener("contextmenu", this.Provence);
-    // this.xmlString = xmlStr;
-  },
-  beforeDestroy() {
-    document.body.removeEventListener("contextmenu", this.Provence);
+    async preventMenu() {
+      document.body.addEventListener("contextmenu", this.Provence);
+    },
+    destroyPreventMenu() {
+      document.body.removeEventListener("contextmenu", this.Provence);
+    },
   },
 };
 </script>

ruoyi-ui/src/views/bpmprocess/index.vue

@@ -614,6 +614,7 @@ export default {
     },
     // 关闭预览回调
     preCloseHandler() {
+      this.$refs.previewRef.destroyPreventMenu();
       this.preOpen = false;
     },
   },

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementGenerations.vue

@@ -26,6 +26,49 @@
           @change="updateElementVersion"
         />
       </edit-item>
+      <edit-item key="note" label="版本描述">
+        <el-input
+          v-model="elementNote"
+          maxlength="20"
+          @change="updateElementNote"
+        />
+      </edit-item>
+      <edit-item key="startEventType" label="启动事件">
+        <el-select
+          v-model="startEventType"
+          value-key="value"
+          placeholder="请选择启动事件类型"
+          clearable
+          filterable
+          @change="updateStartEventType"
+        >
+          <el-option
+            v-for="item in dict.type.bpm_start_event_type"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </edit-item>
+      <edit-item key="bpmType" label="流程类型">
+        <el-select
+          v-model="bpmType"
+          value-key="value"
+          placeholder="请选择流程类型"
+          clearable
+          filterable
+          @change="updateBpmType"
+        >
+          <el-option
+            v-for="item in dict.type.bpm_type"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </edit-item>
 
       <edit-item key="executable" label="可执行">
         <el-switch
@@ -47,16 +90,28 @@ import {
   setProcessVersionTag,
 } from "@packages/bo-utils/processUtil";
 import { setIdValue } from "@packages/bo-utils/idUtil";
+import {
+  setNoteValue,
+  getNoteValue,
+  getStartEventType,
+  setStartEventType,
+  getBpmType,
+  setBpmType,
+} from "@packages/bo-utils/myFieldUtil";
 import EventEmitter from "@utils/EventEmitter";
 import { getActive } from "@packages/bpmn-utils/BpmnDesignerUtils";
 
 export default {
   name: "ElementGenerations",
+  dicts: ["bpm_type", "bpm_start_event_type"],
   data() {
     return {
       elementId: "",
       elementName: "",
       elementVersion: "",
+      elementNote: "",
+      startEventType: "",
+      bpmType: "",
       elementExecutable: true,
       isProcess: false,
     };
@@ -71,8 +126,12 @@ export default {
       this.isProcess = !!getActive() && getActive().type === "bpmn:Process";
       this.elementId = getActive().id;
       this.elementName = getNameValue(getActive()) || "";
+
       if (this.isProcess) {
         this.elementExecutable = getProcessExecutable(getActive());
+        this.elementNote = getNoteValue(getActive()) || "";
+        this.startEventType = getStartEventType(getActive()) || "";
+        this.bpmType = getBpmType(getActive()) || "";
         this.elementVersion = getProcessVersionTag(getActive()) || "";
       }
     },
@@ -90,6 +149,16 @@ export default {
         catchError("版本号必须符合语义化版本2.0.0 要点");
       }
     },
+    // 自定义字段
+    updateElementNote(value) {
+      setNoteValue(getActive(), value);
+    },
+    updateStartEventType(value) {
+      setStartEventType(getActive(), value);
+    },
+    updateBpmType(value) {
+      setBpmType(getActive(), value);
+    },
     updateElementExecutable(value) {
       setProcessExecutable(getActive(), value);
     },

ruoyi-ui/src/views/system/bpmnPro/components/Toolbar/tools/Save.vue

@@ -1,6 +1,6 @@
 <template>
   <el-button @click="saveHandler" type="primary" size="small"
-  >保存
+    >保存
     <!-- <div class="button-list_column">
         <el-button type="primary" size="small" @click="getProcessAsBpmn"
           >导出为 Bpmn</el-button
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import {downloadFile, setEncoded} from "@utils/files";
-import {mapGetters} from "vuex";
-import {addProcess, updateProcess} from "@/api/bpmprocess/process";
+import { downloadFile, setEncoded } from "@utils/files";
+import { mapGetters } from "vuex";
+import { addProcess, updateProcess } from "@/api/bpmprocess/process";
 import xml from "highlight.js/lib/languages/xml";
-
+import { getProcessEngine } from "@packages/bpmn-utils/BpmnDesignerUtils";
 export default {
   name: "BpmnSave",
   computed: {
@@ -28,8 +28,8 @@ export default {
   },
   inject: {
     formData: {
-      from: 'formData'
-    }
+      from: "formData",
+    },
   },
   methods: {
     async getProcess(type, name = "diagram") {
@@ -39,7 +39,7 @@ export default {
         const modeler = this.getModeler;
         // 按需要类型创建文件并下载
         if (type === "xml" || type === "bpmn") {
-          const {err, xml} = await modeler.saveXML();
+          const { err, xml } = await modeler.saveXML();
           // 读取异常时抛出异常
           if (err) {
             console.error(`[Process Designer Warn ]: ${err.message || err}`);
@@ -49,7 +49,7 @@ export default {
           // downloadFile(href, filename);
           return xml;
         } else {
-          const {err, svg} = await modeler.saveSVG();
+          const { err, svg } = await modeler.saveSVG();
           // 读取异常时抛出异常
           if (err) {
             console.error(err);
@@ -78,7 +78,7 @@ export default {
       try {
         if (!this.getModeler)
           return this.$message.error("流程图引擎初始化失败");
-        const {xml} = await this.getModeler.saveXML({
+        const { xml } = await this.getModeler.saveXML({
           format: true,
           preamble: true,
         });
@@ -90,12 +90,22 @@ export default {
     },
     async saveHandler() {
       let _this = this;
-      let formData = _this.formData() || {};  // 当前流程表单详细数据
+      let formData = _this.formData() || {}; // 当前流程表单详细数据
       let processJsonObj = await this.getProcessJson(); // xml标签转换json
+      console.log(processJsonObj);
       formData.processJson = JSON.stringify(processJsonObj);
-      let {rootElements} = processJsonObj.rootElement;
-      formData.processKey = rootElements[0].id;// 流程编号
-      formData.processName = rootElements[0].name;// 流程名称
+      let { rootElements, warnings } = processJsonObj.rootElement;
+      formData.processKey = rootElements[0].id; // 流程编号
+      formData.processName = rootElements[0].name; // 流程名称
+      if (warnings && Object.keys(warnings).length) {
+        let prefix = getProcessEngine();
+        warnings[`${prefix}:note`] &&
+          (formData.note = warnings[`${prefix}:note`]);
+        warnings[`${prefix}:startEventType`] &&
+          (formData.note = warnings[`${prefix}:startEventType`]);
+        warnings[`${prefix}:bpmType`] &&
+          (formData.note = warnings[`${prefix}:bpmType`]);
+      }
       formData.processType = "0"; //流程类型
       // 获取xml标签内容标签内容
       let xmlPro = await this.getProcess("xml");
@@ -108,7 +118,7 @@ export default {
       const subformData = new FormData();
       // 循环赋值
       for (let key in formData) {
-        subformData.append(key, formData[key] == null ? '' : formData[key]);
+        subformData.append(key, formData[key] == null ? "" : formData[key]);
       }
       if (formData?.processId) {
         updateProcess(subformData).then((res) => {
@@ -127,7 +137,6 @@ export default {
           }
         });
       }
-
     },
   },
 };

ruoyi-ui/src/views/system/bpmnPro/components/bo-utils/myFieldUtil.js

@@ -0,0 +1,53 @@
+import { catchError } from "@utils/printCatch";
+import { getModeler, getProcessEngine } from "@packages/bpmn-utils/BpmnDesignerUtils";
+import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil";
+import { getBusinessObject, is } from "bpmn-js/lib/util/ModelUtil";
+import { add as collectionAdd } from "diagram-js/lib/util/Collections";
+
+
+// 版本描述
+export function getNoteValue(element) {
+  const prefix = getProcessEngine();
+  return element.businessObject.get(`${prefix}:note`);
+}
+
+export function setNoteValue(element, value) {
+
+  const modeling = getModeler.getModeling();
+  const prefix = getProcessEngine();
+
+  modeling.updateProperties(element, {
+    [`${prefix}:note`]: value
+  });
+}
+// 开始事件类型
+export function getStartEventType(element) {
+  const prefix = getProcessEngine();
+  return element.businessObject.get(`${prefix}:startEventType`);
+}
+
+export function setStartEventType(element, value) {
+
+  const modeling = getModeler.getModeling();
+  const prefix = getProcessEngine();
+
+  modeling.updateProperties(element, {
+    [`${prefix}:startEventType`]: value
+  });
+}
+// 流程类型
+export function getBpmType(element) {
+  const prefix = getProcessEngine();
+  return element.businessObject.get(`${prefix}:bpmType`);
+}
+
+export function setBpmType(element, value) {
+
+  const modeling = getModeler.getModeling();
+  const prefix = getProcessEngine();
+
+  modeling.updateProperties(element, {
+    [`${prefix}:bpmType`]: value
+  });
+}
+

ruoyi-ui/src/views/system/bpmnPro/components/xmlStr.js

@@ -1,28 +0,0 @@
-export default `<?xml version="1.0" encoding="UTF-8"?>
-<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0001" targetNamespace="http://bpmn.io/schema/bpmn">
-  <bpmn:process id="Process_1697" name="业务流程_169708" isExecutable="true">
-    <bpmn:startEvent id="Event_0x7a3v2">
-      <bpmn:outgoing>Flow_0oqin5p</bpmn:outgoing>
-    </bpmn:startEvent>
-    <bpmn:endEvent id="Event_033hoaa">
-      <bpmn:incoming>Flow_0oqin5p</bpmn:incoming>
-    </bpmn:endEvent>
-    <bpmn:sequenceFlow id="Flow_0oqin5p" sourceRef="Event_0x7a3v2" targetRef="Event_033hoaa" />
-  </bpmn:process>
-  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
-    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1697">
-      <bpmndi:BPMNShape id="Event_0x7a3v2_di" bpmnElement="Event_0x7a3v2">
-        <dc:Bounds x="162" y="-128" width="36" height="36" />
-      </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Event_033hoaa_di" bpmnElement="Event_033hoaa">
-        <dc:Bounds x="298" y="22" width="36" height="36" />
-      </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="Flow_0oqin5p_di" bpmnElement="Flow_0oqin5p">
-        <di:waypoint x="198" y="-110" />
-        <di:waypoint x="248" y="-110" />
-        <di:waypoint x="248" y="40" />
-        <di:waypoint x="298" y="40" />
-      </bpmndi:BPMNEdge>
-    </bpmndi:BPMNPlane>
-  </bpmndi:BPMNDiagram>
-</bpmn:definitions>`

ruoyi-ui/src/views/system/bpmnPro/index.vue

@@ -1,21 +1,21 @@
 <template>
   <div id="app-bpmn">
-    <bpmn-toolbar v-if="getEditorConfig.toolbar" :formData="formData"/>
+    <bpmn-toolbar v-if="getEditorConfig.toolbar" :formData="formData" />
     <div class="main-content">
-      <bpmn-designer :xml.sync="xmlString"/>
-      <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'"/>
+      <bpmn-designer :xml.sync="xmlString" />
+      <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'" />
       <div v-else class="camunda-panel" id="camunda-panel"></div>
     </div>
 
-    <bpmn-settings/>
-    <bpmn-context-menu/>
+    <bpmn-settings />
+    <bpmn-context-menu />
   </div>
 </template>
 
 <script>
 import BpmnDesigner from "./components/Designer";
 import BpmnSettings from "./components/Settings";
-import {mapGetters} from "vuex";
+import { mapGetters } from "vuex";
 import BpmnToolbar from "./components/Toolbar";
 import BpmnContextMenu from "./components/ContextMenu/ContextMenu";
 import BpmnPanel from "./components/Panel";
@@ -36,8 +36,7 @@ import "@bpmn-io/element-template-chooser/dist/element-template-chooser.css";
 import "bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css";
 import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
 
-import xmlStr from "./components/xmlStr";
-import {getProcess} from "@/api/bpmprocess/process";
+import { getProcess } from "@/api/bpmprocess/process";
 
 export default {
   name: "App",
@@ -57,10 +56,10 @@ export default {
   computed: {
     ...mapGetters(["getEditorConfig", "getModeler"]),
   },
-  provide(){
+  provide() {
     return {
-      formData:()=>this.formData,
-    }
+      formData: () => this.formData,
+    };
   },
   methods: {
     Provence(ev) {