From 536a69b81c753fbf4d69ac0bf30b31e6ca3e3feb Mon Sep 17 00:00:00 2001
From: smallchill <smallchill@163.com>
Date: Fri, 31 Mar 2023 23:03:02 +0800
Subject: [PATCH] :zap: add flow switch mode

---
 src/components/third-register/main.vue  | 15 +++----
 src/config/website.js                   |  7 +++-
 src/mixins/index.js                     |  5 +++
 src/views/flow/manager.vue              | 33 +++++++++++++--
 src/views/flow/model.vue                | 53 ++++++++++++++++++++-----
 src/views/work/claim.vue                | 41 +++++++++++++++----
 src/views/work/done.vue                 | 39 ++++++++++++++----
 src/views/work/process/leave/detail.vue |  3 ++
 src/views/work/process/leave/form.vue   |  8 ++--
 src/views/work/process/leave/handle.vue |  8 +++-
 src/views/work/send.vue                 | 39 ++++++++++++++----
 src/views/work/start.vue                | 37 ++++++++++++++---
 src/views/work/todo.vue                 | 41 +++++++++++++++----
 13 files changed, 267 insertions(+), 62 deletions(-)

diff --git a/src/components/third-register/main.vue b/src/components/third-register/main.vue
index 72fde63..f4ca7b4 100644
--- a/src/components/third-register/main.vue
+++ b/src/components/third-register/main.vue
@@ -31,12 +31,13 @@
                   placeholder="请输入确认密码"></el-input>
       </el-form-item>
     </el-form>
-    <span slot="footer"
-          class="dialog-footer">
-      <el-button type="primary"
-                 :loading="loading"
-                 @click="handleRegister">确 定</el-button>
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary"
+                   :loading="loading"
+                   @click="handleRegister">确 定</el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 
@@ -130,4 +131,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/config/website.js b/src/config/website.js
index 5f7ecae..af6cafc 100755
--- a/src/config/website.js
+++ b/src/config/website.js
@@ -45,7 +45,10 @@ export default {
     href: 'path',
     meta: 'meta'
   },
-
+  // 流程设计器类型(true->nutflow,false->flowable)
+  designMode: false,
+  // 流程设计器地址(flowable模式)
+  designUrl: 'http://localhost:9999',
   // 第三方系统授权地址
   authUrl: 'http://localhost/blade-auth/oauth/render',
   // 报表设计器地址(cloud端口为8108,boot端口为80)
@@ -54,4 +57,4 @@ export default {
   ssoUrl: 'http://localhost:8100/oauth/authorize?client_id=saber&response_type=code&redirect_uri=',
   // 单点登录回调地址(Saber服务的地址)
   redirectUri: 'http://localhost:1888',
-}
\ No newline at end of file
+}
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 5d0862c..42a0a97 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -10,6 +10,8 @@ export default {
     };
   },
   created () {
+    //加载工作流路由集
+    this.loadFlowRoutes();
     //实时检测刷新token
     this.refreshToken();
   },
@@ -37,6 +39,9 @@ export default {
             });
         }
       }, 1000);
+    },
+    loadFlowRoutes() {
+      this.$store.dispatch("FlowRoutes").then(() => {});
     }
   }
 }
diff --git a/src/views/flow/manager.vue b/src/views/flow/manager.vue
index 1036f64..c040a56 100644
--- a/src/views/flow/manager.vue
+++ b/src/views/flow/manager.vue
@@ -53,9 +53,29 @@
         <el-tag>{{row.categoryName}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
-                 v-model:is-display="flowBox"
-                 :process-definition-id="processDefinitionId"></flow-design>
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-definition-id="processDefinitionId"></flow-design>
+    <el-dialog v-else title="流程图"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程图"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
     <el-dialog title="流程变更"
                append-to-body
                v-model="stateBox"
@@ -107,6 +127,7 @@ export default {
       },
       processDefinitionId: '',
       flowBox: false,
+      flowUrl: '',
       stateBox: false,
       flowState: '',
       stateOptions: [{
@@ -306,7 +327,11 @@ export default {
       })
     },
     handleImage (row) {
-      this.processDefinitionId = row.id;
+      if (this.website.designMode) {
+        this.processDefinitionId = row.id;
+      } else {
+        this.flowUrl = `/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {
diff --git a/src/views/flow/model.vue b/src/views/flow/model.vue
index 09f29d8..858a468 100644
--- a/src/views/flow/model.vue
+++ b/src/views/flow/model.vue
@@ -56,7 +56,7 @@
         <el-tag>v{{ row.version }}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程配置"
+    <el-dialog v-if="this.website.designMode" title="流程配置"
                append-to-body
                destroy-on-close
                v-model="flowBox"
@@ -89,6 +89,29 @@
         </span>
       </template>
     </el-dialog>
+    <el-dialog v-else title="流程配置"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程设计器"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">取 消</el-button>
+          <el-button type="primary" @click="handleRefresh">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
     <el-dialog title="流程部署"
                append-to-body
                v-model="deployBox"
@@ -198,6 +221,7 @@ export default {
       },
       deployBox: false,
       flowBox: false,
+      flowUrl: '',
       option: {
         height: 'auto',
         calcHeight: 32,
@@ -212,7 +236,7 @@ export default {
         viewBtn: false,
         delBtn: false,
         dialogWidth: 900,
-        menuWidth: 200,
+        menuWidth: 220,
         dialogClickModal: false,
         size: 'mini',
         searchSize: 'mini',
@@ -408,16 +432,27 @@ export default {
         });
     },
     handleCreate () {
+      if (!this.website.designMode) {
+        this.flowUrl = `${this.website.designUrl}/index.html`;
+      }
       this.flowBox = true;
     },
+    handleRefresh() {
+      this.flowBox = false;
+      this.onLoad(this.page);
+    },
     handleUpdate (row) {
-      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;
-      })
+      if (this.website.designMode) {
+        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)
+        })
+      } else {
+        this.flowUrl = `${this.website.designUrl}/index.html#/editor/${row.id}`;
+      }
+      this.flowBox = true;
     },
     handleDeploy (row) {
       this.deployBox = true;
diff --git a/src/views/work/claim.vue b/src/views/work/claim.vue
index f0e7b4d..ead5886 100644
--- a/src/views/work/claim.vue
+++ b/src/views/work/claim.vue
@@ -21,7 +21,7 @@
         </el-button>
         <el-button type="primary"
                    text
-                   icon="el-icon-info"
+                   icon="el-icon-view"
                    v-if="permission.work_claim_detail"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
@@ -36,9 +36,29 @@
         <el-tag>v{{row.processDefinitionVersion}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
-                 v-model:is-display="flowBox"
-                 :process-instance-id="processInstanceId"></flow-design>
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
+    <el-dialog v-else title="流程图"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程图"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -62,6 +82,7 @@ export default {
       },
       processInstanceId: '',
       flowBox: false,
+      flowUrl: '',
       workBox: false,
       option: {
         height: 'auto',
@@ -78,7 +99,7 @@ export default {
         viewBtn: false,
         delBtn: false,
         dialogWidth: 900,
-        menuWidth: 200,
+        menuWidth: 250,
         dialogClickModal: false,
         column: [
           {
@@ -95,7 +116,7 @@ export default {
             prop: "category",
             search: true,
             hide: true,
-            width: 85,
+            width: 100,
           },
           {
             label: '流程名称',
@@ -115,7 +136,7 @@ export default {
           {
             label: '申请时间',
             prop: 'createTime',
-            width: 165,
+            width: 180,
           },
         ]
       },
@@ -171,7 +192,11 @@ export default {
       this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
     },
     handleImage (row) {
-      this.processInstanceId = row.processInstanceId;
+      if (this.website.designMode) {
+        this.processInstanceId = row.processInstanceId;
+      } else {
+        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {
diff --git a/src/views/work/done.vue b/src/views/work/done.vue
index 42f8709..73b3a37 100644
--- a/src/views/work/done.vue
+++ b/src/views/work/done.vue
@@ -16,7 +16,7 @@
       <template #menu="scope">
         <el-button type="primary"
                    text
-                   icon="el-icon-info"
+                   icon="el-icon-view"
                    v-if="permission.work_done_detail"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
@@ -31,9 +31,29 @@
         <el-tag>v{{row.processDefinitionVersion}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
-                 v-model:is-display="flowBox"
-                 :process-instance-id="processInstanceId"></flow-design>
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
+    <el-dialog v-else title="流程图"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程图"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -57,6 +77,7 @@ export default {
       },
       processInstanceId: '',
       flowBox: false,
+      flowUrl: '',
       workBox: false,
       option: {
         height: 'auto',
@@ -72,7 +93,7 @@ export default {
         viewBtn: false,
         delBtn: false,
         dialogWidth: 900,
-        menuWidth: 150,
+        menuWidth: 200,
         dialogClickModal: false,
         column: [
           {
@@ -109,7 +130,7 @@ export default {
           {
             label: '申请时间',
             prop: 'createTime',
-            width: 165,
+            width: 180,
           },
         ]
       },
@@ -148,7 +169,11 @@ export default {
       this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
     },
     handleImage (row) {
-      this.processInstanceId = row.processInstanceId;
+      if (this.website.designMode) {
+        this.processInstanceId = row.processInstanceId;
+      } else {
+        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {
diff --git a/src/views/work/process/leave/detail.vue b/src/views/work/process/leave/detail.vue
index cad27bb..2de35f0 100644
--- a/src/views/work/process/leave/detail.vue
+++ b/src/views/work/process/leave/detail.vue
@@ -103,6 +103,9 @@ export default {
   },
   methods: {
     init () {
+      if (!this.website.designMode) {
+        this.src = `/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}&t=${new Date().getTime()}`;
+      }
       this.processInstanceId = this.$route.params.processInstanceId;
       this.businessId = this.$route.params.businessId;
       historyFlowList(this.processInstanceId).then(res => {
diff --git a/src/views/work/process/leave/form.vue b/src/views/work/process/leave/form.vue
index 07c0bc9..475aa94 100644
--- a/src/views/work/process/leave/form.vue
+++ b/src/views/work/process/leave/form.vue
@@ -5,7 +5,7 @@
                  v-model="form"
                  @submit="handleSubmit" />
     </basic-container>
-    <basic-container>
+    <basic-container v-if="this.website.designMode">
       <flow-design :is-display="true"
                    :process-definition-id="processDefinitionId"></flow-design>
     </basic-container>
@@ -23,7 +23,7 @@ export default {
       option: {
         group: [
           {
-            icon: 'el-icon-info',
+            icon: 'el-icon-view',
             label: '请假基础信息',
             prop: 'group1',
             column: [
@@ -91,7 +91,9 @@ export default {
     }
   },
   created () {
-    this.processDefinitionId = this.$route.params.processDefinitionId;
+    if (this.website.designMode) {
+      this.processDefinitionId = this.$route.params.processDefinitionId;
+    }
   },
   methods: {
     handleSubmit () {
diff --git a/src/views/work/process/leave/handle.vue b/src/views/work/process/leave/handle.vue
index e3f31dd..9c7662d 100644
--- a/src/views/work/process/leave/handle.vue
+++ b/src/views/work/process/leave/handle.vue
@@ -78,10 +78,13 @@
             <span>流程跟踪</span>
           </div>
         </template>
-        <el-row class="row-bg">
+        <el-row v-if="this.website.designMode" class="row-bg">
           <flow-design :is-display="true"
                        :process-instance-id="processInstanceId"></flow-design>
         </el-row>
+        <el-row v-else type="flex" class="row-bg">
+          <img :src="src" alt="design">
+        </el-row>
       </el-card>
     </el-form>
   </basic-container>
@@ -125,6 +128,9 @@ export default {
   },
   methods: {
     init () {
+      if (!this.website.designMode) {
+        this.src = `/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}&t=${new Date().getTime()}`;
+      }
       this.taskId = this.$route.params.taskId;
       this.processInstanceId = this.$route.params.processInstanceId;
       this.businessId = this.$route.params.businessId;
diff --git a/src/views/work/send.vue b/src/views/work/send.vue
index 7312d6c..fe84687 100644
--- a/src/views/work/send.vue
+++ b/src/views/work/send.vue
@@ -16,7 +16,7 @@
       <template #menu="scope">
         <el-button type="primary"
                    text
-                   icon="el-icon-info"
+                   icon="el-icon-view"
                    v-if="permission.work_send_detail"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
@@ -34,9 +34,29 @@
         <el-tag>{{row.processIsFinished==='finished' ? '已完成' : '未完成'}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
-                 v-model:is-display="flowBox"
-                 :process-instance-id="processInstanceId"></flow-design>
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
+    <el-dialog v-else title="流程图"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程图"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -60,6 +80,7 @@ export default {
       },
       processInstanceId: '',
       flowBox: false,
+      flowUrl: '',
       workBox: false,
       option: {
         height: 'auto',
@@ -75,7 +96,7 @@ export default {
         viewBtn: false,
         delBtn: false,
         dialogWidth: 900,
-        menuWidth: 150,
+        menuWidth: 200,
         dialogClickModal: false,
         column: [
           {
@@ -118,7 +139,7 @@ export default {
           {
             label: '申请时间',
             prop: 'createTime',
-            width: 165,
+            width: 180,
           },
         ]
       },
@@ -157,7 +178,11 @@ export default {
       this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
     },
     handleImage (row) {
-      this.processInstanceId = row.processInstanceId;
+      if (this.website.designMode) {
+        this.processInstanceId = row.processInstanceId;
+      } else {
+        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {
diff --git a/src/views/work/start.vue b/src/views/work/start.vue
index f12b8a1..2424bc3 100644
--- a/src/views/work/start.vue
+++ b/src/views/work/start.vue
@@ -46,9 +46,29 @@
         <el-tag>{{row.categoryName}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
-                 v-model:is-display="flowBox"
-                 :process-definition-id="processDefinitionId"></flow-design>
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-definition-id="processDefinitionId"></flow-design>
+    <el-dialog v-else title="流程图"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程图"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -73,6 +93,7 @@ export default {
       },
       processDefinitionId: '',
       flowBox: false,
+      flowUrl: '',
       workBox: false,
       option: {
         height: 'auto',
@@ -87,7 +108,7 @@ export default {
         addBtn: false,
         viewBtn: false,
         delBtn: false,
-        menuWidth: 150,
+        menuWidth: 200,
         dialogWidth: 900,
         dialogClickModal: false,
         column: [
@@ -110,7 +131,7 @@ export default {
             slot: true,
             prop: "category",
             search: true,
-            width: 85,
+            width: 100,
           },
           {
             label: '流程标识',
@@ -180,7 +201,11 @@ export default {
       this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/form/${row.id}` });
     },
     handleImage (row) {
-      this.processDefinitionId = row.id;
+      if (this.website.designMode) {
+        this.processDefinitionId = row.id;
+      } else {
+        this.flowUrl = `/api/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {
diff --git a/src/views/work/todo.vue b/src/views/work/todo.vue
index c9283b6..33d11e1 100644
--- a/src/views/work/todo.vue
+++ b/src/views/work/todo.vue
@@ -15,13 +15,13 @@
       <template #menu="scope">
         <el-button type="primary"
                    text
-                   icon="el-icon-s-check"
+                   icon="el-icon-video-play"
                    v-if="permission.work_todo_handle"
                    @click.stop="handleWork(scope.row)">处理
         </el-button>
         <el-button type="primary"
                    text
-                   icon="el-icon-info"
+                   icon="el-icon-view"
                    v-if="permission.work_todo_detail"
                    @click.stop="handleDetail(scope.row)">详情
         </el-button>
@@ -36,9 +36,29 @@
         <el-tag>v{{row.processDefinitionVersion}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
-                 v-model:is-display="flowBox"
-                 :process-instance-id="processInstanceId"></flow-design>
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
+    <el-dialog v-else title="流程图"
+               append-to-body
+               v-model="flowBox"
+               :fullscreen="true">
+      <iframe
+        :src=flowUrl
+        width="100%"
+        height="700"
+        title="流程图"
+        frameBorder="no"
+        border="0"
+        marginWidth="0"
+        marginHeight="0"
+        scrolling="no"
+        allowTransparency="yes">
+      </iframe>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="flowBox = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -62,6 +82,7 @@ export default {
       },
       processInstanceId: '',
       flowBox: false,
+      flowUrl: '',
       workBox: false,
       option: {
         height: 'auto',
@@ -78,7 +99,7 @@ export default {
         viewBtn: false,
         delBtn: false,
         dialogWidth: 900,
-        menuWidth: 200,
+        menuWidth: 250,
         dialogClickModal: false,
         column: [
           {
@@ -115,7 +136,7 @@ export default {
           {
             label: '申请时间',
             prop: 'createTime',
-            width: 165,
+            width: 180,
           },
         ]
       },
@@ -157,7 +178,11 @@ export default {
       this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
     },
     handleImage (row) {
-      this.processInstanceId = row.processInstanceId;
+      if (this.website.designMode) {
+        this.processInstanceId = row.processInstanceId;
+      } else {
+        this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {