版本状态

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="main-box">
+    <el-button type="success" size="small" @click="handleZoom(0.1)"
+      >放大</el-button
+    >
+    <el-button type="warning" size="small" @click="handleZoom(-0.1)"
+      >缩小</el-button
+    >
+    <el-button type="info" size="small" @click="handleZoom(1)">适中</el-button>
+    <div class="canvas" ref="canvas"></div>
+  </div>
+</template>
+
+<script>
+import BpmnViewer from "bpmn-js/lib/Viewer";
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
+export default {
+  data() {
+    return {
+      bpmnViewer: null,
+      scale: 1,
+    };
+  },
+  watch: {},
+  created() {},
+  methods: {
+    getImg(xmlUrl) {
+      this.bpmnViewer && this.bpmnViewer.destroy();
+      // this.$refs.canvas.innerHTML = "";
+      this.scale = 1; // 放大缩小比例
+      // 初始化canvas
+      this.bpmnViewer = new BpmnViewer({
+        container: this.$refs.canvas,
+        height: 250,
+        additionalModules: [MoveCanvasModule],
+      });
+      const self = this;
+      this.bpmnViewer.importXML(xmlUrl, function (err) {
+        if (err) {
+          console.error(err);
+        } else {
+          let canvas = self.bpmnViewer.get("canvas");
+          canvas.zoom("fit-viewport", "auto");
+          // nodeCodes为需要设置高亮颜色的部分的id的集合（xml文件中<flowNodeRef>****</flowNodeRef>标签里的部分），这个数据也是从接口获取，这里从xml中随便取出几个测试用
+          let nodeCodes = [
+            "Activity_1d2rrr0",
+            "StartEvent_1",
+            "Activity_1d2wp4b",
+          ];
+          // 调用设置高亮颜色class方法,这里可以根据接口获取的id集合情况，对不同的部分设置不同的class名，然后在css中设置样式
+          self.setNodeColor(nodeCodes, "nodeSuccess", canvas);
+        }
+      });
+    },
+    // 设置高亮颜色的class
+    setNodeColor(nodeCodes, colorClass, canvas) {
+      for (let i = 0; i < nodeCodes.length; i++) {
+        canvas.addMarker(nodeCodes[i], colorClass);
+      }
+    },
+    // 放大缩小，这里尽量设置flag的值小一点，这样每次放大缩小不会很多，避免放大超出父元素
+    handleZoom(flag) {
+      if (flag == 1) {
+        this.scale = flag;
+        this.$nextTick(() => {
+          this.bpmnViewer.get("canvas").zoom(this.scale);
+        });
+        return;
+      }
+      // 放大缩小倍数flag可以自行设置
+      if (flag < 0 && this.scale <= 1) {
+        return;
+      }
+      this.scale += flag;
+      this.$nextTick(() => {
+        this.bpmnViewer.get("canvas").zoom(this.scale);
+      });
+    },
+    Provence(ev) {
+      ev.preventDefault();
+    },
+  },
+  async mounted() {
+    document.body.addEventListener("contextmenu", this.Provence);
+    // this.xmlString = xmlStr;
+  },
+  beforeDestroy() {
+    document.body.removeEventListener("contextmenu", this.Provence);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.canvas {
+  margin: 10px;
+}
+>>> .nodeSuccess:not(.djs-connection) {
+  .djs-visual {
+    > :nth-child(1) {
+      stroke: #f70e0e !important;
+      stroke-width: 3px !important;
+    }
+  }
+}
+</style>

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

@@ -143,7 +143,13 @@
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="processId" />
-      <el-table-column label="流程名称" align="center" prop="processName" />
+      <el-table-column label="流程名称" align="center" prop="processName">
+        <template slot-scope="scope">
+          <span class="process_name" @click="prviewHandle(scope.row)">{{
+            scope.row.processName
+          }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="流程别名" align="center" prop="processKey" />
       <el-table-column label="流程状态" align="center" prop="processOpneState">
         <template slot-scope="scope">
@@ -322,6 +328,20 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 预览流程图对话框 -->
+    <el-dialog
+      :title="previewData.processName"
+      :visible.sync="preOpen"
+      width="70%"
+      append-to-body
+    >
+      <Preview ref="previewRef"></Preview>
+      <template #footer>
+        <span>
+          <el-button @click="preCloseHandler">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
 
 
     <!-- 版本状态对话框 -->
@@ -409,12 +429,18 @@ import {
   exportFileProcess,
   enableProcess
 } from "@/api/bpmprocess/process";
+import Preview from "./components/preview.vue";
 
 export default {
   name: "Process",
   dicts: ["bpm_state", "bpm_type", "bpm_start_event_type", "bpm_version"],
+  components: { Preview },
   data() {
     return {
+      // 预览的数据
+      previewData: {},
+      // 预览弹窗
+      preOpen: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -580,6 +606,7 @@ export default {
                   this.$message.success("备份成功");
                   instance.confirmButtonLoading = false;
                   instance.confirmButtonText = "确定";
+                  this.getList();
                   done();
                 } else {
                   this.$message.error("备份失败");
@@ -598,6 +625,7 @@ export default {
               });
             }
           } else {
+            this.getList();
             done();
           }
         },
@@ -693,9 +721,20 @@ export default {
           this.$message.success("启用成功");
         }
       })
-    } 
+    },
+    // 预览流程图
+    prviewHandle(row) {
+      this.previewData = row;
+      this.preOpen = true;
+      this.$nextTick(() => {
+        this.$refs.previewRef.getImg(row.processXmlContent);
+      });
+    },
+    // 关闭预览回调
+    preCloseHandler() {
+      this.preOpen = false;
+    },
   },
 };
 </script>
-<style>
-</style>
+

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

@@ -108,7 +108,7 @@ export default {
       const subformData = new FormData();
       // 循环赋值
       for (let key in formData) {
-        subformData.append(key, formData[key]);
+        subformData.append(key, formData[key] == null ? '' : formData[key]);
       }
       if (formData?.processId) {
         updateProcess(subformData).then((res) => {

ruoyi-ui/src/views/system/bpmnPro/components/additional-modules/ContextPad/EnhancementContextPad/enhancementContextPadProvider.js

@@ -1,5 +1,5 @@
 import ContextPadProvider from "bpmn-js/lib/features/context-pad/ContextPadProvider";
-import { is } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'
+import { is, isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'
 
 class EnhancementContextPadProvider extends ContextPadProvider {
   constructor(
@@ -86,7 +86,7 @@ class EnhancementContextPadProvider extends ContextPadProvider {
     //   }
     // };
     // 添加一个新分组的自定义按钮
-    if (is(element, ['bpmn:StartEvent'])) {
+    if (isAny(element, ['bpmn:StartEvent', 'bpmn:EndEvent'])) {
       actions["enhancement-op"] = {
         group: "enhancement",
         className: "bpmn-icon-trash",