接口联调提交

ruoyi-ui/src/utils/bpmn/xml.js

@@ -24,7 +24,6 @@ export async function createNewDiagram(modeler, newXml, settings) {
     const newId = processId ? processId : `Process_${timestamp}`;
     const newName = processName || `业务流程_${timestamp}`;
     const xmlString = newXml || emptyXML(newId, newName);
-    console.log(xmlString);
     const { warnings } = await modeler.importXML(xmlString);
     if (warnings && warnings.length) {
       warnings.forEach(catchWarning);

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

@@ -259,16 +259,6 @@
             placeholder="请输入版本状态"
           />
         </el-form-item>
-        <el-form-item label="节点json串" prop="processJson">
-          <el-input
-            v-model="form.processJson"
-            type="textarea"
-            placeholder="请输入内容"
-          />
-        </el-form-item>
-        <el-form-item label="xml标签内容">
-          <editor v-model="form.processXmlContent" :min-height="192" />
-        </el-form-item>
         <el-form-item label="xml文件存放地址" prop="processXmlPath">
           <el-input
             v-model="form.processXmlPath"
@@ -420,7 +410,14 @@ export default {
       });
     },
     /** */
-    handleEditbpmn(row) {},
+    handleEditbpmn(row) {
+      this.$router.push({
+        path: "/processModeling/bpmnPro",
+        query: {
+          id: row.processId,
+        },
+      });
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {

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

@@ -15,12 +15,12 @@ export default {
   props: {
     xml: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     events: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   computed: {
     ...mapGetters(["getEditor", "getModeler", "getModeling"]),
@@ -29,7 +29,7 @@ export default {
       if (bg === "grid-image") return "designer-with-bg";
       if (bg === "image") return "designer-with-image";
       return "";
-    }
+    },
   },
   methods: {
     reloadProcess: debounce(async function (setting, oldSetting) {
@@ -38,11 +38,11 @@ export default {
       await this.$nextTick();
       const modeler = initModeler(this.$refs.designerRef, modelerModules, this);
       if (!oldSetting || setting.processEngine !== oldSetting.processEngine) {
-        await createNewDiagram(modeler);
+        await createNewDiagram(modeler, this.xml);
       } else {
         await createNewDiagram(modeler, this.xml, setting);
       }
-    }, 100)
+    }, 100),
   },
   watch: {
     getEditor: {
@@ -54,8 +54,18 @@ export default {
         } catch (e) {
           catchError(e);
         }
-      }
-    }
-  }
+      },
+    },
+    // xml: {
+    //   immediate: true,
+    //   handler: async function (value, oldValue) {
+    //     try {
+    //       this.reloadProcess(value, oldValue);
+    //     } catch (e) {
+    //       catchError(e);
+    //     }
+    //   },
+    // },
+  },
 };
 </script>

ruoyi-ui/src/views/system/bpmnPro/components/Designer/initModeler.js

@@ -47,7 +47,6 @@ export default function (designerDom, moduleAndExtensions, context) {
 
   // 功能测试部分，可删除
   modeler.on("commandStack.elements.create.preExecute", (event) => {
-    console.log("create", event);
     const {
       context: { elements }
     } = event;
@@ -57,7 +56,6 @@ export default function (designerDom, moduleAndExtensions, context) {
     return event;
   });
   modeler.on("commandStack.shape.replace.preExecute", (event) => {
-    console.log("replace", event);
     debugger;
     const {
       context: { newShape, newData }
@@ -68,7 +66,6 @@ export default function (designerDom, moduleAndExtensions, context) {
     return event;
   });
 
-  console.log(modeler);
 
   return modeler;
 }

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

@@ -18,7 +18,8 @@
 <script>
 import { downloadFile, setEncoded } from "@utils/files";
 import { mapGetters } from "vuex";
-import { addProcess } from "@/api/bpmprocess/process";
+import { addProcess, updateProcess } from "@/api/bpmprocess/process";
+import xml from "highlight.js/lib/languages/xml";
 
 export default {
   name: "BpmnSave",
@@ -82,6 +83,18 @@ export default {
         catchError(e);
       }
     },
+    // xmlStr2XmlObj(xmlStr) {
+    //   var xmlObj = {};
+    //   if (document.all) {
+    //     var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
+    //     xmlDom.loadXML(xmlStr);
+    //     xmlObj = xmlDom;
+    //   } else {
+    //     xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
+    //   }
+    //   return xmlObj;
+    // },
+    getFileBinaryHandler() {},
     async saveHandler() {
       let _this = this;
       let processJsonObj = await this.getProcessJson();
@@ -91,32 +104,52 @@ export default {
       let processType = ""; //流程类型
       let processXml = ""; //xml文件流
       let xmlPro = await this.getProcess("xml");
-      console.log(xmlPro);
       let processXmlContent = xmlPro; //xml标签内容
-      let blob = new Blob([xmlPro], { type: "text/xml" });
+      // const buffer = Buffer.from(xmlPro, "utf-8");
+      // 将 Buffer 对象转换为二进制流
+      const blob = new Blob([xmlPro], { type: "text/plain;charset=utf-8" });
+      blob.filename = processName + ".xml";
+
       let reader = new FileReader();
-      reader.onloadend = function () {
-        console.log("xml流文件", reader.result);
-        processXml = reader.result;
-        // 获取所有xml标签内容
+      reader.onloadend = function (da) {
+        processXml = new Uint8Array(da.target.result);
+        // console.log(
+        //   new File([processXml], processName + ".xml", {
+        //     type: "application/octet-stream",
+        //     lastModified: Date.now(),
+        //   })
+        // );
+        // return;
         let data = {
-          processKey,
-          processName,
-          processType,
-          processXml,
-          processXmlContent,
-          processJson: JSON.stringify(processJsonObj),
+          bpmProcess: {
+            processKey,
+            processName,
+            processType,
+            processJson: JSON.stringify(processJsonObj),
+          },
+          fileXML: [...processXml],
+          // processXmlContent,
         };
-        addProcess(data).then((res) => {
-          if (res.code == 200) {
-            _this.$message.success("保存成功");
-            console.log(res);
-          } else {
-            _this.$message.error("保存失败");
-          }
-        });
+        if (_this.$route.query?.id) {
+          data.bpmProcess.processId = _this.$route.query.id;
+          updateProcess(data).then((res) => {
+            if (res.code == 200) {
+              _this.$message.success("修改成功");
+            } else {
+              _this.$message.error("修改失败");
+            }
+          });
+        } else {
+          addProcess(data).then((res) => {
+            if (res.code == 200) {
+              _this.$message.success("保存成功");
+            } else {
+              _this.$message.error("保存失败");
+            }
+          });
+        }
       };
-      reader.readAsDataURL(blob);
+      reader.readAsArrayBuffer(blob);
     },
   },
 };

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

@@ -0,0 +1,28 @@
+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

@@ -35,6 +35,9 @@ import "bpmn-js-connectors-extension/dist/connectors-extension.css";
 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";
 export default {
   name: "App",
   components: {
@@ -50,18 +53,30 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["getEditorConfig"]),
+    ...mapGetters(["getEditorConfig", "getModeler"]),
   },
   methods: {
     Provence(ev) {
       ev.preventDefault();
     },
   },
-  mounted() {
+  async mounted() {
     document.body.addEventListener("contextmenu", this.Provence);
+    // this.xmlString = xmlStr;
+  },
+  async created() {
+    if (this.$route.query?.id) {
+      let res = await getProcess(this.$route.query?.id);
+      if (res.code == 200) {
+        this.xmlString = res.data.processXmlContent;
+        if (this.getModeler) {
+          this.getModeler.importXML(this.xmlString);
+        }
+      } else {
+      }
+    }
   },
   beforeDestroy() {
-    console.log("beforeDestroy");
     document.body.removeEventListener("contextmenu", this.Provence);
   },
 };