🎉 升级适配NutFlow工作流设计器

public/index.html

@@ -109,6 +109,7 @@
 <script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/avue/2.8.25/avue.min.js" charset="utf-8"></script>
+<script src="<%= BASE_URL %>cdn/nutflow/wf-design-base/index.umd.min.js" charset="utf-8"></script>
 </body>
 
 </html>

src/api/flow/flow.js

@@ -97,3 +97,27 @@ export const deleteProcessInstance = (params) => {
     params
   })
 }
+
+export const submitModel = (data) => {
+  return request({
+    url: '/api/blade-flow/model/submit',
+    method: 'post',
+    data
+  })
+}
+
+export const detail = (params) => {
+  return request({
+    url: '/api/blade-flow/model/detail',
+    method: 'get',
+    params
+  })
+}
+
+export const modelView = (params) => {
+  return request({
+    url: '/api/blade-flow/process/model-view',
+    method: 'get',
+    params
+  })
+}

src/components/flow-design/main.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <el-dialog v-if="isDialog"
+               :visible.sync="visible"
+               append-to-body
+               destroy-on-close
+               title="流程图展示"
+               width="70%"
+               custom-class="flow-design-dialog">
+      <wf-design-base ref="bpmn"
+                      style="height: 60vh;"
+                      :options="option"></wf-design-base>
+    </el-dialog>
+    <div v-else>
+      <wf-design-base v-if="visible"
+                      ref="bpmn"
+                      style="height: 60vh;"
+                      :options="option"></wf-design-base>
+    </div>
+  </div>
+</template>
+
+<script>
+import {modelView} from '@/api/flow/flow'
+
+export default {
+  name: 'flowDesign',
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    },
+    isDisplay: {
+      type: Boolean,
+      default: false
+    },
+    processInstanceId: String,
+    processDefinitionId: String,
+  },
+  data() {
+    return {
+      visible: false,
+      option: {
+        mode: 'view'
+      }
+    }
+  },
+  watch: {
+    isDisplay: {
+      handler(val) {
+        this.visible = val
+      },
+      immediate: true
+    },
+    visible: {
+      handler(val) {
+        this.$emit('update:is-display', val)
+      }
+    },
+    processInstanceId: {
+      handler(val) {
+        if (!val) return
+        this.getDetail({processInstanceId: this.processInstanceId})
+      },
+      immediate: true
+    },
+    processDefinitionId: {
+      handler(val) {
+        if (!val) return
+        this.getDetail({processDefinitionId: this.processDefinitionId})
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getDetail(params) {
+      modelView(params).then(res => {
+        const data = res.data.data
+        const {xml, flow} = data
+        this.$set(this.option, 'xml', xml)
+        if (flow) {
+          const flows = []
+          flow.forEach(f => {
+            let {endTime} = f
+
+            const ff = {
+              id: f.historyActivityId,
+              class: (!endTime && f.historyActivityType !== 'candidate') ? 'nodePrimary' : ''
+            }
+
+            if (f.historyActivityType === 'sequenceFlow') ff.class = 'lineWarn'
+            else if (!ff.class && f.historyActivityType !== 'candidate') ff.class = 'nodeSuccess'
+
+            const index = flows.findIndex(fl => fl.id === f.historyActivityId)
+            if (index !== -1) flows.splice(index, 1, ff)
+            else flows.push(ff)
+          })
+          this.$set(this.option, 'flows', flows)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.flow-design-dialog {
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -40%);
+  max-height: calc(100% - 30px);
+  max-width: calc(100% - 30px);
+
+  .el-dialog__body {
+    flex: 1;
+    overflow: auto;
+  }
+}
+</style>

src/config/website.js

@@ -42,8 +42,6 @@ export default {
   },
   // 第三方系统授权地址
   authUrl: 'http://localhost/blade-auth/oauth/render',
-  // 流程设计器地址
-  flowDesignUrl: 'http://localhost:9999',
   // 报表设计器地址(cloud端口为8108,boot端口为80)
   reportUrl: 'http://localhost:8108/ureport',
 }

src/main.js

@@ -19,6 +19,7 @@ import './styles/common.scss';
 import basicBlock from './components/basic-block/main';
 import basicContainer from './components/basic-container/main';
 import thirdRegister from './components/third-register/main';
+import flowDesign from './components/flow-design/main';
 import avueUeditor from 'avue-plugin-ueditor';
 import website from '@/config/website';
 import crudCommon from '@/mixins/crud';
@@ -44,11 +45,14 @@ Vue.component('basicContainer', basicContainer);
 Vue.component('basicBlock', basicBlock);
 Vue.component('thirdRegister', thirdRegister);
 Vue.component('avueUeditor', avueUeditor);
+Vue.component('flowDesign', flowDesign);
 Vue.component('tenantPackage', tenantPackage);
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
   Vue.prototype[key] = urls[key];
 });
+// 加载NutFlow
+Vue.use(window.WfDesignBase);
 // 加载website
 Vue.prototype.website = website;
 // 动态加载阿里云字体库

src/views/flow/manager.vue

@@ -23,23 +23,20 @@
       <template slot-scope="scope" slot="menu">
         <el-button type="text"
                    size="small"
+                   icon="el-icon-refresh"
                    v-if="permission.flow_manager_state"
-                   plain
-                   class="none-border"
                    @click.stop="handleState(scope.row,scope.index)">变更状态
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-search"
                    v-if="permission.flow_manager_image"
-                   plain
-                   class="none-border"
                    @click.stop="handleImage(scope.row,scope.index)">流程图
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-delete"
                    v-if="permission.flow_manager_remove"
-                   plain
-                   class="none-border"
                    @click.stop="handleSlotDelete(scope.row,scope.index)">删除
         </el-button>
       </template>
@@ -60,27 +57,7 @@
         <el-tag>{{row.categoryName}}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程图"
+    <flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
-               append-to-body
-               :visible.sync="flowBox"
-               :fullscreen="true">
-      <iframe
-        :src=flowUrl
-        width="100%"
-        height="700"
-        title="流程图"
-        frameBorder="no"
-        border="0"
-        marginWidth="0"
-        marginHeight="0"
-        scrolling="no"
-        allowTransparency="yes">
-      </iframe>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="flowBox = false">关 闭</el-button>
-      </span>
-    </el-dialog>
     <el-dialog title="流程变更"
                append-to-body
                :visible.sync="stateBox"
@@ -128,8 +105,8 @@
           currentPage: 1,
           total: 0
         },
+        processDefinitionId: '',
         flowBox: false,
-        flowUrl: '',
         stateBox: false,
         flowState: '',
         stateOptions: [{
@@ -153,7 +130,7 @@
           viewBtn: false,
           delBtn: false,
           dialogWidth: 900,
-          menuWidth: 150,
+          menuWidth: 250,
           dialogClickModal: false,
           column: [
             {
@@ -329,7 +306,7 @@
         })
       },
       handleImage(row) {
-        this.flowUrl = `/api/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
+        this.processDefinitionId = row.id;
         this.flowBox = true;
       },
       currentChange(currentPage) {
@@ -359,10 +336,3 @@
     }
   };
 </script>
-
-<style>
-  .none-border {
-    border: 0;
-    background-color: transparent !important;
-  }
-</style>

src/views/flow/model.vue

@@ -15,98 +15,107 @@
                @on-load="onLoad">
       <template slot="menuLeft">
         <el-button type="primary"
-                   size="small"
+                   size="mini"
                    icon="el-icon-circle-plus"
                    v-if="permission.flow_model_create"
                    plain
                    @click="handleCreate">创 建
         </el-button>
         <el-button type="danger"
-                   size="small"
+                   size="mini"
                    icon="el-icon-delete"
                    v-if="permission.flow_model_delete"
                    plain
                    @click="handleDelete">删 除
         </el-button>
       </template>
-      <template slot-scope="scope" slot="menu">
+      <template slot-scope="scope"
+                slot="menu">
         <el-button type="text"
-                   size="small"
+                   size="mini"
+                   icon="el-icon-setting"
                    v-if="permission.flow_model_update"
-                   plain
-                   class="none-border"
                    @click.stop="handleUpdate(scope.row,scope.index)">配置
         </el-button>
         <el-button type="text"
-                   size="small"
+                   size="mini"
+                   icon="el-icon-upload2"
                    v-if="permission.flow_model_deploy"
-                   plain
-                   class="none-border"
                    @click.stop="handleDeploy(scope.row,scope.index)">部署
         </el-button>
         <el-button type="text"
-                   size="small"
+                   size="mini"
-                   v-if="permission.flow_model_download"
+                   icon="el-icon-delete"
-                   plain
-                   class="none-border"
-                   @click.stop="handleDownload(scope.row,scope.index)">下载
-        </el-button>
-        <el-button type="text"
-                   size="small"
                    v-if="permission.flow_model_delete"
-                   plain
-                   class="none-border"
                    @click.stop="handleSlotDelete(scope.row,scope.index)">删除
         </el-button>
       </template>
       <template slot-scope="{row}"
                 slot="version">
-        <el-tag>v{{row.version}}</el-tag>
+        <el-tag>v{{ row.version }}</el-tag>
       </template>
     </avue-crud>
     <el-dialog title="流程配置"
                append-to-body
+               destroy-on-close
                :visible.sync="flowBox"
-               :fullscreen="true">
+               :close-on-press-escape="false"
-      <iframe
+               :fullscreen="true"
-        :src=flowUrl
+               :before-close="handleNutflowClose"
-        width="100%"
+               custom-class="wf-dialog">
-        height="700"
+      <wf-design-base v-if="nutflowOption.step === 1"
-        title="流程设计器"
+                      class="animated fadeIn"
-        frameBorder="no"
+                      style="height: calc(100vh - 108px);"
-        border="0"
+                      ref="wf-design"
-        marginWidth="0"
+                      :options="nutflowOption.step1"></wf-design-base>
-        marginHeight="0"
+      <wf-design-base v-if="nutflowOption.step === 2"
-        scrolling="no"
+                      class="animated fadeIn"
-        allowTransparency="yes">
+                      style="height: calc(100vh - 108px);"
-      </iframe>
+                      ref="wf-design-view"
+                      :options="nutflowOption.step2"></wf-design-base>
       <span slot="footer"
-            class="dialog-footer">
+            class="avue-dialog__footer">
-        <el-button @click="flowBox = false">取 消</el-button>
+        <el-button size="small"
-        <el-button type="primary" @click="handleRefresh">确 定</el-button>
+                   @click="handleNutflowClose(() => {}, true)">取 消</el-button>
+        <el-button v-if="nutflowOption.step === 1"
+                   size="small"
+                   type="success"
+                   @click="handleStep(1)">下 一 步</el-button>
+        <el-button v-if="nutflowOption.step === 2"
+                   size="small"
+                   type="success"
+                   @click="handleStep(-1)">上 一 步</el-button>
+        <el-button v-if="nutflowOption.step === 2"
+                   size="small"
+                   type="primary"
+                   @click="handleSubmitModel">确 定</el-button>
       </span>
     </el-dialog>
     <el-dialog title="流程部署"
                append-to-body
                :visible.sync="deployBox"
                width="20%">
-      <avue-form ref="form" :option="optionDeploy" v-model="form" @submit="handleSubmit"/>
+      <avue-form ref="form"
+                 :option="optionDeploy"
+                 v-model="form"
+                 @submit="handleSubmit"/>
       <span slot="footer"
             class="dialog-footer">
         <el-button @click="deployBox = false">取 消</el-button>
-        <el-button type="primary" @click="handleDoDeploy" :loading="deployLoading">确 定</el-button>
+        <el-button type="primary"
+                   @click="handleDoDeploy"
+                   :loading="deployLoading">确 定</el-button>
       </span>
     </el-dialog>
   </basic-container>
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
+import {mapGetters} from "vuex";
-  import website from '@/config/website';
+import {modelList, removeModel, deployModel, submitModel, detail} from "@/api/flow/flow";
-  import {modelList, removeModel, deployModel} from "@/api/flow/flow";
+import {flowCategory} from "@/util/flow";
-  import {flowCategory} from "@/util/flow";
 
-  export default {
+export default {
   data() {
     return {
       form: {},
@@ -190,7 +199,6 @@
       },
       deployBox: false,
       flowBox: false,
-        flowUrl: '',
       option: {
         height: 'auto',
         calcHeight: 30,
@@ -205,8 +213,10 @@
         viewBtn: false,
         delBtn: false,
         dialogWidth: 900,
-          menuWidth: 150,
+        menuWidth: 200,
         dialogClickModal: false,
+        size: 'mini',
+        searchSize: 'mini',
         column: [
           {
             label: '模型主键',
@@ -216,33 +226,45 @@
             label: '模型标识',
             prop: 'modelKey',
             search: true,
-              width: 150,
+            overHidden: true
           },
           {
             label: '模型名称',
             prop: 'name',
             search: true,
-              width: 150,
+            overHidden: true
           },
           {
             label: '流程版本',
             prop: 'version',
             slot: true,
-              width: 80,
+            overHidden: true
           },
           {
             label: '创建时间',
             prop: 'created',
-              width: 165,
+            overHidden: true
           },
           {
             label: '更新时间',
             prop: 'lastUpdated',
-              width: 165,
+            overHidden: true
           },
         ]
       },
-        data: []
+      data: [],
+      nutflowOption: {
+        process: {},
+        step: 1,
+        step1: {
+          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
+        },
+        step2: {
+          mode: 'view',
+          simulation: true,
+          minimap: true,
+        }
+      }
     };
   },
   watch: {
@@ -265,6 +287,61 @@
     }
   },
   methods: {
+    handleSubmitModel() {
+      const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
+      const {businessObject} = registry[0]
+      const {id, name, documentation} = businessObject
+      const description = (documentation && documentation.length > 0) ? documentation[0].text : null
+      const params = {
+        ...this.nutflowOption.process,
+        modelKey: id,
+        name,
+        description,
+        modelEditorXml: this.nutflowOption.process.xml
+      }
+      submitModel(params).then(() => {
+        this.$message.success("操作成功")
+        this.handleNutflowClose()
+        this.onLoad(this.page, this.query)
+      })
+    },
+    handleStep(step) {
+      if (step === 1) { // 下一步
+        this.$refs['wf-design'].getData('xml').then(data => {
+          this.$set(this.nutflowOption.step1, 'xml', data)
+          this.$set(this.nutflowOption.step2, 'xml', data)
+          this.$set(this.nutflowOption.process, 'xml', data)
+          this.$set(this.nutflowOption, 'step', 2)
+        })
+      } else this.$set(this.nutflowOption, 'step', 1)
+    },
+    handleNutflowClose(done, flag) {
+      const initOption = {
+        process: {},
+        step: 1,
+        step1: {
+          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
+        },
+        step2: {
+          mode: 'view',
+          simulation: true,
+          minimap: true,
+        }
+      }
+      if (done || flag) {
+        this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失。', '警告', {
+          type: 'warning'
+        }).then(() => {
+          this.$set(this, 'nutflowOption', initOption)
+          if (typeof done == 'function') done()
+          this.flowBox = false
+        }).catch(() => {
+        })
+      } else {
+        this.$set(this, 'nutflowOption', initOption)
+        this.flowBox = false
+      }
+    },
     handleSubmit(form, done) {
       this.deployLoading = true;
       deployModel({
@@ -332,12 +409,16 @@
         });
     },
     handleCreate() {
-        this.flowUrl = `${website.flowDesignUrl}/index.html`;
       this.flowBox = true;
     },
     handleUpdate(row) {
-        this.flowUrl = `${website.flowDesignUrl}/index.html#/editor/${row.id}`;
+      detail({id: row.id}).then(res => {
+        const data = res.data.data
+        const {modelEditorXml} = data
+        this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
+        this.$set(this.nutflowOption, 'process', data)
         this.flowBox = true;
+      })
     },
     handleDeploy(row) {
       this.deployBox = true;
@@ -346,9 +427,6 @@
     handleDoDeploy() {
       this.$refs.form.submit();
     },
-      handleDownload(row) {
-        window.open(`${website.flowDesignUrl}/app/rest/models/${row.id}/bpmn20`);
-      },
     handleSlotDelete(row) {
       this.$confirm("确定将选择数据删除?", {
         confirmButtonText: "确定",
@@ -367,10 +445,6 @@
           this.onLoad(this.page);
         });
     },
-      handleRefresh() {
-        this.flowBox = false;
-        this.onLoad(this.page);
-      },
     currentChange(currentPage) {
       this.page.currentPage = currentPage;
     },
@@ -391,12 +465,18 @@
       });
     }
   }
-  };
+};
 </script>
 
-<style>
+<style lang="scss">
-  .none-border {
+
-    border: 0;
+.wf-dialog {
-    background-color: transparent !important;
+  .el-dialog__body {
+    padding: 5px;
+  }
+
+  .avue-dialog__footer {
+    text-align: center;
   }
+}
 </style>

src/views/work/claim.vue

@@ -15,24 +15,21 @@
       <template slot-scope="scope" slot="menu">
         <el-button type="text"
                    size="small"
+                   icon="el-icon-download"
                    v-if="permission.work_claim_sign"
-                   plain
-                   class="none-border"
                    @click.stop="handleClaim(scope.row)">签收
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-info"
                    v-if="permission.work_claim_detail"
-                   plain
-                   class="none-border"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-search"
                    v-if="permission.work_claim_follow"
-                   plain
+                   @click.stop="handleImage(scope.row,scope.index)">流程图
-                   class="none-border"
-                   @click.stop="handleImage(scope.row,scope.index)">跟踪
         </el-button>
       </template>
       <template slot-scope="{row}"
@@ -40,27 +37,7 @@
         <el-tag>v{{row.processDefinitionVersion}}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程图"
+    <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
-               append-to-body
-               :visible.sync="flowBox"
-               :fullscreen="true">
-      <iframe
-        :src=flowUrl
-        width="100%"
-        height="700"
-        title="流程图"
-        frameBorder="no"
-        border="0"
-        marginWidth="0"
-        marginHeight="0"
-        scrolling="no"
-        allowTransparency="yes">
-      </iframe>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="flowBox = false">关 闭</el-button>
-      </span>
-    </el-dialog>
   </basic-container>
 </template>
 
@@ -82,8 +59,8 @@
           currentPage: 1,
           total: 0
         },
+        processInstanceId: '',
         flowBox: false,
-        flowUrl: '',
         workBox: false,
         option: {
           height: 'auto',
@@ -100,7 +77,7 @@
           viewBtn: false,
           delBtn: false,
           dialogWidth: 900,
-          menuWidth: 150,
+          menuWidth: 200,
           dialogClickModal: false,
           column: [
             {
@@ -193,7 +170,7 @@
         this.$router.push({path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`});
       },
       handleImage(row) {
-        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+        this.processInstanceId = row.processInstanceId;
         this.flowBox = true;
       },
       currentChange(currentPage){
@@ -222,10 +199,3 @@
     }
   };
 </script>
-
-<style>
-  .none-border {
-    border: 0;
-    background-color: transparent !important;
-  }
-</style>

src/views/work/done.vue

@@ -16,17 +16,15 @@
       <template slot-scope="scope" slot="menu">
         <el-button type="text"
                    size="small"
+                   icon="el-icon-info"
                    v-if="permission.work_done_detail"
-                   plain
-                   class="none-border"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-search"
                    v-if="permission.work_done_follow"
-                   plain
+                   @click.stop="handleImage(scope.row,scope.index)">流程图
-                   class="none-border"
-                   @click.stop="handleImage(scope.row,scope.index)">跟踪
         </el-button>
       </template>
       <template slot-scope="{row}"
@@ -34,27 +32,7 @@
         <el-tag>v{{row.processDefinitionVersion}}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程图"
+    <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
-               append-to-body
-               :visible.sync="flowBox"
-               :fullscreen="true">
-      <iframe
-        :src=flowUrl
-        width="100%"
-        height="700"
-        title="流程图"
-        frameBorder="no"
-        border="0"
-        marginWidth="0"
-        marginHeight="0"
-        scrolling="no"
-        allowTransparency="yes">
-      </iframe>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="flowBox = false">关 闭</el-button>
-      </span>
-    </el-dialog>
   </basic-container>
 </template>
 
@@ -76,8 +54,8 @@
           currentPage: 1,
           total: 0
         },
+        processInstanceId: '',
         flowBox: false,
-        flowUrl: '',
         workBox: false,
         option: {
           height: 'auto',
@@ -169,7 +147,7 @@
         this.$router.push({path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`});
       },
       handleImage(row) {
-        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+        this.processInstanceId = row.processInstanceId;
         this.flowBox = true;
       },
       currentChange(currentPage){
@@ -198,10 +176,3 @@
     }
   };
 </script>
-
-<style>
-  .none-border {
-    border: 0;
-    background-color: transparent !important;
-  }
-</style>

src/views/work/process/leave/detail.vue

@@ -50,8 +50,8 @@
         <div slot="header">
           <span>流程跟踪</span>
         </div>
-        <el-row type="flex" class="row-bg">
+        <el-row class="row-bg">
-          <img :src="src" alt="design">
+          <flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
         </el-row>
       </el-card>
     </el-form>
@@ -85,7 +85,6 @@
       init() {
         this.processInstanceId = this.$route.params.processInstanceId;
         this.businessId = this.$route.params.businessId;
-        this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}&t=${new Date().getTime()}`;
         historyFlowList(this.processInstanceId).then(res => {
           const data = res.data;
           if (data.success) {

src/views/work/process/leave/form.vue

@@ -1,7 +1,12 @@
 <template>
+  <div>
     <basic-container>
       <avue-form :option="option" v-model="form" @submit="handleSubmit"/>
     </basic-container>
+    <basic-container>
+      <flow-design :is-display="true" :process-definition-id="processDefinitionId"></flow-design>
+    </basic-container>
+  </div>
 </template>
 
 <script>
@@ -10,6 +15,7 @@
   export default {
     data() {
       return {
+        processDefinitionId: '',
         form: {},
         option: {
           group: [
@@ -81,6 +87,9 @@
         }
       }
     },
+    created() {
+      this.processDefinitionId = this.$route.params.processDefinitionId;
+    },
     methods: {
       handleSubmit() {
         const params = {

src/views/work/process/leave/handle.vue

@@ -55,8 +55,8 @@
         <div slot="header">
           <span>流程跟踪</span>
         </div>
-        <el-row type="flex" class="row-bg">
+        <el-row class="row-bg">
-          <img :src="src" alt="design">
+          <flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
         </el-row>
       </el-card>
     </el-form>
@@ -104,7 +104,6 @@
         this.taskId = this.$route.params.taskId;
         this.processInstanceId = this.$route.params.processInstanceId;
         this.businessId = this.$route.params.businessId;
-        this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}&t=${new Date().getTime()}`;
         historyFlowList(this.processInstanceId).then(res => {
           const data = res.data;
           if (data.success) {

src/views/work/send.vue

@@ -16,17 +16,15 @@
       <template slot-scope="scope" slot="menu">
         <el-button type="text"
                    size="small"
+                   icon="el-icon-info"
                    v-if="permission.work_send_detail"
-                   plain
-                   class="none-border"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-search"
                    v-if="permission.work_send_follow"
-                   plain
+                   @click.stop="handleImage(scope.row,scope.index)">流程图
-                   class="none-border"
-                   @click.stop="handleImage(scope.row,scope.index)">跟踪
         </el-button>
       </template>
       <template slot-scope="{row}"
@@ -38,27 +36,7 @@
         <el-tag>{{row.processIsFinished==='finished' ? '已完成' : '未完成'}}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程图"
+    <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
-               append-to-body
-               :visible.sync="flowBox"
-               :fullscreen="true">
-      <iframe
-        :src=flowUrl
-        width="100%"
-        height="700"
-        title="流程图"
-        frameBorder="no"
-        border="0"
-        marginWidth="0"
-        marginHeight="0"
-        scrolling="no"
-        allowTransparency="yes">
-      </iframe>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="flowBox = false">关 闭</el-button>
-      </span>
-    </el-dialog>
   </basic-container>
 </template>
 
@@ -80,8 +58,8 @@
           currentPage: 1,
           total: 0
         },
+        processInstanceId: '',
         flowBox: false,
-        flowUrl: '',
         workBox: false,
         option: {
           height: 'auto',
@@ -179,7 +157,7 @@
         this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
       },
       handleImage(row) {
-        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+        this.processInstanceId = row.processInstanceId;
         this.flowBox = true;
       },
       currentChange(currentPage){
@@ -208,10 +186,3 @@
     }
   };
 </script>
-
-<style>
-  .none-border {
-    border: 0;
-    background-color: transparent !important;
-  }
-</style>

src/views/work/start.vue

@@ -22,16 +22,14 @@
       <template slot-scope="scope" slot="menu">
         <el-button type="text"
                    size="small"
+                   icon="el-icon-video-play"
                    v-if="permission.work_start_flow"
-                   plain
-                   class="none-border"
                    @click.stop="handleStart(scope.row)">发起
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-search"
                    v-if="permission.work_start_image"
-                   plain
-                   class="none-border"
                    @click.stop="handleImage(scope.row,scope.index)">流程图
         </el-button>
       </template>
@@ -52,27 +50,7 @@
         <el-tag>{{row.categoryName}}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程图"
+    <flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
-               append-to-body
-               :visible.sync="flowBox"
-               :fullscreen="true">
-      <iframe
-        :src=flowUrl
-        width="100%"
-        height="700"
-        title="流程图"
-        frameBorder="no"
-        border="0"
-        marginWidth="0"
-        marginHeight="0"
-        scrolling="no"
-        allowTransparency="yes">
-      </iframe>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="flowBox = false">关 闭</el-button>
-      </span>
-    </el-dialog>
   </basic-container>
 </template>
 
@@ -95,8 +73,8 @@
           currentPage: 1,
           total: 0
         },
+        processDefinitionId: '',
         flowBox: false,
-        flowUrl: '',
         workBox: false,
         option: {
           height: 'auto',
@@ -204,7 +182,7 @@
         this.$router.push({path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/form/${row.id}`});
       },
       handleImage(row) {
-        this.flowUrl = `/api/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
+        this.processDefinitionId = row.id;
         this.flowBox = true;
       },
       currentChange(currentPage) {
@@ -234,10 +212,3 @@
     }
   };
 </script>
-
-<style>
-  .none-border {
-    border: 0;
-    background-color: transparent !important;
-  }
-</style>

src/views/work/todo.vue

@@ -15,24 +15,21 @@
       <template slot-scope="scope" slot="menu">
         <el-button type="text"
                    size="small"
+                   icon="el-icon-s-check"
                    v-if="permission.work_todo_handle"
-                   plain
-                   class="none-border"
                    @click.stop="handleWork(scope.row)">处理
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-info"
                    v-if="permission.work_todo_detail"
-                   plain
-                   class="none-border"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
         <el-button type="text"
                    size="small"
+                   icon="el-icon-search"
                    v-if="permission.work_todo_follow"
-                   plain
+                   @click.stop="handleImage(scope.row,scope.index)">流程图
-                   class="none-border"
-                   @click.stop="handleImage(scope.row,scope.index)">跟踪
         </el-button>
       </template>
       <template slot-scope="{row}"
@@ -40,27 +37,7 @@
         <el-tag>v{{row.processDefinitionVersion}}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程图"
+    <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
-               append-to-body
-               :visible.sync="flowBox"
-               :fullscreen="true">
-      <iframe
-        :src=flowUrl
-        width="100%"
-        height="700"
-        title="流程图"
-        frameBorder="no"
-        border="0"
-        marginWidth="0"
-        marginHeight="0"
-        scrolling="no"
-        allowTransparency="yes">
-      </iframe>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="flowBox = false">关 闭</el-button>
-      </span>
-    </el-dialog>
   </basic-container>
 </template>
 
@@ -82,8 +59,8 @@
           currentPage: 1,
           total: 0
         },
+        processInstanceId: '',
         flowBox: false,
-        flowUrl: '',
         workBox: false,
         option: {
           height: 'auto',
@@ -100,7 +77,7 @@
           viewBtn: false,
           delBtn: false,
           dialogWidth: 900,
-          menuWidth: 150,
+          menuWidth: 200,
           dialogClickModal: false,
           column: [
             {
@@ -179,7 +156,7 @@
         this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
       },
       handleImage(row) {
-        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+        this.processInstanceId = row.processInstanceId;
         this.flowBox = true;
       },
       currentChange(currentPage){
@@ -208,10 +185,3 @@
     }
   };
 </script>
-
-<style>
-  .none-border {
-    border: 0;
-    background-color: transparent !important;
-  }
-</style>