From fcca534f2bc2fcc0834d03ae5a6c827500cb959e Mon Sep 17 00:00:00 2001
From: bob <bob.liu@happyelements.net>
Date: Tue, 14 Feb 2023 14:03:41 +0800
Subject: [PATCH] fix(changeTaskTime)

---
 .../common/constant/ProcessConstants.java     |   4 +
 .../flowable/common/enums/FlowStatus.java     |  11 +-
 .../controller/FlowTaskController.java        |   7 +-
 .../flowable/domain/dto/FlowTaskDto.java      |   2 +
 .../vo/UpdateVariablesSubmitDateVo.java       |   4 +-
 .../flowable/service/IFlowTaskService.java    |   2 +
 .../service/impl/FlowTaskServiceImpl.java     |  43 +-
 ruoyi-ui/src/api/flowable/definition.js       |   7 +
 ruoyi-ui/src/router/index.js                  |  12 +
 .../views/flowable/task/allprocess/index.vue  |  27 +-
 .../src/views/flowable/task/process/index.vue |  11 +-
 .../src/views/flowable/task/record/admin.vue  | 813 ++++++++++++++++++
 12 files changed, 904 insertions(+), 39 deletions(-)
 create mode 100644 ruoyi-ui/src/views/flowable/task/record/admin.vue

diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/ProcessConstants.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/ProcessConstants.java
index dc55dfa..ca064a0 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/ProcessConstants.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/ProcessConstants.java
@@ -75,6 +75,10 @@ public class ProcessConstants {
      * 流程跳过
      */
     public static final String FLOWABLE_SKIP_EXPRESSION_ENABLED = "_FLOWABLE_SKIP_EXPRESSION_ENABLED";
+    /**
+     * 用户修改的任务完成时间字段key
+     */
+    public static final String USER_MODIFY_TASK_FINISH_TIME_VARIABLE_KEY    = "userModifyTaskFinishTime";
 
 
 }
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/enums/FlowStatus.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/enums/FlowStatus.java
index 43179f3..f29e1df 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/enums/FlowStatus.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/enums/FlowStatus.java
@@ -11,11 +11,12 @@ public enum FlowStatus {
     /**
      * 说明
      */
-    REBACK("reback", "退回意见"),
-    REJECT("reject", "驳回意见"),
-    DELEGATE("delegate", "委派意见"),
-    ASSIGN("assign", "转办意见"),
-    STOP("stop", "终止流程");
+    APPROVING("approving", "审批中"),
+    REBACK("reback", "退回"),
+    REJECT("reject", "驳回"),
+    DELEGATE("delegate", "委派"),
+    ASSIGN("assign", "转办"),
+    STOP("stop", "终止");
 
     /**
      * 类型
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 5c275ef..4e19cff 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
@@ -90,7 +90,12 @@ public class FlowTaskController {
     @ApiOperation(value = "更新流程变量提交时间", response = FlowTaskDto.class)
     @PostMapping(value = "/updateVariablesSubmitDate")
     public AjaxResult updateVariablesSubmitDate(@RequestBody UpdateVariablesSubmitDateVo vo) {
-        return flowTaskService.updateVariablesSubmitDate(vo.getProcessInstanceId(), vo.getSubmitDate());
+        return flowTaskService.updateVariablesSubmitDate(vo.getProcessInstanceId(), vo.getFinishDate());
+    }
+    @ApiOperation(value = "修改任务完成时间", response = FlowTaskDto.class)
+    @PostMapping(value = "/updateTaskFinishDate")
+    public AjaxResult updateTaskFinishDate(@RequestBody UpdateVariablesSubmitDateVo vo) {
+        return flowTaskService.updateVariablesSubmitDate(vo);
     }
 
     @ApiOperation(value = "审批任务")
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowTaskDto.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowTaskDto.java
index 4985379..ed491a4 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowTaskDto.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowTaskDto.java
@@ -99,5 +99,7 @@ public class FlowTaskDto implements Serializable {
     @ApiModelProperty("任务完成时间")
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date finishTime;
+    @ApiModelProperty("任务状态")
+    private String  status;
 
 }
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/vo/UpdateVariablesSubmitDateVo.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/vo/UpdateVariablesSubmitDateVo.java
index 2434916..d42bd89 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/vo/UpdateVariablesSubmitDateVo.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/vo/UpdateVariablesSubmitDateVo.java
@@ -10,7 +10,9 @@ public class UpdateVariablesSubmitDateVo {
     @ApiModelProperty("流程实例id")
     private String processInstanceId;
 
+    @ApiModelProperty("任务id")
+    private String taskId;
     @ApiModelProperty("提交时间")
-    private String submitDate;
+    private String finishDate;
 
 }
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/IFlowTaskService.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/IFlowTaskService.java
index a3de2a9..5e69bbb 100644
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/IFlowTaskService.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/IFlowTaskService.java
@@ -2,6 +2,7 @@ package com.ruoyi.flowable.service;
 
 import com.ruoyi.common.core.domain.AjaxResult;
 import com.ruoyi.flowable.domain.vo.FlowTaskVo;
+import com.ruoyi.flowable.domain.vo.UpdateVariablesSubmitDateVo;
 import org.flowable.task.api.Task;
 
 import java.io.InputStream;
@@ -166,6 +167,7 @@ public interface IFlowTaskService {
     AjaxResult processVariables(String taskId);
 
     AjaxResult updateVariablesSubmitDate(String processInstanceId,String submitDate);
+    AjaxResult updateVariablesSubmitDate(UpdateVariablesSubmitDateVo vo);
 
     /**
      * 获取下一节点
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 546daae..69ae164 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
@@ -1,7 +1,9 @@
 package com.ruoyi.flowable.service.impl;
 
 
+import cn.hutool.core.date.DatePattern;
 import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.map.MapUtil;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.google.common.collect.Lists;
 import com.ruoyi.common.core.domain.AjaxResult;
@@ -17,6 +19,7 @@ import com.ruoyi.flowable.domain.dto.FlowNextDto;
 import com.ruoyi.flowable.domain.dto.FlowTaskDto;
 import com.ruoyi.flowable.domain.dto.FlowViewerDto;
 import com.ruoyi.flowable.domain.vo.FlowTaskVo;
+import com.ruoyi.flowable.domain.vo.UpdateVariablesSubmitDateVo;
 import com.ruoyi.flowable.factory.FlowServiceFactory;
 import com.ruoyi.flowable.flow.CustomProcessDiagramGenerator;
 import com.ruoyi.flowable.flow.FindNextNodeUtil;
@@ -60,6 +63,8 @@ import java.util.function.Function;
 import java.util.function.Predicate;
 import java.util.stream.Collectors;
 
+import static com.ruoyi.flowable.common.constant.ProcessConstants.USER_MODIFY_TASK_FINISH_TIME_VARIABLE_KEY;
+
 /**
  * @author XuanXuan
  * @date 2021-04-03
@@ -100,6 +105,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
             taskService.setAssignee(taskVo.getTaskId(), userId.toString());
             taskService.complete(taskVo.getTaskId(), taskVo.getValues());
         }
+        runtimeService.updateBusinessStatus(taskVo.getInstanceId(), FlowStatus.APPROVING.getValue());
         return AjaxResult.success();
     }
 
@@ -468,6 +474,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
             flowTask.setProcDefVersion(pd.getVersion());
             flowTask.setCategory(pd.getCategory());
             flowTask.setProcDefVersion(pd.getVersion());
+            flowTask.setStatus(hisIns.getBusinessStatus());
             if (MapUtils.isNotEmpty(hisIns.getProcessVariables())
                     && hisIns.getProcessVariables().containsKey("submitDate")
                     && StringUtils.isNotBlank(MapUtils.getString(hisIns.getProcessVariables(), "submitDate"))) {
@@ -722,6 +729,8 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
                     .processInstanceId(procInsId)
                     .orderByHistoricActivityInstanceStartTime()
                     .desc().list();
+            ProcessInstance processInstance = runtimeService.createProcessInstanceQuery().includeProcessVariables().processInstanceId(procInsId).singleResult();
+            Map<String, Object> userModifyTaskFinishTime = Optional.ofNullable(processInstance).map(e -> (  Map<String, Object>)MapUtils.getMap(e.getProcessVariables(), USER_MODIFY_TASK_FINISH_TIME_VARIABLE_KEY)).orElse(new HashMap<>());
             List<FlowTaskDto> hisFlowList = new ArrayList<>();
             for (HistoricActivityInstance histIns : list) {
                 if (StringUtils.isNotBlank(histIns.getTaskId())) {
@@ -729,7 +738,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
                     flowTask.setTaskId(histIns.getTaskId());
                     flowTask.setTaskName(histIns.getActivityName());
                     flowTask.setCreateTime(histIns.getStartTime());
-                    flowTask.setFinishTime(histIns.getEndTime());
+                    flowTask.setFinishTime(parseFinishTime(userModifyTaskFinishTime, histIns.getTaskId(), histIns.getEndTime()));
                     if (StringUtils.isNotBlank(histIns.getAssignee())) {
                         SysUser sysUser = sysUserService.selectUserById(Long.parseLong(histIns.getAssignee()));
                         flowTask.setAssigneeId(sysUser.getUserId());
@@ -776,10 +785,10 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
                 map.put("finished", false);
             }
 
-            ProcessInstance processInstance = runtimeService.createProcessInstanceQuery()
-                        .processInstanceId(procInsId)
-                        .includeProcessVariables()
-                        .singleResult();
+//            ProcessInstance processInstance = runtimeService.createProcessInstanceQuery()
+//                        .processInstanceId(procInsId)
+//                        .includeProcessVariables()
+//                        .singleResult();
             if (Objects.nonNull(processInstance)) {
                 map.put("form", processInstance.getProcessVariables());
             } else {
@@ -796,6 +805,13 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
         return AjaxResult.success(map);
     }
 
+    public static Date parseFinishTime(Map<String, Object> userModifyTaskFinishTime ,String  taskId, Date taskEndTime) {
+        if (MapUtils.isEmpty(userModifyTaskFinishTime)) {
+            return taskEndTime;
+        }
+        return userModifyTaskFinishTime.containsKey(taskId) ? MapUtil.getDate(userModifyTaskFinishTime, taskId) : taskEndTime;
+    }
+
     /**
      * 根据任务ID查询挂载的表单信息
      *
@@ -930,6 +946,23 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
         runtimeService.setVariable(execution.getId(),"submitDate",submitDate);
         return AjaxResult.success();
     }
+    @Override
+    public AjaxResult updateVariablesSubmitDate(UpdateVariablesSubmitDateVo vo) {
+        if (StringUtils.isBlank(vo.getProcessInstanceId()) || StringUtils.isBlank(vo.getFinishDate())) {
+            return AjaxResult.error("更新提交时间失败，参数无效");
+        }
+        Execution execution = runtimeService.createExecutionQuery().processInstanceId(vo.getProcessInstanceId()).variableExists("submitDate").singleResult();
+        ProcessInstance processInstance = runtimeService.createProcessInstanceQuery().processInstanceId(vo.getProcessInstanceId()).includeProcessVariables().singleResult();
+        if (Objects.isNull(execution)) {
+            return AjaxResult.error("更新提交时间失败，查询错误");
+        }
+        Map<String, Object> variables = processInstance.getProcessVariables();
+        Map<String, Object> map = (Map<String , Object>)MapUtils.getMap(variables, USER_MODIFY_TASK_FINISH_TIME_VARIABLE_KEY,new HashMap<>());
+        map.put(vo.getTaskId(), DateUtil.parse(vo.getFinishDate(), DatePattern.NORM_DATETIME_FORMATTER));
+        runtimeService.setVariable(execution.getId(),USER_MODIFY_TASK_FINISH_TIME_VARIABLE_KEY,map);
+
+        return AjaxResult.success();
+    }
 
     /**
      * 获取下一节点
diff --git a/ruoyi-ui/src/api/flowable/definition.js b/ruoyi-ui/src/api/flowable/definition.js
index 7cd49ca..9080d20 100644
--- a/ruoyi-ui/src/api/flowable/definition.js
+++ b/ruoyi-ui/src/api/flowable/definition.js
@@ -32,6 +32,13 @@ export function updateVariablesSubmitDate(data) {
     method: 'post',
     data: data
   })
+}// 更新流程变量提交时间
+export function updateTaskFinishDate(data) {
+  return request({
+    url: '/flowable/task/updateTaskFinishDate',
+    method: 'post',
+    data: data
+  })
 }
 
 // 激活/挂起流程
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index b307974..481cc45 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -133,6 +133,18 @@ export const constantRoutes = [
         meta: { title: '流程处理', icon: '' }
       }
     ]
+  },  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'task/record/admin',
+        component: (resolve) => require(['@/views/flowable/task/record/admin'], resolve),
+        name: 'Record',
+        meta: { title: '流程管理', icon: '' }
+      }
+    ]
   },
   {
     path: '/tool',
diff --git a/ruoyi-ui/src/views/flowable/task/allprocess/index.vue b/ruoyi-ui/src/views/flowable/task/allprocess/index.vue
index 5f40874..42d3ed2 100644
--- a/ruoyi-ui/src/views/flowable/task/allprocess/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/allprocess/index.vue
@@ -94,9 +94,9 @@
               <el-dropdown-item icon="el-icon-tickets" @click.native="handleFlowRecord(scope.row)">
                 详情
               </el-dropdown-item>
-              <el-dropdown-item icon="el-icon-circle-close" @click.native="handleUpdateSubmitDate(scope.row)">
-                更新提交时间
-              </el-dropdown-item>
+<!--              <el-dropdown-item icon="el-icon-circle-close" @click.native="handleUpdateSubmitDate(scope.row)">-->
+<!--                更新提交时间-->
+<!--              </el-dropdown-item>-->
               <el-dropdown-item icon="el-icon-delete" @click.native="handleDownloadAttachment(scope.row)">
                 下载附件
               </el-dropdown-item>
@@ -114,25 +114,7 @@
       @pagination="getList"
     />
 
-    <!-- 发起流程 -->
-    <el-dialog title="修改提交时间" :visible.sync="openUpdateSubmitDate" width="40%" append-to-body>
-      <el-form  ref="queryProcessForm" label-width="100px">
-        <el-form-item label="申请提交时间" prop="name">
-          <el-date-picker
-            v-model="submitDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            format="yyyy-MM-dd HH:mm:ss"
-            placeholder="选择日期时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button align="right" type="primary"  @click="changeSubmitDate">确认</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="el-dialog-div"></div>
 
-    </el-dialog>
 
   </div>
 </template>
@@ -320,9 +302,10 @@ export default {
       this.openUpdateSubmitDate = true
       this.processInstanceId = row.procInsId
     },
+    // 详情按钮
     /** 流程流转记录 */
     handleFlowRecord(row){
-      this.$router.push({ path: '/flowable/task/record/index',
+      this.$router.push({ path: '/flowable/task/record/admin',
         query: {
           procInsId: row.procInsId,
           deployId: row.deployId,
diff --git a/ruoyi-ui/src/views/flowable/task/process/index.vue b/ruoyi-ui/src/views/flowable/task/process/index.vue
index 59e2387..bd5fbc5 100644
--- a/ruoyi-ui/src/views/flowable/task/process/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/process/index.vue
@@ -72,8 +72,9 @@
       <el-table-column label="提交时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="流程状态" align="center" width="100">
         <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" size="mini">已完成</el-tag>
+          <el-tag v-if="scope.row.status =='reject' " type="danger" size="mini">被驳回</el-tag>
+          <el-tag v-else-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
+          <el-tag type="success" v-else-if="scope.row.finishTime != null" size="mini">已完成</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="耗时" align="center" prop="duration" width="180"/>
@@ -94,9 +95,9 @@
               <el-dropdown-item icon="el-icon-tickets" @click.native="handleFlowRecord(scope.row)">
                 详情
               </el-dropdown-item>
-<!--              <el-dropdown-item icon="el-icon-circle-close" @click.native="handleStop(scope.row)">-->
-<!--                取消申请-->
-<!--              </el-dropdown-item>-->
+              <el-dropdown-item v-if="scope.row.status =='reject' " icon="el-icon-circle-close" @click.native="handleFlowRecord(scope.row)">
+                重新发起
+              </el-dropdown-item>
 <!--              <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)" v-hasPermi="['system:deployment:remove']">-->
 <!--                删除-->
 <!--              </el-dropdown-item>-->
diff --git a/ruoyi-ui/src/views/flowable/task/record/admin.vue b/ruoyi-ui/src/views/flowable/task/record/admin.vue
new file mode 100644
index 0000000..e8ace84
--- /dev/null
+++ b/ruoyi-ui/src/views/flowable/task/record/admin.vue
@@ -0,0 +1,813 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" >
+        <div slot="header" class="clearfix">
+          <span class="el-icon-document">基础信息</span>
+          <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
+        </div>
+
+      <!--流程处理表单模块-->
+      <el-col :span="16" :offset="6" 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="index"
+                    :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>
+          <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
+            <el-button  icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
+<!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
+<!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
+<!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
+<!--            <el-button  icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>-->
+            <el-button  icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
+          </div>
+     </el-col>
+
+      <!--初始化流程加载表单信息-->
+      <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-item label="所属项目">
+              <el-select v-model="form.projectId"
+                         clearable
+                         filterable
+                         placeholder="请选择">
+                <el-option
+                  v-for="(item,index) in projectList"
+                  :key="index"
+                  :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>
+<!--        <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>
+
+    <!--流程流转记录-->
+    <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="index"
+                  :icon="setIcon(item.finishTime, item.comment)"
+                  :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>
+                        <span>{{item.finishTime}}</span>
+                        <span > <el-button align="right" @click="handleUpdateTaskFinishDate(item.taskId)" size="mini" round plain  type="primary">修改时间</el-button></span>
+                      </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>-->
+                    <img v-if="isRefuse(item.comment)"  src="@/assets/images/refuse.png" width="50" height="50">
+                  </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="index"
+                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 title="修改完成时间" :visible.sync="updateFinishDateOpen" width="40%" append-to-body>
+      <el-form  ref="queryProcessForm" label-width="100px">
+        <el-form-item label="完成时间" prop="name">
+          <el-date-picker
+            v-model="finishDate"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button align="right" type="primary"  @click="updateTaskFinishDate">确认</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="el-dialog-div"></div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {flowRecord} from "@/api/flowable/finished";
+import Parser from '@/components/parser/Parser'
+import {
+  definitionStart,
+  getProcessVariables,
+  readXml,
+  getFlowViewer,
+  updateTaskFinishDate,
+  updateVariablesSubmitDate
+} 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
+      },
+      // 遮罩层
+      loading: true,
+      applyIsRevoked: false,
+      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: '',
+        submitDate: '',
+        solution: '',
+      },
+      finishDate: '',
+      fileList: [],
+      projectList: [],
+      returnTaskList: [],  // 回退列表数据
+      finished: 'false',
+      completeTitle: null,
+      completeOpen: false,
+      returnTitle: null,
+      returnOpen: false,
+      rejectOpen: false,
+      updateFinishDateOpen: false,
+      taskId: '',
+      rejectTitle: null,
+      userData:[],
+      checkSendUser: false // 是否展示选择人员模块
+    };
+  },
+  activated() {
+    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
+    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
+    this.taskForm.procInsId = this.$route.query && this.$route.query.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 =  this.$route.query && this.$route.query.finished
+  },
+  methods: {
+    /** 查询部门下拉树结构 */
+    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;
+        }
+      );
+    },
+    /**  修改任务提交时间 */
+    handleUpdateTaskFinishDate(taskId) {
+      this.updateFinishDateOpen = true;
+      this.taskId = taskId;
+    },
+
+      /**  修改任务提交时间 */
+    updateTaskFinishDate(){
+      const params = {
+        processInstanceId: this.taskForm.procInsId,
+        taskId:  this.taskId,
+        finishDate: this.finishDate
+      }
+      updateTaskFinishDate(params).then( res => {
+        if (res.code !== 200) {
+          this.msgError(res.msg);
+          return;
+        } else {
+          this.msgSuccess(res.msg);
+          this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
+        }
+        this.updateFinishDateOpen = false;
+      });
+    },
+    // 筛选节点
+    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
+      })
+    },
+    isRefuse(comment) {
+      return comment !== null &&comment !== undefined && comment.type !== null && comment.type !== undefined && comment.type === "3"
+    },
+    setIcon(finishTime,comment) {
+      console.log('setIcon::',comment)
+      // 驳回状态
+      if (this.isRefuse(comment)) {
+        return "el-icon-close";
+
+      } else if (finishTime) {
+        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
+          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 => {
+        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();
+    },    /** 确认并提交任务选择 */
+    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() {
+      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>