feat: 流程设计器全屏展示

ruoyi-ui/src/components/Process/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
     <el-container style="height: 100%">
-      <el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;">
+      <el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;padding-left:0px">
         <div style="display: flex; padding: 10px 0px; justify-content: space-between;">
           <div>
             <el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;">

ruoyi-ui/src/views/flowable/definition/index.vue

@@ -223,6 +223,17 @@
         </el-col>
       </el-row>
     </el-dialog>
+
+    <!--流程设计器-->
+    <el-dialog
+      title="流程配置"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :fullscreen=true
+      :before-close="handleClose"
+      append-to-body>
+      <Model :deployId="deployId"/>
+    </el-dialog>
   </div>
 </template>
 
@@ -241,18 +252,21 @@ import { getToken } from "@/utils/auth";
 import { getForm, addDeployForm ,listForm } from "@/api/flowable/form";
 import Parser from '@/components/parser/Parser'
 import flow from '@/views/flowable/task/myProcess/send/flow'
+import Model from './model';
 
 export default {
   name: "Definition",
   dicts: ['sys_process_category'],
   components: {
     Parser,
-    flow
+    flow,
+    Model
   },
   data() {
     return {
       // 遮罩层
       loading: true,
+      dialogVisible: false,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -318,6 +332,7 @@ export default {
         formId: null,
         deployId: null
       },
+      deployId: '',
       currentRow: null,
       // xml
       flowData: {},
@@ -341,6 +356,15 @@ export default {
         this.loading = false;
       });
     },
+    handleClose(done) {
+      this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        done();
+      }).catch(() => {});
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -386,7 +410,9 @@ export default {
     },
     /** 跳转到流程设计页面 */
     handleLoadXml(row){
-      this.$router.push({ path: '/flowable/definition/model',query: { deployId: row.deploymentId }})
+      this.dialogVisible = true;
+      this.deployId = row.deploymentId;
+      // this.$router.push({ path: '/flowable/definition/model',query: { deployId: row.deploymentId }})
     },
     /** 流程图查看 */
     handleReadImage(deployId){

ruoyi-ui/src/views/flowable/definition/model.vue

@@ -12,12 +12,12 @@
       @showXML="showXML"
     />
     <!--在线查看xml-->
-    <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="70%" class="showAll_dialog">
+    <el-drawer :title="xmlTitle" :modal="false" direction="rtl" :visible.sync="xmlOpen" size="60%">
       <!-- 设置对话框内容高度 -->
         <el-scrollbar>
             <pre v-highlight="xmlData"><code class="xml"></code></pre>
         </el-scrollbar>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -33,6 +33,12 @@ export default {
     bpmnModeler,
     vkBeautify
   },
+  props: {
+    deployId: {
+      type: String,
+      default: ''
+    },
+  },
   // 自定义指令
   directives: {
     deep: true,
@@ -78,12 +84,18 @@ export default {
 
     };
   },
-  created () {
-    const deployId = this.$route.query && this.$route.query.deployId;
-    //  查询流程xml
-    if (deployId) {
-      this.getXmlData(deployId);
+  watch: {
+    deployId: {
+      handler(newVal) {
+        if (newVal) {
+          this.getXmlData(newVal);
         }
+      },
+      immediate: true, // 立即生效
+      deep: true  //监听对象或数组的时候，要用到深度监听
+    },
+  },
+  created () {
     this.getDicts("sys_process_category").then(res => {
       this.categorys = res.data;
     });