提交代码

yanzhu-flowable/src/main/java/com/yanzhu/flowable/controller/FlowBusinessKeyController.java

@@ -9,11 +9,15 @@ import com.yanzhu.system.domain.flowable.FlowTaskEntity;
 import com.yanzhu.system.service.ISysDeptService;
 import io.swagger.annotations.Api;
 import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.collections4.CollectionUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 /**
@@ -113,4 +117,29 @@ public class FlowBusinessKeyController extends BaseController {
         flowTaskEntity.setAssigneeId(super.getUserId());
         return getDataTable(flowBusinessKeyService.selectMyFinishedFlowTask(flowTaskEntity));
     }
+
+    /**
+     * 查询我的代办任务数量
+     * @return AjaxResult 统计结果
+     */
+    @GetMapping(value = "/findMyTask")
+    public AjaxResult findMyTask() {
+        FlowTaskEntity flowTaskEntity = new FlowTaskEntity();
+        //超管查询所有数据
+        if(!SysUser.isAdmin(super.getUserId())){
+            SysUser sysUser = super.getLoginUser().getUser();
+            flowTaskEntity.setDeptAncestors(sysUser.getDept().getAncestors());
+            flowTaskEntity.setRoleIds(sysUser.getRoles().stream().map(role -> role.getRoleId()).collect(Collectors.toList()));
+        }
+        flowTaskEntity.setActiveName("await");
+        List<Map<String, Object>> list = flowBusinessKeyService.selectMyFinishedFlowTask(flowTaskEntity);
+        Map<String,Object> data = new HashMap<>();
+        if(CollectionUtils.isNotEmpty(list)){
+            data.put("todo",list.size());
+        }else{
+            data.put("todo",0);
+        }
+        return success(data);
+    }
+
 }

yanzhu-system/src/main/java/com/yanzhu/system/domain/flowable/FlowTaskEntity.java

@@ -22,6 +22,9 @@ public class FlowTaskEntity extends BaseEntity {
     @ApiModelProperty("业务名称")
     private String businessKeyName;
 
+    @ApiModelProperty("项目名称")
+    private String businessKeyParName;
+
     @ApiModelProperty("任务编号")
     private String taskId;
 
@@ -314,6 +317,14 @@ public class FlowTaskEntity extends BaseEntity {
         this.deptAncestors = deptAncestors;
     }
 
+    public String getBusinessKeyParName() {
+        return businessKeyParName;
+    }
+
+    public void setBusinessKeyParName(String businessKeyParName) {
+        this.businessKeyParName = businessKeyParName;
+    }
+
     private List<Long> roleIds;
 
     public List<Long> getRoleIds() {

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

@@ -18,6 +18,7 @@
             fa.businessKey,
             fa.businessDeptId,
             fa.businessKeyName,
+            fa.businessKeyParName,
             fa.startUserId,
             fa.startUserName,
             fa.startDeptName,
@@ -35,6 +36,7 @@
             <if test="startDeptName != null  and startDeptName != ''"> and fa.startDeptName like concat('%', #{startDeptName}, '%')</if>
             <if test="startUserName != null  and startUserName != ''"> and fa.startUserName like concat('%', #{startUserName}, '%')</if>
             <if test="businessKeyName != null  and businessKeyName != ''"> and fa.businessKeyName like concat('%', #{businessKeyName}, '%')</if>
+            <if test="businessKeyParName != null  and businessKeyParName != ''"> and fa.businessKeyParName like concat('%', #{businessKeyParName}, '%')</if>
             <if test="category != null  and category != ''"> and fa.category = #{category}</if>
             <if test="params.beginDate != null and params.beginDate != '' and params.endDate != null and params.endDate != ''"> and date(fa.createTime) between #{params.beginDate} and #{params.endDate}</if>
             <!-- 查询条件-项目部门 -->
@@ -63,6 +65,7 @@
             <if test="procDefName != null  and procDefName != ''"> and fa.procDefName like concat('%', #{procDefName}, '%')</if>
             <if test="businessKey != null  and businessKey != ''"> and fa.businessKey = #{businessKey}</if>
             <if test="businessKeyName != null  and businessKeyName != ''"> and fa.businessKeyName like concat('%', #{businessKeyName}, '%')</if>
+            <if test="businessKeyParName != null  and businessKeyParName != ''"> and fa.businessKeyParName like concat('%', #{businessKeyParName}, '%')</if>
             <if test="category != null  and category != ''"> and fa.category = #{category}</if>
             <if test="params.beginDate != null and params.beginDate != '' and params.endDate != null and params.endDate != ''"> and date(fa.createTime) between #{params.beginDate} and #{params.endDate}</if>
             <!-- 查询条件-项目部门 -->
@@ -94,6 +97,7 @@
         <if test="procDefName != null  and procDefName != ''"> and fa.procDefName like concat('%', #{procDefName}, '%')</if>
         <if test="businessKey != null  and businessKey != ''"> and fa.businessKey = #{businessKey}</if>
         <if test="businessKeyName != null  and businessKeyName != ''"> and fa.businessKeyName like concat('%', #{businessKeyName}, '%')</if>
+        <if test="businessKeyParName != null  and businessKeyParName != ''"> and fa.businessKeyParName like concat('%', #{businessKeyParName}, '%')</if>
         <if test="category != null  and category != ''"> and fa.category = #{category}</if>
         <if test="params.beginDate != null and params.beginDate != '' and params.endDate != null and params.endDate != ''"> and fa.endTime between #{params.beginDate} and #{params.endDate}</if>
         order by fa.endTime desc

yanzhu-ui/src/App.vue

@@ -26,3 +26,31 @@ export default {
   display: none;
 }
 </style>
+<style lang="scss">
+.nest-menu,.el-submenu__title{
+  position: relative;
+  .todo_num_tips{
+    position: absolute;
+    right: 36px;
+    background-color: #f56c6c;
+    border-radius: 10px;
+    color: #fff;
+    display: inline-block;
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    padding: 0 6px;
+    text-align: center;
+    white-space: nowrap;
+    border: 1px solid #fff;
+    cursor: pointer;
+    top: 16px;
+    display: none;
+  }
+}
+.el-submenu__title{
+  .todo_num_tips{
+    top:20px;
+  }
+}
+</style>

yanzhu-ui/src/api/flowable/businessKey.js

@@ -0,0 +1,64 @@
+import request from '@/utils/request'
+
+// 查询业务流程列表
+export function allList(query) {
+  return request({
+    url: '/flowable/businessKey/allList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 统计业务流程列表
+export function queryCount(query) {
+    return request({
+      url: '/flowable/businessKey/queryCount',
+      method: 'get',
+      params: query
+    })
+}
+
+// 根据业务流程查询操作日志
+export function findCommentByProcInsId(query) {
+  return request({
+    url: '/flowable/businessKey/findCommentByProcInsId',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据业务流程查询表单数据
+export function findFormDatasByProcInsId(query) {
+  return request({
+    url: '/flowable/businessKey/findFormDatasByProcInsId',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据条件查询我的代办任务
+export function myAwaitFlowTaskList(query) {
+  return request({
+    url: '/flowable/businessKey/myAwaitFlowTaskList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据条件查询我的已办任务
+export function myFinishedFlowTaskList(query) {
+  return request({
+    url: '/flowable/businessKey/myFinishedFlowTaskList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询我的代办数量
+export function findMyTask(){
+  return request({
+    url: '/flowable/businessKey/findMyTask',
+    method: 'get'
+  })
+}
+

yanzhu-ui/src/layout/components/Navbar.vue

@@ -88,7 +88,9 @@ export default {
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch('app/toggleSideBar');
+      //查询任务tips
+      this.$store.dispatch('settingAwaitNum');
     },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {

yanzhu-ui/src/layout/components/Sidebar/Item.vue

@@ -26,6 +26,10 @@ export default {
       } else {
         vnodes.push(<span slot='title'>{(title)}</span>)
       }
+      let name=context?.parent?.item?.name;
+      if(['Todo','Task'].includes(name)){     
+        vnodes.push(h('span',{class:"todo_num_tips tips_"+name},1))
+      }
     }
     return vnodes
   }

yanzhu-ui/src/layout/index.vue

@@ -54,6 +54,10 @@ export default {
       return variables;
     }
   },
+  mounted() {
+    //查询任务tips
+    this.$store.dispatch('settingAwaitNum');
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

yanzhu-ui/src/store/modules/flowtask.js

@@ -0,0 +1,51 @@
+import { findMyTask } from "@/api/flowable/businessKey";
+
+const flowtask = {
+    state: {
+        awaitTaskNum:0
+    },
+  
+    mutations: {
+      SET_AWAIT_TASK: (state, number) => {
+        state.awaitTaskNum = number
+      }
+    },
+  
+    actions: {
+      // 设置代办任务
+      settingAwaitNum({ commit }) {
+        return new Promise((resolve, reject) => {
+          //查询当前登录人的代办任务数量
+          findMyTask({}).then(response => {
+            let todos=document.querySelectorAll(".tips_Todo");
+            let tasks=document.querySelectorAll(".tips_Task");
+            if(todos.length>0){
+              todos.forEach(el=>{
+                el.innerHTML=response.data.todo;
+                if(response.data.todo>0){
+                  el.style.display="inline";
+                }else{
+                  el.style.display="none";
+                }
+              });
+            }
+            if(tasks.length>0){
+              tasks.forEach(el=>{
+                el.innerHTML=response.data.todo;
+                if(response.data.todo>0){
+                  el.style.display="inline";
+                }else{
+                  el.style.display="none";
+                }
+              });
+            }
+            resolve()
+          }).catch(error => {
+            reject(error)
+          });
+        })
+      }
+    }
+  }
+  
+  export default flowtask

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

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="流程名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -10,9 +16,18 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="项目名称" prop="deptName" v-if="showDeptName">
+      <el-form-item label="项目单位" prop="businessKeyParName" v-if="showDeptName">
         <el-input
-          v-model="queryParams.deptName"
+          v-model="queryParams.businessKeyParName"
+          placeholder="请输入项目单位名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="项目名称" prop="businessKeyName">
+        <el-input
+          v-model="queryParams.businessKeyName"
           placeholder="请输入项目名称"
           clearable
           size="small"
@@ -46,7 +61,9 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -66,10 +83,39 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row> -->
 
-    <el-table v-loading="loading" :data="finishedList" border @selection-change="handleSelectionChange">
+    <el-table
-      <el-table-column label="项目名称" align="center" prop="businessKeyName" width="20" :show-overflow-tooltip="true"/>
+      v-loading="loading"
-      <el-table-column label="流程编号" align="center" prop="taskId" width="80" :show-overflow-tooltip="true"/>
+      :data="finishedList"
-      <el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        label="项目单位"
+        align="center"
+        prop="businessKeyParName"
+        width="150"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="项目名称"
+        align="center"
+        prop="businessKeyName"
+        width="150"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="流程编号"
+        align="center"
+        prop="taskId"
+        width="80"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="流程名称"
+        align="center"
+        prop="procDefName"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column label="流程类别" align="center" prop="category" width="130">
         <template slot-scope="scope">
           <dict-tag
@@ -86,44 +132,64 @@
       </el-table-column>
       <el-table-column label="发起人" align="center" width="180">
         <template slot-scope="scope">
-          <label>{{scope.row.startUserName}}<br/><el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
+          <label
+            >{{ scope.row.startUserName }}<br /><el-tag type="info" size="mini">{{
+              scope.row.startDeptName
+            }}</el-tag></label
+          >
         </template>
       </el-table-column>
-      <el-table-column label="接收时间" align="center" prop="createTime" width="160"/>
+      <el-table-column label="接收时间" align="center" prop="createTime" width="160" />
-      <el-table-column label="审批时间" align="center" prop="endTime" width="160"/>
+      <el-table-column label="审批时间" align="center" prop="endTime" width="160" />
       <el-table-column label="审批耗时" align="center" prop="duration" width="140">
         <template slot-scope="scope">
-          {{getDurationDate(scope.row)}}
+          {{ getDurationDate(scope.row) }}
         </template>
       </el-table-column>
       <el-table-column label="流程状态" align="center" width="80">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
-          <el-tag type="success" v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ != null" size="mini">已完成</el-tag>
+          <el-tag
-          <el-tag type="danger" v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ == null" size="mini">已终止</el-tag>
+            type="success"
+            v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ != null"
+            size="mini"
+            >已完成</el-tag
+          >
+          <el-tag
+            type="danger"
+            v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ == null"
+            size="mini"
+            >已终止</el-tag
+          >
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="150" fixed="right" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        width="150"
+        fixed="right"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-tickets"
             @click="handleFlowRecord(scope.row)"
-          >流转记录</el-button>
+            >流转记录</el-button
-           <el-button
+          >
+          <el-button
             size="mini"
             type="text"
             icon="el-icon-refresh-left"
             @click="handleRevoke(scope.row)"
-          >撤回
+            >撤回
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -133,14 +199,22 @@
 </template>
 
 <script>
-import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
+import {
-import {myFinishedFlowTaskList} from "@/api/flowable/businessKey";
+  finishedList,
+  getDeployment,
+  delDeployment,
+  addDeployment,
+  updateDeployment,
+  exportDeployment,
+  revokeProcess,
+} from "@/api/flowable/finished";
+import { myFinishedFlowTaskList } from "@/api/flowable/businessKey";
 import detailDrawer from "../myProcess/detail/detailDrawer.vue";
 
 export default {
   name: "Deploy",
   dicts: ["sys_process_category"],
-  components: {},
+  components: {detailDrawer},
   data() {
     return {
       // 遮罩层
@@ -176,13 +250,14 @@ export default {
         parentDeploymentId: null,
         engineVersion: null,
         params: null,
+        businessKeyName: null,
+        businessKeyParName: null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
+      rules: {},
-      },
+      daterangeCheckTime: [],
-      daterangeCheckTime:[],
       showDeptName: false,
     };
   },
@@ -202,7 +277,7 @@ export default {
         this.queryParams.params["beginDate"] = this.daterangeCheckTime[0];
         this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
       }
-      myFinishedFlowTaskList(this.queryParams).then(response => {
+      myFinishedFlowTaskList(this.queryParams).then((response) => {
         this.finishedList = response.data.records;
         this.total = response.data.total;
         this.loading = false;
@@ -225,26 +300,24 @@ export default {
         derivedFrom: null,
         derivedFromRoot: null,
         parentDeploymentId: null,
-        engineVersion: null
+        engineVersion: null,
       };
-      this.daterangeCheckTime=[];
+      this.daterangeCheckTime = [];
       this.resetForm("form");
     },
-    setIcon(val){
+    setIcon(val) {
-      if (val){
+      if (val) {
         return "el-icon-check";
-      }else {
+      } else {
         return "el-icon-time";
       }
-
     },
-    setColor(val){
+    setColor(val) {
-      if (val){
+      if (val) {
         return "#2bc418";
-      }else {
+      } else {
         return "#b3bdbb";
       }
-
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -253,15 +326,15 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.daterangeCheckTime=[];
+      this.daterangeCheckTime = [];
       this.resetForm("queryForm");
       this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
+      this.ids = selection.map((item) => item.id);
-      this.single = selection.length!==1
+      this.single = selection.length !== 1;
-      this.multiple = !selection.length
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -270,29 +343,51 @@ export default {
       this.title = "添加流程定义";
     },
     /** 流程流转记录 */
-    handleFlowRecord(row){
+    handleFlowRecord(row) {
-      this.$router.push({ path: '/flowable/task/finished/detail/index',
+      this.$router.push({
+        path: "/flowable/task/finished/detail/index",
         query: {
           procInsId: row.procInsId,
           deployId: row.deployId,
           taskId: row.taskId,
-      }})
+        },
+      });
     },
     /** 撤回任务 */
-    handleRevoke(row){
+    handleRevoke(row) {
       const params = {
-        instanceId: row.procInsId
+        procInsId: row.procInsId,
+        instanceId: row.procInsId,
+        taskId:row.taskId,
+        userId:row.startUserId,
+        assignee:row.startUserName
       }
-      revokeProcess(params).then( res => {
+      let _this = this;
-       this.$modal.msgSuccess(res.msg);
+      _this.$confirm('是否确认撤回当前任务流程?', '提示', {
-        this.getList();
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+      }).then(() => {
+        _this.loading=true;
+        revokeProcess(params).then(res => {
+          //刷新代办任务
+          _this.$store.dispatch('settingAwaitNum');
+          _this.$modal.msgSuccess("任务撤回成功");
+          _this.loading = false;
+          //关闭并刷新列表
+          _this.getList();
+        }).catch(() => {
+          _this.loading = false;      
+        });;
+      }).catch(() => {
+        console.log("取消撤销操作");         
       });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
+      const id = row.id || this.ids;
-      getDeployment(id).then(response => {
+      getDeployment(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改流程定义";
@@ -300,16 +395,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updateDeployment(this.form).then(response => {
+            updateDeployment(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addDeployment(this.form).then(response => {
+            addDeployment(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -324,28 +419,31 @@ export default {
       this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
-      }).then(function() {
-        return delDeployment(ids);
-      }).then(() => {
-        this.getList();
-       this.$modal.msgSuccess("删除成功");
       })
+        .then(function () {
+          return delDeployment(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        });
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
+      this.$confirm("是否确认导出所有流程定义数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
-      }).then(function() {
-        return exportDeployment(queryParams);
-      }).then(response => {
-        this.download(response.msg);
       })
-    }
+        .then(function () {
-  }
+          return exportDeployment(queryParams);
+        })
+        .then((response) => {
+          this.download(response.msg);
+        });
+    },
+  },
 };
 </script>
-

yanzhu-ui/src/views/flowable/task/myProcess/detail/detailDrawer.vue

@@ -0,0 +1,469 @@
+<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">
+        <div class="block containers">
+          <div class="canvas" ref="flowCanvas"></div>
+          <div class="maskLayer" />
+        </div>
+        <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-form
+        label-width="100px"
+      >
+        <el-form-item label="所属项目">
+          {{ initData.projectName }}
+        </el-form-item>
+        <el-form-item label="发起单位">
+          {{ options.startDeptName }}
+        </el-form-item>
+        <el-form-item label="发起人">
+          {{ options.startUserName }}
+        </el-form-item>
+        <el-form-item label="审批事项">
+          {{ title }}
+        </el-form-item>
+        <el-form-item label="审批内容">
+          <div v-for="(file,index ) in initData.files" :key="index">
+            <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-paperclip"
+            @click="handledownload(file)"
+            >{{file.substring(file.lastIndexOf('/')+1)}}</el-button
+          >
+          </div>
+        </el-form-item>
+        <el-form-item label="申请说明">
+          {{initData.remark}}
+        </el-form-item>
+        <div style="text-align: center">
+          <el-button type="danger" @click="doCanel">关 闭</el-button>
+        </div>
+      </el-form>
+      </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;
+        this.initData.files = res.data.files.split(',');
+      }).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){
+          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 {
+  width: 100%;
+  height: 150px;
+    .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: 150px;
+    }
+
+    .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>

yanzhu-ui/src/views/flowable/task/myProcess/editTaskDrawer.vue

@@ -0,0 +1,379 @@
+<template>
+    <div class="app-container">
+      <el-drawer
+        v-if="onOpen"
+        :visible.sync="onOpen"
+        ref="drawer"
+        direction="rtl"
+        size="60%"
+        @close="closeCallBack"
+      >
+        <template slot="title">
+          <div>工程管理 【{{ title }}】</div>
+        </template>
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          v-loading="loading"
+          label-width="120px"
+          style="padding-right: 35px"
+        >
+          <div class="block containers">
+            <div class="canvas" ref="flowCanvas"></div>
+            <div class="maskLayer" />
+          </div>
+          <el-form-item label="所属项目" prop="businessKey">
+            <el-select
+              v-model="form.businessKey"
+              placeholder="请选择所属项目"
+              style="width: 100%"
+              filterable
+              :disabled="disPro"
+              @change="projectChage"
+            >
+            <el-option
+                v-for="(item,index) in projectOptions"
+                :key="index"
+                :label="item.projectName"
+                :value="item.id"
+            >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发起单位">
+            {{ deptName }}
+          </el-form-item>
+          <el-form-item label="发起人">
+            {{ nickName }}
+          </el-form-item>
+          <el-form-item label="审批事项">
+            {{ title }}
+          </el-form-item>
+          <el-form-item label="审批内容" prop="files">
+            <FileUpload
+              @input="fileInput"
+              :limit="9"
+              v-model="form.files"
+              :fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
+            />
+          </el-form-item>
+          <el-form-item label="申请说明" prop="remark">
+            <el-input
+              type="textarea"
+              v-model="form.remark"
+              placeholder="请输入申请说明"
+              rows="5"
+            />
+          </el-form-item>
+          <div style="text-align: center">
+            <el-button type="primary" @click="submitForm">提交流程</el-button>
+            <el-button @click="doCanel">取 消</el-button>
+          </div>
+        </el-form>
+      </el-drawer>
+    </div>
+  </template>
+  
+  <script>
+  import store from "@/store";
+  import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
+  import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+  import { findFormDatasByProcInsId } from "@/api/flowable/businessKey";
+  import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo";
+  
+  export default {
+    components: {},
+    props: {
+      closeCallBack: {
+        type: Function,
+      },
+    },
+    data() {
+      return {
+        // 抽屉层
+        onOpen: false,
+        // 遮罩层
+        loading: false,
+        // 标题
+        title: "",
+        // 表单参数
+        form: {
+          businessKey: "",
+          projectName: "",
+          files: "",
+          remark: "",
+        },
+        // 表单校验
+        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,
+        disPro: false,
+        bpmnViewer: null,
+        options: {},
+        taskTitle: null,
+        taskOpen: false,
+        daterangeMarksTime: [],
+      };
+    },
+    computed: {},
+    watch: {},
+    created() {},
+    mounted() {},
+    beforeDestroy() {},
+    methods: {
+      // 项目选择
+      projectChage(val) {
+        let projectName = "";
+        this.projectOptions.forEach((item) => {
+          if ((item.id = val)) {
+            projectName = item.projectName;
+            return;
+          }
+        });
+        this.form.projectName = projectName;
+      },  
+      doCanel() {
+        this.onOpen = false;
+      },
+      show(options) {
+        this.options = options;
+        this.onOpen = true;
+        this.title = options.procDefName;
+        this.initFormDate(options.procInsId);
+        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: "150px",
+          });
+          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);
+        }
+      },
+      /** 流程表单数据 */
+      initFormDate(procInsId, deployId) {
+        this.projectOptions=[{id:this.options.businessKey,projectName:this.options.businessKeyName}];
+        const params = {procInsId: procInsId}
+        findFormDatasByProcInsId(params).then(res => {
+          this.form = res.data;
+          this.deptName = this.options.startDeptName;
+          this.nickName = this.options.startUserName;
+          this.form.taskId = this.options.taskId;
+          this.form.taskName = this.options.taskName;
+          this.form.userId = store.getters.userId;
+          this.form.assignee = store.getters.name;
+          this.form.procInsId = this.options.procInsId;
+          this.form.instanceId = this.options.procInsId;
+        }).catch(res => {
+          this.$message.error("数据异常，请联系管理员...");
+        })
+      },
+      fileInput(files) {
+        let fileUrls = "";
+        if (files.length > 0) {
+          fileUrls = "";
+          files.forEach((item) => {
+            fileUrls += "," + item.url;
+          });
+          fileUrls = fileUrls.substring(1);
+        }
+        this.form.files = fileUrls;
+      },
+      submitForm() {
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            this.form.variables={
+               businessKey:this.form.businessKey,
+               projectName:this.form.projectName,
+               files:this.form.files,
+               remark:this.form.remark,
+               INITIATOR:this.form.INITIATOR
+            }
+            complete(this.form).then(res => {
+               this.$store.dispatch('settingAwaitNum');
+               this.$modal.msgSuccess("任务提交成功");
+               this.loading = false;
+               //关闭并刷新列表
+               this.$refs.drawer.closeDrawer();
+            });
+          }
+        });
+      },
+      // 设置高亮颜色的
+      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
+            }
+          }
+        })
+      },
+    },
+  };
+  </script>
+  <style lang="scss">
+  .bjs-powered-by {
+    display: none !important;
+  }
+  .maskLayer {
+    width: 100%;
+    height: 150px;
+    position: absolute;
+    z-index: 9999;
+    top: 66px;
+  }
+  .app-container{
+    .containers {
+      width: 100%;
+      height: 150px;
+      .canvas {
+        width: 100%;
+        height: 150px;
+      }
+      .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: 150px;
+      }
+  
+      .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>
+  

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

@@ -16,9 +16,18 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="项目名称" prop="deptName" v-if="showDeptName">
+      <el-form-item label="项目单位" prop="businessKeyParName" v-if="showDeptName">
         <el-input
-          v-model="queryParams.deptName"
+          v-model="queryParams.businessKeyParName"
+          placeholder="请输入项目单位名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="项目名称" prop="businessKeyName">
+        <el-input
+          v-model="queryParams.businessKeyName"
           placeholder="请输入项目名称"
           clearable
           size="small"
@@ -40,16 +49,16 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="申请时间" prop="deployTime">
+      <el-form-item label="申请时间">
         <el-date-picker
-          clearable
+          v-model="daterangeCheckTime"
-          size="small"
+          style="width: 240px"
-          v-model="queryParams.deployTime"
-          type="date"
           value-format="yyyy-MM-dd"
-          placeholder="请选择申请时间"
+          type="daterange"
-        >
+          range-separator="-"
-        </el-date-picker>
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
@@ -85,6 +94,17 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane name="all"
+        ><div slot="label">全部申请（{{ tabs.all }}）</div></el-tab-pane
+      >
+      <el-tab-pane name="await"
+        ><div slot="label">进行中（{{ tabs.await }}）</div></el-tab-pane
+      >
+      <el-tab-pane name="finished"
+        ><div slot="label">已完成（{{ tabs.finished }}）</div></el-tab-pane
+      >
+    </el-tabs>
     <el-table
       v-loading="loading"
       :data="myProcessList"
@@ -182,10 +202,10 @@
             @keyup.enter.native="handleProcessQuery"
           />
         </el-form-item>
-        <el-form-item label="项目名称" prop="deptName" v-if="showDeptName">
+        <el-form-item label="项目单位" prop="deptName" v-if="showDeptName">
           <el-input
             v-model="queryProcessParams.deptName"
-            placeholder="请输入项目名称"
+            placeholder="请输入项目单位名称"
             clearable
             size="small"
             @keyup.enter.native="handleProcessQuery"
@@ -266,6 +286,11 @@ import {
 } from "@/api/flowable/finished";
 import { myProcessList, stopProcess } from "@/api/flowable/process";
 import { listDefinition } from "@/api/flowable/definition";
+import { allList, queryCount } from "@/api/flowable/businessKey";
+import initTaskDrawer from "./initTaskDrawer.vue";
+import editTaskDrawer from "./editTaskDrawer.vue";
+import detailDrawer from "./detail/detailDrawer.vue";
+
 export default {
   name: "Deploy",
   dicts: ["sys_process_category"],
@@ -307,7 +332,9 @@ export default {
         derivedFromRoot: null,
         parentDeploymentId: null,
         engineVersion: null,
-        deptName: null,
+        activeName: null,
+        businessKeyName: null,
+        businessKeyParName: null,
       },
       // 查询参数
       queryProcessParams: {
@@ -328,6 +355,13 @@ export default {
       form: {},
       // 表单校验
       rules: {},
+      tabs: {
+        all: 0,
+        await: 0,
+        finished: 0,
+      },
+      daterangeCheckTime: [],
+      activeName: "await",
       showDeptName: false,
     };
   },
@@ -336,18 +370,33 @@ export default {
     if (this.$store.getters.userId == 1) {
       this.showDeptName = true;
     }
+    this.queryParams.activeName = this.activeName;
     this.getList();
   },
   methods: {
     /** 查询流程定义列表 */
     getList() {
       this.loading = true;
-      myProcessList(this.queryParams).then((response) => {
+      this.queryParams.params = {};
+      if (null != this.daterangeCheckTime && "" != this.daterangeCheckTime) {
+        this.queryParams.params["beginDate"] = this.daterangeCheckTime[0];
+        this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
+      }
+      this.queryGroupCount(this.queryParams);
+      allList(this.queryParams).then((response) => {
         this.myProcessList = response.data.records;
         this.total = response.data.total;
         this.loading = false;
       });
     },
+    /** 统计 */
+    queryGroupCount(params) {
+      queryCount(params).then((response) => {
+        this.tabs.await = response.data.await;
+        this.tabs.finished = response.data.finished;
+        this.tabs.all = parseInt(response.data.await) + parseInt(response.data.finished);
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -367,6 +416,7 @@ export default {
         parentDeploymentId: null,
         engineVersion: null,
       };
+      this.daterangeCheckTime = [];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -377,6 +427,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.daterangeCheckTime = [];
       this.handleQuery();
     },
     /** 搜索按钮操作 */

yanzhu-ui/src/views/flowable/task/myProcess/initTaskDrawer.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="app-container">
+    <el-drawer
+      v-if="onOpen"
+      :visible.sync="onOpen"
+      ref="drawer"
+      direction="rtl"
+      size="60%"
+      @close="closeCallBack"
+    >
+      <template slot="title">
+        <div>工程管理 【{{ title }}】</div>
+      </template>
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        v-loading="loading"
+        label-width="120px"
+        style="padding-right: 35px"
+      >
+        <div class="mycanvas">
+          <div class="canvas" ref="flowCanvas"></div>
+          <div class="maskLayer" />
+        </div>
+        <el-form-item label="所属项目" prop="businessKey">
+          <el-select
+            v-model="form.businessKey"
+            placeholder="请选择所属项目"
+            style="width: 100%"
+            filterable
+            :disabled="disPro"
+            @change="projectChage"
+          >
+          <el-option
+              v-for="(item,index) in projectOptions"
+              :key="index"
+              :label="item.projectName"
+              :value="item.id"
+          >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发起单位">
+          {{ deptName }}
+        </el-form-item>
+        <el-form-item label="发起人">
+          {{ nickName }}
+        </el-form-item>
+        <el-form-item label="审批事项">
+          {{ title }}
+        </el-form-item>
+        <el-form-item label="审批内容" prop="files">
+          <FileUpload
+            @input="fileInput"
+            :limit="9"
+            :fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
+          />
+        </el-form-item>
+        <el-form-item label="申请说明" prop="remark">
+          <el-input
+            type="textarea"
+            v-model="form.remark"
+            placeholder="请输入申请说明"
+            rows="5"
+          />
+        </el-form-item>
+        <div style="text-align: center">
+          <el-button type="primary" @click="submitForm">提交流程</el-button>
+          <el-button @click="doCanel">取 消</el-button>
+        </div>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
+import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { getNextFlowNodeByStart } from "@/api/flowable/todo";
+
+export default {
+  components: {},
+  props: {
+    closeCallBack: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      // 抽屉层
+      onOpen: false,
+      // 遮罩层
+      loading: false,
+      // 标题
+      title: "",
+      // 表单参数
+      form: {
+        businessKey: "",
+        projectName: "",
+        files: "",
+        remark: "",
+      },
+      // 表单校验
+      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,
+      disPro: false,
+      bpmnViewer: null,
+      options: {},
+      taskTitle: null,
+      taskOpen: false,
+      daterangeMarksTime: [],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
+  methods: {
+    // 查询和我相关的项目信息
+    initMyProject() {
+      // 获取项目列表的接口
+      this.$api.publics.getMyProjectList({}).then((response) => {
+        this.projectOptions = response.rows;
+        if (response.rows.length == 0) {
+          this.$message.error("未查询到和您关联项目，请联系子公司或管理员...");
+        } else if (response.rows.length == 1) {
+          // 这里只有一个项目，默认选中并只读
+          this.form.businessKey = response.rows[0].id;
+          this.form.projectName = response.rows[0].projectName;
+        }
+      });
+    },
+    // 项目选择
+    projectChage(val) {
+      let projectName = "";
+      this.projectOptions.forEach((item) => {
+        if ((item.id = val)) {
+          projectName = item.projectName;
+          return;
+        }
+      });
+      this.form.projectName = projectName;
+    },
+    doCanel() {
+      this.onOpen = false;
+    },
+    show(options) {
+      this.options = options;
+      this.initMyProject();
+      this.title = options.name;
+      this.deptName = store.getters.dept.deptName;
+      this.nickName = store.getters.name;
+      const self = this;
+      this.onOpen = true;
+      flowXmlAndNode({ deployId: options.deploymentId }).then((res) => {
+        this.initFlowImage(res.data.xmlData);
+      });
+    },
+    async initFlowImage(data) {
+      try {
+        self.bpmnViewer = new BpmnViewer({
+          container: this.$refs.flowCanvas,
+          height: "150px",
+        });
+        await self.bpmnViewer.importXML(data);
+        // 自适应
+        self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
+      } catch (err) {
+        console.error(err.message, err.warnings);
+      }
+    },
+    fileInput(files) {
+      let fileUrls = "";
+      if (files.length > 0) {
+        fileUrls = "";
+        files.forEach((item) => {
+          fileUrls += "," + item.url;
+        });
+        fileUrls = fileUrls.substring(1);
+      }
+      this.form.files = fileUrls;
+    },
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          definitionStart(this.options.id, JSON.stringify(this.form)).then((res) => {
+            this.$modal.msgSuccess(res.msg);
+            this.loading = false;
+            //关闭并刷新列表
+            this.$refs.drawer.closeDrawer();
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style>
+.bjs-powered-by {
+  display: none !important;
+}
+.maskLayer {
+  width: 100%;
+  height: 150px;
+  position: absolute;
+  z-index: 9999;
+  top: 66px;
+}
+</style>

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

@@ -1,25 +1,69 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
-      <el-form-item label="名称" prop="name">
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="流程名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入名称"
+          placeholder="请输入流程名称"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="开始时间" prop="deployTime">
+      <el-form-item label="项目单位" prop="businessKeyParName" v-if="showDeptName">
-        <el-date-picker clearable size="small"
+        <el-input
-                        v-model="queryParams.deployTime"
+          v-model="queryParams.businessKeyParName"
-                        type="date"
+          placeholder="请输入项目单位名称"
-                        value-format="yyyy-MM-dd"
+          clearable
-                        placeholder="选择时间">
+          size="small"
-        </el-date-picker>
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="项目名称" prop="businessKeyName">
+        <el-input
+          v-model="queryParams.businessKeyName"
+          placeholder="请输入项目名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="流程类型" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          @keyup.enter.native="handleQuery"
+          placeholder="请选择流程类型"
+          clearable
+        >
+          <el-option
+            v-for="dict in dict.type.sys_process_category"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="接受时间">
+        <el-date-picker
+          v-model="daterangeCheckTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -34,28 +78,41 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:deployment:remove']"
-        >删除
+          >删除
         </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
+    <el-table
-      <el-table-column type="selection" width="55" align="center"/>
+      v-loading="loading"
-      <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
+      :data="todoList"
-      <el-table-column label="流程名称" align="center" prop="procDefName"/>
+      border
-      <el-table-column label="当前节点" align="center" prop="taskName"/>
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column
+        label="任务编号"
+        align="center"
+        prop="taskId"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="流程名称" align="center" prop="procDefName" />
+      <el-table-column label="当前节点" align="center" prop="taskName" />
       <el-table-column label="流程版本" align="center">
         <template slot-scope="scope">
-          <el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
+          <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="流程发起人" align="center">
         <template slot-scope="scope">
-          <label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
+          <label
+            >{{ scope.row.startUserName }}
+            <el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag></label
+          >
         </template>
       </el-table-column>
-      <el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
+      <el-table-column label="接收时间" align="center" prop="createTime" width="180" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -63,14 +120,14 @@
             type="text"
             icon="el-icon-edit-outline"
             @click="handleProcess(scope.row)"
-          >处理
+            >处理
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -88,12 +145,16 @@ import {
   rejectTask,
   getDeployment,
   delDeployment,
-  exportDeployment
+  exportDeployment,
 } from "@/api/flowable/todo";
+import { myAwaitFlowTaskList } from "@/api/flowable/businessKey";
+import editTaskDrawer from "../myProcess/editTaskDrawer.vue";
+import approveDrawer from "./detail/approveDrawer.vue";
 
 export default {
   name: "Deploy",
-  components: {},
+  components: { editTaskDrawer, approveDrawer },
+  dicts: ["sys_process_category"],
   data() {
     return {
       // 遮罩层
@@ -119,38 +180,56 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: null,
-        category: null
+        category: null,
+        params: null,
+        businessKeyName: null,
+        businessKeyParName: null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {}
+      rules: {},
+      daterangeCheckTime: [],
+      showDeptName: false,
     };
   },
   created() {
+    // 超管查询所有项目
+    if (this.$store.getters.userId == 1) {
+      this.showDeptName = true;
+    }
     this.getList();
   },
   methods: {
     /** 查询流程定义列表 */
     getList() {
       this.loading = true;
-      todoList(this.queryParams).then(response => {
+      this.queryParams.params = {};
+      if (null != this.daterangeCheckTime && "" != this.daterangeCheckTime) {
+        this.queryParams.params["beginDate"] = this.daterangeCheckTime[0];
+        this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
+      }
+      //重新刷新代办任务
+      this.$store.dispatch('settingAwaitNum');
+      myAwaitFlowTaskList(this.queryParams).then((response) => {
         this.todoList = response.data.records;
         this.total = response.data.total;
         this.loading = false;
       });
     },
     // 跳转到处理页面
-    handleProcess(row){
+    handleProcess(row) {
-      this.$router.push({ path: '/flowable/task/todo/detail/index',
+      this.$router.push({
+        path: "/flowable/task/todo/detail/index",
         query: {
           procInsId: row.procInsId,
           executionId: row.executionId,
           deployId: row.deployId,
           taskId: row.taskId,
           taskName: row.taskName,
-          startUser: row.startUserName + '-' + row.startDeptName,
+          startUser: row.startUserName + "-" + row.startDeptName,
-        }})
+        },
+      });
     },
     // 取消按钮
     cancel() {
@@ -169,8 +248,9 @@ export default {
         derivedFrom: null,
         derivedFromRoot: null,
         parentDeploymentId: null,
-        engineVersion: null
+        engineVersion: null,
       };
+      this.daterangeCheckTime=[];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -181,13 +261,14 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.daterangeCheckTime=[];
       this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.taskId)
+      this.ids = selection.map((item) => item.taskId);
-      this.single = selection.length !== 1
+      this.single = selection.length !== 1;
-      this.multiple = !selection.length
+      this.multiple = !selection.length;
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -195,15 +276,16 @@ export default {
       this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
-      }).then(function () {
-        return delDeployment(ids);
-      }).then(() => {
-        this.getList();
-       this.$modal.msgSuccess("删除成功");
       })
+        .then(function () {
+          return delDeployment(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        });
     },
-  }
+  },
 };
 </script>
-