增加流程图的预览界面

yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__container">
+      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BpmnViewer from "bpmn-js/lib/Viewer";
+import DefaultEmptyXML from "./plugins/defaultEmpty";
+
+export default {
+  name: "MyProcessViewer",
+  componentName: "MyProcessViewer",
+  props: {
+    value: String, // xml 字符串
+    prefix: {
+      type: String,
+      default: "camunda"
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.initBpmnModeler();
+    this.createNewDiagram(this.value);
+    this.$once("hook:beforeDestroy", () => {
+      if (this.bpmnModeler) this.bpmnModeler.destroy();
+      this.$emit("destroy", this.bpmnModeler);
+      this.bpmnModeler = null;
+    });
+  },
+  watch: {
+    value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
+      this.createNewDiagram(newValue);
+    }
+  },
+  methods: {
+    initBpmnModeler() {
+      if (this.bpmnModeler) return;
+      this.bpmnModeler = new BpmnViewer({
+        container: this.$refs["bpmn-canvas"]
+      })
+    },
+    /* 创建新的流程图 */
+    async createNewDiagram(xml) {
+      // 将字符串转换成图显示出来
+      let newId = `Process_${new Date().getTime()}`;
+      let newName = `业务流程_${new Date().getTime()}`;
+      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
+      try {
+        console.log(this.bpmnModeler.importXML);
+        let { warnings } = await this.bpmnModeler.importXML(xmlString);
+        if (warnings && warnings.length) {
+          warnings.forEach(warn => console.warn(warn));
+        }
+      } catch (e) {
+        console.error(`[Process Designer Warn]: ${e?.message || e}`);
+      }
+    }
+  }
+};
+</script>

yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.js

@@ -0,0 +1,7 @@
+import MyProcessViewer from "./ProcessViewer.vue";
+
+MyProcessViewer.install = function(Vue) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer);
+};
+
+export default MyProcessViewer;

yudao-admin-ui/src/components/bpmnProcessDesigner/package/index.js

@@ -1,7 +1,8 @@
 import MyProcessDesigner from "./designer";
 import MyProcessPenal from "./penal";
+import MyProcessViewer from './designer/index2';
 
-const components = [MyProcessDesigner, MyProcessPenal];
+const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer];
 
 const install = function(Vue) {
   components.forEach(component => {

yudao-admin-ui/src/router/index.js

@@ -176,6 +176,19 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/bpm',
+    component: Layout,
+    hidden: true, // TODO 芋艿：未来可删除，暂时作为一个测试页
+    children: [
+      {
+        path: 'manager/model/view',
+        component: (resolve) => require(['@/views/bpm/model/modelViewer'], resolve),
+        name: '流程模型-浏览',
+        meta: { title: '流程模型-浏览' }
+      }
+    ]
+  },
 ]
 
 export default new Router({

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

@@ -34,7 +34,13 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column label="流程标识" align="center" prop="key" />
-      <el-table-column label="流程名称" align="center" prop="name" />
+      <el-table-column label="流程名称" align="center" prop="name">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleBpmnDetail(scope.row)">
+            <span>{{ scope.row.name }}</span>
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="流程分类" align="center" prop="category">
         <template slot-scope="scope">
           <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
@@ -69,15 +75,18 @@
 
     <!-- 流程表单配置详情 -->
     <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
-      <div class="test-form">
+      <parser :key="new Date().getTime()" :form-conf="detailForm" />
-        <parser :key="new Date().getTime()" :form-conf="detailForm" />
+    </el-dialog>
-      </div>
+
+    <!-- 流程模型图的预览 -->
+    <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {deleteModel, deployModel, getModelPage} from "@/api/bpm/model";
+import {deleteModel, deployModel, getModelPage, getModel} from "@/api/bpm/model";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import {getForm} from "@/api/bpm/form";
 import {decodeFields} from "@/utils/formGenerator";
@@ -107,7 +116,9 @@ export default {
       // BPMN 数据
       showBpmnOpen: false,
       bpmnXML: null,
-      bpmnData: {},
+      bpmnControlForm: {
+        prefix: "activiti"
+      },
 
       // 流程表单详情
       detailOpen: false,
@@ -205,6 +216,22 @@ export default {
         this.detailOpen = true
       })
     },
+    /** 流程图的详情按钮操作 */
+    handleBpmnDetail(row) {
+      getModel(row.id).then(response => {
+        this.bpmnXML = response.data.bpmnXml
+        // 弹窗打开
+        this.showBpmnOpen = true
+      })
+    },
   }
 };
 </script>
+
+<style lang="scss">
+
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="app-container">
+
+    <!-- 流程设计器，负责绘制流程等 -->
+    <my-process-viewer key="designer" v-model="xmlString" v-bind="controlForm" keyboard ref="processDesigner" />
+
+  </div>
+</template>
+
+<script>
+import {getModel} from "@/api/bpm/model";
+export default {
+  name: "App",
+  components: { },
+  data() {
+    return {
+      xmlString: "", // BPMN XML
+      controlForm: {
+        prefix: "activiti"
+      },
+    };
+  },
+  created() {
+    // 如果 modelId 非空，说明是修改流程模型
+    const modelId = this.$route.query && this.$route.query.modelId
+    if (modelId) {
+      getModel(modelId).then(response => {
+        this.xmlString = response.data.bpmnXml
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+.my-process-designer {
+  height: calc(100vh - 84px);
+}
+
+</style>