完善 bpmnProcessDesigner 流程设计器的使用，基本可用了！

yudao-admin-ui/src/views/bpm/model/index.vue

@@ -67,12 +67,6 @@
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
 
-    <!-- 流程编辑器 -->
-<!--    <el-dialog class="bpmnclass dialogClass" :visible.sync="showBpmnOpen" :before-cancel="cancel" :fullscreen="true">-->
-<!--      <vue-bpmn v-if="showBpmnOpen" product="activiti" @processSave="processSave"-->
-<!--                :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="cancel" />-->
-<!--    </el-dialog>-->
-
     <!-- 流程表单配置详情 -->
     <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
       <div class="test-form">
@@ -83,8 +77,7 @@
 </template>
 
 <script>
-import {deleteModel, deployModel, createModel, updateModel, getModelPage, getModel} from "@/api/bpm/model";
-// import VueBpmn from "@/components/bpmn/VueBpmn";
+import {deleteModel, deployModel, getModelPage} from "@/api/bpm/model";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import {getForm} from "@/api/bpm/form";
 import {decodeFields} from "@/utils/formGenerator";
@@ -93,8 +86,7 @@ import Parser from '@/components/parser/Parser'
 export default {
   name: "model",
   components: {
-    Parser,
-    // VueBpmn
+    Parser
   },
   data() {
     return {
@@ -157,55 +149,22 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    processSave(data) {
-      // TODO 芋艿：临时写死的参数
-      data.category = '1'
-      data.formId = 11
-
-      // 修改的提交
-      if (data.id) {
-        updateModel(data).then(response => {
-          this.msgSuccess("修改成功");
-          // 关闭弹窗，刷新列表
-          this.showBpmnOpen = false
-          this.getList();
-        })
-        return
-      }
-      // 添加的提交
-      createModel(data).then(response => {
-        this.bpmnData.id = response.data
-        this.msgSuccess("保存成功");
-        // 关闭弹窗，刷新列表
-        this.showBpmnOpen = false
-        this.getList();
-      })
-    },
+    /** 新增按钮操作 */
     handleAdd() {
-      // 重置 Model 信息
-      this.reset()
-      // 打开弹窗
-      this.showBpmnOpen = true
-    },
-    cancel() {
-      // 打开弹窗
-      this.showBpmnOpen = false
-      // 重置 Model 信息
-      this.reset()
-      // 刷新列表
-      this.getList()
+      this.$router.push({
+        path:"/bpm/manager/model/edit"
+      });
     },
+    /** 修改按钮操作 */
     handleUpdate(row) {
-      // 重置 Model 信息
-      this.reset()
-      // 获得 Model 信息
-      getModel(row.id).then(response => {
-        this.bpmnXML = response.data.bpmnXml
-        this.bpmnData = response.data
-        // 打开弹窗
-        this.showBpmnOpen = true
-      })
+      this.$router.push({
+        path:"/bpm/manager/model/edit",
+        query:{
+          modelId: row.id
+        }
+      });
     },
+    /** 删除按钮操作 */
     handleDelete(row) {
       const that = this;
       this.$confirm('是否删除该流程！！', "警告", {
@@ -219,6 +178,7 @@ export default {
         })
       })
     },
+    /** 部署按钮操作 */
     handleDeploy(row) {
       const that = this;
       this.$confirm('是否部署该流程！！', "提示", {
@@ -248,19 +208,3 @@ export default {
   }
 };
 </script>
-<style>
-.el-dialog > .el-dialog__body{
-  margin: 0;
-  border: 0;
-}
-.bpmn-viewer-header{
-  background: white;
-}
-.v-modal{
-  z-index: 2000!important;
-}
-.dialogClass{
-  padding: 0  ;
-}
-</style>
-

yudao-admin-ui/src/views/bpm/model/modelEditor.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="app-container">
 
-    <!-- 流程编辑器 -->
+    <!-- 流程设计器，负责绘制流程等 -->
     <my-process-designer :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
-      keyboard ref="processDesigner" @init-finished="initModeler"/>
-    <!-- 右边工具栏 -->
-    <my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" />
+      keyboard ref="processDesigner" @init-finished="initModeler"
+      @save="save"/>
+
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel"
+      :model="model" />
 
   </div>
 </template>
@@ -18,6 +21,7 @@ import CustomContentPadProvider from "@/components/bpmnProcessDesigner/package/d
 import CustomPaletteProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/palette";
 // import xmlObj2json from "./utils/xml2json";
 import MyProcessPalette from "@/components/bpmnProcessDesigner/package/palette/ProcessPalette";
+import {createModel, getModel, updateModel} from "@/api/bpm/model";
 // 自定义侧边栏
 // import MyProcessPanel from "../package/process-panel/ProcessPanel";
 
@@ -32,23 +36,34 @@ export default {
       controlDrawerVisible: false,
       translationsSelf: translations,
       controlForm: {
-        processId: "",
-        processName: "",
         simulation: true,
         labelEditing: false,
         labelVisible: false,
         prefix: "activiti",
         headerButtonSize: "mini",
-        // additionalModel: []
         additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
       },
       addis: {
         CustomContentPadProvider,
         CustomPaletteProvider
-      }
+      },
+      // 流程模型的信息
+      model: {},
     };
   },
-  created() {},
+  created() {
+    // 如果 modelId 非空，说明是修改流程模型
+    const modelId = this.$route.query && this.$route.query.modelId
+    if (modelId) {
+      getModel(modelId).then(response => {
+        this.xmlString = response.data.bpmnXml
+        this.model = {
+          ...response.data,
+          bpmnXml: undefined, // 清空 bpmnXml 属性
+        }
+      })
+    }
+  },
   methods: {
     initModeler(modeler) {
       setTimeout(() => {
@@ -70,7 +85,34 @@ export default {
       //   this.xmlString = undefined;
       //   this.$refs.processDesigner.processRestart();
       // }
-    }
+    },
+    save(bpmnXml) {
+      const data = {
+        ...this.model,
+        bpmnXml: bpmnXml, // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
+      }
+
+      // 修改的提交
+      if (data.id) {
+        updateModel(data).then(response => {
+          this.msgSuccess("修改成功")
+          // 跳转回去
+          this.close()
+        })
+        return
+      }
+      // 添加的提交
+      createModel(data).then(response => {
+        this.msgSuccess("保存成功")
+        // 跳转回去
+        this.close()
+      })
+    },
+    /** 关闭按钮 */
+    close() {
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.push({ path: "/bpm/manager/model", query: { t: Date.now()}})
+    },
   }
 };
 </script>