diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/controller/FlowTaskController.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/controller/FlowTaskController.java
index 3c15ca2..35fe130 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/controller/FlowTaskController.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/controller/FlowTaskController.java
@@ -1,6 +1,8 @@
 package com.ruoyi.flowable.controller;
 
 import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.core.domain.entity.SysUser;
+import com.ruoyi.common.utils.SecurityUtils;
 import com.ruoyi.flowable.domain.dto.FlowTaskDto;
 import com.ruoyi.flowable.domain.vo.FlowTaskVo;
 import com.ruoyi.flowable.service.IFlowTaskService;
@@ -119,6 +121,21 @@ public class FlowTaskController {
         return AjaxResult.success();
     }
 
+    /**
+     * 认领/签收任务，并完成任务
+     * @param flowTaskVo
+     * @return
+     */
+    @ApiOperation(value = "认领/签收任务，并完成任务")
+    @PostMapping(value = "/claimAndComplete")
+    public AjaxResult claimAndComplete(@RequestBody FlowTaskVo flowTaskVo) {
+        SysUser sysUser = SecurityUtils.getLoginUser().getUser();
+        flowTaskVo.setUserId(sysUser.getUserId().toString());
+        flowTaskService.claim(flowTaskVo);
+        flowTaskService.complete(flowTaskVo);
+        return AjaxResult.success();
+    }
+
     @ApiOperation(value = "取消认领/签收任务")
     @PostMapping(value = "/unClaim")
     public AjaxResult unClaim(@RequestBody FlowTaskVo flowTaskVo) {
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowTaskServiceImpl.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowTaskServiceImpl.java
index 5097af0..652b549 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowTaskServiceImpl.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowTaskServiceImpl.java
@@ -740,21 +740,30 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
             }
             map.put("flowList", hisFlowList);
 //            // 查询当前任务是否完成
-//            List<Task> taskList = taskService.createTaskQuery().processInstanceId(procInsId).list();
-//            if (CollectionUtils.isNotEmpty(taskList)) {
-//                map.put("finished", true);
-//            } else {
-//                map.put("finished", false);
-//            }
-        }
-        // 第一次申请获取初始化表单
-        if (StringUtils.isNotBlank(procInsId)) {
+            List<Task> taskList = taskService.createTaskQuery().processInstanceId(procInsId).list();
+            if (CollectionUtils.isNotEmpty(taskList)) {
+                map.put("finished", true);
+            } else {
+                map.put("finished", false);
+            }
+
             ProcessInstance processInstance = runtimeService.createProcessInstanceQuery()
-                    .processInstanceId(procInsId)
-                    .includeProcessVariables()
-                    .singleResult();
-            map.put("form", processInstance.getProcessVariables());
+                        .processInstanceId(procInsId)
+                        .includeProcessVariables()
+                        .singleResult();
+            if (Objects.nonNull(processInstance)) {
+                map.put("form", processInstance.getProcessVariables());
+            } else {
+                HistoricProcessInstance historicProcessInstance = historyService.createHistoricProcessInstanceQuery()
+                        .processInstanceId(procInsId)
+                        .includeProcessVariables()
+                        .singleResult();
+                Optional.of(historicProcessInstance)
+                        .ifPresent(e -> map.put("form", historicProcessInstance.getProcessVariables()));
+
+            }
         }
+
         return AjaxResult.success(map);
     }
 
diff --git a/ruoyi-ui/package-lock.json b/ruoyi-ui/package-lock.json
index 539bac7..c2d2181 100644
--- a/ruoyi-ui/package-lock.json
+++ b/ruoyi-ui/package-lock.json
@@ -1731,6 +1731,15 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "async": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+          "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.14"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1616431125500&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1775,6 +1784,43 @@
             "minimist": "^1.2.5"
           }
         },
+        "portfinder": {
+          "version": "1.0.32",
+          "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+          "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+          "dev": true,
+          "requires": {
+            "async": "^2.6.4",
+            "debug": "^3.2.7",
+            "mkdirp": "^0.5.6"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "3.2.7",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+              "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+              "dev": true,
+              "requires": {
+                "ms": "^2.1.1"
+              }
+            },
+            "minimist": {
+              "version": "1.2.7",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+              "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+              "dev": true
+            },
+            "mkdirp": {
+              "version": "0.5.6",
+              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+              "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+              "dev": true,
+              "requires": {
+                "minimist": "^1.2.6"
+              }
+            }
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1593529658602&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
@@ -2380,13 +2426,9 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz",
-      "integrity": "sha1-1yYl4jRKNlbjo61Pp0n6gymdgv8=",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.14"
-      }
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "integrity": "sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w=="
     },
     "async-each": {
       "version": "1.0.3",
@@ -9404,33 +9446,40 @@
       }
     },
     "portfinder": {
-      "version": "1.0.28",
-      "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz?cache=0&sync_timestamp=1596018197667&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.28.tgz",
-      "integrity": "sha1-Z8RiKFK9U3TdHdkA93n1NGL6x3g=",
-      "dev": true,
+      "version": "1.0.21",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.21.tgz",
+      "integrity": "sha512-ESabpDCzmBS3ekHbmpAIiESq3udRsCBGiBZLsC+HgBKv2ezb0R4oG+7RnYEVZ/ZCfhel5Tx3UzdNWA0Lox2QCA==",
       "requires": {
-        "async": "^2.6.2",
-        "debug": "^3.1.1",
-        "mkdirp": "^0.5.5"
+        "async": "^1.5.2",
+        "debug": "^2.2.0",
+        "mkdirp": "0.5.x"
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.2.7.tgz?cache=0&sync_timestamp=1607566571506&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.7.tgz",
-          "integrity": "sha1-clgLfpFF+zm2Z2+cXl+xALk0F5o=",
-          "dev": true,
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.0.0"
           }
         },
+        "minimist": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+          "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
+        },
         "mkdirp": {
-          "version": "0.5.5",
-          "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.5.tgz",
-          "integrity": "sha1-2Rzv1i0UNsoPQWIOJRKI1CAJne8=",
-          "dev": true,
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
           "requires": {
-            "minimist": "^1.2.5"
+            "minimist": "^1.2.6"
           }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
@@ -13299,6 +13348,15 @@
             }
           }
         },
+        "async": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+          "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.14"
+          }
+        },
         "binary-extensions": {
           "version": "1.13.1",
           "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-1.13.1.tgz?cache=0&sync_timestamp=1610299285874&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-1.13.1.tgz",
@@ -13437,6 +13495,21 @@
             "path-exists": "^3.0.0"
           }
         },
+        "minimist": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+          "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.6"
+          }
+        },
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz",
@@ -13452,6 +13525,28 @@
           "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
           "dev": true
         },
+        "portfinder": {
+          "version": "1.0.32",
+          "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+          "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+          "dev": true,
+          "requires": {
+            "async": "^2.6.4",
+            "debug": "^3.2.7",
+            "mkdirp": "^0.5.6"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "3.2.7",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+              "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+              "dev": true,
+              "requires": {
+                "ms": "^2.1.1"
+              }
+            }
+          }
+        },
         "readdirp": {
           "version": "2.2.1",
           "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-2.2.1.tgz?cache=0&sync_timestamp=1615717425931&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freaddirp%2Fdownload%2Freaddirp-2.2.1.tgz",
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 53e612a..9947c2d 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -40,6 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
+    "diagram-js": "^5.0.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.10",
     "file-saver": "2.0.5",
@@ -49,18 +50,18 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "nprogress": "0.2.0",
+    "portfinder": "^1.0.21",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "vkbeautify": "^0.99.3",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "workflow-bpmn-modeler": "^0.2.8",
-    "diagram-js": "^5.0.0",
-    "vkbeautify": "^0.99.3"
+    "workflow-bpmn-modeler": "^0.2.8"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
@@ -88,5 +89,8 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "resolutions": {
+    "@vue/cli-service/portfinder": "1.0.21"
+  }
 }
diff --git a/ruoyi-ui/src/api/flowable/process.js b/ruoyi-ui/src/api/flowable/process.js
index effce34..18f908e 100644
--- a/ruoyi-ui/src/api/flowable/process.js
+++ b/ruoyi-ui/src/api/flowable/process.js
@@ -18,6 +18,14 @@ export function complete(data) {
     data: data
   })
 }
+// 完成任务
+export function claimAndComplete(data) {
+  return request({
+    url: '/flowable/task/claimAndComplete',
+    method: 'post',
+    data: data
+  })
+}
 
 // 取消申请
 export function stopProcess(data) {
diff --git a/ruoyi-ui/src/views/flowable/oa-project-flow.vue b/ruoyi-ui/src/views/flowable/oa-project-flow.vue
index c6bf6a9..159256c 100644
--- a/ruoyi-ui/src/views/flowable/oa-project-flow.vue
+++ b/ruoyi-ui/src/views/flowable/oa-project-flow.vue
@@ -133,8 +133,8 @@ export default {
     /** 启动流程 */
     startFlow(){
       definitionStart(this.oaProjectFlowId, JSON.stringify(this.form)).then(res => {
-        this.msgSuccess(res.msg).then(() => this.$router.push('/task/process'));
-
+        this.msgSuccess(res.msg);
+        this.$router.push('/task/process')
       })
     },    /** 获取最新流程id */
     getLatestIdByKey(){
diff --git a/ruoyi-ui/src/views/flowable/task/finished/index.vue b/ruoyi-ui/src/views/flowable/task/finished/index.vue
index 899c65e..596d8da 100644
--- a/ruoyi-ui/src/views/flowable/task/finished/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/finished/index.vue
@@ -52,14 +52,14 @@
       <el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="审批时间" align="center" prop="finishTime" width="180"/>
       <el-table-column label="耗时" align="center" prop="duration" width="180"/>
-<!--      <el-table-column label="操作" align="center" 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-table-column label="操作" align="center" 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-->
 <!--            size="mini"-->
 <!--            type="text"-->
@@ -67,8 +67,8 @@
 <!--            @click="handleRevoke(scope.row)"-->
 <!--          >撤回-->
 <!--          </el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -78,15 +78,18 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    <finished-record ref="finishedRecord"></finished-record>
   </div>
 </template>
 
 <script>
 import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
+import finishedRecord from './record'
 
 export default {
   name: "Deploy",
   components: {
+    finishedRecord
   },
   data() {
     return {
@@ -204,13 +207,7 @@ export default {
     },
     /** 流程流转记录 */
     handleFlowRecord(row){
-      this.$router.push({ path: '/flowable/task/record/index',
-        query: {
-          procInsId: row.procInsId,
-          deployId: row.deployId,
-          taskId: row.taskId,
-          finished: false
-      }})
+      this.$refs.finishedRecord.init(row.procInsId,row.deployId,row.taskId, false)
     },
     /** 撤回任务 */
     handleRevoke(row){
diff --git a/ruoyi-ui/src/views/flowable/task/finished/record.vue b/ruoyi-ui/src/views/flowable/task/finished/record.vue
new file mode 100644
index 0000000..ebee600
--- /dev/null
+++ b/ruoyi-ui/src/views/flowable/task/finished/record.vue
@@ -0,0 +1,675 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="'流转信息'" :visible.sync="open" width="80%" append-to-body>
+
+    <el-card class="box-card" >
+      <div slot="header" class="clearfix">
+        <span class="el-icon-document">基础信息</span>
+        <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
+      </div>
+
+      <!--流程处理表单模块-->
+      <el-col :span="16" :offset="6" v-if="variableOpen">
+        <div>
+          <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="true">
+            <el-form-item label="所属项目">
+              <el-select v-model="form.projectId"
+                         clearable
+                         filterable
+                         placeholder="请选择">
+                <el-option
+                  v-for="(item,index) in projectList"
+                  :key="record"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="项目问题">
+              <el-input type="textarea" v-model="form.issue"/>
+            </el-form-item>
+            <el-form-item label="解决方案">
+              <el-input type="textarea" v-model="form.solution"/>
+            </el-form-item>
+            <el-form-item label="工作记录">
+              <el-input type="textarea" v-model="form.workRecord"/>
+            </el-form-item>
+            <el-form-item label="图片上传" prop="remark">
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :file-list="fileList">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="文件上传" prop="remark">
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                multiple
+                :limit="3"
+                :file-list="fileList">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-col>
+
+    </el-card>
+
+    <!--流程流转记录-->
+    <el-card class="box-card" v-if="flowRecordList">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-notebook-1">审批记录</span>
+      </div>
+      <el-col :span="16" :offset="4" >
+        <div class="block">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(item,index ) in flowRecordList"
+              :key="record"
+              :icon="setIcon(item.finishTime)"
+              :color="setColor(item.finishTime)"
+            >
+              <p style="font-weight: 700">{{item.taskName}}</p>
+              <el-card :body-style="{ padding: '10px' }">
+                <el-descriptions class="margin-top" :column="1" size="small" border>
+                  <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
+                    <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">
+                    <template slot="label"><i class="el-icon-user"></i>候选办理</template>
+                    {{item.candidate}}
+                  </el-descriptions-item>
+                  <el-descriptions-item label-class-name="my-label">
+                    <template slot="label"><i class="el-icon-date"></i>接收时间</template>
+                    {{item.createTime}}
+                  </el-descriptions-item>
+                  <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
+                    <template slot="label"><i class="el-icon-date"></i>处理时间</template>
+                    {{item.finishTime}}
+                  </el-descriptions-item>
+                  <el-descriptions-item v-if="item.duration"  label-class-name="my-label">
+                    <template slot="label"><i class="el-icon-time"></i>耗时</template>
+                    {{item.duration}}
+                  </el-descriptions-item>
+                  <el-descriptions-item v-if="item.comment" label-class-name="my-label">
+                    <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
+                    {{item.comment.comment}}
+                  </el-descriptions-item>
+                </el-descriptions>
+
+                <!--                    <p  v-if="item.comment">-->
+                <!--                      <el-tag type="success" v-if="item.comment.type === '1'">  {{item.comment.comment}}</el-tag>-->
+                <!--                      <el-tag type="warning" v-if="item.comment.type === '2'">  {{item.comment.comment}}</el-tag>-->
+                <!--                      <el-tag type="danger" v-if="item.comment.type === '3'">  {{item.comment.comment}}</el-tag>-->
+                <!--                    </p>-->
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </el-col>
+    </el-card>
+        <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span class="el-icon-picture-outline">流程图</span>
+            </div>
+            <flow :xmlData="xmlData" :taskData="taskList"></flow>
+        </el-card>
+
+    <!--审批正常流程-->
+    <el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
+      <el-form ref="taskForm" :model="taskForm" label-width="80px" >
+        <el-form-item  v-if="checkSendUser" prop="targetKey">
+          <el-row :gutter="20">
+            <!--部门数据-->
+            <el-col :span="6" :xs="24">
+              <h6>部门列表</h6>
+              <div class="head-container">
+                <el-input
+                  v-model="deptName"
+                  placeholder="请输入部门名称"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  style="margin-bottom: 20px"
+                />
+              </div>
+              <div class="head-container">
+                <el-tree
+                  :data="deptOptions"
+                  :props="defaultProps"
+                  :expand-on-click-node="false"
+                  :filter-node-method="filterNode"
+                  ref="tree"
+                  default-expand-all
+                  @node-click="handleNodeClick"
+                />
+              </div>
+            </el-col>
+            <el-col :span="10" :xs="24">
+              <h6>待选人员</h6>
+              <el-table
+                ref="singleTable"
+                :data="userList"
+                border
+                style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50" align="center" />
+                <el-table-column label="用户名" align="center" prop="nickName" />
+                <el-table-column label="部门" align="center" prop="dept.deptName" />
+              </el-table>
+            </el-col>
+            <el-col :span="8" :xs="24">
+              <h6>已选人员</h6>
+              <el-tag
+                v-for="(user,index) in userData"
+                :key="record"
+                closable
+                @close="handleClose(user)">
+                {{user.nickName}} {{user.dept.deptName}}
+              </el-tag>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
+          <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="completeOpen = false">取 消</el-button>
+        <el-button type="primary" @click="taskComplete">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!--退回流程-->
+    <el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
+      <el-form ref="taskForm" :model="taskForm" label-width="80px" >
+        <el-form-item label="退回节点" prop="targetKey">
+          <el-radio-group v-model="taskForm.targetKey">
+            <el-radio-button
+              v-for="item in returnTaskList"
+              :key="item.id"
+              :label="item.id"
+            >{{item.name}}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
+          <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+            <el-button @click="returnOpen = false">取 消</el-button>
+            <el-button type="primary" @click="taskReturn">确 定</el-button>
+        </span>
+    </el-dialog>
+
+    <!--驳回流程-->
+    <el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
+      <el-form ref="taskForm" :model="taskForm" label-width="80px" >
+        <el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
+          <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="rejectOpen = false">取 消</el-button>
+          <el-button type="primary" @click="taskReject">确 定</el-button>
+        </span>
+    </el-dialog>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {flowRecord} from "@/api/flowable/finished";
+import Parser from '@/components/parser/Parser'
+import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
+import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
+import flow from '@/views/flowable/task/record/flow'
+import {treeselect} from "@/api/system/dept";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Treeselect from "@riophae/vue-treeselect";
+import {listUser} from "@/api/system/user";
+import {optionProject} from "@/api/system/project";
+
+export default {
+  name: "Record",
+  components: {
+    Parser,
+    flow,
+    Treeselect
+  },
+  props: {},
+  data() {
+    return {
+      // 模型xml数据
+      xmlData: "",
+      taskList: [],
+      // 部门名称
+      deptName: undefined,
+      // 部门树选项
+      deptOptions: undefined,
+      // 用户表格数据
+      userList: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        deptId: undefined
+      },
+      // 遮罩层
+      open: false,
+      loading: true,
+      flowRecordList: [], // 流程流转数据
+      formConfCopy: {},
+      src: null,
+      rules: {}, // 表单校验
+      variablesForm: {}, // 流程变量数据
+      taskForm:{
+        returnTaskShow: false, // 是否展示回退表单
+        delegateTaskShow: false, // 是否展示回退表单
+        defaultTaskShow: true, // 默认处理
+        sendUserShow: false, // 审批用户
+        multiple: false,
+        comment:"", // 意见内容
+        procInsId: "", // 流程实例编号
+        instanceId: "", // 流程实例编号
+        deployId: "",  // 流程定义编号
+        taskId: "" ,// 流程任务编号
+        procDefId: "",  // 流程编号
+        vars: "",
+        targetKey:""
+      },
+      userDataList:[], // 流程候选人
+      assignee: null,
+      formConf: {}, // 默认表单数据
+      formConfOpen: false, // 是否加载默认表单数据
+      variables: [], // 流程变量数据
+      variablesData: {}, // 流程变量数据
+      variableOpen: false, // 是否加载流程变量数据
+      // 表单参数
+      form: {
+        projectId: 0,
+        workRecord: '',
+        issue: '',
+        solution: '',
+      },
+      fileList: [],
+      projectList: [],
+      returnTaskList: [],  // 回退列表数据
+      finished: 'false',
+      completeTitle: null,
+      completeOpen: false,
+      returnTitle: null,
+      returnOpen: false,
+      rejectOpen: false,
+      rejectTitle: null,
+      userData:[],
+      checkSendUser: false // 是否展示选择人员模块
+    };
+  },
+
+  methods: {
+    init(procInsId, deployId, taskId, finished) {
+      this.open = true
+      this.taskForm.deployId = deployId;
+      this.taskForm.taskId = taskId;
+      this.taskForm.procInsId = procInsId;
+      // this.taskForm.executionId = this.$route.query && this.$route.query.executionId;
+      // this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
+      // 初始化表单
+      // this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId;
+      // 回显流程记录
+      this.getFlowViewer(this.taskForm.procInsId, this.taskForm.executionId);
+      this.getModelDetail(this.taskForm.deployId);
+      // 流程任务重获取变量表单
+      if (this.taskForm.taskId) {
+        this.processVariables(this.taskForm.taskId)
+        this.getNextFlowNode(this.taskForm.taskId)
+        this.taskForm.deployId = null
+      }
+      this.optionList();
+      this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
+      this.finished = finished;
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    /** 查询用户列表 */
+    getList() {
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+        }
+      );
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.getList();
+    },
+    /** xml 文件 */
+    getModelDetail(deployId) {
+      // 发送请求，获取xml
+      readXml(deployId).then(res => {
+        this.xmlData = res.data
+      })
+    },
+    getFlowViewer(procInsId,executionId) {
+      getFlowViewer(procInsId,executionId).then(res => {
+        this.taskList = res.data
+      })
+    },
+    setIcon(val) {
+      if (val) {
+        return "el-icon-check";
+      } else {
+        return "el-icon-time";
+      }
+    },
+    setColor(val) {
+      if (val) {
+        return "#2bc418";
+      } else {
+        return "#b3bdbb";
+      }
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      if (selection) {
+        this.userData = selection
+        const selectVal = selection.map(item => item.userId);
+        if (selectVal instanceof Array) {
+          this.taskForm.values = {
+            "approval": selectVal.join(',')
+          }
+        } else {
+          this.taskForm.values = {
+            "approval": selectVal
+          }
+        }
+      }
+    },
+    // 关闭标签
+    handleClose(tag) {
+      this.userData.splice(this.userData.indexOf(tag), 1);
+      this.$refs.singleTable.toggleRowSelection(tag, false)
+    },
+    /** 流程变量赋值 */
+    handleCheckChange(val) {
+      if (val instanceof Array) {
+        this.taskForm.values = {
+          "approval": val.join(',')
+        }
+      } else {
+        this.taskForm.values = {
+          "approval": val
+        }
+      }
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, deployId) {
+      const params = {procInsId: procInsId, deployId: deployId}
+      flowRecord(params).then(res => {
+        this.flowRecordList = res.data.flowList;
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
+        // if (res.data.formData) {
+        this.form = res.data.form;
+        console.log("res.data.form;", res.data.form)
+        console.log("this.form ", this.form)
+        if (this.taskForm.executionId === undefined) {
+          this.formConfOpen = true
+        }
+        // }
+      }).catch(res => {
+        this.goBack();
+      })
+    },
+    fillFormData(form, data) {
+      form.fields.forEach(item => {
+        const val = data[item.__vModel__]
+        if (val) {
+          item.__config__.defaultValue = val
+        }
+      })
+    },
+    /** 获取流程变量内容 */
+    processVariables(taskId) {
+      if (taskId) {
+        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
+        getProcessVariables(taskId).then(res => {
+          // this.variables = res.data.variables;
+          this.form = res.data;
+          this.variableOpen = true
+        });
+      }
+    },
+    /** 查询项目列表 */
+    optionList() {
+      this.loading = true;
+      optionProject().then(response => {
+        this.projectList = response.data;
+        this.loading = false;
+      });
+    },
+    /** 根据当前任务或者流程设计配置的下一步节点 */
+    getNextFlowNode(taskId) {
+      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
+      const params = {taskId: taskId}
+      getNextFlowNode(params).then(res => {
+        const data = res.data;
+        if (data) {
+          this.checkSendUser = true
+          if (data.type === 'assignee') { // 指定人员
+            this.userDataList = res.data.userList;
+          } else if (data.type === 'candidateUsers') {  // 指定人员(多个)
+            this.userDataList = res.data.userList;
+            this.taskForm.multiple = true;
+          } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
+            res.data.roleList.forEach(role => {
+              role.userId = role.roleId;
+              role.nickName = role.roleName;
+            })
+            this.userDataList = res.data.roleList;
+            this.taskForm.multiple = false;
+          } else if (data.type === 'multiInstance') { // 会签?
+            this.userDataList = res.data.userList;
+            this.taskForm.multiple = true;
+          }else if (data.type === 'fixed') { // 已经固定人员接收下一任务
+            this.checkSendUser = false;
+          }
+        }
+      })
+    },
+    /** 审批任务选择 */
+    handleComplete() {
+      this.completeOpen = true;
+      this.completeTitle = "审批流程";
+      this.getTreeselect();
+    },
+    /** 审批任务 */
+    taskComplete() {
+      if (!this.taskForm.values && this.checkSendUser){
+        this.msgError("请选择流程接收人员");
+        return;
+      }
+      if (!this.taskForm.comment){
+        this.msgError("请输入审批意见");
+        return;
+      }
+      complete(this.taskForm).then(response => {
+        this.msgSuccess(response.msg);
+        this.goBack();
+      });
+    },
+    /** 委派任务 */
+    handleDelegate() {
+      this.taskForm.delegateTaskShow = true;
+      this.taskForm.defaultTaskShow = false;
+    },
+    handleAssign(){
+
+    },
+    /** 返回页面 */
+    goBack() {
+      // 关闭当前标签页并返回上个页面
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.go(-1)
+    },
+    /** 接收子组件传的值 */
+    getData(data) {
+      if (data) {
+        const variables = [];
+        data.fields.forEach(item => {
+          let variableData = {};
+          variableData.label = item.__config__.label
+          // 表单值为多个选项时
+          if (item.__config__.defaultValue instanceof Array) {
+            const array = [];
+            item.__config__.defaultValue.forEach(val => {
+              array.push(val)
+            })
+            variableData.val = array;
+          } else {
+            variableData.val = item.__config__.defaultValue
+          }
+          variables.push(variableData)
+        })
+        this.variables = variables;
+      }
+    },
+    /** 申请流程表单数据提交 */
+    submitForm(data) {
+      if (data) {
+        const variables = data.valData;
+        const formData = data.formData;
+        formData.disabled = true;
+        formData.formBtns = false;
+        if (this.taskForm.procDefId) {
+          variables.variables = formData;
+          // 启动流程并将表单数据加入流程变量
+          definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
+            this.msgSuccess(res.msg);
+            this.goBack();
+          })
+        }
+      }
+    },
+    /** 驳回任务 */
+    handleReject() {
+      this.rejectOpen = true;
+      this.rejectTitle = "驳回流程";
+    },
+    /** 驳回任务 */
+    taskReject() {
+      this.$refs["taskForm"].validate(valid => {
+        if (valid) {
+          rejectTask(this.taskForm).then(res => {
+            this.msgSuccess(res.msg);
+            this.goBack();
+          });
+        }
+      });
+    },
+    /** 可退回任务列表 */
+    handleReturn() {
+      this.returnOpen = true;
+      this.returnTitle = "退回流程";
+      returnList(this.taskForm).then(res => {
+        this.returnTaskList = res.data;
+        this.taskForm.values = null;
+      })
+    },
+    /** 提交退回任务 */
+    taskReturn() {
+      this.$refs["taskForm"].validate(valid => {
+        if (valid) {
+          returnTask(this.taskForm).then(res => {
+            this.msgSuccess(res.msg);
+            this.goBack()
+          });
+        }
+      });
+    },
+    /** 取消回退任务按钮 */
+    cancelTask() {
+      this.taskForm.returnTaskShow = false;
+      this.taskForm.defaultTaskShow = true;
+      this.taskForm.sendUserShow = true;
+      this.returnTaskList = [];
+    },
+    /** 委派任务 */
+    submitDeleteTask() {
+      this.$refs["taskForm"].validate(valid => {
+        if (valid) {
+          delegate(this.taskForm).then(response => {
+            this.msgSuccess(response.msg);
+            this.goBack();
+          });
+        }
+      });
+    },
+    /** 取消回退任务按钮 */
+    cancelDelegateTask() {
+      this.taskForm.delegateTaskShow = false;
+      this.taskForm.defaultTaskShow = true;
+      this.taskForm.sendUserShow = true;
+      this.returnTaskList = [];
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.test-form {
+  margin: 15px auto;
+  width: 800px;
+  padding: 15px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+
+.my-label {
+  background: #E1F3D8;
+}
+</style>
diff --git a/ruoyi-ui/src/views/flowable/task/record/index.vue b/ruoyi-ui/src/views/flowable/task/record/index.vue
index 1df9a7f..9d5d708 100644
--- a/ruoyi-ui/src/views/flowable/task/record/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/record/index.vue
@@ -71,7 +71,7 @@
       <!--初始化流程加载表单信息-->
       <el-col :span="16" :offset="4" v-if="formConfOpen" >
         <div class="test-form">
-          <el-form ref="form" :model="form" :rules="rules" label-width="100px"  :disabled="true">
+          <el-form ref="form" :model="form" :rules="rules" label-width="100px"  :disabled=!applyIsRevoked>
             <el-form-item label="所属项目">
               <el-select v-model="form.projectId"
                          clearable
@@ -120,6 +120,9 @@
             </el-form-item>
           </el-form>
         </div>
+        <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if=applyIsRevoked>
+          <el-button  icon="el-icon-edit-outline" type="success" size="mini" @click="handleClaimAndComplete">提交</el-button>
+        </div>
       </el-col>
     </el-card>
 
@@ -178,12 +181,12 @@
             </div>
           </el-col>
       </el-card>
-<!--    <el-card class="box-card">-->
-<!--        <div slot="header" class="clearfix">-->
-<!--          <span class="el-icon-picture-outline">流程图</span>-->
-<!--        </div>-->
-<!--        <flow :xmlData="xmlData" :taskData="taskList"></flow>-->
-<!--    </el-card>-->
+    <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span class="el-icon-picture-outline">流程图</span>
+        </div>
+        <flow :xmlData="xmlData" :taskData="taskList"></flow>
+    </el-card>
 
     <!--审批正常流程-->
     <el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
@@ -328,6 +331,7 @@ export default {
       },
       // 遮罩层
       loading: true,
+      applyIsRevoked: false,
       flowRecordList: [], // 流程流转数据
       formConfCopy: {},
       src: null,
@@ -362,6 +366,7 @@ export default {
         issue: '',
         solution: '',
       },
+      fileList: [],
       projectList: [],
       returnTaskList: [],  // 回退列表数据
       finished: 'false',
@@ -492,6 +497,11 @@ export default {
         console.log("this.form ", this.form)
         if (this.taskForm.executionId === undefined) {
           this.formConfOpen = true
+          if (this.flowRecordList && this.flowRecordList.length !== 0) {
+            console.log("this.flowRecordList[0]", this.flowRecordList[0])
+            this.applyIsRevoked = this.flowRecordList[0].taskName === '提交汇报';
+            console.log("applyIsRevoked", this.applyIsRevoked)
+          }
         }
         // }
       }).catch(res => {
@@ -559,6 +569,15 @@ export default {
       this.completeOpen = true;
       this.completeTitle = "审批流程";
       this.getTreeselect();
+    },    /** 确认并提交任务选择 */
+    handleClaimAndComplete() {
+      this.taskForm.comment = '提交任务';
+      this.taskForm.vars= JSON.stringify(this.form)
+      this.taskForm.taskId= this.flowRecordList[0].taskId
+      complete(this.taskForm).then(response => {
+        this.msgSuccess(response.msg);
+        this.goBack();
+      });
     },
     /** 审批任务 */
     taskComplete() {
@@ -689,6 +708,12 @@ export default {
       this.taskForm.sendUserShow = true;
       this.returnTaskList = [];
     },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    }
   }
 };
 </script>