feat: 发起前查看流程图

src/api/plugin/workflow/process.js

@@ -140,6 +140,28 @@ export const detail = (params) => {
   })
 }
 
+/**
+ * 获取模型xml - 根据processDefId
+ */
+ export const getXmlByProcessDefId = (params) => {
+  return request({
+    url: `${prefix}/getXmlByProcessDefId`,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取模型xml - 根据processDefKey
+ */
+ export const getXmlByProcessDefKey = (params) => {
+  return request({
+    url: `${prefix}/getXmlByProcessDefKey`,
+    method: 'get',
+    params
+  })
+}
+
 /**
  * 发起流程
  */

src/views/plugin/workflow/process/start.vue

@@ -40,6 +40,11 @@
                          size="small"
                          icon="el-icon-video-play"
                          @click="dynamicRoute(row, 'start')">发起</el-button>
+              <el-button v-if="permission.wf_process_start_flow"
+                         type="text"
+                         size="small"
+                         icon="el-icon-search"
+                         @click="handleFlow(row)">流程图</el-button>
             </template>
           </avue-crud>
         </template>
@@ -52,11 +57,22 @@
                        @reset="searchReset"></wf-start-grid>
       </el-main>
     </el-container>
+
+    <el-dialog :visible.sync="bpmnVisible"
+               append-to-body
+               destroy-on-close
+               title="流程图"
+               width="70%"
+               custom-class="wf-dialog">
+      <wf-design ref="bpmn"
+                 style="height: 60vh;"
+                 :options="bpmnOption"></wf-design>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-import { processList as getList } from "@/api/plugin/workflow/process";
+import { processList as getList, getXmlByProcessDefId } from "@/api/plugin/workflow/process";
 
 import { mapGetters } from "vuex";
 
@@ -142,6 +158,8 @@ export default {
         ]
       },
       data: [],
+      bpmnVisible: false,
+      bpmnOption: {}
     };
   },
   computed: {
@@ -169,6 +187,18 @@ export default {
     this.handleChangeMode(localStorage.getItem("wf-start-mode") || 'list')
   },
   methods: {
+    handleFlow(row) {
+      getXmlByProcessDefId({ processDefId: row.id }).then(res => {
+        const xml = res.data.data
+        if (xml) {
+          this.bpmnOption = {
+            mode: 'view',
+            xml,
+          }
+          this.bpmnVisible = true
+        } else this.$message.error('没有可显示的流程图')
+      })
+    },
     handleChangeMode(mode) {
       localStorage.setItem("wf-start-mode", mode)
       this.mode = mode
@@ -218,7 +248,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .avue-crud__img {
+::v-deep .avue-crud__img {
   img {
     width: 32px;
     height: 32px;