fix -- 修改流程设计页面为全屏弹窗（保存流程后刷新流程列表）

ruoyi-ui/src/plugins/package/designer/ProcessDesigner.vue

@@ -4,7 +4,7 @@
       <slot name="control-header"></slot>
       <template v-if="!$slots['control-header']">
         <el-button-group key="file-control">
-          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>
+<!--          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>-->
           <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
           <el-tooltip effect="light">
             <div slot="content">
@@ -249,10 +249,15 @@ export default {
   },
   methods: {
     onSave () {
-      if (this.bpmnModeler == null) return;
+      return new Promise((resolve, reject) => {
+        if (this.bpmnModeler == null) {
+          reject();
+        }
         this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
           this.$emit('save', xml);
+          resolve(xml);
         });
+      })
     },
     initBpmnModeler() {
       if (this.bpmnModeler) return;

ruoyi-ui/src/plugins/package/theme/process-designer.scss

@@ -6,6 +6,7 @@
 }
 
 .my-process-designer {
+  padding: 5px 0 10px 10px;
   display: flex;
   flex-direction: column;
   width: 100%;

ruoyi-ui/src/views/workflow/definition/designer.vue

@@ -1,46 +1,149 @@
 <template>
-  <div>
+  <div class="workflow-designer">
+    <el-container>
+      <el-header height="70px">
+        <el-row type="flex" align="middle">
+          <el-col :span="3">
+            <div style="display:flex;justify-content:center;">
+              <el-button type="danger" @click="onClose()">关闭</el-button>
+              <el-button type="primary" @click="onPrevious()" :disabled="activeStep <= 0">上一步</el-button>
+            </div>
+          </el-col>
+          <el-col :offset="1" :span="16">
+            <el-steps :active="activeStep" finish-status="success" align-center>
+              <el-step title="基础设置"></el-step>
+              <el-step title="流程设计"></el-step>
+              <el-step title="完成"></el-step>
+            </el-steps>
+          </el-col>
+          <el-col :offset="1" :span="3">
+            <div style="display:flex;justify-content:center;">
+              <el-button type="primary" @click="onNext()" :disabled="activeStep >= 1">下一步</el-button>
+              <el-button type="success" @click="onSave()" :disabled="activeStep < 1">保存</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-header>
+      <el-main>
+        <div v-show="activeStep === 0">
+          <div class="app-container">
+            <el-form size="small" label-width="80px">
+              <el-form-item label="流程标识">
+                <el-col :span="11">
+                  <el-input v-model="designerForm.processKey" clearable disabled />
+                </el-col>
+              </el-form-item>
+              <el-form-item label="流程名称">
+                <el-col :span="11">
+                  <el-input v-model="designerForm.processName" clearable />
+                </el-col>
+              </el-form-item>
+              <el-form-item label="流程分类">
+                <el-col :span="11">
+                  <el-select v-model="designerForm.category" placeholder="请选择" clearable style="width:100%">
+                    <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.code" />
+                  </el-select>
+                </el-col>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div v-show="activeStep === 1">
           <process-designer
+            ref="modelDesigner"
             v-loading="loading"
             :key="`designer-${loadIndex}`"
             :bpmnXml="bpmnXml"
             :designerForm="designerForm"
-      @save="onSaveFlowEntry"
           />
         </div>
+        <div v-show="activeStep === 2">
+          <el-result :icon="result.icon" :title="result.title" :subTitle="result.describe">
+            <template slot="extra">
+              <el-button type="primary" size="medium" @click="onClose()">关闭</el-button>
+            </template>
+          </el-result>
+        </div>
+
+      </el-main>
+      <el-footer>
+      </el-footer>
+    </el-container>
+  </div>
+
 </template>
 
 <script>
 import { readXml, saveXml } from "@/api/workflow/definition";
 import ProcessDesigner from '@/components/ProcessDesigner';
+import { listCategory } from '@/api/workflow/category';
 
 export default {
   name: 'Designer',
   components: { ProcessDesigner },
+  props: {
+    designerForm: {
+      type: Object,
+      required: true
+    }
+  },
   data () {
     return {
+      activeStep: 0,
+      basicInfoForm: {},
+      categoryOptions: [],
       loadIndex: 0,
       loading: false,
       bpmnXml: '',
-      designerForm: {
+      result: {
-        definitionId: undefined,
+        icon: 'info',
-        processId: undefined,
+        title: null,
-        processName: undefined,
+        describe: null
-        category: undefined
-      }
       }
+    };
   },
   created() {
-    const query = this.$route.query
+    this.getCategoryList();
-    if (query) {
+    if (this.designerForm.definitionId) {
-      this.designerForm = query;
+      this.getModelDetail(this.designerForm.definitionId)
-      //  查询流程xml
-      if (query.definitionId) {
-        this.getModelDetail(query.definitionId);
-      }
     }
   },
   methods: {
+    onClose () {
+      this.$emit('close');
+    },
+    onPrevious() {
+      this.activeStep--;
+    },
+    onNext() {
+      this.activeStep++;
+    },
+    onSave() {
+      let refProcessDesigner = this.$refs.modelDesigner.$refs.processDesigner;
+      refProcessDesigner.onSave().then(xml => {
+        this.bpmnXml = xml;
+        saveXml({
+          name: this.designerForm.processName,
+          category: this.designerForm.category,
+          xml: this.bpmnXml
+        }).then(res => {
+          this.result.icon = 'success';
+          this.result.title = '成功';
+          this.result.describe = res.msg;
+        }).catch(res => {
+          this.result.icon = 'error';
+          this.result.title = '失败';
+          this.result.describe = res.msg;
+        }).finally(() => {
+          this.onNext();
+          this.$emit('save');
+        })
+      })
+    },
+    /** 查询流程分类列表 */
+    getCategoryList() {
+      listCategory().then(response => this.categoryOptions = response.rows)
+    },
     /** xml 文件 */
     getModelDetail(definitionId) {
       this.loading = true;
@@ -51,22 +154,40 @@ export default {
         this.loading = false;
       })
     },
-    onSaveFlowEntry (saveData) {
+    saveProcess(xml) {
-      this.bpmnXml = saveData;
+      this.bpmnXml = xml;
       saveXml({
         name: this.designerForm.processName,
         category: this.designerForm.category,
         xml: this.bpmnXml
       }).then(res => {
         this.$message(res.msg)
-        // 关闭当前标签页并返回上个页面
+        this.$emit('save');
-        this.$store.dispatch("tagsView/delView", this.$route);
-        this.$router.go(-1)
       })
-    },
+    }
   }
 }
 </script>
 
 <style scoped>
+.workflow-designer {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: #ebeef5;
+  top: 0;
+  left: 0;
+  z-index: 1010;
+  padding: 10px;
+}
+.workflow-designer >>> .el-header {
+  padding: 10px;
+  background: #ffffff;
+  margin-bottom: 5px;
+}
+
+.workflow-designer >>> .el-main {
+  background: #ffffff;
+  padding: 0;
+}
 </style>

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

@@ -106,9 +106,9 @@
             type="text"
             size="mini"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            @click="handleDesigner(scope.row)"
             v-hasPermi="['workflow:definition:designer']"
-          >编辑</el-button>
+          >设计</el-button>
           <el-button
             type="text"
             size="mini"
@@ -186,27 +186,6 @@
        <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
     </el-dialog>
 
-    <!--  编辑流程  -->
-    <el-dialog :title="process.title" :visible.sync="process.open" width="500px" append-to-body>
-      <el-form :model="process.form" size="mini" label-width="80px">
-        <el-form-item label="流程标识">
-          <el-input v-model="process.form.processKey" clearable disabled />
-        </el-form-item>
-        <el-form-item label="流程名称">
-          <el-input v-model="process.form.processName" clearable />
-        </el-form-item>
-        <el-form-item label="流程分类">
-          <el-select v-model="process.form.category" placeholder="请选择" clearable style="width:100%">
-            <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.code" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleLoadXml(process.form)">确 定</el-button>
-        <el-button @click="process.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
     <!-- 版本管理 -->
     <el-dialog title="版本管理" :visible.sync="publish.open" width="50%" append-to-body>
       <el-table v-loading="publish.loading" :data="publish.dataList" @selection-change="handleSelectionChange">
@@ -311,6 +290,9 @@
         </el-col>
       </el-row>
     </el-dialog>
+
+    <designer v-if="isDesignerShow" :designerForm="processForm" @save="submitSave()" @close="isDesignerShow = false"></designer>
+
   </div>
 </template>
 
@@ -320,16 +302,19 @@ import { getForm, addDeployForm ,listForm } from "@/api/workflow/form";
 import { listCategory } from '@/api/workflow/category'
 import Parser from '@/utils/generator/parser'
 import ProcessViewer from '@/components/ProcessViewer'
+import Designer from './designer'
 import { getToken } from "@/utils/auth";
 
 export default {
   name: "Definition",
   components: {
     Parser,
-    ProcessViewer
+    ProcessViewer,
+    Designer
   },
   data() {
     return {
+      isDesignerShow: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -345,11 +330,7 @@ export default {
       // 流程定义表格数据
       definitionList: [],
       categoryOptions: [],
-      process: {
+      processForm: {},
-        title: '',
-        open: false,
-        form: {}
-      },
       publish: {
         open: false,
         loading: false,
@@ -478,19 +459,6 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 跳转到流程设计页面 */
-    handleLoadXml(row) {
-      this.process.open = false;
-      this.$router.push({
-        path: '/definition/designer',
-        query: {
-          definitionId: row.definitionId,
-          processId: row.processKey,
-          processName: row.processName,
-          category: row.category
-        }
-      })
-    },
     handlePublish(row) {
       this.publishQueryParams.processKey = row.processKey;
       this.publish.open = true;
@@ -575,18 +543,16 @@ export default {
     },
     handleAdd() {
       const dateTime = new Date().getTime();
-      this.process.title = '新增流程';
+      this.processForm = {
-      this.process.form = {
         processKey: `Process_${dateTime}`,
         processName: `业务流程_${dateTime}`
-      };
+      }
-      this.process.open = true;
+      this.isDesignerShow = true;
     },
-    /** 修改按钮操作 */
+    /** 设计按钮操作 */
-    handleUpdate(row) {
+    handleDesigner(row) {
-      this.process.title = '编辑流程';
+      this.processForm = JSON.parse(JSON.stringify(row));
-      this.process.form = JSON.parse(JSON.stringify(row));
+      this.isDesignerShow = true;
-      this.process.open = true;
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -641,6 +607,9 @@ export default {
     },
     categoryFormat(row, column) {
       return this.categoryOptions.find(k => k.code === row.category)?.categoryName ?? '';
+    },
+    submitSave() {
+      this.getList();
     }
   }
 };