流程记录办理人渲染

+// 封装axios请求
+import axios from "axios";
+// 创建axios的对象
+const instance = axios.create({
+  baseURL: "http://192.168.2.235/management/rest/users",
+})
+
+
+
+export const getusername = (data) => instance({
+
+  url: '', // 请求地址
+  method: 'get',
+  params:{
+    queryOptions: {
+      conditionGroup: {
+        conditions: [
+          {
+            property: "loginName",
+            value:data,
+            operator: "IN",
+          },
+        ],
+        queryRelation: "AND",
+      },
+      orderBys:[{"property":"sort","direction":"desc"}]
+    },
+  },
+
+})

 <!--
- * @Description: 
+ * @Description:
  * @Autor: renchao
  * @LastEditTime: 2023-05-17 10:41:15
 -->
@@ -64,7 +64,7 @@
           </template>
         </el-table-column>
         <el-table-column label="环节名称" prop="taskName" minWidth="100" align="center" />
-        <el-table-column label="办理人" prop="assigneeName" minWidth="120" align="center" />
+        <el-table-column label="办理人" prop="agent" minWidth="120" align="center" />
         <el-table-column label="处理时间" prop="createTime" width="160" align="center" />
         <el-table-column label="办结时间" prop="finishTime" width="160" align="center" />
         <el-table-column label="操作方式" align="center">
@@ -76,6 +76,7 @@
 <script>
   import '@/styles/package/theme/index.scss'
   import BpmnViewer from 'bpmn-js/lib/Viewer'
+  import { getusername } from "@/api/getusername.js";
   import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
   export default {
     props: {
@@ -96,6 +97,7 @@
         // 当前任务id
         selectTaskId: undefined,
         // 任务节点审批记录
+        taskList:[],
         taskCommentList: [],
         // 已完成任务悬浮延迟Timer
         hoverTimer: null,
@@ -105,9 +107,13 @@
       }
     },
     created () {
+
       this.$nextTick(() => {
+        // 获取流程记录
+        this.getCommentList()
+         this.setProcessStatus(this.formData.finishedInfo);
         this.importXML(this.formData.xml)
-        this.setProcessStatus(this.formData.finishedInfo);
+
       })
     },
     destroyed () {
@@ -170,20 +176,20 @@
         this.selectValue = element.id
         this.dlgTitle = element.businessObject ? element.businessObject.name : undefined
         // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
-        this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
+        this.taskCommentList = (this.taskList || []).filter(item => {
           return item.taskDefKey === this.selectTaskId
         })
         if (this.selectTaskId.length > 3) {
-          this.taskCommentList = this.formData.allCommentList;
+          this.taskCommentList = this.taskList;
         }
       },
       // 下拉列表切换
       handleSelect (val) {
-        this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
+        this.taskCommentList = (this.taskList || []).filter(item => {
           return item.taskDefKey === val
         })
         if (val.length > 3) {
-          this.taskCommentList = this.formData.allCommentList;
+          this.taskCommentList = this.taskList;
         }
       },
       // 显示流程图
@@ -230,9 +236,39 @@
           }
         }
       },
+       // 获取流程记录
+      getCommentList() {
+        this.formData.allCommentList.forEach(async (item,index) => {
+          var arr=item.assigneeName.split(",");
+          // 获取用户名
+              let  res = await getusername(arr)
+             if(res){
+              let str=""
+             res.data.content.forEach((el,i) => {
+                if(str==""){
+                    str=el.name;
+                }else{
+                    str += ","+el.name;
+
+                }
+                this.formData.allCommentList[index].agent=str
+         })
+            }
+
+        })
+        setTimeout(() => {
+           this.taskList =this.formData.allCommentList;
+          //  处理数据之后赋值
+            this.taskCommentList=this.taskList
+        }, 100)
+        //   this.$nextTick(() => {
+        //   this.taskList =this.formData.allCommentList;
+        //     this.taskCommentList=this.taskList
+        // })
+      },
+
       // 设置流程图元素状态
       setProcessStatus (processNodeInfo) {
-        this.taskCommentList = this.formData.allCommentList;
         this.processNodeInfo = processNodeInfo
         if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return
         const { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo
@@ -268,6 +304,7 @@
             }
           })
         }
+
       }
     }
   }