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

2022-05-06 01:02:03 +08:00
parent 2cbb6669f9
commit 4d3f6652b7
4 changed files with 182 additions and 86 deletions
--- 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;
--- 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%;
--- 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>
--- 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();
    }
  }
 };