获取流程节点顺序工具函数

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

@@ -15,8 +15,7 @@ export function formDataValidate(obj) {
   // 校验节点名不能为空
   try {
     rootElements[0].flowElements.forEach(item => {
-      console.log(item);
-      if (!item.name) {
+      if (!item.name && item.$type.split(':')[1] != 'SequenceFlow') {
         res.flag = false;
         res.msg = `${customTranslate(item.$type.split(':')[1])}的节点名不能为空!`
         console.log(res);

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

@@ -0,0 +1,49 @@
+
+export default function getNodeSequence(xmlObj) {
+  if (!xmlObj.childNodes[0].childNodes[0]) return [];
+  let nodeList = Array.from(xmlObj.childNodes[0].childNodes[0].childNodes)
+  let res = [];
+  let startNode = nodeList.find((item) => item.tagName == 'bpmn:startEvent');
+  if (!startNode) {
+    console.log('缺少开始节点');
+    return;
+  }
+  let nextNodeId = getNodeId(startNode, true, nodeList);
+  res.push({
+    nodeId: startNode.id,
+    preNodeId: null,
+    nextNodeId: nextNodeId,
+  })
+  while (nextNodeId) {
+    if (!nextNodeId) break
+    let currentId = nextNodeId;
+    let currentNode = nodeList.find(item => item.id == currentId);
+    nextNodeId = getNodeId(currentNode, true, nodeList);
+    let preNodeId = getNodeId(currentNode, false, nodeList);
+    res.push(
+      {
+        nodeId: currentId,
+        preNodeId,
+        nextNodeId,
+      }
+    )
+  }
+  console.log(res);
+  return res
+
+}
+/**
+ * 
+ * @param {节点} node 
+ * @param {true:下一个节点的id;false:上一个节点的id} flag 
+ * @returns 
+ */
+const getNodeId = (node, flag, nodeList) => {
+  let theTagName = flag ? 'bpmn:outgoing' : 'bpmn:incoming';
+  let childNodeList = Array.from(node.childNodes);
+  let FlowId = childNodeList.find(item => item.tagName == theTagName)?.firstChild?.data;//找到指入或指出箭头节点
+  if (!FlowId) return false;
+  let targetId = nodeList.find(item => item.id == FlowId)?.getAttribute(flag ? 'targetRef' : 'sourceRef')
+  if (!targetId) return false;
+  return targetId;
+}

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

@@ -7,6 +7,9 @@
       >缩小</el-button
     >
     <el-button type="info" size="small" @click="handleZoom(1)">适中</el-button>
+    <el-button type="danger" size="small" @click="closeHandler"
+      >退出预览</el-button
+    >
     <div id="canvas" class="canvas" ref="canvas"></div>
   </div>
 </template>
@@ -71,7 +74,7 @@ export default {
         return;
       }
       // 放大缩小倍数flag可以自行设置
-      if (flag < 0 && this.scale <= 1) {
+      if (flag < 0 && this.scale <= 0.5) {
         return;
       }
       this.scale += flag;
@@ -88,15 +91,28 @@ export default {
     destroyPreventMenu() {
       document.body.removeEventListener("contextmenu", this.Provence);
     },
+
+    closeHandler() {
+      this.$emit("preCloseHandler");
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
+.main-box {
+  width: 100%;
+  height: 100vh;
+}
 .canvas {
   margin: 10px;
+  width: 100%;
+  height: 100%;
+}
+::v-deep .bjs-container {
+  height: 100% !important;
 }
->>> .nodeSuccess:not(.djs-connection) {
+::v-deep .nodeSuccess:not(.djs-connection) {
   .djs-visual {
     > :nth-child(1) {
       stroke: #f70e0e !important;

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

@@ -270,14 +270,15 @@
     <el-dialog
       :title="previewData.processName"
       :visible.sync="preOpen"
-      width="70%"
+      width="100%"
+      height="100%"
       append-to-body
     >
-      <Preview ref="previewRef"></Preview>
+      <Preview ref="previewRef" @preCloseHandler="preCloseHandler"></Preview>
       <template #footer>
-        <span>
+        <!-- <span>
           <el-button @click="preCloseHandler">关闭</el-button>
-        </span>
+        </span> -->
       </template>
     </el-dialog>
 
@@ -484,43 +485,48 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-
       let endFormData = {
         // 节点脚本关联表
-        BpmNodeExceptionList: [{
-          id:null,
-          nodeKey: null,           // 节点别名
-          scriptKey: null,         // 脚本别名
-          scriptTriggerType: null  // 脚本触发机制（0:手动 1:自动）
-        }],
+        BpmNodeExceptionList: [
+          {
+            id: null,
+            nodeKey: null, // 节点别名
+            scriptKey: null, // 脚本别名
+            scriptTriggerType: null, // 脚本触发机制（0:手动 1:自动）
+          },
+        ],
         // 节点操作人 -》 数据传输分两种情况：1.当前节点勾选了指定用户，就需要前端生成一个虚拟的角色编码、以及指定的用户id、真实的角色编码null即可
         // 2.当前节点根据角色勾选的执行人，就需要存贮真实的角色权限字符 生成一个虚拟的角色编码，其他为null即可
         // 节点处理人表
-        BpmNodeHandleUser: [{
-          id:null,
-          virtuallyRole: null,  // 前端生成的虚拟角色编码
-          realRole: null,       // 真实的角色编码  [1,2,3]/[1]
-          executeUserNo: null   // 用户编码  [1,2,3]/[1]
-        }],
+        BpmNodeHandleUser: [
+          {
+            id: null,
+            virtuallyRole: null, // 前端生成的虚拟角色编码
+            realRole: null, // 真实的角色编码  [1,2,3]/[1]
+            executeUserNo: null, // 用户编码  [1,2,3]/[1]
+          },
+        ],
         // 所有节点表
-        BpmProcessConfigurationList: [{
-          id:null,
-          nodeKey: null,          // 节点别名
-          nodeName: null,         // 节点名称
-          nodeFormKey: null,      // 节点表单别名
-          nodeProcessKey: null,   // 流程别名
-          nodeType: null,         // 节点类型（判断节点、正常节点。。。）根据字典维护
-          nodeBefor: null,        // 节点前
-          nodeAfter: null,        // 节点后
-          nodeRolePermission: null,// 节点对应的角色权限字符(只存虚拟角色编码)
-          spare1: null,             // 备用列
-          spare2: null,
-          spare3: null,
-          createBy: null,            // 创建者
-          updateBy: null,            // 修改者
-          remark: null              // 节点描述
-        }]
-      }
+        BpmProcessConfigurationList: [
+          {
+            id: null,
+            nodeKey: null, // 节点别名
+            nodeName: null, // 节点名称
+            nodeFormKey: null, // 节点表单别名
+            nodeProcessKey: null, // 流程别名
+            nodeType: null, // 节点类型（判断节点、正常节点。。。）根据字典维护
+            nodeBefor: null, // 节点前
+            nodeAfter: null, // 节点后
+            nodeRolePermission: null, // 节点对应的角色权限字符(只存虚拟角色编码)
+            spare1: null, // 备用列
+            spare2: null,
+            spare3: null,
+            createBy: null, // 创建者
+            updateBy: null, // 修改者
+            remark: null, // 节点描述
+          },
+        ],
+      };
       this.resetForm("queryForm");
       this.handleQuery();
     },
@@ -754,4 +760,7 @@ export default {
 ::v-deep .el-form-item__label {
   width: 98px !important;
 }
+::v-deep .el-dialog {
+  margin-top: 0px !important;
+}
 </style>

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

@@ -2,7 +2,7 @@
   <el-collapse-item name="element-normal-task">
     <template #title>
       <collapse-title title="执行任务">
-        <lucide-icon name="FileSpreadsheet" />
+        <lucide-icon name="File" />
       </collapse-title>
     </template>
     <div class="element-normal-task">

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

@@ -16,6 +16,7 @@ import { getProcessEngine } from "@packages/bpmn-utils/BpmnDesignerUtils";
 import EventEmitter from "@utils/EventEmitter";
 import { formDataValidate } from "@utils/formDataValidate";
 import { getNodeMsg, filterNodeMsg } from "@packages/bo-utils/getNodeMsg";
+import getNodeSequence from "@/utils/bpmn/getNodeSequence";
 
 import moment from "moment";
 export default {
@@ -105,8 +106,6 @@ export default {
       let formData = _this.formData() || {}; // 当前流程表单详细数据
       let processJsonObj = await this.getProcessJson(); // xml标签转换json
       let validateRes = formDataValidate(processJsonObj);
-      console.log(validateRes);
-      return;
       if (!validateRes.flag) {
         this.$message.error(validateRes.msg);
         return;
@@ -127,8 +126,8 @@ export default {
       // 获取xml标签内容标签内容
       let xmlPro = await this.getProcess("xml");
       var xmlObj = this.xmlStr2XmlObj(xmlPro);
-
-      // this.saveNodeMsg(xmlObj);
+      // 生成节点顺序
+      getNodeSequence(xmlObj);
       // return;
       formData.startEventType =
         xmlObj