From 583dabfc4884a1146b29857595616100611f03da Mon Sep 17 00:00:00 2001
From: tony <846249920@qq.com>
Date: Thu, 22 Apr 2021 09:06:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=81=E7=A8=8B=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8F=8A=E5=8A=9F=E8=83=BD=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.更换流程图显示方式
2.优化历史流程流转记录
3.首页样式调整
---
 .../src/main/resources/application.yml        |   2 +-
 .../controller/FlowTaskController.java        |  10 +
 .../flowable/domain/dto/FlowViewerDto.java    |  16 +
 .../flowable/listener/UserTaskListener.java   |  18 +
 .../flowable/service/IFlowTaskService.java    |   7 +
 .../service/impl/FlowTaskServiceImpl.java     |  59 +-
 ruoyi-ui/public/favicon.ico                   | Bin 5663 -> 9662 bytes
 ruoyi-ui/src/api/flowable/definition.js       |   8 +
 ruoyi-ui/src/api/login.js                     |   2 +-
 .../components/BpmnViewer/src/BpmnViewer.vue  |   6 +-
 ruoyi-ui/src/components/Process/index.vue     | 243 +++++---
 .../src/views/flowable/definition/model.vue   |   5 +-
 .../views/flowable/task/finished/index.vue    |   2 +-
 .../src/views/flowable/task/process/index.vue |   6 +-
 .../src/views/flowable/task/record/flow.vue   |  32 +
 .../src/views/flowable/task/record/index.vue  | 140 +++--
 .../src/views/flowable/task/todo/index.vue    |   2 +-
 ruoyi-ui/src/views/index.vue                  | 565 ++----------------
 18 files changed, 470 insertions(+), 653 deletions(-)
 create mode 100644 ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowViewerDto.java
 create mode 100644 ruoyi-flowable/src/main/java/com/ruoyi/flowable/listener/UserTaskListener.java
 create mode 100644 ruoyi-ui/src/views/flowable/task/record/flow.vue

diff --git a/ruoyi-admin/src/main/resources/application.yml b/ruoyi-admin/src/main/resources/application.yml
index a70d560..693ec56 100644
--- a/ruoyi-admin/src/main/resources/application.yml
+++ b/ruoyi-admin/src/main/resources/application.yml
@@ -86,7 +86,7 @@ token:
     # 令牌密钥
     secret: abcdefghijklmnopqrstuvwxyz
     # 令牌有效期（默认30分钟）
-    expireTime: 300
+    expireTime: 30
   
 # MyBatis配置
 mybatis:
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 70c3da7..5c88db7 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
@@ -171,4 +171,14 @@ public class FlowTaskController {
             }
         }
     }
+
+    /**
+     * 生成流程图
+     *
+     * @param procInsId 任务ID
+     */
+    @RequestMapping("/flowViewer/{procInsId}")
+    public AjaxResult getFlowViewer(@PathVariable("procInsId") String procInsId) {
+        return flowTaskService.getFlowViewer(procInsId);
+    }
 }
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowViewerDto.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowViewerDto.java
new file mode 100644
index 0000000..29b4776
--- /dev/null
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/dto/FlowViewerDto.java
@@ -0,0 +1,16 @@
+package com.ruoyi.flowable.domain.dto;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * @author Xuan xuan
+ * @date 2021/4/21 20:55
+ */
+@Data
+public class FlowViewerDto implements Serializable {
+
+    private String key;
+    private boolean completed;
+}
diff --git a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/listener/UserTaskListener.java b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/listener/UserTaskListener.java
new file mode 100644
index 0000000..4f2b653
--- /dev/null
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/listener/UserTaskListener.java
@@ -0,0 +1,18 @@
+package com.ruoyi.flowable.listener;
+
+import org.flowable.engine.delegate.TaskListener;
+import org.flowable.task.service.delegate.DelegateTask;
+import org.springframework.stereotype.Component;
+
+/**
+ * @author Xuan xuan
+ * @date 2021/4/20
+ */
+public class UserTaskListener implements TaskListener{
+
+    @Override
+    public void notify(DelegateTask delegateTask) {
+
+    }
+
+}
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 dd0a0c4..1e82eab 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
@@ -137,6 +137,13 @@ public interface IFlowTaskService {
      */
     InputStream diagram(String processId);
 
+    /**
+     * 获取流程执行过程
+     * @param procInsId
+     * @return
+     */
+    AjaxResult getFlowViewer(String procInsId);
+
     /**
      * 获取流程变量
      * @param taskId
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 2eefcbd..2f62870 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
@@ -14,6 +14,7 @@ import com.ruoyi.common.utils.SecurityUtils;
 import com.ruoyi.flowable.domain.dto.FlowCommentDto;
 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.factory.FlowServiceFactory;
 import com.ruoyi.flowable.flow.CustomProcessDiagramGenerator;
@@ -535,13 +536,12 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
         FlowNode flowNode = (FlowNode) bpmnModel.getMainProcess().getFlowElement(activityId);
 
         //记录原活动方向
-        List<SequenceFlow> oriSequenceFlows = new ArrayList<SequenceFlow>();
-        oriSequenceFlows.addAll(flowNode.getOutgoingFlows());
+        List<SequenceFlow> oriSequenceFlows = new ArrayList<>(flowNode.getOutgoingFlows());
 
         //清理活动方向
         flowNode.getOutgoingFlows().clear();
         //建立新方向
-        List<SequenceFlow> newSequenceFlowList = new ArrayList<SequenceFlow>();
+        List<SequenceFlow> newSequenceFlowList = new ArrayList<>();
         SequenceFlow newSequenceFlow = new SequenceFlow();
         newSequenceFlow.setId("newSequenceFlowId");
         newSequenceFlow.setSourceFlowElement(flowNode);
@@ -550,14 +550,15 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
         flowNode.setOutgoingFlows(newSequenceFlowList);
 
         Authentication.setAuthenticatedUserId(loginUser.getUserId().toString());
-        taskService.addComment(task.getId(), task.getProcessInstanceId(), "撤回");
+        taskService.addComment(task.getId(), task.getProcessInstanceId(), FlowComment.NORMAL.getType(),"撤回");
 
-        Map<String, Object> currentVariables = new HashMap<String, Object>();
-        currentVariables.put("applier", loginUser.getUserName());
+        Map<String, Object> currentVariables = new HashMap<>();
+        currentVariables.put(ProcessConstants.PROCESS_INITIATOR, loginUser.getUserId().toString());
         //完成任务
         taskService.complete(task.getId(), currentVariables);
         //恢复原方向
         flowNode.setOutgoingFlows(oriSequenceFlows);
+
         return AjaxResult.success();
     }
 
@@ -592,6 +593,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
             ProcessDefinition pd = repositoryService.createProcessDefinitionQuery()
                     .processDefinitionId(task.getProcessDefinitionId())
                     .singleResult();
+            flowTask.setDeployId(pd.getDeploymentId());
             flowTask.setProcDefName(pd.getName());
             flowTask.setProcDefVersion(pd.getVersion());
             flowTask.setProcInsId(task.getProcessInstanceId());
@@ -666,6 +668,9 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
         }
         page.setTotal(hisTaskList.size());
         page.setRecords(hisTaskList);
+//        Map<String, Object> result = new HashMap<>();
+//        result.put("result",page);
+//        result.put("finished",true);
         return AjaxResult.success(page);
     }
 
@@ -734,13 +739,13 @@ 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);
-            }
+//            // 查询当前任务是否完成
+//            List<Task> taskList = taskService.createTaskQuery().processInstanceId(procInsId).list();
+//            if (CollectionUtils.isNotEmpty(taskList)) {
+//                map.put("finished", true);
+//            } else {
+//                map.put("finished", false);
+//            }
         }
         // 第一次申请获取初始化表单
         if (StringUtils.isNotBlank(deployId)) {
@@ -814,6 +819,32 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
 
     }
 
+    /**
+     * 获取流程执行过程
+     *
+     * @param procInsId
+     * @return
+     */
+    @Override
+    public AjaxResult getFlowViewer(String procInsId) {
+        List<FlowViewerDto> flowViewerList = new ArrayList<>();
+        FlowViewerDto flowViewerDto;
+        // 获得活动的节点
+        List<HistoricActivityInstance> hisActIns = historyService.createHistoricActivityInstanceQuery()
+                .processInstanceId(procInsId)
+                .orderByHistoricActivityInstanceStartTime()
+                .asc().list();
+        for (HistoricActivityInstance activityInstance : hisActIns) {
+            if (!"sequenceFlow".equals(activityInstance.getActivityType())) {
+                flowViewerDto = new FlowViewerDto();
+                flowViewerDto.setKey(activityInstance.getActivityId());
+                flowViewerDto.setCompleted(!Objects.isNull(activityInstance.getEndTime()));
+                flowViewerList.add(flowViewerDto);
+            }
+        }
+        return AjaxResult.success(flowViewerList);
+    }
+
     /**
      * 获取流程变量
      *
@@ -846,8 +877,10 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
             List<UserTask> nextUserTask = FindNextNodeUtil.getNextUserTasks(repositoryService, task, new HashMap<>());
             if (CollectionUtils.isNotEmpty(nextUserTask)) {
                 for (UserTask userTask : nextUserTask) {
+                    MultiInstanceLoopCharacteristics characteristics = userTask.getLoopCharacteristics();
                     String dataType = userTask.getAttributeValue(ProcessConstants.NAMASPASE, ProcessConstants.PROCESS_CUSTOM_DATA_TYPE);
                     String userType = userTask.getAttributeValue(ProcessConstants.NAMASPASE, ProcessConstants.PROCESS_CUSTOM_USER_TYPE);
+
                     if (ProcessConstants.DATA_TYPE.equals(dataType)) {
                         // 指定单个人员
                         if (ProcessConstants.USER_TYPE_ASSIGNEE.equals(userType)) {
diff --git a/ruoyi-ui/public/favicon.ico b/ruoyi-ui/public/favicon.ico
index e26376026420542212ed58d90d0ed34f554fa4ae..3da25d8abf5846c49cbb4343752411744f887305 100644
GIT binary patch
literal 9662
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

literal 5663
zcmZ`*WmMD;u>DcGh#=ia^G8y;1Xgl^C8S$Amyqrd1eKPKB}75GVToN(=@g_xS|pcV
zYT@y|zH{E0Gjl)8mzg<pXYL0bEmh)2^p5}lAXbAY>E0vwe;xGTK9)Pb`Ew71o)8mn
z03f3HU&jG*@@N6zk*2evqK=M}hmVK1lZPjZnxZ0$r<aF=Gt3?U0_Nd*{>G^oYPn^M
z{S!ll*~7X_SR}y4UJ2?aHTg{X39ybPB?tGsd;iFgl8P)3V$l6|>JbF~eyxxj;rR07
zd($`rbIAkd#nPtGAoTwJ^~`n0R^HalXyDkB2r_c6l)s-{04d#fFQjLgle8h-1IP$m
zD#!{x3+dmXAC3e)0C0#G7!c-DD}RGi;{o6To>KxG<bA7mQEfV0MgU6+u);>ZMTC>A
z3-k-<_frD>v_P$1gWV$_4FF()Aqs3jIWe$zswPJO%$B7t(g3rc8OuOG0uGSPt;&H5
zZU?LkB6az2yM6$Lm0&gj{H|)82$N=ERon<90pOQtocsiA1w>>k@C^ejlDL54Q;HEh
z7ARif^NG%tve%yP5D*-oYbbprQ)5De5|RFk-v9V;WsP<12dqxPn&ug)1K|c+US=*k
z1!M~kI{Fv@=r6~=-%83SZ~fg^{p+v=L!b71zI8qHV3T7#TE6Xw$HfOowZ_o%uQxZR
z@jUx*YJEFh%glgzL%?bI(n4f`u+a3;ub|7gK*<~M)BGZx{ufM)kBEr&Ic<uN&)4JR
z?nG8SR^r0W@3XfHL5IMb9B_73S8){fjkUX9wQl0p5Wa$tJ7$ahw(ngyHu2f`nrNLl
zAJxYr;|~ZOHqE}kR^1dO)`9dj^6hZpBjyY&VX8kdP#L4$rPchfX$aO8c7TH$M`AqT
z2Y|y)_~Yq`QUFp%QQ<%g0Hk(aCV_czfRW5E>j2R4kJkKK8V$4;1OQ5fkvz38A3pw0
zS=mLB_noPuiw4*FffD#JN7oBdg$ElEjE{<FGhWi^cS+CUH`U_N7n0?yk~V%9k|f?*
zAvcfQ^`v=VMVtSFwj+iR|7Aaj!kSh3J(*47EZZoECOZ+I%^D*5DdG#u_It`#Y(4#6
zUvSG5Tv99`?8p3Glu`-i;H%_?eiq@6Hy=Axh0-GHU*S#S`hr`(G1GtSE%YAu5q)A2
zk@4AeoWAj?Y((?t(s7M{zCJ+c$3)wRaUl|i_&ICy_*iAD561Ldebly_#$tv^Vzx}i
z5`I(+UHR5%5C?8t1jQc6GMe-U>}_(gsxj19@f+tJdn0)p$cQj1TIk1rY^mS08##l>
zFS`S5r0bH6RVuj-Sf8@yb6WmKLh(8k!a*|dX+!G~D`&E>8j+eSWC6neMemE;1gUc#
zlxsKHZQ#!as6L{SB{QWZ`AM?&r|W^A8!eR5J@40`gr7Ndzoe0?i`mO>;(sj=R>&?a
ze>GB;KM5*-FI`}&=2qyZBd8Z!Mj`5(!#R>mtvK|Bzj*3bj<cgP#z}D7r;Tta>Zx+(
zugnS8e-F2}wxdq{9}~wANA*E$xanN!g6T?WTj&I{p(O;rGqd~kpU((0WIJX($?`BT
z<~ipHp-LGfPnS+NOb<)nD%UsgHjtkREGN>hFnCg7X&73fV$h(oUPd@cT`^V0WYAtF
zUOlSoubZSZ_Ud&p>NWQ5l`V07%sZ9B7)Y_cZA&j*0xNZ|u>Fy-!nBtm-Y%bOmZpta
z{pB9ikKmfYPcRs&r|4boQ0b830RQ`D1c#)zZskyFE>C@wb(DBCm>-W{p1*F|rOKfy
ztV&`&XdX3hv+uP}y}vt;_Vt8=;e7BjX*X$%FJYT_+pD&BZ416*J958mcLTQx&j!y(
zwwK0L&)iOn&uDhg)97(#iRYpq@nkxfkfiP5aI)<`*DPnm_+j+wH?kq8wv=wC;&HX&
z{}5aUv5xCv0W@+Bl^%>Xm7;&_7hPXi+c*m^eChtuvw?axlIEJ@&^F%q+h=&VpKq~p
zwsK%EQEDpBHQyRF*RgPu@b0T}UXOa5cwAq`d`8F+L55}qrZUS=&M?sM%y6bsZQ6X7
zZ`W<w2&Thel>0bWI(Mk~TUBmVw_mQ?GUXa&(zA(YXL|1QLVGuRkM?r*9_&k<Tc2~D
zyPc0Q4KtE6P0RSmgn0S*4*S78J9fXUivBF?F8jG{<jCMy<PAR&qbboy9wN{5%cRkB
zEB#pNUJx{tzDa-3HqrF^tT?wlcd=^DZE|T?wkNdWT2mmGVZh?2Ec)f?A;x&^&G0(B
zG`IA}N%EGUrJtpV<u&rDc0(Rl{`7OV{)KL{735H`m9(6!{nh9;o?NdSZb48%EUE;>
zwk(Tc51S6l4tsc$e=T!0giX5WTn#*?KGGtv!ugJ~iGz%!k8Hqm#bd_L#{c?Ij39xa
z{ej?PIVy$6gv2JyUa1~kG{+2=wjzs;d^zJ(gCIDSDZ|zCVJ_&?X|lwaG0-w;m`BMa
zbbGiN^nOJZ_8!6POqWe_8A|z#N4Q*I=T)Pg&l?{M-*n}M$+aUg@hGV*zEx(yrP<5R
zvC;*m3$xwJMMNOV5s?A07s^MO<USM}g!>;hx@Ws(KdgJ>ZozUy@-}kxGkk2THy1y*
z()`^X9m@BAVIpRd93uHHi#)Slelv<iK}V2Qd$ZJClZoOuI`^HnGU{`}=T~(t2=y1A
z{=yB@&n1^+LKUx^VzgC!dqoJfb$J6*=svZwpJ*B?P5-GJn|m|IFO`;;mRGDx?3~fa
zJM+ASyG7f9mp7GoBk-@=AVX^GAZCO8()(nA3ib{<Ufif#twTZ$75v5<U`A^efPf$&
zrjsJe4!1j(>_l&=Ly*a}I*8haSww)z(F$9qayvD9oF0w8fRKf5n_YnO;Y8?=(@=c|
zR%gvv*WlPCaPc@%H)`VRS4G~pMxyCuX#+#<)u*Pdwp7;Xb_Qsd%qcU&a2}fU*Oi`?
z->NTaRS<vIjI>@)g`5St&CmZ)ZyDU*h3tOWb+5#jbk?XNU0zQ8ia8{%VmM0JWO(hS
z{>P^%$mJ|?q;X_$1W(LbY~O6SxpLvSNWAzw2p(=RWQeV*XhF?!%};kO`3IknL@`mx
z{6VMfbu{q?7`Y;qL(kkN4&E*$(c3Vzb^Z-oLa6#{_v9x9e+_<ku8iJw@$rBy)^v8(
z6T0b&Cp?8ndv4}Nc+BVS=lC~yn(~nRc)9ugzvYsU;B}pUMWa6#e~v6?hqs)8b|Hbh
z6Vjc&mHfqSg|bCR^uPFGIFlulDyro!3@x;7>)R)mWRzbB=axOX+<2S1UTRmG57&~H
zoy=Yg#6WMdT`gW&ARQIQ^5toK4xlZsF#{)mwvsFkJ3LR>Fg6REEgDs_)v~H#p4e4L
zjhV-;J!WX%=tZ^9sphWCIQn<^l}p!@_sqqNfJH$d65YGU(BjUu#E9T*JG<~Z->30^
zbO2qn2ucd5xk1ficOG6n*$HpFt+VfPTe-06vKsqo@&rvn7@L2acK17WbwYJmb&6eu
zJs}Cs%*;Sck36;;O<gUmFQph83^Tk7-1V;5TE?zjYm6D+%pMY5#*KAW2bP_9p)1O2
zr2E+Wm^(%TWsgd3szw(=(Fk<gavzd8oBIZQt8+4bW!qQ!OB*A%6>@tch>1SA=A0-H
zxmTMkwh&!S00`m)fQTpnxV*c^Z2<6n4gfn=03e+O05l$-UiYZnt5K+$(o6k-`Muo0
zcym>FU%0_pH42@7ux-1Sz5P>)l9j9n94!%D$j3VkQNvGRvkoMVn+0?ce(da&q$%L8
zpoTp4=XU9KU+tUf5sKZM9OT9dxZlrxw3GT|WkWHiVoTU7q|w9h_<g!9PaDQ0e$AP1
z>}k2>RB2dWOBh;=T%k+Loz^cP7s&cQHe04Sf3?2Uc{|uFi_q7&Y2h>5E;_jAH4oWN
z*|)r?3&mKN5Ygr~KU_?_J@Y>L8p~TX>*3W?*;s7Ol0Gab+Fn#lovzHGgPdF6lSi)G
zL^yLVH+_Q=>wUEj-%sE@TUwrf1xP~1p7_iN_cAh+sDxHG1s_+;wKCzch<JO!bj7rv
zE9TjjKeNqcGl})nr>DeCAO&#o-@o}`asDR~{uPgu1&}n#Oa=LFsLvp3f`C>Vt~|jK
zy_%nl{Zg&~$MZF%AA1=UPk~<8^!g4H@3cdr`6qHkzF~rSpo=V%Q{$Dr?VYlliu04v
z%=&RRf@F2de7c>);typLsxv{6>P2a7CpLZDX$>arZUIc2<T9=}(K-qoZCg!=b>_Ku
zUlbW`031ZK?1SN6t<ctS!aJ!IlQ@;A^gfNV>^_0fyGvg`-+!y|wIj(a0BaG-bmnF!
z-?&Ny8zS6sLm&VVOE>O+ox*~U^9i^5Cev4Mr=}OVv(#jGI%h6)ozpvIw=QeWg5yL%
zxc;dSYTByPsn;~w8I3%nVM7fPj~q;T4;*eQE<D8(w_v?%*ILGKDBzl8K%-E98A1+5
zkIc7!%;#tP{<!c53HKfzt9nYPl&!>H((##3K+F+ELsa=<qy7xJe+Dj=I6XkFIeR)u
zlI+BUa;xdn=jN>X*VuO?{$UoJERCFv1zCRtLIenGy2;i*IhzdLb#!lN%sklL-`-+F
z?JxllW2nPY<eewin;#u(fbhUOzjpK;JuVLI8ynMds#DP#!Ku_c%*Q9wr+6Rj`W0AE
zVmzQoC+V<|%MR{NFZj%sX)xD{^B=2M**4vWrt+t8bN|+U8YPg<Q(4^3-2T%0#Hm4!
zOBgpGy5Wkd(9!CIsk3JVTE(3d#64@<Z4pHM_3{b-=Up|DqhALqva^$%j<wxF8o|l;
zh?g*WTzX*KS1Q~pj1L#9RK0kEZ_LnU<s~HZP2WZB$(PzLX+`X^n(yX=JR0P#!M}b7
zG^kPW;Nt@L$gsojJ~!QK1`n+SnopHHRxVSae1teGaf2B@#X+<B*bd!Pg-SEnps|!Z
z-~}@+ACMe?|0b-ML;7j2>*Y~!;oIPgyr6C68E{%9$}}MS`_bfXO`Ru~*8xi-vjX-H
zvjoT^#5dq8?}IJ&Wlp}ze&Elo>fpvkve9{Y{0o(4l0UkcbJe=OGP1WBh}U=wuzoO(
zCb3vXz{I}y=<YbQAn!&Xg*n|>8r136RhGZj7?Wab`-)4x%6(E35ET$*S>Gr{7Hy?1
zPvuKMN4}VU7FTXrm>eeq5bN>rBwlp`PgxV`{`=85$()C5uFqLw0HxJzMi4{*__${J
zMO_0Q;^bTGu%N6*_-eEle8n4*dr{LGd=cI^nYaDe)$!S|w^k}Q2j^)sa|wa)rOWr7
z=U@&U{>sTuswbr)?Sjc<y)i{tOAvkpK5ir!Air+}bu$=a`QQ78(O@&}2wjhVGEFk3
z7nl(~A?Zq<wn5q=7C?V4`I=q3nl}yIS*~tA&=$AZiV-vPXQ~#r(SC<L3xSn;1#y|1
zpSMXTQ79~*)>9{E5BTD&WCFGRb!kCS_jD{BTS9)Yijf$eoGejH$BRliS>kQVwr#VP
zPs^4Xc>MxrsW#M9V*lD85LOCp=F<?8J-00UjX^#H61y@ElSuoh4Tf)joqVWmY3|`1
zzHE?to7@Gpk`sq@4s#@)7@1z!JPU>^GKJpn>%Q;Y^>4==VlYTCO|4^&7;9(e5<Brh
z0c#Lt#Zz~&=<_YeyOpZlwF-TQ2LP<`Ss6BS`b$j2h9uBS*AW}vzZI>&vsb23+jj1)
z4F{o&?1`kXX!p1QbG-x^0H9^JkC(#5i6HC4TWS(z9%5Q}!C`+c<F?yCZNLpg@MTYc
z{U!Qh_SXen*LY{5hpM_$^==16^u8a%??>IJOr-(fMiVq%-|BreT|=+0PWgXb&y5S$
zG_jI1l%yt}bT4l#k^g0eq2yHHjK&w{?`d3k@CQ<O{vA@=Y+O0|B2Cb}t#|g9+@vL@
zK;KSL1!6S_I+K)^zy)-8Xh1d~0AB&1Hh8o}zy<Ztmrx>?v1K)MT<H`P@xFO6l_}_0
z+%tbrql&kwa8IfBa@yuPYZ2~LK218_n6jNF!;SIU8leJp0XbhaXU}_j!INvG%$$2s
zv&?P0^>#dYWTTR+A7RoqtH(&|aO_;V>9LbLXPn3YBbp>+MnYOoTceweya=B)lEz5H
zLp=NDAK0Im^8*inYho^qYR#Qdzn_6Db?UQTs4j<|%h}JQ5#<wY7<_DdXA#Tlzy8kH
z=`5<=ZvMWaK@JVJ3=T3LiQw-vJNx}8JG;%5-EurXO~JbbQ;FoV#*(Bg{c%DEd|Q>?
z5{Fs+B?@B0C()s2L3QFMo?LZZrBRzLX=X>-xfw1_^{nkMY^?6lVgoW|%aOd~y;V$f
zSC2PJkfFe5A(&8sdo{0Co%f9>o#kz*CRzHQ8F$tEB>cewUnj)^>+%O%(dyCa!bQiP
zd$9D}qa>x9CI;OPHw~G}AbY<}mG;j)*X33HunLBdiRVoznp0xEgd+S?KC>~mPK80W
zQ^fo<JZ0_vs@k%~&YIVzNGmP9zIN}gvH@RYNX}Ic#MhOc$J`;_tjtjm2kypF&2=d*
z%~doNW4KB)p5Op{)eas4E#&fv7d-ObZ3{C*k*#V}6v^NmVZ&$X&Ycuj))f@_aJc2w
z{PGt(0aPX21E)*oq{nB_n&CEfW(jGKLfrFNST^-)?WrT?D9CZ=IoBS$^=nx(?$TQv
z{1xc2U5k#^@^6L!56vF0yG}$-s~9y87LwXG=pu57Ejs9sNqr$?YCd9VI}`Kz;|1@v
zzCElMT0(8W2Y~DC1_993(n<lN?R6hhou2#?OPHqLZtSPbE3d{{>F{<7rqIFN9hCB?
zZ{1Q3@oG>#AA8vR@Mza{MS#=Uc_yV~`N<vQu_#Jdyh+9JU$~icb8Q~4Me$tIcZ#RM
zXz^0FC1;%kub5{nVDdUUfJ4PLxK!p)9$_HgG3{q!nK;@<Bo8Msa4!=rU0yK3@Ovh{
zE00gFa~8ROHiJgts{Sjkf-{b2d2LzK3Fe*se-^ABwi3Xv^xolOvhY^2bMf<vkJdAq
z?cZrjXuUr_YjZKqu|z99bv^yrewWenTAV20jhQK2W~06){KxLjC=s|z%9>UvJ{jza
zT|v*pR%1$2TRUMF0e`DV+%8O#ii1<x7<lZ3sTk6A!Nx4_jFlwBie(OE#e^A|HTq}-
zwnY*AHGNxa8cEUE1ZY{l<gc9v;UiKGxZ)h1{R@a^<lkhG=5XvHU60}Y1(R?ouf}0v
ziB@MxUU^%aa^RFkKfpd^xCcMd*=82>Jz8+U5lkts*sd)3SKz%c<KaE~z+K?EXX2%)
z;A!0I?3)5oNpvkS%27{MLRclHxNbdMvz(C%*Fa<-HEPCNz>(j|OkN$*b3z1o8lke_
zZzLZqleC$I#|o*|>1;QvIPMtF8WlW@z%EFY@*W$g1UVFe01tVC?CaWvKX+N~&SMFh
w3o}1aSIuJtnzw?rKNs-3{y)=#g);%#4FR;juZ0`#H8`NAtff?~VD<KY0Mv8t8UO$Q

diff --git a/ruoyi-ui/src/api/flowable/definition.js b/ruoyi-ui/src/api/flowable/definition.js
index 5c1411f..d1ad9d0 100644
--- a/ruoyi-ui/src/api/flowable/definition.js
+++ b/ruoyi-ui/src/api/flowable/definition.js
@@ -68,6 +68,14 @@ export function readImage(deployId) {
   })
 }
 
+// 读取image文件
+export function getFlowViewer(procInsId) {
+  return request({
+    url: '/flowable/task/flowViewer/' + procInsId,
+    method: 'get'
+  })
+}
+
 // 读取xml文件
 export function saveXml(data) {
   return request({
diff --git a/ruoyi-ui/src/api/login.js b/ruoyi-ui/src/api/login.js
index 869cd9f..9ddd1c1 100644
--- a/ruoyi-ui/src/api/login.js
+++ b/ruoyi-ui/src/api/login.js
@@ -37,4 +37,4 @@ export function getCodeImg() {
     url: '/captchaImage',
     method: 'get'
   })
-}
\ No newline at end of file
+}
diff --git a/ruoyi-ui/src/components/BpmnViewer/src/BpmnViewer.vue b/ruoyi-ui/src/components/BpmnViewer/src/BpmnViewer.vue
index ed0d2cc..6f42826 100644
--- a/ruoyi-ui/src/components/BpmnViewer/src/BpmnViewer.vue
+++ b/ruoyi-ui/src/components/BpmnViewer/src/BpmnViewer.vue
@@ -40,7 +40,9 @@ export default {
     try {
       // let xmlData = this.xmlData.replace('xmlns:camunda', 'xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:camunda')
       // console.log('xmlData', xmlData)
+
       const { warning } = await bpmnViewer.importXML(this.xmlData);
+
       // console.log('rendered', warning);
       let canvas = bpmnViewer.get('canvas');
       // canvas.zoom('fit-viewport')
@@ -143,8 +145,8 @@ export default {
   }
 };
 </script>
-<!--<style lang="less" scoped>-->
-<style >
+<style>
+/*//<style >*/
 .containers {
   position: absolute;
   background-color: #ffffff;
diff --git a/ruoyi-ui/src/components/Process/index.vue b/ruoyi-ui/src/components/Process/index.vue
index c61e28b..5786f84 100644
--- a/ruoyi-ui/src/components/Process/index.vue
+++ b/ruoyi-ui/src/components/Process/index.vue
@@ -82,12 +82,16 @@ export default {
     isView: {
       type: Boolean,
       default: false
+    },
+    taskList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
       modeler: null,
-      taskList: [],
+      // taskList: [],
       zoom: 1
     }
   },
@@ -155,7 +159,10 @@ export default {
         await this.modeler.importXML(data)
         this.adjustPalette()
         this.fitViewport()
-        // this.fillColor()
+        console.log(this.taskList)
+        if (this.taskList) {
+          this.fillColor()
+        }
       } catch (err) {
         console.error(err.message, err.warnings)
       }
@@ -215,40 +222,130 @@ export default {
     fillColor() {
       const canvas = this.modeler.get('canvas')
       this.modeler._definitions.rootElements[0].flowElements.forEach(n => {
+        // if (n.$type === 'bpmn:UserTask') {
+        //   const completeTask = this.taskList.find(m => m.key === n.id)
+        //   const todoTask = this.taskList.find(m => !m.completed)
+        //   const endTask = this.taskList[this.taskList.length - 1]
+        //   if (completeTask) {
+        //     canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //     n.outgoing?.forEach(nn => {
+        //       const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+        //       if (targetTask) {
+        //         // 排他网关
+        //         if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+        //           // canvas.addMarker(nn.id, 'highlight');
+        //           canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //           canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //           nn.targetRef.outgoing?.forEach(line => {
+        //             debugger
+        //             if (todoTask.key === line.targetRef.id) {
+        //               canvas.addMarker(line.id, todoTask.completed ? 'highlight' : 'highlight-todo')
+        //             }else if(completeTask.key === line.targetRef.id){
+        //               canvas.addMarker(line.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //             }
+        //           })
+        //         //并行网关
+        //         }else if (nn.targetRef.$type === 'bpmn:ParallelGateway') {
+        //           // canvas.addMarker(nn.id, 'highlight');
+        //           debugger
+        //           canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //           canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //           nn.targetRef.outgoing?.forEach(line => {
+        //             debugger
+        //             if (todoTask.key === line.targetRef.id) {
+        //               canvas.addMarker(line.id, todoTask.completed ? 'highlight' : 'highlight-todo')
+        //             }else {
+        //               canvas.addMarker(line.id, completeTask.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 (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+        //       //   debugger
+        //       //   // canvas.addMarker(nn.id, 'highlight');
+        //       //   canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //       //   canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+        //       // }
+        //       // else if (nn.targetRef.$type === 'bpmn:EndEvent') {
+        //       //   if (!todoTask && endTask.key === n.id) {
+        //       //     canvas.addMarker(nn.id, 'highlight')
+        //       //     canvas.addMarker(nn.targetRef.id, 'highlight')
+        //       //   }
+        //       //   if (!completeTask.completed) {
+        //       //     canvas.addMarker(nn.id, 'highlight-todo')
+        //       //     canvas.addMarker(nn.targetRef.id, 'highlight-todo')
+        //       //   }
+        //       // }
+        //     })
+        //   }
+        // }
+
+
+        // else if (n.$type === 'bpmn:ExclusiveGateway') {
+        //   n.outgoing.forEach(nn => {
+        //     const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+        //     if (targetTask) {
+        //       canvas.addMarker(n.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+        //       canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+        //     }
+        //   })
+        // }
+
+        const completeTask = this.taskList.find(m => m.key === n.id)
+        const todoTask = this.taskList.find(m => !m.completed)
+        const endTask = this.taskList[this.taskList.length - 1]
         if (n.$type === 'bpmn:UserTask') {
-          const completeTask = this.taskList.find(m => m.key === n.id) || { completed: true }
-          const todoTask = this.taskList.find(m => !m.completed)
-          const endTask = this.taskList[this.taskList.length - 1]
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
               const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
-                // canvas.addMarker(nn.id, 'highlight');
-                canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-              } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
-                if (!todoTask && endTask.key === n.id) {
-                  canvas.addMarker(nn.id, 'highlight')
-                  canvas.addMarker(nn.targetRef.id, 'highlight')
-                }
-                if (!completeTask.completed) {
-                  canvas.addMarker(nn.id, 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, 'highlight-todo')
+                debugger
+                if (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') {
-          n.outgoing.forEach(nn => {
-            const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-            if (targetTask) {
-              canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-            }
-          })
         }
+        // 排他网关
+         if (n.$type === 'bpmn:ExclusiveGateway') {
+          if (completeTask) {
+            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach(nn => {
+              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              if (targetTask) {
+
+                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+              }
+
+            })
+          }
+          //并行网关
+        } if (n.$type === 'bpmn:ParallelGateway') {
+          if (completeTask) {
+            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach(nn => {
+              debugger
+              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              if (targetTask) {
+                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+              }
+            })
+          }
+        }
+
+
         if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
             const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
@@ -259,6 +356,14 @@ export default {
             }
           })
         }
+        if (n.$type === 'bpmn:EndEvent') {
+          const endTask = this.taskList[this.taskList.length - 1]
+          if (endTask.key === n.id && endTask.completed) {
+            // canvas.addMarker(nn.id, 'highlight')
+            canvas.addMarker(n.id, 'highlight')
+            return
+          }
+        }
       })
     },
     // 对外 api
@@ -387,49 +492,49 @@ export default {
     min-height: 650px;
   }
 
-  // .highlight.djs-shape .djs-visual > :nth-child(1) {
-  //   fill: green !important;
-  //   stroke: green !important;
-  //   fill-opacity: 0.2 !important;
-  // }
-  // .highlight.djs-shape .djs-visual > :nth-child(2) {
-  //   fill: green !important;
-  // }
-  // .highlight.djs-shape .djs-visual > path {
-  //   fill: green !important;
-  //   fill-opacity: 0.2 !important;
-  //   stroke: green !important;
-  // }
-  // .highlight.djs-connection > .djs-visual > path {
-  //   stroke: green !important;
-  // }
-  // // .djs-connection > .djs-visual > path {
-  // //   stroke: orange !important;
-  // //   stroke-dasharray: 4px !important;
-  // //   fill-opacity: 0.2 !important;
-  // // }
-  // // .djs-shape .djs-visual > :nth-child(1) {
-  // //   fill: orange !important;
-  // //   stroke: orange !important;
-  // //   stroke-dasharray: 4px !important;
-  // //   fill-opacity: 0.2 !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;
-  // }
+   .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;
+   }
+   // .djs-connection > .djs-visual > path {
+   //   stroke: orange !important;
+   //   stroke-dasharray: 4px !important;
+   //   fill-opacity: 0.2 !important;
+   // }
+   // .djs-shape .djs-visual > :nth-child(1) {
+   //   fill: orange !important;
+   //   stroke: orange !important;
+   //   stroke-dasharray: 4px !important;
+   //   fill-opacity: 0.2 !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>
diff --git a/ruoyi-ui/src/views/flowable/definition/model.vue b/ruoyi-ui/src/views/flowable/definition/model.vue
index 2e33117..e56a949 100644
--- a/ruoyi-ui/src/views/flowable/definition/model.vue
+++ b/ruoyi-ui/src/views/flowable/definition/model.vue
@@ -48,12 +48,14 @@ export default {
   data() {
     return {
       xml: "", // 后端查询到的xml
+      modeler:"",
       xmlOpen: false,
       xmlTitle: '',
       xmlContent: '',
       users: [],
       groups: [],
       categorys: [],
+
     };
   },
   created () {
@@ -72,7 +74,8 @@ export default {
     getModelDetail(deployId) {
       // 发送请求，获取xml
       readXml(deployId).then(res =>{
-        this.xml = res.data
+        this.xml = res.data;
+        this.modeler = res.data
       })
     },
     /** 保存xml */
diff --git a/ruoyi-ui/src/views/flowable/task/finished/index.vue b/ruoyi-ui/src/views/flowable/task/finished/index.vue
index 5b43519..a19f22e 100644
--- a/ruoyi-ui/src/views/flowable/task/finished/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/finished/index.vue
@@ -240,7 +240,7 @@ export default {
           procInsId: row.procInsId,
           deployId: row.deployId,
           taskId: row.taskId,
-          isFinished: 1
+          finished: false
       }})
     },
     /** 修改按钮操作 */
diff --git a/ruoyi-ui/src/views/flowable/task/process/index.vue b/ruoyi-ui/src/views/flowable/task/process/index.vue
index f37d3a0..d9034fc 100644
--- a/ruoyi-ui/src/views/flowable/task/process/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/process/index.vue
@@ -292,7 +292,9 @@ export default {
       this.$router.push({ path: '/flowable/task/record/index',
         query: {
           deployId: row.deploymentId,
-          procDefId:row.id }
+          procDefId:row.id,
+          finished: true
+          }
       })
     },
     /**  撤回流程申请 */
@@ -313,7 +315,7 @@ export default {
           procInsId: row.procInsId,
           deployId: row.deployId,
           taskId: row.taskId,
-          isFinished: 1
+          finished: false
       }})
     },
     /** 修改按钮操作 */
diff --git a/ruoyi-ui/src/views/flowable/task/record/flow.vue b/ruoyi-ui/src/views/flowable/task/record/flow.vue
new file mode 100644
index 0000000..22982d0
--- /dev/null
+++ b/ruoyi-ui/src/views/flowable/task/record/flow.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <bpmn-modeler
+      ref="refNode"
+      :xml="xmlData"
+      :is-view="true"
+      :taskList="taskData"
+    />
+  </div>
+</template>
+<script>
+import bpmnModeler from '@/components/Process/index'
+export default {
+  name: "Flow",
+  components: {
+    bpmnModeler
+  },
+  props: {
+    xmlData: {
+      type: String,
+      default: ''
+    },
+    taskData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
diff --git a/ruoyi-ui/src/views/flowable/task/record/index.vue b/ruoyi-ui/src/views/flowable/task/record/index.vue
index f05e047..42c5f6b 100644
--- a/ruoyi-ui/src/views/flowable/task/record/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/record/index.vue
@@ -6,14 +6,15 @@
                 <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
               </div>
 
-            <!--流程表单填写数据-->
+
             <el-col :span="16" :offset="6" v-if="variableOpen">
+              <!--申请流程初始化表单模块-->
               <div>
                 <parser :key="new Date().getTime()" :form-conf="variablesData" />
               </div>
 
-              <!--审批意见填写-->
-              <div style="margin-left:20px;margin-bottom: 20px;font-size: 14px;" v-if="finished">
+              <!--审批流程模块-->
+              <div style="margin-left:20px;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
                 <el-form ref="taskForm" :model="taskForm" label-width="80px" size="mini">
                   <el-form-item label="退回节点" prop="targetKey" v-show="taskForm.returnTaskShow">
                     <el-radio-group v-model="taskForm.targetKey">
@@ -27,7 +28,7 @@
                   <el-form-item label="任务接收" prop="targetKey" v-show="taskForm.sendUserShow">
                     <el-select style="width: 50%" v-model="assignee" @change="handleCheckChange" :multiple="taskForm.multiple" placeholder="请选择">
                       <el-option
-                        v-for="item in userList"
+                        v-for="item in userDataList"
                         :key="item.userId"
                         :label="item.nickName"
                         :value="item.userId">
@@ -102,30 +103,54 @@
       </el-card>
 
       <!--流程执行图-->
-      <el-card class="box-card" v-if="src" >
+<!--      <el-card class="box-card" v-if="src" >-->
+<!--        <div slot="header" class="clearfix">-->
+<!--          <span class="el-icon-picture-outline">流程图</span>-->
+<!--        </div>-->
+<!--        <el-col :span="16" :offset="4">-->
+<!--          <el-image :src="src"></el-image>-->
+<!--        </el-col>-->
+<!--      </el-card>-->
+    <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span class="el-icon-picture-outline">流程图</span>
         </div>
-        <el-col :span="16" :offset="4">
-          <el-image :src="src"></el-image>
-        </el-col>
-      </el-card>
+        <flow :xmlData="xmlData" :taskData="taskList"></flow>
+    </el-card>
   </div>
 </template>
 
 <script>
 import {flowRecord} from "@/api/flowable/finished";
 import Parser from '@/components/parser/Parser'
-import {definitionStart, getProcessVariables, userList } from "@/api/flowable/definition";
+import {definitionStart, getProcessVariables, userList, 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'
 export default {
   name: "Record",
   components: {
-    Parser
+    Parser,
+    flow
   },
   props: {},
   data() {
     return {
+      // 模型xml数据
+      xmlData: "",
+      taskList: [],
+      // // 任务列表
+      // taskList: [{
+      //   // 任务定义的key
+      //   "key": "Activity_0gtu56i",
+      //   // 任务是否完成
+      //   "completed": false
+      // },
+      //   {
+      //     // 任务定义的key
+      //     "key": "Activity_02fkd13",
+      //     // 任务是否完成
+      //     "completed": true
+      //   }],
       // 遮罩层
       loading: true,
       flowRecordList: [], // 流程流转数据
@@ -146,8 +171,9 @@ export default {
         taskId: "" ,// 流程任务编号
         procDefId: "",  // 流程编号
         vars: "",
+        targetKey:""
       },
-      userList:[], // 流程候选人
+      userDataList:[], // 流程候选人
       assignee: null,
       formConf: {}, // 默认表单数据
       formConfOpen: false, // 是否加载默认表单数据
@@ -155,26 +181,34 @@ export default {
       variablesData: {}, // 流程变量数据
       variableOpen: false, // 是否加载流程变量数据
       returnTaskList: [],  // 回退列表数据
-      finished: false,
-      isFinished: 0
+      finished: 'false'
     };
   },
   created() {
+    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.instanceId = this.$route.query && this.$route.query.procInsId;
     // 初始化表单
-    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
     this.taskForm.procDefId  = this.$route.query && this.$route.query.procDefId;
-    this.isFinished =  this.$route.query && this.$route.query.isFinished
-
+    // 回显流程记录
+    this.getFlowViewer(this.taskForm.procInsId);
+    this.getModelDetail(this.taskForm.deployId);
     // 流程任务重获取变量表单
-    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
     if (this.taskForm.taskId){
       this.processVariables( this.taskForm.taskId)
+      this.getNextFlowNode(this.taskForm.taskId)
       this.taskForm.deployId = null
     }
     this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
+    this.finished =  this.$route.query && this.$route.query.finished
+
   },
+  // watch:{
+  //   $route(){
+  //     this.finished =  this.$route.query && this.$route.query.finished
+  //   }
+  // },
   mounted() {
     // // 表单数据回填，模拟异步请求场景
     // setTimeout(() => {
@@ -189,6 +223,18 @@ export default {
     // }, 1000)
   },
   methods: {
+    /** xml 文件 */
+    getModelDetail(deployId) {
+      // 发送请求，获取xml
+      readXml(deployId).then(res =>{
+        this.xmlData = res.data
+      })
+    },
+    getFlowViewer(procInsId){
+      getFlowViewer(procInsId).then(res =>{
+        this.taskList = res.data
+      })
+    },
     setIcon(val) {
       if (val) {
         return "el-icon-check";
@@ -203,8 +249,8 @@ export default {
         return "#b3bdbb";
       }
     },
+    /** 流程变量赋值 */
     handleCheckChange(val){
-      console.log(val)
       if (val instanceof Array) {
         this.taskForm.values = {
           "approval": val.join(',')
@@ -220,18 +266,11 @@ export default {
       const params = {procInsId: procInsId, deployId: deployId}
       flowRecord(params).then(res => {
         this.flowRecordList = res.data.flowList;
-        // 流程过程中不存在初始化表单 直接读取的流程变量众存储的表单值
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
         if (res.data.formData) {
           this.formConf = res.data.formData;
           this.formConfOpen = true
         }
-        // 处理已办任务页面跳转后会显示审批等操作按钮 todo: 待优化
-        if (this.isFinished == 0) {
-          this.finished = res.data.finished;
-        }
-        if (procInsId) {
-          this.src = process.env.VUE_APP_BASE_API + "/flowable/task/diagram/" + procInsId;
-        }
       }).catch(res => {
         this.goBack();
       })
@@ -253,31 +292,32 @@ export default {
           this.variablesData = res.data.variables;
           this.variableOpen = true
         });
-        // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-        const params = {
-          taskId: taskId
-        }
-        getNextFlowNode(params).then(res => {
-          const data = res.data;
-          if (data) {
-            this.taskForm.sendUserShow = true;
-            if (data.type === 'assignee') {
-              this.userList = res.data.userList;
-            } else if (data.type === 'candidateUsers') {
-              this.userList = res.data.userList;
-              this.taskForm.multiple = true;
-            } else {
-              res.data.roleList.forEach(role =>{
-                role.userId = role.roleId;
-                role.nickName = role.roleName;
-              })
-              this.userList = res.data.roleList;
-              this.taskForm.multiple = false;
-            }
-          }
-        })
       }
     },
+    /** 根据当前任务或者流程设计配置的下一步节点 */
+    getNextFlowNode(taskId){
+      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
+      const params = { taskId: taskId }
+      getNextFlowNode(params).then(res => {
+        const data = res.data;
+        if (data) {
+          if (data.type === 'assignee') {
+            this.userDataList = res.data.userList;
+          } else if (data.type === 'candidateUsers') {
+            this.userDataList = res.data.userList;
+            this.taskForm.multiple = true;
+          } else {
+            res.data.roleList.forEach(role =>{
+              role.userId = role.roleId;
+              role.nickName = role.roleName;
+            })
+            this.userDataList = res.data.roleList;
+            this.taskForm.multiple = false;
+          }
+          this.taskForm.sendUserShow = true;
+        }
+      })
+    },
     /** 审批任务 */
     handleComplete() {
       this.$refs["taskForm"].validate(valid => {
diff --git a/ruoyi-ui/src/views/flowable/task/todo/index.vue b/ruoyi-ui/src/views/flowable/task/todo/index.vue
index 41b9db8..edcd6ea 100644
--- a/ruoyi-ui/src/views/flowable/task/todo/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/todo/index.vue
@@ -189,7 +189,7 @@ export default {
           procInsId: row.procInsId,
           deployId: row.deployId,
           taskId: row.taskId,
-          isFinished: 0
+          finished: true
         }})
     },
     // 取消按钮
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index 7ce5575..fd70ba3 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -1,522 +1,63 @@
 <template>
   <div class="app-container home">
     <el-row :gutter="20">
-      <img src="https://oscimg.oschina.net/oscnet/up-eb83b8d00104b97842d19dbadeec90fbb54.JPEG">
-<!--      <el-col :sm="24" :lg="24">-->
-<!--        <blockquote class="text-warning" style="font-size: 14px">-->
-<!--          领取阿里云通用云产品1888优惠券-->
-<!--          <br />-->
-<!--          <el-link-->
-<!--            href="https://www.aliyun.com/minisite/goods?userCode=brki8iof"-->
-<!--            type="primary"-->
-<!--            target="_blank"-->
-<!--            >https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link-->
-<!--          >-->
-<!--          <br />-->
-<!--          领取腾讯云通用云产品2860优惠券-->
-<!--          <br />-->
-<!--          <el-link-->
-<!--            href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"-->
-<!--            type="primary"-->
-<!--            target="_blank"-->
-<!--            >https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link-->
-<!--          >-->
-<!--          <br />-->
-<!--          阿里云服务器折扣区-->
-<!--          <el-link href="http://aly.ruoyi.vip" type="primary" target="_blank"-->
-<!--            >>☛☛点我进入☚☚</el-link-->
-<!--          >-->
-<!--          &nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区-->
-<!--          <el-link href="http://txy.ruoyi.vip" type="primary" target="_blank"-->
-<!--            >>☛☛点我进入☚☚</el-link-->
-<!--          ><br />-->
-<!--          <h4 class="text-danger">-->
-<!--            云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)-->
-<!--          </h4>-->
-<!--        </blockquote>-->
-
-<!--        <hr />-->
-<!--      </el-col>-->
+      <el-col :sm="24" :lg="18" style="padding-left: 20px">
+        <div class="block">
+          <h2 class="demonstration">人活着就是为了樱岛麻衣 (≧▽≦) </h2>
+          <el-image style="width: 40%" :fit="contain" src="https://oscimg.oschina.net/oscnet/up-eb83b8d00104b97842d19dbadeec90fbb54.JPEG"/>
+        </div>
+      </el-col>
     </el-row>
-<!--    <el-row :gutter="20">-->
-<!--      <el-col :sm="24" :lg="12" style="padding-left: 20px">-->
-<!--        <h2>若依后台管理框架</h2>-->
-<!--        <p>-->
-<!--          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统。，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。-->
-<!--        </p>-->
-<!--        <p>-->
-<!--          <b>当前版本:</b> <span>v{{ version }}</span>-->
-<!--        </p>-->
-<!--        <p>-->
-<!--          <el-tag type="danger">&yen;免费开源</el-tag>-->
-<!--        </p>-->
-<!--        <p>-->
-<!--          <el-button-->
-<!--            type="primary"-->
-<!--            size="mini"-->
-<!--            icon="el-icon-cloudy"-->
-<!--            plain-->
-<!--            @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"-->
-<!--            >访问码云</el-button-->
-<!--          >-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            icon="el-icon-s-home"-->
-<!--            plain-->
-<!--            @click="goTarget('http://ruoyi.vip')"-->
-<!--            >访问主页</el-button-->
-<!--          >-->
-<!--        </p>-->
-<!--      </el-col>-->
-
-<!--      <el-col :sm="24" :lg="12" style="padding-left: 50px">-->
-<!--        <el-row>-->
-<!--          <el-col :span="12">-->
-<!--            <h2>技术选型</h2>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-<!--        <el-row>-->
-<!--          <el-col :span="6">-->
-<!--            <h4>后端技术</h4>-->
-<!--            <ul>-->
-<!--              <li>SpringBoot</li>-->
-<!--              <li>Spring Security</li>-->
-<!--              <li>JWT</li>-->
-<!--              <li>MyBatis</li>-->
-<!--              <li>Druid</li>-->
-<!--              <li>Fastjson</li>-->
-<!--              <li>...</li>-->
-<!--            </ul>-->
-<!--          </el-col>-->
-<!--          <el-col :span="6">-->
-<!--            <h4>前端技术</h4>-->
-<!--            <ul>-->
-<!--              <li>Vue</li>-->
-<!--              <li>Vuex</li>-->
-<!--              <li>Element-ui</li>-->
-<!--              <li>Axios</li>-->
-<!--              <li>Sass</li>-->
-<!--              <li>Quill</li>-->
-<!--              <li>...</li>-->
-<!--            </ul>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-<!--      </el-col>-->
-<!--    </el-row>-->
-<!--    <el-divider />-->
-<!--    <el-row :gutter="20">-->
-<!--      <el-col :xs="24" :sm="24" :md="12" :lg="8">-->
-<!--        <el-card class="update-log">-->
-<!--          <div slot="header" class="clearfix">-->
-<!--            <span>联系信息</span>-->
-<!--          </div>-->
-<!--          <div class="body">-->
-<!--            <p>-->
-<!--              <i class="el-icon-s-promotion"></i> 官网：<el-link-->
-<!--                href="http://www.ruoyi.vip"-->
-<!--                target="_blank"-->
-<!--                >http://www.ruoyi.vip</el-link-->
-<!--              >-->
-<!--            </p>-->
-<!--            <p>-->
-<!--              <i class="el-icon-user-solid"></i> QQ群：<s>满937441</s>-->
-<!--              <s>满887144332</s> <s>满180251782</s> <s>满104180207</s>-->
-<!--              <a href="https://jq.qq.com/?_wv=1027&k=VvjN2nvu" target="_blank"-->
-<!--                > 186866453</a-->
-<!--              >-->
-<!--            </p>-->
-<!--            <p>-->
-<!--              <i class="el-icon-chat-dot-round"></i> 微信：<a-->
-<!--                href="javascript:;"-->
-<!--                >/ *若依</a-->
-<!--              >-->
-<!--            </p>-->
-<!--            <p>-->
-<!--              <i class="el-icon-money"></i> 支付宝：<a-->
-<!--                href="javascript:;"-->
-<!--                class="支付宝信息"-->
-<!--                >/ *若依</a-->
-<!--              >-->
-<!--            </p>-->
-<!--          </div>-->
-<!--        </el-card>-->
-<!--      </el-col>-->
-<!--      <el-col :xs="24" :sm="24" :md="12" :lg="8">-->
-<!--        <el-card class="update-log">-->
-<!--          <div slot="header" class="clearfix">-->
-<!--            <span>更新日志</span>-->
-<!--          </div>-->
-<!--          <el-collapse accordion>-->
-<!--            <el-collapse-item title="v3.4.0 - 2021-02-22">-->
-<!--              <ol>-->
-<!--                <li>代码生成模板支持主子表</li>-->
-<!--                <li>表格右侧工具栏组件支持显隐列</li>-->
-<!--                <li>图片组件添加预览&移除功能</li>-->
-<!--                <li>Excel注解支持Image图片导出</li>-->
-<!--                <li>操作按钮组调整为朴素按钮样式</li>-->
-<!--                <li>代码生成支持文件上传组件</li>-->
-<!--                <li>代码生成日期控件区分范围</li>-->
-<!--                <li>代码生成数据库文本类型生成表单文本域</li>-->
-<!--                <li>用户手机邮箱&菜单组件修改允许空字符串</li>-->
-<!--                <li>升级SpringBoot到最新版本2.2.13 提升启动速度</li>-->
-<!--                <li>升级druid到最新版本v1.2.4</li>-->
-<!--                <li>升级fastjson到最新版1.2.75</li>-->
-<!--                <li>升级element-ui到最新版本2.15.0</li>-->
-<!--                <li>修复IE11浏览器报错问题</li>-->
-<!--                <li>优化多级菜单之间切换无法缓存的问题</li>-->
-<!--                <li>修复四级菜单无法显示问题</li>-->
-<!--                <li>修正侧边栏静态路由丢失问题</li>-->
-<!--                <li>修复角色管理-编辑角色-功能权限显示异常</li>-->
-<!--                <li>配置文件新增redis数据库索引属性</li>-->
-<!--                <li>权限工具类增加admin判断</li>-->
-<!--                <li>角色非自定义权限范围清空选择值</li>-->
-<!--                <li>修复导入数据为负浮点数时丢失精度问题</li>-->
-<!--                <li>移除path-to-regexp正则匹配插件</li>-->
-<!--                <li>修复生成树表代码异常</li>-->
-<!--                <li>修改ip字段长度防止ipv6地址长度不够</li>-->
-<!--                <li>防止get请求参数值为false或0等特殊值会导致无法正确的传参</li>-->
-<!--                <li>登录后push添加catch防止出现检查错误</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item title="v3.3.0 - 2020-12-14">-->
-<!--              <ol>-->
-<!--                <li>新增缓存监控功能</li>-->
-<!--                <li>支持主题风格配置</li>-->
-<!--                <li>修复多级菜单之间切换无法缓存的问题</li>-->
-<!--                <li>多级菜单自动配置组件</li>-->
-<!--                <li>代码生成预览支持高亮显示</li>-->
-<!--                <li>支持Get请求映射Params参数</li>-->
-<!--                <li>删除用户和角色解绑关联</li>-->
-<!--                <li>去除用户手机邮箱部门必填验证</li>-->
-<!--                <li>Excel支持注解align对齐方式</li>-->
-<!--                <li>Excel支持导入Boolean型数据</li>-->
-<!--                <li>优化头像样式，鼠标移入悬停遮罩</li>-->
-<!--                <li>代码生成预览提供滚动机制</li>-->
-<!--                <li>代码生成删除多余的数字float类型</li>-->
-<!--                <li>修正转换字符串的目标字符集属性</li>-->
-<!--                <li>回显数据字典防止空值报错</li>-->
-<!--                <li>日志记录增加过滤多文件场景</li>-->
-<!--                <li>修改缓存Set方法可能导致嵌套的问题</li>-->
-<!--                <li>移除前端一些多余的依赖</li>-->
-<!--                <li>防止安全扫描YUI出现的风险提示</li>-->
-<!--                <li>修改node-sass为dart-sass</li>-->
-<!--                <li>升级SpringBoot到最新版本2.1.18</li>-->
-<!--                <li>升级poi到最新版本4.1.2</li>-->
-<!--                <li>升级oshi到最新版本v5.3.6</li>-->
-<!--                <li>升级bitwalker到最新版本1.21</li>-->
-<!--                <li>升级axios到最新版本0.21.0</li>-->
-<!--                <li>升级element-ui到最新版本2.14.1</li>-->
-<!--                <li>升级vue到最新版本2.6.12</li>-->
-<!--                <li>升级vuex到最新版本3.6.0</li>-->
-<!--                <li>升级vue-cli到版本4.5.9</li>-->
-<!--                <li>升级vue-router到最新版本3.4.9</li>-->
-<!--                <li>升级vue-cli到最新版本4.4.6</li>-->
-<!--                <li>升级vue-cropper到最新版本0.5.5</li>-->
-<!--                <li>升级clipboard到最新版本2.0.6</li>-->
-<!--                <li>升级core-js到最新版本3.8.1</li>-->
-<!--                <li>升级echarts到最新版本4.9.0</li>-->
-<!--                <li>升级file-saver到最新版本2.0.4</li>-->
-<!--                <li>升级fuse.js到最新版本6.4.3</li>-->
-<!--                <li>升级js-beautify到最新版本1.13.0</li>-->
-<!--                <li>升级js-cookie到最新版本2.2.1</li>-->
-<!--                <li>升级path-to-regexp到最新版本6.2.0</li>-->
-<!--                <li>升级quill到最新版本1.3.7</li>-->
-<!--                <li>升级screenfull到最新版本5.0.2</li>-->
-<!--                <li>升级sortablejs到最新版本1.10.2</li>-->
-<!--                <li>升级vuedraggable到最新版本2.24.3</li>-->
-<!--                <li>升级chalk到最新版本4.1.0</li>-->
-<!--                <li>升级eslint到最新版本7.15.0</li>-->
-<!--                <li>升级eslint-plugin-vue到最新版本7.2.0</li>-->
-<!--                <li>升级lint-staged到最新版本10.5.3</li>-->
-<!--                <li>升级runjs到最新版本4.4.2</li>-->
-<!--                <li>升级sass-loader到最新版本10.1.0</li>-->
-<!--                <li>升级script-ext-html-webpack-plugin到最新版本2.1.5</li>-->
-<!--                <li>升级svg-sprite-loader到最新版本5.1.1</li>-->
-<!--                <li>升级vue-template-compiler到最新版本2.6.12</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item title="v3.2.1 - 2020-11-18">-->
-<!--              <ol>-->
-<!--                <li>阻止任意文件下载漏洞</li>-->
-<!--                <li>代码生成支持上传控件</li>-->
-<!--                <li>新增图片上传组件</li>-->
-<!--                <li>调整默认首页</li>-->
-<!--                <li>升级druid到最新版本v1.2.2</li>-->
-<!--                <li>mapperLocations配置支持分隔符</li>-->
-<!--                <li>权限信息调整</li>-->
-<!--                <li>调整sql默认时间</li>-->
-<!--                <li>解决代码生成没有bit类型的问题</li>-->
-<!--                <li>升级pagehelper到最新版1.3.0</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item title="v3.2.0 - 2020-10-10">-->
-<!--              <ol>-->
-<!--                <li>升级springboot版本到2.1.17 提升安全性</li>-->
-<!--                <li>升级oshi到最新版本v5.2.5</li>-->
-<!--                <li>升级druid到最新版本v1.2.1</li>-->
-<!--                <li>升级jjwt到版本0.9.1</li>-->
-<!--                <li>升级fastjson到最新版1.2.74</li>-->
-<!--                <li>修改sass为node-sass，避免el-icon图标乱码</li>-->
-<!--                <li>代码生成支持同步数据库</li>-->
-<!--                <li>代码生成支持富文本控件</li>-->
-<!--                <li>代码生成页面时不忽略remark属性</li>-->
-<!--                <li>代码生成添加select必填选项</li>-->
-<!--                <li>Excel导出类型NUMERIC支持精度浮点类型</li>-->
-<!--                <li>Excel导出targetAttr优化获取值，防止get方法不规范</li>-->
-<!--                <li>Excel注解支持自动统计数据总和</li>-->
-<!--                <li>Excel注解支持设置BigDecimal精度&舍入规则</li>-->
-<!--                <li>菜单&数据权限新增（展开/折叠 全选/全不选 父子联动）</li>-->
-<!--                <li>允许用户分配到部门父节点</li>-->
-<!--                <li>菜单新增是否缓存keep-alive</li>-->
-<!--                <li>表格操作列间距调整</li>-->
-<!--                <li>限制系统内置参数不允许删除</li>-->
-<!--                <li>富文本组件优化，支持自定义高度&图片冲突问题</li>-->
-<!--                <li>富文本工具栏样式对齐</li>-->
-<!--                <li>导入excel整形值校验优化</li>-->
-<!--                <li>修复页签关闭所有时固定标签路由不刷新问题</li>-->
-<!--                <li>表单构建布局型组件新增按钮</li>-->
-<!--                <li>左侧菜单文字过长显示省略号</li>-->
-<!--                <li>修正根节点为子部门时，树状结构显示问题</li>-->
-<!--                <li>修正调用目标字符串最大长度</li>-->
-<!--                <li>修正菜单提示信息错误</li>-->
-<!--                <li>修正定时任务执行一次权限标识</li>-->
-<!--                <li>修正数据库字符串类型nvarchar</li>-->
-<!--                <li>优化递归子节点</li>-->
-<!--                <li>优化数据权限判断</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-
-<!--            <el-collapse-item title="v3.1.0 - 2020-08-13">-->
-<!--              <ol>-->
-<!--                <li>表格工具栏右侧添加刷新&显隐查询组件</li>-->
-<!--                <li>后端支持CORS跨域请求</li>-->
-<!--                <li>代码生成支持选择上级菜单</li>-->
-<!--                <li>代码生成支持自定义路径</li>-->
-<!--                <li>代码生成支持复选框</li>-->
-<!--                <li>Excel导出导入支持dictType字典类型</li>-->
-<!--                <li>Excel支持分割字符串组内容</li>-->
-<!--                <li>验证码类型支持（数组计算、字符验证）</li>-->
-<!--                <li>升级vue-cli版本到4.4.4</li>-->
-<!--                <li>修改 node-sass 为 dart-sass</li>-->
-<!--                <li>表单类型为Integer/Long设置整形默认值</li>-->
-<!--                <li>代码生成器默认mapper路径与默认mapperScan路径不一致</li>-->
-<!--                <li>优化防重复提交拦截器</li>-->
-<!--                <li>优化上级菜单不能选择自己</li>-->
-<!--                <li>修复角色的权限分配后，未实时生效问题</li>-->
-<!--                <li>修复在线用户日志记录类型</li>-->
-<!--                <li>修复富文本空格和缩进保存后不生效问题</li>-->
-<!--                <li>修复在线用户判断逻辑</li>-->
-<!--                <li>唯一限制条件只返回单条数据</li>-->
-<!--                <li>添加获取当前的环境配置方法</li>-->
-<!--                <li>超时登录后页面跳转到首页</li>-->
-<!--                <li>全局异常状态汉化拦截处理</li>-->
-<!--                <li>HTML过滤器改为将html转义</li>-->
-<!--                <li>检查字符支持小数点&降级改成异常提醒</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-
-<!--            <el-collapse-item title="v3.0.0 - 2020-07-20">-->
-<!--              <ol>-->
-<!--                <li>单应用调整为多模块项目</li>-->
-<!--                <li>升级element-ui版本到2.13.2</li>-->
-<!--                <li>删除babel，提高编译速度。</li>-->
-<!--                <li>新增菜单默认主类目</li>-->
-<!--                <li>编码文件名修改为uuid方式</li>-->
-<!--                <li>定时任务cron表达式验证</li>-->
-<!--                <li>角色权限修改时已有权限未自动勾选异常修复</li>-->
-<!--                <li>防止切换权限用户后登录出现404</li>-->
-<!--                <li>Excel支持sort导出排序</li>-->
-<!--                <li>创建用户不允许选择超级管理员角色</li>-->
-<!--                <li>修复代码生成导入表结构出现异常页面不提醒问题</li>-->
-<!--                <li>修复代码生成点击多次表修改数据不变化的问题</li>-->
-<!--                <li>修复头像上传成功二次打开无法改变裁剪框大小和位置问题</li>-->
-<!--                <li>修复布局为small者mini用户表单显示错位问题</li>-->
-<!--                <li>修复热部署导致的强换异常问题</li>-->
-<!--                <li>修改用户管理复选框宽度，防止部分浏览器出现省略号</li>-->
-<!--                <li>IpUtils工具，清除Xss特殊字符，防止Xff注入攻击</li>-->
-<!--                <li>生成domain 如果是浮点型 统一用BigDecimal</li>-->
-<!--                <li>定时任务调整label-width，防止部署出现错位</li>-->
-<!--                <li>调整表头固定列默认样式</li>-->
-<!--                <li>代码生成模板调整，字段为String并且必填则加空串条件</li>-->
-<!--                <li>代码生成字典Integer/Long使用parseInt</li>-->
-<!--                <li>-->
-<!--                  修复dict_sort不可update为0的问题&查询返回增加dict_sort升序排序-->
-<!--                </li>-->
-<!--                <li>修正岗位导出权限注解</li>-->
-<!--                <li>禁止加密密文返回前端</li>-->
-<!--                <li>修复代码生成页面中的查询条件创建时间未生效的问题</li>-->
-<!--                <li>修复首页搜索菜单外链无法点击跳转问题</li>-->
-<!--                <li>修复菜单管理选择图标，backspace删除时不过滤数据</li>-->
-<!--                <li>用户管理部门分支节点不可检查&显示计数</li>-->
-<!--                <li>数据范围过滤属性调整</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-
-<!--            <el-collapse-item title="v2.3.0 - 2020-06-01">-->
-<!--              <ol>-->
-<!--                <li>升级fastjson到最新版1.2.70 修复高危安全漏洞</li>-->
-<!--                <li>dev启动默认打开浏览器</li>-->
-<!--                <li>vue-cli使用默认source-map</li>-->
-<!--                <li>slidebar eslint报错优化</li>-->
-<!--                <li>当tags-view滚动关闭右键菜单</li>-->
-<!--                <li>字典管理添加缓存读取</li>-->
-<!--                <li>参数管理支持缓存操作</li>-->
-<!--                <li>支持一级菜单（和主页同级）在main区域显示</li>-->
-<!--                <li>限制外链地址必须以http(s)开头</li>-->
-<!--                <li>tagview & sidebar 主题颜色与element ui(全局)同步</li>-->
-<!--                <li>修改数据源类型优先级，先根据方法，再根据类</li>-->
-<!--                <li>支持是否需要设置token属性，自定义返回码消息。</li>-->
-<!--                <li>swagger请求前缀加入配置。</li>-->
-<!--                <li>登录地点设置内容过长则隐藏显示</li>-->
-<!--                <li>修复定时任务执行一次按钮后不提示消息问题</li>-->
-<!--                <li>修改上级部门（选择项排除本身和下级）</li>-->
-<!--                <li>通用http发送方法增加参数 contentType 编码类型</li>-->
-<!--                <li>更换IP地址查询接口</li>-->
-<!--                <li>修复页签变量undefined</li>-->
-<!--                <li>添加校验部门包含未停用的子部门</li>-->
-<!--                <li>修改定时任务详情下次执行时间日期显示错误</li>-->
-<!--                <li>角色管理查询设置默认排序字段</li>-->
-<!--                <li>swagger添加enable参数控制是否启用</li>-->
-<!--                <li>只对json类型请求构建可重复读取inputStream的request</li>-->
-<!--                <li>修改代码生成字典字段int类型没有自动选中问题</li>-->
-<!--                <li>vuex用户名取值修正</li>-->
-<!--                <li>表格树模板去掉多余的)</li>-->
-<!--                <li>代码生成序号修正</li>-->
-<!--                <li>全屏情况下不调整上外边距</li>-->
-<!--                <li>代码生成Date字段添加默认格式</li>-->
-<!--                <li>用户管理角色选择权限控制</li>-->
-<!--                <li>修复路由懒加载报错问题</li>-->
-<!--                <li>模板sql.vm添加菜单状态</li>-->
-<!--                <li>设置用户名称不能修改</li>-->
-<!--                <li>dialog添加append-to-body属性，防止ie遮罩</li>-->
-<!--                <li>菜单区分状态和显示隐藏功能</li>-->
-<!--                <li>升级fastjson到最新版1.2.68 修复安全加固</li>-->
-<!--                <li>修复代码生成如果选择字典类型缺失逗号问题</li>-->
-<!--                <li>登录请求params更换为data，防止暴露url</li>-->
-<!--                <li>日志返回时间格式处理</li>-->
-<!--                <li>添加handle控制允许拖动的元素</li>-->
-<!--                <li>布局设置点击扩大范围</li>-->
-<!--                <li>代码生成列属性排序查询</li>-->
-<!--                <li>代码生成列支持拖动排序</li>-->
-<!--                <li>修复时间格式不支持ios问题</li>-->
-<!--                <li>表单构建添加父级class，防止冲突</li>-->
-<!--                <li>定时任务并发属性修正</li>-->
-<!--                <li>角色禁用&菜单隐藏不查询权限</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-
-<!--            <el-collapse-item title="v2.2.0 - 2020-03-18">-->
-<!--              <ol>-->
-<!--                <li>系统监控新增定时任务功能</li>-->
-<!--                <li>添加一个打包Web工程bat</li>-->
-<!--                <li>修复页签鼠标滚轮按下的时候，可以关闭不可关闭的tag</li>-->
-<!--                <li>修复点击退出登录有时会无提示问题</li>-->
-<!--                <li>修复防重复提交注解无效问题</li>-->
-<!--                <li>修复通知公告批量删除异常问题</li>-->
-<!--                <li>添加菜单时路由地址必填限制</li>-->
-<!--                <li>代码生成字段描述可编辑</li>-->
-<!--                <li>修复用户修改个人信息导致缓存不过期问题</li>-->
-<!--                <li>个人信息创建时间获取正确属性值</li>-->
-<!--                <li>操作日志详细显示正确类型</li>-->
-<!--                <li>导入表单击行数据时选中对应的复选框</li>-->
-<!--                <li>批量替换表前缀逻辑调整</li>-->
-<!--                <li>固定重定向路径表达式</li>-->
-<!--                <li>升级element-ui版本到2.13.0</li>-->
-<!--                <li>操作日志排序调整</li>-->
-<!--                <li>修复charts切换侧边栏或者缩放窗口显示bug</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-
-<!--            <el-collapse-item title="v2.1.0 - 2020-02-24">-->
-<!--              <ol>-->
-<!--                <li>新增表单构建</li>-->
-<!--                <li>代码生成支持树表结构</li>-->
-<!--                <li>新增用户导入</li>-->
-<!--                <li>修复动态加载路由页面刷新问题</li>-->
-<!--                <li>修复地址开关无效问题</li>-->
-<!--                <li>汉化错误提示页面</li>-->
-<!--                <li>代码生成已知问题修改</li>-->
-<!--                <li>修复多数据源下配置关闭出现异常处理</li>-->
-<!--                <li>添加HTML过滤器，用于去除XSS漏洞隐患</li>-->
-<!--                <li>修复上传头像控制台出现异常</li>-->
-<!--                <li>修改用户管理分页不正确的问题</li>-->
-<!--                <li>修复验证码记录提示错误</li>-->
-<!--                <li>修复request.js缺少Message引用</li>-->
-<!--                <li>修复表格时间为空出现的异常</li>-->
-<!--                <li>添加Jackson日期反序列化时区配置</li>-->
-<!--                <li>调整根据用户权限加载菜单数据树形结构</li>-->
-<!--                <li>调整成功登陆不恢复按钮，防止多次点击</li>-->
-<!--                <li>修改用户个人资料同步缓存信息</li>-->
-<!--                <li>修复页面同时出现el-upload和Editor不显示处理</li>-->
-<!--                <li>修复在角色管理页修改菜单权限偶尔未选中问题</li>-->
-<!--                <li>配置文件新增redis密码属性</li>-->
-<!--                <li>设置mybatis全局的配置文件</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-
-<!--            <el-collapse-item title="v2.0.0 - 2019-12-02">-->
-<!--              <ol>-->
-<!--                <li>新增代码生成</li>-->
-<!--                <li>新增@RepeatSubmit注解，防止重复提交</li>-->
-<!--                <li>新增菜单主目录添加/删除操作</li>-->
-<!--                <li>日志记录过滤特殊对象，防止转换异常</li>-->
-<!--                <li>修改代码生成路由脚本错误</li>-->
-<!--                <li>用户上传头像实时同步缓存，无需重新登录</li>-->
-<!--                <li>调整切换页签后不重新加载数据</li>-->
-<!--                <li>添加jsencrypt实现参数的前端加密</li>-->
-<!--                <li>系统退出删除用户缓存记录</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item title="v1.1.0 - 2019-11-11">-->
-<!--              <ol>-->
-<!--                <li>新增在线用户管理</li>-->
-<!--                <li>新增按钮组功能实现（批量删除、导出、清空）</li>-->
-<!--                <li>新增查询条件重置按钮</li>-->
-<!--                <li>新增Swagger全局Token配置</li>-->
-<!--                <li>新增后端参数校验</li>-->
-<!--                <li>修复字典管理页面的日期查询异常</li>-->
-<!--                <li>修改时间函数命名防止冲突</li>-->
-<!--                <li>去除菜单上级校验，默认为顶级</li>-->
-<!--                <li>修复用户密码无法修改问题</li>-->
-<!--                <li>修复菜单类型为按钮时不显示权限标识</li>-->
-<!--                <li>其他细节优化</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item title="v1.0.0 - 2019-10-08">-->
-<!--              <ol>-->
-<!--                <li>若依前后端分离系统正式发布</li>-->
-<!--              </ol>-->
-<!--            </el-collapse-item>-->
-<!--          </el-collapse>-->
-<!--        </el-card>-->
-<!--      </el-col>-->
-<!--      <el-col :xs="24" :sm="24" :md="12" :lg="8">-->
-<!--        <el-card class="update-log">-->
-<!--          <div slot="header" class="clearfix">-->
-<!--            <span>捐赠支持</span>-->
-<!--          </div>-->
-<!--          <div class="body">-->
-<!--            <img-->
-<!--              src="https://oscimg.oschina.net/oscnet/up-d6695f82666e5018f715c41cb7ee60d3b73.png"-->
-<!--              alt="donate"-->
-<!--              width="100%"-->
-<!--            />-->
+    <el-divider />
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="12" :lg="8">
+        <el-card class="update-log">
+          <div slot="header" class="clearfix">
+            <span>联系信息</span>
+          </div>
+          <div class="body">
+            <p>
+              <i class="el-icon-user-solid"></i> QQ群：
+              <a href="https://jq.qq.com/?_wv=1027&k=VvjN2nvu" target="_blank"
+                > 782924350</a
+              >
+            </p>
+            <p>
+              <i class="el-icon-chat-dot-round"></i> 微信：<a
+                href="javascript:;"
+                >Almost-2y</a
+              >
+            </p>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="12" :lg="8">
+        <el-card class="update-log">
+          <div slot="header" class="clearfix">
+            <span>更新日志</span>
+          </div>
+          <el-collapse accordion>
+            <el-collapse-item title="v1.0.0 - 2021-04-07">
+              <ol>
+                <li>单流程完善</li>
+              </ol>
+            </el-collapse-item>
+          </el-collapse>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="12" :lg="8">
+        <el-card class="update-log">
+          <div slot="header" class="clearfix">
+            <span>捐赠支持</span>
+          </div>
+          <div class="body">
 <!--            <span style="display: inline-block; height: 30px; line-height: 30px"-->
 <!--              >你可以请作者喝杯咖啡表示鼓励</span-->
 <!--            >-->
-<!--          </div>-->
-<!--        </el-card>-->
-<!--      </el-col>-->
-<!--    </el-row>-->
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>