补充提交,优化布局样式

ruoyi-ui/src/layout/index.vue

@@ -54,7 +54,7 @@
       <div
         :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
         class="main-container"
-        :style="sidebar.opened ? '': 'margin-left: 50px !important'"
+        :style="sidebar.opened ? '' : 'margin-left: 50px !important'"
       >
         <div :class="{ 'fixed-header': fixedHeader }">
           <!-- <navbar /> -->
@@ -156,6 +156,10 @@ export default {
 <style lang="scss" scoped>
 @import "~@/assets/styles/mixin.scss";
 @import "~@/assets/styles/variables.scss";
+.combarr {
+  height: 100vh !important;
+  overflow: scroll;
+}
 
 .avatar-wrapper {
   white-space: nowrap;

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

@@ -1,9 +1,11 @@
 <template>
   <div class="bpmn-toolbar">
     <el-button-group>
+      <bpmn-exit />
       <bpmn-import />
       <bpmn-exports />
       <bpmn-previews />
+      <bpmn-save />
     </el-button-group>
     <bpmn-aligns />
     <bpmn-scales />
@@ -16,12 +18,25 @@
 import BpmnImport from "./tools/Import";
 import BpmnExports from "./tools/Exports";
 import BpmnPreviews from "./tools/Previews";
+import BpmnExit from "./tools/Exit.vue";
+import BpmnSave from "./tools/Save.vue";
 import BpmnAligns from "./tools/Aligns";
 import BpmnScales from "./tools/Scales";
 import BpmnCommands from "./tools/Commands";
+
 import BpmnExternals from "./tools/Externals";
 export default {
   name: "BpmnToolbar",
-  components: { BpmnExternals, BpmnCommands, BpmnScales, BpmnAligns, BpmnPreviews, BpmnExports, BpmnImport }
+  components: {
+    BpmnExternals,
+    BpmnCommands,
+    BpmnScales,
+    BpmnAligns,
+    BpmnPreviews,
+    BpmnExports,
+    BpmnImport,
+    BpmnExit,
+    BpmnSave,
+  },
 };
 </script>

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

@@ -0,0 +1,32 @@
+<template>
+  <el-button
+    @click="exitHandler"
+    type="danger"
+    size="small"
+    icon="el-icon-close"
+  >
+  </el-button>
+</template>
+
+<script>
+import { downloadFile, setEncoded } from "@utils/files";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "BpmnExit",
+  computed: {
+    ...mapGetters(["getModeler"]),
+  },
+  methods: {
+    exitHandler() {
+      this.$confirm("退出后未保存的流程图将丢失记录,是否继续!", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.$router.back();
+      });
+    },
+  },
+};
+</script>

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

@@ -1,11 +1,22 @@
 <template>
-  <el-button v-popover:popover type="primary">
-    导出文件
-    <el-popover ref="popover" placement="bottom" popper-class="button-popover" trigger="hover">
+  <el-button v-popover:popover type="primary" size="small">
+    导出
+    <el-popover
+      ref="popover"
+      placement="bottom"
+      popper-class="button-popover"
+      trigger="hover"
+    >
       <div class="button-list_column">
-        <el-button type="primary" @click="downloadProcessAsBpmn">导出为 Bpmn</el-button>
-        <el-button type="primary" @click="downloadProcessAsXml">导出为 XML</el-button>
-        <el-button type="primary" @click="downloadProcessAsSvg">导出为 SVG</el-button>
+        <el-button type="primary" size="small" @click="downloadProcessAsBpmn"
+          >导出为 Bpmn</el-button
+        >
+        <el-button type="primary" size="small" @click="downloadProcessAsXml"
+          >导出为 XML</el-button
+        >
+        <el-button type="primary" size="small" @click="downloadProcessAsSvg"
+          >导出为 SVG</el-button
+        >
       </div>
     </el-popover>
   </el-button>
@@ -18,12 +29,13 @@ import { mapGetters } from "vuex";
 export default {
   name: "BpmnExports",
   computed: {
-    ...mapGetters(["getModeler"])
+    ...mapGetters(["getModeler"]),
   },
   methods: {
     async downloadProcess(type, name = "diagram") {
       try {
-        if (!this.getModeler) return this.$message.error("流程图引擎初始化失败");
+        if (!this.getModeler)
+          return this.$message.error("流程图引擎初始化失败");
         const modeler = this.getModeler;
         // 按需要类型创建文件并下载
         if (type === "xml" || type === "bpmn") {
@@ -55,7 +67,7 @@ export default {
     },
     downloadProcessAsSvg() {
       this.downloadProcess("svg");
-    }
-  }
+    },
+  },
 };
 </script>

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

@@ -1,7 +1,13 @@
 <template>
-  <el-button type="primary" @click="openImportWindow">
-    打开文件
-    <input type="file" ref="importRef" style="display: none" accept=".xml,.bpmn" @change="changeImportFile" />
+  <el-button type="primary" @click="openImportWindow" size="small">
+    打开
+    <input
+      type="file"
+      ref="importRef"
+      style="display: none"
+      accept=".xml,.bpmn"
+      @change="changeImportFile"
+    />
   </el-button>
 </template>
 
@@ -31,7 +37,7 @@ export default {
       } catch (e) {
         catchError(e);
       }
-    }
-  }
+    },
+  },
 };
 </script>

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

@@ -1,14 +1,29 @@
 <template>
-  <el-button v-popover:popover type="primary">
-    预览文件
-    <el-popover ref="popover" placement="bottom" popper-class="button-popover" trigger="hover">
+  <el-button v-popover:popover type="primary" size="small">
+    预览
+    <el-popover
+      ref="popover"
+      placement="bottom"
+      popper-class="button-popover"
+      trigger="hover"
+    >
       <div class="button-list_column">
-        <el-button type="primary" @click="openXMLPreviewModel">预览 XML</el-button>
-        <el-button type="primary" @click="openJsonPreviewModel">预览 JSON</el-button>
+        <el-button type="primary" @click="openXMLPreviewModel" size="small"
+          >预览 XML</el-button
+        >
+        <el-button type="primary" @click="openJsonPreviewModel" size="small"
+          >预览 JSON</el-button
+        >
       </div>
     </el-popover>
 
-    <el-dialog :title="modelTitle" :visible.sync="codeModelVisible" width="72vw" append-to-body destroy-on-close>
+    <el-dialog
+      :title="modelTitle"
+      :visible.sync="codeModelVisible"
+      width="72vw"
+      append-to-body
+      destroy-on-close
+    >
       <div class="preview-model">
         <highlightjs :code="codeString" :language="codeLanguage" />
       </div>
@@ -26,22 +41,26 @@ export default {
     ...mapGetters(["getModeler"]),
     modelTitle() {
       return this.codeLanguage === "xml" ? "预览 XML" : "预览 JSON";
-    }
+    },
   },
   data() {
     return {
       codeLanguage: "xml",
       codeString: "",
-      codeModelVisible: false
+      codeModelVisible: false,
     };
   },
   methods: {
     async openXMLPreviewModel() {
       try {
-        if (!this.getModeler) return this.$message.error("流程图引擎初始化失败");
+        if (!this.getModeler)
+          return this.$message.error("流程图引擎初始化失败");
         this.codeLanguage = "xml";
         this.codeModelVisible = true;
-        const { xml } = await this.getModeler.saveXML({ format: true, preamble: true });
+        const { xml } = await this.getModeler.saveXML({
+          format: true,
+          preamble: true,
+        });
         this.codeString = xml;
       } catch (e) {
         catchError(e);
@@ -49,16 +68,20 @@ export default {
     },
     async openJsonPreviewModel() {
       try {
-        if (!this.getModeler) return this.$message.error("流程图引擎初始化失败");
+        if (!this.getModeler)
+          return this.$message.error("流程图引擎初始化失败");
         this.codeLanguage = "json";
         this.codeModelVisible = true;
-        const { xml } = await this.getModeler.saveXML({ format: true, preamble: true });
+        const { xml } = await this.getModeler.saveXML({
+          format: true,
+          preamble: true,
+        });
         const jsonStr = await this.getModeler.get("moddle").fromXML(xml);
         this.codeString = JSON.stringify(jsonStr, null, 2);
       } catch (e) {
         catchError(e);
       }
-    }
-  }
+    },
+  },
 };
 </script>

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

@@ -0,0 +1,72 @@
+<template>
+  <el-button v-popover:popover type="primary" size="small"
+    >保存
+    <!-- <div class="button-list_column">
+        <el-button type="primary" size="small" @click="getProcessAsBpmn"
+          >导出为 Bpmn</el-button
+        >
+        <el-button type="primary" size="small" @click="getProcessAsXml"
+          >导出为 XML</el-button
+        >
+        <el-button type="primary" size="small" @click="getProcessAsSvg"
+          >导出为 SVG</el-button
+        >
+      </div> -->
+  </el-button>
+</template>
+
+<script>
+import { downloadFile, setEncoded } from "@utils/files";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "BpmnSave",
+  computed: {
+    ...mapGetters(["getModeler"]),
+  },
+  methods: {
+    async getProcess(type, name = "diagram") {
+      try {
+        if (!this.getModeler)
+          return this.$message.error("流程图引擎初始化失败");
+        const modeler = this.getModeler;
+        // 按需要类型创建文件并下载
+        if (type === "xml" || type === "bpmn") {
+          const { err, xml } = await modeler.saveXML();
+          // 读取异常时抛出异常
+          if (err) {
+            console.error(`[Process Designer Warn ]: ${err.message || err}`);
+            return false;
+          }
+          // const { href, filename } = setEncoded(type.toUpperCase(), name, xml);
+          // downloadFile(href, filename);
+          return xml;
+        } else {
+          const { err, svg } = await modeler.saveSVG();
+          // 读取异常时抛出异常
+          if (err) {
+            console.error(err);
+            return false;
+          }
+          return svg;
+        }
+      } catch (e) {
+        console.error(`[Process Designer Warn ]: ${e.message || e}`);
+        return false;
+      }
+    },
+    getProcessAsBpmn() {
+      let process = this.getProcess("bpmn");
+      console.log(process);
+    },
+    getProcessAsXml() {
+      let process = this.getProcess("xml");
+      console.log(process);
+    },
+    getProcessAsSvg() {
+      let process = this.getProcess("svg");
+      console.log(process);
+    },
+  },
+};
+</script>

ruoyi-ui/src/views/system/bpmnPro/components/theme/designer.css

@@ -1,27 +0,0 @@
-.bpmn-designer {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-}
-
-.bpmn-designer.designer-with-image {
-  background-repeat: no-repeat !important;
-  background-image: url("./images/04.jpg") !important;
-  background-size: cover;
-}
-
-.djs-minimap div.toggle {
-  display: none;
-}
-
-.bts-toggle-mode {
-  display: none !important;
-}
-
-.entry.bjs-align-elements-menu-entry {
-  width: 20px;
-}
-
-.layer-selectionOutline {
-  fill: none;
-}

ruoyi-ui/src/views/system/bpmnPro/components/theme/designer.min.css

@@ -1 +0,0 @@
-.bpmn-designer{flex:1;height:100%;overflow:hidden}.bpmn-designer.designer-with-image{background-repeat:no-repeat !important;background-image:url("./images/04.jpg") !important;background-size:cover}.djs-minimap div.toggle{display:none}.bts-toggle-mode{display:none !important}.entry.bjs-align-elements-menu-entry{width:20px}.layer-selectionOutline{fill:none}

ruoyi-ui/src/views/system/bpmnPro/components/theme/index.scss

@@ -24,9 +24,9 @@ html {
   padding: 0;
   box-sizing: border-box;
 }
-#app {
-  width: 100vw;
-  height: 100vh;
+#app-bpmn {
+  width: 100%;
+  height: calc(100vh - 84px);
   box-sizing: border-box;
   position: relative;
   margin: 0;
@@ -36,6 +36,7 @@ html {
   flex-direction: column;
   .main-content {
     width: 100%;
+    height: 100%;
     flex: 1;
     overflow: hidden;
     display: flex;

ruoyi-ui/src/views/system/bpmnPro/components/theme/panel.scss

@@ -1,6 +1,6 @@
 .bpmn-panel {
   display: flex;
-  width: 480px;
+  width: 380px;
   height: 100%;
   box-sizing: border-box;
   padding: 0 8px;
@@ -21,7 +21,7 @@
     }
 
     .el-collapse-item__content-wrapper .el-collapse-item__content-inner {
-      padding:  0 0 16px 0;
+      padding: 0 0 16px 0;
     }
   }
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app-bpmn">
     <bpmn-toolbar v-if="getEditorConfig.toolbar" />
     <div class="main-content">
       <bpmn-designer :xml.sync="xmlString" />
@@ -52,10 +52,17 @@ export default {
   computed: {
     ...mapGetters(["getEditorConfig"]),
   },
-  mounted() {
-    document.body.addEventListener("contextmenu", function (ev) {
+  methods: {
+    Provence(ev) {
       ev.preventDefault();
-    });
+    },
+  },
+  mounted() {
+    document.body.addEventListener("contextmenu", this.Provence);
+  },
+  beforeDestroy() {
+    console.log("beforeDestroy");
+    document.body.removeEventListener("contextmenu", this.Provence);
   },
 };
 </script>

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

@@ -582,21 +582,37 @@ export default {
           if (this.form.menuId != undefined) {
             this.form["tenantId"] = this.$store.state.user.tenant.tenantId;
             updateMenu(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
+              if (response.code == 200) {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+                this.reloadRouter();
+              } else {
+                this.$modal.msgError("修改失败");
+              }
             });
           } else {
             this.form["tenantId"] = this.$store.state.user.tenant.tenantId;
             addMenu(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
+              if (response.code == 200) {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+                this.reloadRouter();
+              } else {
+                this.$modal.msgError("新增失败");
+              }
             });
           }
         }
       });
     },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       this.$modal