From 4d3f6652b7fac464e23cbd405e7276673964afa2 Mon Sep 17 00:00:00 2001
From: konbai <1527468660@qq.com>
Date: Fri, 6 May 2022 01:02:03 +0800
Subject: [PATCH] =?UTF-8?q?fix=20--=20=E4=BF=AE=E6=94=B9=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E9=A1=B5=E9=9D=A2=E4=B8=BA=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=EF=BC=88=E4=BF=9D=E5=AD=98=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=90=8E=E5=88=B7=E6=96=B0=E6=B5=81=E7=A8=8B=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue      |  15 +-
 .../package/theme/process-designer.scss       |   1 +
 .../views/workflow/definition/designer.vue    | 175 +++++++++++++++---
 .../src/views/workflow/definition/index.vue   |  77 +++-----
 4 files changed, 182 insertions(+), 86 deletions(-)

diff --git a/ruoyi-ui/src/plugins/package/designer/ProcessDesigner.vue b/ruoyi-ui/src/plugins/package/designer/ProcessDesigner.vue
index 253e1598..e2143109 100644
--- a/ruoyi-ui/src/plugins/package/designer/ProcessDesigner.vue
+++ b/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;
-      this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-        this.$emit('save', xml);
-      });
+      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;
diff --git a/ruoyi-ui/src/plugins/package/theme/process-designer.scss b/ruoyi-ui/src/plugins/package/theme/process-designer.scss
index a3b3d098..f25e98d9 100644
--- a/ruoyi-ui/src/plugins/package/theme/process-designer.scss
+++ b/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%;
diff --git a/ruoyi-ui/src/views/workflow/definition/designer.vue b/ruoyi-ui/src/views/workflow/definition/designer.vue
index e0dbdc49..780f000d 100644
--- a/ruoyi-ui/src/views/workflow/definition/designer.vue
+++ b/ruoyi-ui/src/views/workflow/definition/designer.vue
@@ -1,46 +1,149 @@
 <template>
-  <div>
-    <process-designer
-      v-loading="loading"
-      :key="`designer-${loadIndex}`"
-      :bpmnXml="bpmnXml"
-      :designerForm="designerForm"
-      @save="onSaveFlowEntry"
-    />
+  <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"
+          />
+        </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: {
-        definitionId: undefined,
-        processId: undefined,
-        processName: undefined,
-        category: undefined
+      result: {
+        icon: 'info',
+        title: null,
+        describe: null
       }
-    }
+    };
   },
   created() {
-    const query = this.$route.query
-    if (query) {
-      this.designerForm = query;
-      //  查询流程xml
-      if (query.definitionId) {
-        this.getModelDetail(query.definitionId);
-      }
+    this.getCategoryList();
+    if (this.designerForm.definitionId) {
+      this.getModelDetail(this.designerForm.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) {
-      this.bpmnXml = saveData;
+    saveProcess(xml) {
+      this.bpmnXml = xml;
       saveXml({
         name: this.designerForm.processName,
         category: this.designerForm.category,
         xml: this.bpmnXml
       }).then(res => {
         this.$message(res.msg)
-        // 关闭当前标签页并返回上个页面
-        this.$store.dispatch("tagsView/delView", this.$route);
-        this.$router.go(-1)
+        this.$emit('save');
       })
-    },
+    }
   }
 }
 </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>
diff --git a/ruoyi-ui/src/views/workflow/definition/index.vue b/ruoyi-ui/src/views/workflow/definition/index.vue
index c254b4d6..27b3b412 100644
--- a/ruoyi-ui/src/views/workflow/definition/index.vue
+++ b/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"
@@ -117,9 +117,9 @@
             v-hasPermi="['workflow:definition:remove']"
           >删除</el-button>
           <el-dropdown>
-            <span class="el-dropdown-link">
-              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
-            </span>
+          <span class="el-dropdown-link">
+            <i class="el-icon-d-arrow-right el-icon--right"></i>更多
+          </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item
                 icon="el-icon-view"
@@ -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: {
-        title: '',
-        open: false,
-        form: {}
-      },
+      processForm: {},
       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.process.form = {
+      this.processForm = {
         processKey: `Process_${dateTime}`,
         processName: `业务流程_${dateTime}`
-      };
-      this.process.open = true;
+      }
+      this.isDesignerShow = true;
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.process.title = '编辑流程';
-      this.process.form = JSON.parse(JSON.stringify(row));
-      this.process.open = true;
+    /** 设计按钮操作 */
+    handleDesigner(row) {
+      this.processForm = JSON.parse(JSON.stringify(row));
+      this.isDesignerShow = 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();
     }
   }
 };