feat: 流程详情页面优化显示

ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue

@@ -1,23 +1,21 @@
 <template>
   <div class="app-container">
     <el-card class="box-card" >
-        <div slot="header" class="clearfix">
-          <span class="el-icon-document">基础信息</span>
-          <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
-        </div>
-
-      <!--流程处理表单模块-->
-      <el-col :span="16" :offset="6">
-          <div>
-            <parser :key="new Date().getTime()" :form-conf="variablesData" />
-          </div>
-     </el-col>
-    </el-card>
-    <!--流程流转记录-->
-    <el-card class="box-card" v-if="flowRecordList">
-          <div slot="header" class="clearfix">
-            <span class="el-icon-notebook-1">审批记录</span>
-          </div>
+      <div slot="header" class="clearfix">
+        <span class="el-icon-document">已发任务</span>
+        <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
+      </div>
+      <el-tabs  tab-position="top" @tab-click="handleClick">
+        <!--表单信息-->
+        <el-tab-pane label="表单信息">
+          <el-col :span="16" :offset="4">
+            <div class="test-form">
+                <parser :key="new Date().getTime()" :form-conf="variablesData" />
+            </div>
+         </el-col>
+        </el-tab-pane>
+        <!--流程流转记录-->
+        <el-tab-pane label="流转记录">
           <el-col :span="16" :offset="4" >
             <div class="block">
               <el-timeline>
@@ -61,12 +59,13 @@
               </el-timeline>
             </div>
           </el-col>
-      </el-card>
-    <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span class="el-icon-picture-outline">流程图</span>
-        </div>
-        <flow :xmlData="xmlData" :taskData="taskList"></flow>
+        </el-tab-pane>
+        <!--流程图-->
+        <el-tab-pane label="流程图">
+          <flow :xmlData="xmlData" :taskData="taskList"></flow>
+        </el-tab-pane>
+    </el-tabs>
+    <el-button style="position: absolute;right:35px;top:35px;"  type="primary" @click="goBack">关闭</el-button>
     </el-card>
   </div>
 </template>
@@ -75,7 +74,7 @@
 import {flowRecord} from "@/api/flowable/finished";
 import Parser from '@/components/parser/Parser'
 import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
-import flow from '@/views/flowable/task/record/flow'
+import flow from '@/views/flowable/task/myProcess/detail/flow'
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
@@ -121,6 +120,9 @@ export default {
     this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
   },
   methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
     /** xml 文件 */
     getModelDetail(deployId) {
       // 发送请求，获取xml

ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue

@@ -6,7 +6,7 @@
       :is-view="true"
       :taskList="taskData"
     />-->
-    <flow-view :xmlData="xmlData" :taskList="taskData"/>
+    <flow-view :xmlData="xmlData"/>
   </div>
 </template>
 <script>
@@ -24,10 +24,6 @@ export default {
       type: String,
       default: ''
     },
-    taskData: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {};

ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue

@@ -21,14 +21,11 @@ import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
 export default {
   name: "FlowView",
   props: {
+    // xml 数据
     xmlData: {
       type: String,
       default: ''
     },
-    taskList: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -36,10 +33,14 @@ export default {
     };
   },
   watch: {
-    xmlData: function(val) {
-      if (val) {
-        this.getImg(val)
-      }
+    xmlData: {
+      handler(newVal) {
+        if (newVal) {
+          this.loadFlowImg(newVal)
+        }
+      },
+      immediate: true, // 立即生效
+      deep: true  //监听对象或数组的时候，要用到深度监听
     }
   },
   mounted() {
@@ -49,28 +50,18 @@ export default {
       container: this.$refs.flowCanvas,
       height: 'calc(100vh - 200px)',
     });
-    this.getImg(this.xmlData)
   },
   methods: {
-    // 获取流程图片
-    async getImg(xmlUrl) {
+    // 加载流程图片
+    async loadFlowImg(xmlData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(xmlUrl);
+        await self.bpmnViewer.importXML(xmlData);
         self.fitViewport()
-        if (self.taskList !==undefined && self.taskList.length > 0 ) {
-          self.fillColor()
-        }
       } catch (err) {
         console.error(err.message, err.warnings)
       }
     },
-    // 设置高亮颜色的class
-    setNodeColor(nodeCodes, colorClass, canvas) {
-      for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
-      }
-    },
     // 让图能自适应屏幕
     fitViewport() {
       this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
@@ -81,78 +72,6 @@ export default {
       this.zoom += (zoomIn ? 0.1 : -0.1)
       if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
     },
-
-    // 设置高亮颜色的
-    fillColor() {
-      const canvas = this.bpmnViewer.get('canvas')
-      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = this.taskList.find(m => m.key === n.id)
-        const todoTask = this.taskList.find(m => !m.completed)
-        const endTask = this.taskList[this.taskList.length - 1]
-        if (n.$type === 'bpmn:UserTask') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
-                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
-                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                }
-              }
-            })
-          }
-        }
-        // 排他网关
-        else if (n.$type === 'bpmn:ExclusiveGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-
-            })
-          }
-
-        }
-        // 并行网关
-        else if (n.$type === 'bpmn:ParallelGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-            })
-          }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
-          n.outgoing.forEach(nn => {
-            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
-            if (completeTask) {
-              canvas.addMarker(nn.id, 'highlight')
-              canvas.addMarker(n.id, 'highlight')
-              return
-            }
-          })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
-          if (endTask.key === n.id && endTask.completed) {
-            canvas.addMarker(n.id, 'highlight')
-            return
-          }
-        }
-      })
-    },
   }
 };
 </script>
@@ -202,33 +121,6 @@ export default {
       min-height: 650px;
     }
 
-    .highlight.djs-shape .djs-visual > :nth-child(1) {
-      fill: green !important;
-      stroke: green !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight.djs-shape .djs-visual > :nth-child(2) {
-      fill: green !important;
-    }
-    .highlight.djs-shape .djs-visual > path {
-      fill: green !important;
-      fill-opacity: 0.2 !important;
-      stroke: green !important;
-    }
-    .highlight.djs-connection > .djs-visual > path {
-      stroke: green !important;
-    }
-    .highlight-todo.djs-connection > .djs-visual > path {
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-      fill: orange !important;
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
     .overlays-div {
       font-size: 10px;
       color: red;

ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue

@@ -2,42 +2,34 @@
   <div class="app-container">
     <el-card class="box-card" >
       <div slot="header" class="clearfix">
-        <span class="el-icon-document">基础信息</span>
-        <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
+        <span class="el-icon-document">发起任务</span>
+        <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
       </div>
-      <!--初始化流程加载表单信息-->
-      <el-col :span="16" :offset="4">
-        <div class="test-form">
-          <parser :key="new Date().getTime()"  :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
-        </div>
-      </el-col>
-    </el-card>
-
-    <!--审批正常流程-->
-    <el-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body>
-      <el-form ref="taskForm" :model="taskForm">
-        <el-form-item prop="targetKey">
-          <!--          <el-row :gutter="24">-->
-          <flow-user v-if="checkSendUser" :checkType="checkType"  @handleUserSelect="handleUserSelect"></flow-user>
-          <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role>
-          <!--          </el-row>-->
-        </el-form-item>
-        <el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
-          <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="completeOpen = false">取 消</el-button>
-        <el-button type="primary" @click="taskComplete">确 定</el-button>
-      </span>
-    </el-dialog>
-
-    <!--流程图-->
-    <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span class="el-icon-picture-outline">流程图</span>
-        </div>
-        <flow :xmlData="xmlData" :taskData="taskList"></flow>
+      <el-tabs  tab-position="top" @tab-click="handleClick">
+        <!--表单信息-->
+        <el-tab-pane label="表单信息">
+            <!--初始化流程加载表单信息-->
+            <el-col :span="16" :offset="4">
+              <div class="test-form">
+                <parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
+              </div>
+            </el-col>
+        </el-tab-pane>
+        <!--流程图-->
+        <el-tab-pane label="流程图">
+              <flow :xmlData="xmlData"></flow>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button style="position: absolute;right:35px;top:35px;"  type="primary" @click="goBack">关闭</el-button>
+      <!--选择流程接收人-->
+      <el-dialog :title="taskTitle" :visible.sync="taskOpen" width="65%" append-to-body>
+        <flow-user v-if="checkSendUser" :checkType="checkType"  @handleUserSelect="handleUserSelect"/>
+        <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"/>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="taskOpen = false">取 消</el-button>
+          <el-button type="primary" @click="submitTask">提 交</el-button>
+        </span>
+      </el-dialog>
     </el-card>
   </div>
 </template>
@@ -45,26 +37,25 @@
 <script>
 import Parser from '@/components/parser/Parser'
 import {definitionStart, readXml} from "@/api/flowable/definition";
-import flow from '@/views/flowable/task/record/flow'
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import {listUser} from "@/api/system/user";
+import flow from '@/views/flowable/task/myProcess/send/flow'
 import {flowFormData} from "@/api/flowable/process";
 import {getNextFlowNodeByStart} from "@/api/flowable/todo";
+import FlowUser from '@/components/flow/User'
+import FlowRole from '@/components/flow/Role'
 
 export default {
   name: "Record",
   components: {
     Parser,
     flow,
+    FlowUser,
+    FlowRole,
   },
   props: {},
   data() {
     return {
       // 模型xml数据
       xmlData: "",
-      taskList: [],
-      // 用户表格数据
-      userList: null,
       defaultProps: {
         children: "children",
         label: "label"
@@ -75,45 +66,32 @@ export default {
       },
       // 遮罩层
       loading: true,
-      rules: {}, // 表单校验
-      variablesForm: {}, // 流程变量数据
-      taskForm:{
-        multiple: false,
-        comment:"", // 意见内容
-        procInsId: "", // 流程实例编号
-        instanceId: "", // 流程实例编号
-        deployId: "",  // 流程定义编号
-        taskId: "" ,// 流程任务编号
-        procDefId: "",  // 流程编号
-        vars: "",
-        targetKey:""
-      },
+      deployId: "",  // 流程定义编号
+      procDefId: "",  // 流程实例编号
       formConf: {}, // 默认表单数据
       variables: [], // 流程变量数据
-      completeTitle: null,
-      completeOpen: false,
+      taskTitle: null,
+      taskOpen: false,
       checkSendUser: false, // 是否展示人员选择模块
       checkSendRole: false,// 是否展示角色选择模块
       checkType: 'single', // 选择类型
+      checkValues: null, // 选中任务接收人员数据
+      formData: {}, // 填写的表单数据,
+      activeValue: 1, // 切换tab标签
     };
   },
   created() {
-    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
+    this.deployId = this.$route.query && this.$route.query.deployId;
     // 初始化表单
-    this.taskForm.procDefId  = this.$route.query && this.$route.query.procDefId;
-    this.getNextFlowNode(this.taskForm.deployId);
-    this.getFlowFormData(this.taskForm.deployId);
+    this.procDefId  = this.$route.query && this.$route.query.procDefId;
+    // this.getNextFlowNodeByStart(this.deployId);
+    this.getFlowFormData(this.deployId);
     // 回显流程记录
-    this.loadModelXml(this.taskForm.deployId);
+    this.loadModelXml(this.deployId);
   },
   methods: {
-    /** 查询用户列表 */
-    getList() {
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-        }
-      );
+    handleClick(tab, event) {
+      console.log(tab, event);
     },
     /** xml 文件 */
     loadModelXml(deployId) {
@@ -162,27 +140,78 @@ export default {
       }
     },
     /** 申请流程表单数据提交 */
-    submitForm(data) {
-      if (data) {
-        const variables = data.valData;
-        const formData = data.formData;
-        formData.disabled = true;
-        formData.formBtns = false;
-        if (this.taskForm.procDefId) {
-          variables.variables = formData;
-          // 启动流程并将表单数据加入流程变量
-          definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
-            this.msgSuccess(res.msg);
-            this.goBack();
-          })
+    submitForm(formData) {
+      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
+      getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => {
+        const data = res.data;
+        if (data) {
+          if (data.type === 'assignee') { // 指定人员
+            this.checkSendUser = true;
+            this.checkType = "single";
+          } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
+            this.checkSendUser = true;
+            this.checkType = "multiple";
+          } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
+            this.checkSendRole = true;
+          } else if (data.type === 'multiInstance') { // 会签?
+            this.checkSendUser = true;
+          }
+          if (this.checkSendUser || this.checkSendRole){
+            this.taskOpen = true;
+            this.taskTitle = "选择任务接收";
+            this.formData = formData;
+          }
         }
+      })
+
+      // else {
+        // if (data) {
+        //   const variables = data.valData;
+        //   const formData = data.formData;
+        //   formData.disabled = true;
+        //   formData.formBtns = false;
+        //   if (this.taskForm.procDefId) {
+        //     variables.variables = formData;
+        //     // 启动流程并将表单数据加入流程变量
+        //     definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
+        //       this.msgSuccess(res.msg);
+        //       this.goBack();
+        //     })
+        //   }
+        // }
+      // }
+    },
+    /** 提交流程 */
+    submitTask() {
+      if (!this.checkValues && this.checkSendUser){
+        this.$modal.msgError("请选择任务接收!");
+        return;
+      }
+      if (!this.checkValues && this.checkSendRole){
+        this.$modal.msgError("请选择流程接收角色组!");
+        return;
+      }
+      if (this.formData) {
+        const variables = this.formData.valData;
+        const formData = this.formData.formData;
+        // 表单是否禁用
+        formData.disabled = true;
+        // 是否显示按钮
+        formData.formBtns = false;
+        variables.variables = formData;
+        variables.approval = this.checkValues;
+        console.log(variables,"流程发起提交表单数据")
+        // 启动流程并将表单数据加入流程变量
+        definitionStart(this.procDefId, JSON.stringify(variables)).then(res => {
+          this.$modal.msgSuccess(res.msg);
+          this.goBack();
+        })
       }
     },
     /** 根据当前任务获取流程设计配置的下一步节点 */
-    getNextFlowNode(deploymentId) {
+    getNextFlowNodeByStart(deploymentId,variables) {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      const params = {deploymentId: deploymentId}
-      getNextFlowNodeByStart(params).then(res => {
+      getNextFlowNodeByStart({deploymentId: deploymentId,variables:variables}).then(res => {
         const data = res.data;
         if (data) {
           if (data.type === 'assignee') { // 指定人员
@@ -202,15 +231,11 @@ export default {
     // 用户信息选中数据
     handleUserSelect(selection) {
       if (selection) {
-        const selectVal = selection.map(item => item.userId);
-        if (selectVal instanceof Array) {
-          this.taskForm.values = {
-            "approval": selectVal.join(',')
-          }
+        if (selection instanceof Array) {
+          const selectVal = selection.map(item => item.userId);
+          this.checkValues = selectVal.join(',')
         } else {
-          this.taskForm.values = {
-            "approval": selectVal
-          }
+          this.checkValues = selection.userId;
         }
       }
     },
@@ -219,13 +244,9 @@ export default {
       if (selection) {
         if (selection instanceof Array) {
           const selectVal = selection.map(item => item.roleId);
-          this.taskForm.values = {
-            "approval": selectVal.join(',')
-          }
+          this.checkValues = selectVal.join(',')
         } else {
-          this.taskForm.values = {
-            "approval": selection
-          }
+          this.checkValues = selection;
         }
       }
     },