Merge branch 'dev' of http://62.234.3.186:3000/sxyanzhu/jhprjv2 into dev

ruoyi-system/src/main/resources/mapper/flowable/FlowBusinessKeyMapper.xml

@@ -74,7 +74,7 @@
             <!--监理单位/总包公司/分包单位查询当前关联数据-->
             <if test='nowRole == "5" or nowRole == "6" or nowRole == "7"'> and fa.businessKey in (select DISTINCT projectId from sur_project_unit_info where unitId=#{nowDept} and del_flag=0)</if>
             <!--普通用户查询项目人员-->
-            <if test='nowRole == "15" or nowRole == "16" or nowRole == "17" or nowRole == "99"'> and fa.businessKey in (select DISTINCT projectId from sur_project_userinfo where user_id=#{nowUser} and is_del=0)</if>
+            <if test='nowRole == "15" or nowRole == "16" or nowRole == "17" or nowRole == "99"'> and fa.businessKey in (select DISTINCT project_id from sur_project_userinfo where user_id=#{nowUser} and is_del=0)</if>
             AND (fa.ASSIGNEE_ = #{nowUser}
                 OR (
                         fa.ASSIGNEE_ IS NULL

ruoyi-ui/src/views/flowable/task/finished/index.vue

@@ -132,15 +132,17 @@
       @pagination="getList"
     />
     <detailDrawer ref="detailDrawer"></detailDrawer>
+    <detailLeaveDrawer ref="detailLeaveDrawer"></detailLeaveDrawer>
   </div>
 </template>
 <script>
 import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
 import {myFinishedFlowTaskList} from "@/api/flowable/businessKey";
 import detailDrawer from "../myProcess/detail/detailDrawer.vue";
+import detailLeaveDrawer from "../myProcess/detail/detailLeaveDrawer.vue";
 export default {
   name: "Deploy",
-  components: { detailDrawer },
+  components: { detailDrawer, detailLeaveDrawer },
   dicts: ["sys_process_category"],
   data() {
     return {
@@ -264,7 +266,12 @@ export default {
     },
     /** 流程流转记录 */
     handleFlowRecord(row){
+      //根据不同业务跳转不同表单
+      if(row.procDefKey=="flow_xmglzdl_qjspb"){
+        this.$refs.detailLeaveDrawer.show(row);
+      }else{
         this.$refs.detailDrawer.show(row);
+      }
       // this.$router.push({ path: '/flowable/task/finished/detail/index',
       //   query: {
       //     procInsId: row.procInsId,

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

@@ -0,0 +1,496 @@
+<template>
+    <div class="app-detailDrawer">
+      <el-drawer
+        v-if="onOpen"
+        :visible.sync="onOpen"
+        ref="drawer"
+        direction="rtl"
+        size="80%"
+      >
+        <template slot="title">
+          <div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div>
+        </template>
+        <div class="drawer">
+        <div class="drawerLeft block containers">
+          <div class="canvas" ref="flowCanvas"></div>
+          <div class="maskLayer" />
+          <el-timeline>
+                  <el-timeline-item
+                    v-for="(item,index ) in flowRecordList"
+                    :key="index"
+                    :icon="setIcon(item)"
+                    :color="setColor(item)"
+                  >
+                    <p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
+                    <el-card :body-style="{ padding: '6px' }">
+                      <el-descriptions class="margin-top" :column="1" size="small" border>
+                        <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-user"></i>办理人</template>
+                          {{item.assigneeName}}
+                          <el-tag type="info" size="mini">{{item.deptName}}</el-tag>
+                        </el-descriptions-item>
+                        <el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-user"></i>候选办理</template>
+                          {{item.candidate}}
+                        </el-descriptions-item>
+                        <el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-user"></i>驳回节点</template>
+                          {{getDeleteReason(item.deleteReason)}}
+                        </el-descriptions-item>
+                        <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-date"></i>接收时间</template>
+                          {{item.startTime}}
+                        </el-descriptions-item>
+                        <el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-date"></i>处理时间</template>
+                          {{item.endTime}}
+                        </el-descriptions-item>
+                        <el-descriptions-item v-if="item.duration"  label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-time"></i>处理耗时</template>
+                          {{getDurationDate(item.duration)}}
+                        </el-descriptions-item>
+                        <el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
+                          <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
+                          {{item.message}}
+                        </el-descriptions-item>
+                      </el-descriptions>
+                    </el-card>
+                  </el-timeline-item>
+                </el-timeline>
+        </div>
+        <div class="drawerRight">
+            <el-card class="box-card">
+            <el-descriptions class="margin-top" :title="title" :column="1" size="medium" border>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-map-location"></i>
+                  所属项目
+                </template>
+                {{ initData.projectName }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-school"></i>
+                  申请单位
+                </template>
+                {{ options.startDeptName }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-collection-tag"></i>
+                  申请事项
+                </template>
+                {{ title }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-user"></i>
+                  申请人
+                </template>
+                {{ options.startUserName }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-s-flag"></i>
+                  申请日期
+                </template>
+                {{ initData.date }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-time"></i>
+                  请假日期
+                </template>
+                {{ initData.beginDate }} - {{ initData.endDate }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-tickets"></i>
+                  请假时间
+                </template>
+                共 {{initData.day}} 天
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-chat-dot-square"></i>
+                  请假事由
+                </template>
+                {{initData.remark}}
+              </el-descriptions-item>
+             </el-descriptions>
+          </el-card>
+          <div style="text-align: center;margin-top: 30px;">
+                <el-button type="danger" @click="doCanel">关 闭</el-button>
+          </div>
+        </div>
+        </div>
+      </el-drawer>
+    </div>
+  </template>
+  
+  <script>
+  import { flowXmlAndNode } from "@/api/flowable/definition";
+  import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+  import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
+  export default {
+    components: {},
+    props: {
+    },
+    data() {
+      return {
+        // 抽屉层
+        onOpen: false,
+        // 遮罩层
+        loading: false,
+        // 标题
+        title: "",
+        jdtitle:"",
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {},
+        bpmnViewer: null,
+        options: {},
+        flowRecordList: [],
+        showjd:false,
+        //label样式
+        labelStyle: { width: "180px" },
+        initData:{}
+      };
+    },
+    computed: {},
+    watch: {},
+    created() {},
+    mounted() {},
+    beforeDestroy() {},
+    methods: {
+      setIcon(row) {
+        if (row.endTime) {
+          if(row.commentResult=="驳回")
+          {
+            return "el-icon-close";
+          }else{
+            return "el-icon-check";
+          }
+        } else {
+          return "el-icon-time";
+        }
+      },
+      setColor(row) {
+        if (row.endTime) {
+          if(row.commentResult=="驳回")
+          {
+            return "#f56c6c";
+          }else{
+            return "#2bc418";
+          }
+        } else {
+          return "#b3bdbb";
+        }
+      },
+      getSort(i) {
+        let num = this.flowRecordList.length - i;
+        if (num < 10) {
+          num = "0" + num;
+        }
+        return num + ". ";
+      },
+      doCanel() {
+        this.onOpen = false;
+      },
+      show(options) {
+        this.options = options;
+        this.title = options.procDefName;
+        this.deptName = options.startDeptName;
+        this.nickName = options.startUserName;
+        this.onOpen = true;
+        this.showjd = false;
+  
+        if(options.finishTime==null){
+          this.jdtitle="进行中";
+          this.showjd=true;
+        }else if(options.finishTime!=null && options.assigneeId==null){
+          this.jdtitle="已撤销";
+        }else{
+          this.jdtitle="已完成";
+        }
+        this.getFlowRecordList(options.procInsId, options.deployId);
+        this.getFormDatasList(options.procInsId, options.deployId);
+        flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => {
+          this.initFlowImage(res.data);
+        });
+      },
+      async initFlowImage(data) {
+        const self = this;
+        try {
+          self.bpmnViewer = new BpmnViewer({
+            container: this.$refs.flowCanvas,
+            height: "90px",
+          });
+          await self.bpmnViewer.importXML(data.xmlData);
+          // 自适应
+          self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
+          if (data.nodeData !==undefined && data.nodeData.length > 0 ) {
+            self.fillColor(data.nodeData)
+          }
+        } catch (err) {
+          console.error(err.message, err.warnings);
+        }
+      },
+      /** 流程流转记录 */
+      getFlowRecordList(procInsId, deployId) {
+        // const that = this
+        // const params = {procInsId: procInsId, deployId: deployId}
+        // flowRecord(params).then(res => {
+        //   that.flowRecordList = res.data.flowList;
+        // }).catch(res => {
+        //   this.$message.error("数据异常，请联系管理员...");
+        // })
+        const that = this
+        const params = {procInsId: procInsId}
+        findCommentByProcInsId(params).then(res => {
+          that.flowRecordList = res.data;
+        }).catch(res => {
+          this.$message.error("数据异常，请联系管理员...");
+        })
+      },
+      /** 流程表单数据 */
+      getFormDatasList(procInsId, deployId) {
+        // const that = this
+        // const params = {procInsId: procInsId, deployId: deployId}
+        // flowRecord(params).then(res => {
+        //   that.flowRecordList = res.data.flowList;
+        // }).catch(res => {
+        //   this.$message.error("数据异常，请联系管理员...");
+        // })
+        const that = this
+        const params = {procInsId: procInsId}
+        findFormDatasByProcInsId(params).then(res => {
+          this.initData = res.data;
+        }).catch(res => {
+          this.$message.error("数据异常，请联系管理员...");
+        })
+      },
+      // 设置高亮颜色的
+      fillColor(nodeData) {
+        const canvas = this.bpmnViewer.get('canvas')
+        this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
+          const completeTask = nodeData.find(m => m.key === n.id)
+          const todoTask = nodeData.find(m => !m.completed)
+          const endTask = nodeData[nodeData.length - 1]
+          if (n.$type === 'bpmn:UserTask') {
+            if (completeTask) {
+              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+              n.outgoing?.forEach(nn => {
+                const targetTask = nodeData.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 = nodeData.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 = nodeData.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 = nodeData.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
+            }
+          }
+        })
+      },
+      getDurationDate(val){
+        // 计算出相差天数
+        let days = Math.floor(val / (24 * 3600 * 1000))
+        // 计算出小时数
+        let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
+        let hours = Math.floor(leave1 / (3600 * 1000))
+        // 计算相差分钟数
+        let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
+        let minutes = Math.floor(leave2 / (60 * 1000))
+        // 计算相差秒数
+        let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
+        let seconds = Math.round(leave3 / 1000)
+        if(days>0){
+          if(days<10) days = "0"+days;
+          if(hours<10) hours = "0"+hours;
+          if(minutes<10) minutes = "0"+minutes;
+          if(seconds<10) seconds = "0"+seconds;
+          return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
+        }
+        if(hours>0){
+          if(hours<10) hours = "0"+hours;
+          if(minutes<10) minutes = "0"+minutes;
+          if(seconds<10) seconds = "0"+seconds;
+          return hours + '小时' + minutes + '分钟' + seconds + '秒';
+        }
+        if(minutes>0){
+          if(minutes<10) minutes = "0"+minutes;
+          if(seconds<10) seconds = "0"+seconds;
+          return minutes + '分钟' + seconds + '秒';
+        }
+        if(seconds>0){
+          if(seconds<10) seconds = "0"+seconds;
+          return seconds + '秒';
+        }
+      },
+      handledownload(url){
+        this.$download.resource(url);
+      },
+      getDeleteReason(val){
+        val = val.replace("Change activity to ","");
+        let flowRecordList = this.flowRecordList;
+        for(let i=0;i<flowRecordList.length;i++){
+          if(flowRecordList[i].taskDefKey==val){
+            console.log(i);
+            return "驳回至"+flowRecordList[i].taskName;
+          }
+        }
+      }
+    },
+  };
+  </script>
+  <style lang="scss">
+  .app-detailDrawer{
+    .drawer {
+    width: 100%;
+    height: 100%;
+    padding-left: 20px; 
+    padding-right: 20px;
+    padding-bottom: 20px;
+    .drawerLeft {
+    width: 60%;
+    min-width: 280px;
+    height: 100%;
+    float: left;
+    border-right: 1px solid #dcdfe6;
+    overflow-y: scroll;
+    padding-right: 20px;
+    .bjs-powered-by {
+    display: none !important;
+    
+  }
+  .maskLayer {
+    width: 100%;
+    height: 90px;
+    position: absolute;
+    z-index: 9999;
+    top: 77px;
+  }
+  }
+  .drawerRight {
+    width: 40%;
+    min-width: 400px;
+    height: 100%;
+    float: left;
+    padding-left: 20px;
+  }
+  }
+  .containers {
+      .canvas {
+        width: 100%;
+        height: 100px;
+      }
+      .panel {
+        position: absolute;
+        right: 0;
+        top: 50px;
+        width: 300px;
+      }
+      .load {
+        margin-right: 10px;
+      }
+      .el-form-item__label{
+        font-size: 13px;
+      }
+  
+      .djs-palette{
+        left: 0px!important;
+        top: 0px;
+        border-top: none;
+      }
+  
+      .djs-container svg {
+        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;
+        width: 100px;
+        top: -20px !important;
+      }
+    }
+  }
+  </style>
+  

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

@@ -69,7 +69,7 @@
           v-hasPermi="['system:deployment:add']"
         >新增流程</el-button>
       </el-col>
-      <!-- <el-col :span="1.5">
+      <el-col :span="1.5">
         <el-button
           type="danger"
           plain
@@ -79,7 +79,7 @@
           @click="handleDelete"
           v-hasPermi="['system:deployment:remove']"
         >删除</el-button>
-      </el-col> -->
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -213,7 +213,9 @@
       />
     </el-dialog>
     <initTaskDrawer ref="initTaskDrawer" :closeCallBack="getList"></initTaskDrawer>
+    <initLeaveTaskDrawer ref="initLeaveTaskDrawer" :closeCallBack="getList"></initLeaveTaskDrawer>
     <detailDrawer ref="detailDrawer"></detailDrawer>
+    <detailLeaveDrawer ref="detailLeaveDrawer"></detailLeaveDrawer>
   </div>
 </template>
 
@@ -230,12 +232,16 @@ import { myProcessList,stopProcess } from "@/api/flowable/process";
 import {allList,queryCount} from "@/api/flowable/businessKey";
 import {myDefinitionList} from "@/api/flowable/definition";
 import initTaskDrawer from "./initTaskDrawer.vue";
+import initLeaveTaskDrawer from './initLeaveTaskDrawer'
 import detailDrawer from "./detail/detailDrawer.vue";
+import detailLeaveDrawer from "./detail/detailLeaveDrawer.vue";
 export default {
   name: "Deploy",
   components: {
     initTaskDrawer,
-    detailDrawer
+    initLeaveTaskDrawer,
+    detailDrawer,
+    detailLeaveDrawer
   },
   dicts: ["sys_process_category"],
   data() {
@@ -405,7 +411,11 @@ export default {
     /**  发起流程申请 */
     handleStartProcess(row){
       this.open = false;
+      if(row.flowKey=="flow_xmglzdl_qjspb"){
+        this.$refs.initLeaveTaskDrawer.show(row);
+      }else{
         this.$refs.initTaskDrawer.show(row);
+      }
       // this.$router.push({ path: '/flowable/task/myProcess/send/index',
       //   query: {
       //     deployId: row.deploymentId,
@@ -418,18 +428,24 @@ export default {
       const params = {
         instanceId: row.procInsId
       }
+      let that = this;
       this.$modal.confirm('撤销流程会终止，是否继续？').then(function() {
-        this.loading = true;
+        that.loading = true;
         return stopProcess(params);
       }).then(res => {
-        this.$modal.msgSuccess(res.msg);
+        that.$modal.msgSuccess(res.msg);
-        this.loading=false;
+        that.loading=false;
-        this.getList();
+        that.getList();
       });
     },
     /** 流程流转记录 */
     handleFlowRecord(row){
+      //根据不同业务跳转不同表单
+      if(row.procDefKey=="flow_xmglzdl_qjspb"){
+        this.$refs.detailLeaveDrawer.show(row);
+      }else{
         this.$refs.detailDrawer.show(row);
+      }
       // this.$router.push({ path: '/flowable/task/myProcess/detail/index',
       //   query: {
       //     procInsId: row.procInsId,

ruoyi-ui/src/views/flowable/task/myProcess/initLeaveTaskDrawer.vue

@@ -18,11 +18,17 @@
         :rules="rules"
         v-loading="loading"
         label-width="120px"
-        style="padding-right: 35px"
+        style="padding-right: 35px;"
       >
         <div class="canvas" ref="flowCanvas"></div>
         <div class="maskLayer" />
-        <el-form-item label="所属项目" prop="businessKey">
+          <el-card class="box-card" style="margin-left:35px;">
+            <el-descriptions class="margin-top" :title="title" :column="2" size="medium" border>
+              <el-descriptions-item :span="2" prop="businessKey">
+                <template slot="label">
+                  <i class="el-icon-map-location"></i>
+                  所属项目<span class="cr"> *</span>
+                </template>
                 <el-select
                 v-model="form.businessKey"
                 placeholder="请选择所属项目"
@@ -39,36 +45,78 @@
                 >
                 </el-option>
               </el-select>
-        </el-form-item>
+              </el-descriptions-item>
-        <el-form-item label="发起单位">
+              <el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-school"></i>
+                  申请单位
+                </template>
                 {{ deptName }}
-        </el-form-item>
+              </el-descriptions-item>
-        <el-form-item label="发起人">
+              <el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
-          {{ nickName }}
+                <template slot="label">
-        </el-form-item>
+                  <i class="el-icon-collection-tag"></i>
-        <el-form-item label="审批事项">
+                  申请事项
+                </template>
                 {{ title }}
-        </el-form-item>
+              </el-descriptions-item>
-        <el-form-item label="审批内容" prop="files" v-if="options.flowKey!='flow_xmglzdl_qjsp' && options.flowKey!='flow_aql_sxkj'">
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
-          <FileUpload
+                <template slot="label">
-            @input="fileInput"
+                  <i class="el-icon-user"></i>
-            :limit="9"
+                  申请人
-            :fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
+                </template>
-          />
+                {{ nickName }}
-        </el-form-item>
+              </el-descriptions-item>
-        <el-form-item label="申请说明" prop="remark" v-if="options.flowKey!='flow_xmglzdl_qjsp' && options.flowKey!='flow_aql_sxkj'">
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-s-flag"></i>
+                  申请日期
+                </template>
+                {{ date }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-time"></i>
+                  请假日期<span class="cr"> *</span>
+                </template>
+                <el-date-picker
+                  v-model="daterangeMarksTime"
+                  style="width: 400px"
+                  value-format="yyyy-MM-dd"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  @change="checkTime"
+                ></el-date-picker>
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-tickets"></i>
+                  请假时间
+                </template>
+                {{times}}
+              </el-descriptions-item>
+              <el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-chat-dot-square"></i>
+                  请假事由<span class="cr"> *</span>
+                </template>
                 <el-input
                   type="textarea"
                   v-model="form.remark"
                   placeholder="请输入申请说明"
                   rows="5"
+                  max="1"
                 />
-        </el-form-item>
+              </el-descriptions-item>
-      </el-form>
+             </el-descriptions>
-      <div style="text-align: center">
+             <div style="text-align: center;margin-top: 30px;">
-        <el-button type="primary" @click="submitForm">提交流程</el-button>
+              <el-button type="primary" @click="submitForm">提交申请</el-button>
               <el-button @click="doCanel">取 消</el-button>
             </div>
+          </el-card>
+      </el-form>
     </el-drawer>
   </div>
 </template>
@@ -102,18 +150,7 @@ export default {
         remark: "",
       },
       // 表单校验
-      rules: {
+      rules: {},
-        businessKey: [{ required: true, message: "请选择所属项目", trigger: "blur" }],
-        files: [{ required: true, message: "请上传申请内容", trigger: "blur" }],
-        remark: [
-          { required: false, message: "请输入申请说明", trigger: "blur" },
-          {
-            max: 500,
-            message: "申请说明最多输入500字",
-            trigger: "blur",
-          },
-        ],
-      },
       projectOptions: null,
       deptName: null,
       nickName: null,
@@ -123,6 +160,10 @@ export default {
       taskTitle: null,
       taskOpen: false,
       daterangeMarksTime: [],
+      //label样式
+      labelStyle: { width: "180px" },
+      times:"... ...",
+      date:null
     };
   },
   computed: {},
@@ -161,17 +202,20 @@ export default {
     },
     show(options) {
       this.options = options;
+      this.form={};
       this.initMyProject();
       this.title = options.name;
       this.deptName = store.getters.dept.deptName;
       this.nickName = store.getters.name;
-      const self = this;
+      this.date = this.$dt(new Date()).format("YYYY-MM-DD");
+      this.form.date = this.$dt(new Date()).format("YYYY-MM-DD HH:mm");
       this.onOpen = true;
       flowXmlAndNode({ deployId: options.deploymentId }).then((res) => {
         this.initFlowImage(res.data.xmlData);
       });
     },
     async initFlowImage(data) {
+      const self = this;
       try {
         self.bpmnViewer = new BpmnViewer({
           container: this.$refs.flowCanvas,
@@ -184,21 +228,17 @@ export default {
         console.error(err.message, err.warnings);
       }
     },
-    fileInput(files) {
+    checkTime(val) {
-      let fileUrls = "";
+      let time = new Date(val[1]).getTime()-new Date(val[0]).getTime();
-      if (files.length > 0) {
+      let hours = time/3600000;
-        fileUrls = "";
+      let day = (hours/24)+1;//这里默认加1天，PS:2023-09-10 2023-09-11实际请假应该为2天，而不是一天
-        files.forEach((item) => {
+      if(hours%24>0) day++;
-          fileUrls += "," + item.url;
+      this.form.day=day;
-        });
+      this.times="共 "+day+" 天"
-        fileUrls = fileUrls.substring(1);
-      }
-      this.form.files = fileUrls;
     },
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          this.loading = true;
           // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
           // getNextFlowNodeByStart({
           //   deploymentId: this.options.deploymentId,
@@ -211,7 +251,26 @@ export default {
           //   }
           // });
           // 启动流程并将表单数据加入流程变量
-
+          if(!this.form.businessKey){
+            this.$modal.msgWarning("请选择所属项目...");
+            return;
+          }
+          if (null != this.daterangeMarksTime && "" != this.daterangeMarksTime) {
+            this.form.beginDate = this.daterangeMarksTime[0];
+            this.form.endDate = this.daterangeMarksTime[1];
+          }else{
+            this.$modal.msgWarning("请选择请假日期...");
+            return;
+          }
+          if(!this.form.day){
+            this.$modal.msgWarning("请选择请假日期...");
+            return;
+          }
+          if(!this.form.remark){
+            this.$modal.msgWarning("请输入请假事由...");
+            return;
+          }
+          this.loading = true;
           definitionStart(this.options.id, JSON.stringify(this.form)).then((res) => {
             this.$modal.msgSuccess(res.msg);
             this.loading = false;
@@ -235,4 +294,8 @@ export default {
   z-index: 9999;
   top: 66px;
 }
+.cr{
+  font-weight: 700;
+  color: red;
+}
 </style>

ruoyi-ui/src/views/flowable/task/todo/detail/approveDrawer.vue

@@ -96,11 +96,33 @@
             rows="5"
           />
         </el-form-item>
+        <el-form-item label="退回节点" v-if="returnTask">
+          <el-select
+            v-model="form.targetKey"
+            placeholder="请选择退回节点"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="(item, index) in returnTaskList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
         <div style="text-align: center">
+          <el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini">任务转办</el-button>
           <el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button>
-          <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">审批驳回</el-button>
+          <el-button icon="el-icon-back" type="warning" size="mini" @click="handleBack">退回任务</el-button>
+          <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button>
         </div>
       </el-form>
+      <div class="page-warning">
+        <p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p>
+        <p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p>
+        <p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p>
+      </div>
       </div>
       </div>
     </el-drawer>
@@ -111,7 +133,7 @@
 import store from "@/store";
 import { flowXmlAndNode } from "@/api/flowable/definition";
 import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
-import { complete, rejectTask } from "@/api/flowable/todo";
+import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
 import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
 export default {
   components: {},
@@ -142,13 +164,20 @@ export default {
           },
         ],
       },
+      queryParams:{
+        nickName:null,
+        phonenumber:null,
+      },
       bpmnViewer: null,
       options: {},
       flowRecordList: [],
       showjd:false,
       //label样式
       labelStyle: { width: "180px" },
-      initData:{}
+      initData:{},
+      returnTaskList: [],  // 回退列表数据
+      returnTask:false,
+      returnTaskBtn:false
     };
   },
   computed: {},
@@ -161,14 +190,7 @@ export default {
     handlePass() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          this.form.taskId = this.options.taskId;
+          this.$confirm('是否确认审批通过当前流程申请?', '提示', {
-          this.form.taskName = this.options.taskName;
-          this.form.userId = store.getters.userId;
-          this.form.deployId = this.options.deployId;
-          this.form.procInsId = this.options.procInsId;
-          this.form.instanceId = this.options.procInsId;
-          this.form.executionId = this.options.procInsId;
-          this.$confirm('是否确认通过当前流程申请?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
@@ -190,14 +212,7 @@ export default {
     handleReject() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          this.form.taskId = this.options.taskId;
+          this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
-          this.form.taskName = this.options.taskName;
-          this.form.userId = store.getters.userId;
-          this.form.deployId = this.options.deployId;
-          this.form.procInsId = this.options.procInsId;
-          this.form.instanceId = this.options.procInsId;
-          this.form.executionId = this.options.procInsId;
-          this.$confirm('是否确认驳回当前流程申请?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
@@ -215,6 +230,58 @@ export default {
         }
       });
     },
+    /** 退回任务 */
+    handleBack(){
+      if(!this.returnTask){
+        this.returnTask=true;
+        this.$modal.msgWarning("请选择退回节点");
+        return;
+      }
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if(!this.form.targetKey){
+            this.$modal.msgWarning("请选择退回节点");
+            return;
+          }
+          this.$confirm('是否确认退回当前流程申请?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+          }).then(() => {
+            this.loading=true;
+            returnTask(this.form).then(res => {
+              this.$modal.msgSuccess("任务退回成功");
+              this.loading = false;
+              //关闭并刷新列表
+              this.$refs.drawer.closeDrawer();
+            });
+          }).catch(() => {
+            console.log("取消操作");         
+          });
+        }
+      });
+    },
+    initReturnList(){
+      returnList(this.form).then(res => {
+        this.returnTaskList = res.data;
+        //退回节点>1时，可显示退回按钮
+        if(res.data.length>1){
+          this.returnTaskBtn=true;
+        }
+      })
+    },
+    initFormDate(){
+      this.form.taskId = this.options.taskId;
+      this.form.taskName = this.options.taskName;
+      this.form.userId = store.getters.userId;
+      this.form.deployId = this.options.deployId;
+      this.form.procInsId = this.options.procInsId;
+      this.form.instanceId = this.options.procInsId;
+      this.form.executionId = this.options.procInsId;
+      this.returnTask=false;
+      this.returnTaskBtn=false;
+      this.initReturnList();
+    },
     setIcon(row) {
       if (row.endTime) {
         if(row.commentResult=="驳回")
@@ -257,6 +324,7 @@ export default {
       this.onOpen = true;
       this.showjd = false;
       this.form = {};
+      this.initFormDate();
       if(options.finishTime==null){
         this.jdtitle="进行中";
         this.showjd=true;
@@ -544,4 +612,12 @@ export default {
     }
   }
 }
+.page-warning {
+    padding: 8px 16px;
+    background-color: #f0f9eb;
+    border-radius: 4px;
+    border-left: 5px solid #67C23A;
+    margin: 20px 0;
+    font-size: 13px;
+}    
 </style>

ruoyi-ui/src/views/flowable/task/todo/detail/approveLeaveDrawer.vue

@@ -0,0 +1,655 @@
+<template>
+  <div class="app-approveDrawer">
+    <el-drawer
+      v-if="onOpen"
+      :visible.sync="onOpen"
+      ref="drawer"
+      direction="rtl"
+      @close="closeCallBack"
+      size="80%"
+    >
+      <template slot="title">
+        <div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div>
+      </template>
+      <div class="drawer">
+      <div class="drawerLeft block containers">
+        <div class="canvas" ref="flowCanvas"></div>
+        <div class="maskLayer" />
+        <el-timeline>
+                <el-timeline-item
+                  v-for="(item,index ) in flowRecordList"
+                  :key="index"
+                  :icon="setIcon(item)"
+                  :color="setColor(item)"
+                >
+                  <p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
+                  <el-card :body-style="{ padding: '6px' }">
+                    <el-descriptions class="margin-top" :column="1" size="small" border>
+                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-user"></i>办理人</template>
+                        {{item.assigneeName}}
+                        <el-tag type="info" size="mini">{{item.deptName}}</el-tag>
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-user"></i>候选办理</template>
+                        {{item.candidate}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-user"></i>驳回节点</template>
+                        {{getDeleteReason(item.deleteReason)}}
+                      </el-descriptions-item>
+                      <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-date"></i>接收时间</template>
+                        {{item.startTime}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-date"></i>处理时间</template>
+                        {{item.endTime}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.duration"  label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-time"></i>处理耗时</template>
+                        {{getDurationDate(item.duration)}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
+                        <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
+                        {{item.message}}
+                      </el-descriptions-item>
+                    </el-descriptions>
+                  </el-card>
+                </el-timeline-item>
+              </el-timeline>
+      </div>
+      <div class="drawerRight">
+        <el-card class="box-card">
+            <el-descriptions class="margin-top" :title="title" :column="1" size="medium" border>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-map-location"></i>
+                  所属项目
+                </template>
+                {{ initData.projectName }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-school"></i>
+                  申请单位
+                </template>
+                {{ options.startDeptName }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-collection-tag"></i>
+                  申请事项
+                </template>
+                {{ title }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-user"></i>
+                  申请人
+                </template>
+                {{ options.startUserName }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-s-flag"></i>
+                  申请日期
+                </template>
+                {{ initData.date }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-time"></i>
+                  请假日期
+                </template>
+                {{ initData.beginDate }} - {{ initData.endDate }}
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-tickets"></i>
+                  请假时间
+                </template>
+                共 {{initData.day}} 天
+              </el-descriptions-item>
+              <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
+                <template slot="label">
+                  <i class="el-icon-chat-dot-square"></i>
+                  请假事由
+                </template>
+                {{initData.remark}}
+              </el-descriptions-item>
+             </el-descriptions>
+          </el-card>
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading" style="margin-top: 30px;">
+        <el-form-item label="审批意见" prop="comment">
+          <el-input
+            type="textarea"
+            v-model="form.comment"
+            placeholder="请输入审批意见（最多500字）"
+            rows="5"
+          />
+        </el-form-item>
+        <el-form-item label="退回节点" v-if="returnTask">
+          <el-select
+            v-model="form.targetKey"
+            placeholder="请选择退回节点"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="(item, index) in returnTaskList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div style="text-align: center">
+          <el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini" @click="handleAssign">任务转办</el-button>
+          <el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button>
+          <el-button icon="el-icon-back" v-if="returnTaskBtn" type="warning" size="mini" @click="handleBack">退回任务</el-button>
+          <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button>
+        </div>
+      </el-form>
+      <div class="page-warning">
+        <p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p>
+        <p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p>
+        <p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p>
+      </div>
+      </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { flowXmlAndNode } from "@/api/flowable/definition";
+import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
+import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
+export default {
+  components: {},
+  props: {
+    closeCallBack: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      // 抽屉层
+      onOpen: false,
+      // 遮罩层
+      loading: false,
+      // 标题
+      title: "",
+      jdtitle:"",
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        comment: [
+          { required: true, message: "请输入审批意见", trigger: "blur" },
+          {
+            max: 500,
+            message: "审批意见最多输入500字",
+            trigger: "blur",
+          },
+        ],
+      },
+      queryParams:{
+        nickName:null,
+        phonenumber:null,
+      },
+      bpmnViewer: null,
+      options: {},
+      flowRecordList: [],
+      showjd:false,
+      //label样式
+      labelStyle: { width: "180px" },
+      initData:{},
+      returnTaskList: [],  // 回退列表数据
+      returnTask:false,
+      returnTaskBtn:false
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
+  methods: {
+    /** 通过任务 */
+    handlePass() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否确认审批通过当前流程申请?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+          }).then(() => {
+            this.loading=true;
+            complete(this.form).then(res => {
+              this.$modal.msgSuccess("任务审批成功");
+              this.loading = false;
+              //关闭并刷新列表
+              this.$refs.drawer.closeDrawer();
+            });
+          }).catch(() => {
+            console.log("取消操作");         
+          });
+        }
+      });
+    },
+    /** 驳回任务 */
+    handleReject() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+          }).then(() => {
+            this.loading=true;
+            rejectTask(this.form).then(res => {
+              this.$modal.msgSuccess("任务驳回成功");
+              this.loading = false;
+              //关闭并刷新列表
+              this.$refs.drawer.closeDrawer();
+            });
+          }).catch(() => {
+            console.log("取消操作");         
+          });
+        }
+      });
+    },
+    /** 退回任务 */
+    handleBack(){
+      if(!this.returnTask){
+        this.returnTask=true;
+        this.$modal.msgWarning("请选择退回节点");
+        return;
+      }
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if(!this.form.targetKey){
+            this.$modal.msgWarning("请选择退回节点");
+            return;
+          }
+          this.$confirm('是否确认退回当前流程申请?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+          }).then(() => {
+            this.loading=true;
+            returnTask(this.form).then(res => {
+              this.$modal.msgSuccess("任务退回成功");
+              this.loading = false;
+              //关闭并刷新列表
+              this.$refs.drawer.closeDrawer();
+            });
+          }).catch(() => {
+            console.log("取消操作");         
+          });
+        }
+      });
+    },
+    initReturnList(){
+      returnList(this.form).then(res => {
+        this.returnTaskList = res.data;
+        //退回节点>1时，可显示退回按钮
+        if(res.data.length>1){
+          this.returnTaskBtn=true;
+        }
+      })
+    },
+    initFormDate(){
+      this.form.taskId = this.options.taskId;
+      this.form.taskName = this.options.taskName;
+      this.form.userId = store.getters.userId;
+      this.form.deployId = this.options.deployId;
+      this.form.procInsId = this.options.procInsId;
+      this.form.instanceId = this.options.procInsId;
+      this.form.executionId = this.options.procInsId;
+      this.returnTask=false;
+      this.returnTaskBtn=false;
+      this.initReturnList();
+    },
+    setIcon(row) {
+      if (row.endTime) {
+        if(row.commentResult=="驳回")
+        {
+          return "el-icon-close";
+        }else{
+          return "el-icon-check";
+        }
+      } else {
+        return "el-icon-time";
+      }
+    },
+    setColor(row) {
+      if (row.endTime) {
+        if(row.commentResult=="驳回")
+        {
+          return "#f56c6c";
+        }else{
+          return "#2bc418";
+        }
+      } else {
+        return "#b3bdbb";
+      }
+    },
+    getSort(i) {
+      let num = this.flowRecordList.length - i;
+      if (num < 10) {
+        num = "0" + num;
+      }
+      return num + ". ";
+    },
+    doCanel() {
+      this.onOpen = false;
+    },
+    show(options) {
+      this.options = options;
+      this.title = options.procDefName;
+      this.deptName = options.startDeptName;
+      this.nickName = options.startUserName;
+      this.onOpen = true;
+      this.showjd = false;
+      this.form = {};
+      this.initFormDate();
+      if(options.finishTime==null){
+        this.jdtitle="进行中";
+        this.showjd=true;
+      }else if(options.finishTime!=null && options.assigneeId==null){
+        this.jdtitle="已撤销";
+      }else{
+        this.jdtitle="已完成";
+      }
+      this.getFlowRecordList(options.procInsId, options.deployId);
+      this.getFormDatasList(options.procInsId, options.deployId);
+      flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => {
+        this.initFlowImage(res.data);
+      });
+    },
+    async initFlowImage(data) {
+      const self = this;
+      try {
+        self.bpmnViewer = new BpmnViewer({
+          container: this.$refs.flowCanvas,
+          height: "90px",
+        });
+        await self.bpmnViewer.importXML(data.xmlData);
+        // 自适应
+        self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
+        if (data.nodeData !==undefined && data.nodeData.length > 0 ) {
+          self.fillColor(data.nodeData)
+        }
+      } catch (err) {
+        console.error(err.message, err.warnings);
+      }
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, deployId) {
+      // const that = this
+      // const params = {procInsId: procInsId, deployId: deployId}
+      // flowRecord(params).then(res => {
+      //   that.flowRecordList = res.data.flowList;
+      // }).catch(res => {
+      //   this.$message.error("数据异常，请联系管理员...");
+      // })
+      const that = this
+      const params = {procInsId: procInsId}
+      findCommentByProcInsId(params).then(res => {
+        that.flowRecordList = res.data;
+      }).catch(res => {
+        this.$message.error("数据异常，请联系管理员...");
+      })
+    },
+    /** 流程表单数据 */
+    getFormDatasList(procInsId, deployId) {
+      // const that = this
+      // const params = {procInsId: procInsId, deployId: deployId}
+      // flowRecord(params).then(res => {
+      //   that.flowRecordList = res.data.flowList;
+      // }).catch(res => {
+      //   this.$message.error("数据异常，请联系管理员...");
+      // })
+      const that = this
+      const params = {procInsId: procInsId}
+      findFormDatasByProcInsId(params).then(res => {
+        this.initData = res.data;
+      }).catch(res => {
+        this.$message.error("数据异常，请联系管理员...");
+      })
+    },
+    // 设置高亮颜色的
+    fillColor(nodeData) {
+      const canvas = this.bpmnViewer.get('canvas')
+      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
+        const completeTask = nodeData.find(m => m.key === n.id)
+        const todoTask = nodeData.find(m => !m.completed)
+        const endTask = nodeData[nodeData.length - 1]
+        if (n.$type === 'bpmn:UserTask') {
+          if (completeTask) {
+            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach(nn => {
+              const targetTask = nodeData.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 = nodeData.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 = nodeData.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 = nodeData.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
+          }
+        }
+      })
+    },
+    getDurationDate(val){
+      // 计算出相差天数
+      let days = Math.floor(val / (24 * 3600 * 1000))
+      // 计算出小时数
+      let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
+      let hours = Math.floor(leave1 / (3600 * 1000))
+      // 计算相差分钟数
+      let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
+      let minutes = Math.floor(leave2 / (60 * 1000))
+      // 计算相差秒数
+      let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
+      let seconds = Math.round(leave3 / 1000)
+      if(days>0){
+        if(days<10) days = "0"+days;
+        if(hours<10) hours = "0"+hours;
+        if(minutes<10) minutes = "0"+minutes;
+        if(seconds<10) seconds = "0"+seconds;
+        return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
+      }
+      if(hours>0){
+        if(hours<10) hours = "0"+hours;
+        if(minutes<10) minutes = "0"+minutes;
+        if(seconds<10) seconds = "0"+seconds;
+        return hours + '小时' + minutes + '分钟' + seconds + '秒';
+      }
+      if(minutes>0){
+        if(minutes<10) minutes = "0"+minutes;
+        if(seconds<10) seconds = "0"+seconds;
+        return minutes + '分钟' + seconds + '秒';
+      }
+      if(seconds>0){
+        if(seconds<10) seconds = "0"+seconds;
+        return seconds + '秒';
+      }
+    },
+    handledownload(url){
+      this.$download.resource(url);
+    },
+    getDeleteReason(val){
+      val = val.replace("Change activity to ","");
+      let flowRecordList = this.flowRecordList;
+      for(let i=0;i<flowRecordList.length;i++){
+        if(flowRecordList[i].taskDefKey==val){
+          console.log(i);
+          return "驳回至"+flowRecordList[i].taskName;
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.app-approveDrawer{
+  .drawer {
+  width: 100%;
+  height: 100%;
+  padding-left: 20px; 
+  padding-right: 20px;
+  padding-bottom: 20px;
+  .drawerLeft {
+  width: 60%;
+  min-width: 280px;
+  height: 100%;
+  float: left;
+  border-right: 1px solid #dcdfe6;
+  overflow-y: scroll;
+  padding-right: 20px;
+  .bjs-powered-by {
+  display: none !important;
+  
+}
+.maskLayer {
+  width: 100%;
+  height: 90px;
+  position: absolute;
+  z-index: 9999;
+  top: 77px;
+}
+}
+.drawerRight {
+  width: 40%;
+  min-width: 400px;
+  height: 100%;
+  float: left;
+  padding-left: 20px;
+}
+}
+.containers {
+    .canvas {
+      width: 100%;
+      height: 100px;
+    }
+    .panel {
+      position: absolute;
+      right: 0;
+      top: 50px;
+      width: 300px;
+    }
+    .load {
+      margin-right: 10px;
+    }
+    .el-form-item__label{
+      font-size: 13px;
+    }
+
+    .djs-palette{
+      left: 0px!important;
+      top: 0px;
+      border-top: none;
+    }
+
+    .djs-container svg {
+      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;
+      width: 100px;
+      top: -20px !important;
+    }
+  }
+}
+.page-warning {
+    padding: 8px 16px;
+    background-color: #f0f9eb;
+    border-radius: 4px;
+    border-left: 5px solid #67C23A;
+    margin: 20px 0;
+    font-size: 13px;
+}  
+</style>

ruoyi-ui/src/views/flowable/task/todo/index.vue

@@ -87,6 +87,7 @@
       @pagination="getList"
     />
     <approveDrawer ref="approveDrawer" :closeCallBack="getList"></approveDrawer>
+    <approveLeaveDrawer ref="approveLeaveDrawer" :closeCallBack="getList"></approveLeaveDrawer>
   </div>
 </template>
 <script>
@@ -96,10 +97,11 @@ import {
 } from "@/api/flowable/todo";
 import {myAwaitFlowTaskList} from "@/api/flowable/businessKey";
 import approveDrawer from "./detail/approveDrawer.vue";
+import approveLeaveDrawer from "./detail/approveLeaveDrawer.vue";
 
 export default {
   name: "Deploy",
-  components: {approveDrawer},
+  components: {approveDrawer,approveLeaveDrawer},
   dicts: ["sys_process_category"],
   data() {
     return {
@@ -161,7 +163,12 @@ export default {
     },
     // 跳转到处理页面
     handleProcess(row){
+      //根据不同业务跳转不同表单
+      if(row.procDefKey=="flow_xmglzdl_qjspb"){
+        this.$refs.approveLeaveDrawer.show(row);
+      }else{
         this.$refs.approveDrawer.show(row);
+      }
       // this.$router.push({ path: '/flowable/task/todo/detail/index',
       //   query: {
       //     procInsId: row.procInsId,

ruoyi-ui/src/views/project/projectChecking/projectCheckingDrawer.vue

@@ -299,7 +299,6 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
 import {
   listProjectChecking,
   getProjectChecking,
@@ -365,9 +364,7 @@ export default {
       previewList: [],
     };
   },
-  computed: {
+  computed: {},
-    ...mapGetters(["dept"]),
-  },
   mounted() {},
 
   methods: {

ruoyi-ui/src/views/project/surProject/index.vue

@@ -355,7 +355,7 @@
             type="text"
             icon="el-icon-user-solid"
             @click="handleProjectUserinfo(scope.row)"
-            v-hasPermi="['project:surProjectUserInfo:add']"
+            v-hasPermi="['project:surProjectUserInfo:list']"
             >项目人员</el-button
           >
           <el-dropdown

ruoyi-ui/src/views/video/videoConfig/videoConfigDrawer.vue

@@ -307,9 +307,7 @@ export default {
       isOpen: false,
     };
   },
-  created() {
+  created() {},
-    this.getList();
-  },
   methods: {
     show(project) {
       this.project = project;