⚡ add flow switch mode

src/components/third-register/main.vue

@@ -31,12 +31,13 @@
                   placeholder="请输入确认密码"></el-input>
       </el-form-item>
     </el-form>
-    <span slot="footer"
+    <template #footer>
-          class="dialog-footer">
+      <span class="dialog-footer">
         <el-button type="primary"
                    :loading="loading"
                    @click="handleRegister">确 定</el-button>
       </span>
+    </template>
   </el-dialog>
 </template>
 

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)

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(() => {});
     }
   }
 }

src/views/flow/manager.vue

@@ -53,9 +53,29 @@
         <el-tag>{{row.categoryName}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-definition-id="processDefinitionId"></flow-design>
-                 v-model:is-display="flowBox"
+    <el-dialog v-else title="流程图"
-                 :process-definition-id="processDefinitionId"></flow-design>
+               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) {
+      if (this.website.designMode) {
         this.processDefinitionId = row.id;
+      } else {
+        this.flowUrl = `/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
+      }
       this.flowBox = true;
     },
     currentChange (currentPage) {

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) {
+      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)
-        this.flowBox = true;
         })
+      } else {
+        this.flowUrl = `${this.website.designUrl}/index.html#/editor/${row.id}`;
+      }
+      this.flowBox = true;
     },
     handleDeploy (row) {
       this.deployBox = true;

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
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
-                 v-model:is-display="flowBox"
+    <el-dialog v-else title="流程图"
-                 :process-instance-id="processInstanceId"></flow-design>
+               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) {
+      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) {

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
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
-                 v-model:is-display="flowBox"
+    <el-dialog v-else title="流程图"
-                 :process-instance-id="processInstanceId"></flow-design>
+               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) {
+      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) {

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 => {

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 () {
+    if (this.website.designMode) {
       this.processDefinitionId = this.$route.params.processDefinitionId;
+    }
   },
   methods: {
     handleSubmit () {

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;

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
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
-                 v-model:is-display="flowBox"
+    <el-dialog v-else title="流程图"
-                 :process-instance-id="processInstanceId"></flow-design>
+               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) {
+      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) {

src/views/work/start.vue

@@ -46,9 +46,29 @@
         <el-tag>{{row.categoryName}}</el-tag>
       </template>
     </avue-crud>
-    <flow-design is-dialog
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-definition-id="processDefinitionId"></flow-design>
-                 v-model:is-display="flowBox"
+    <el-dialog v-else title="流程图"
-                 :process-definition-id="processDefinitionId"></flow-design>
+               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) {
+      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) {

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
+    <flow-design v-if="this.website.designMode" is-dialog v-model:is-display="flowBox" :process-instance-id="processInstanceId"></flow-design>
-                 v-model:is-display="flowBox"
+    <el-dialog v-else title="流程图"
-                 :process-instance-id="processInstanceId"></flow-design>
+               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) {
+      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) {