修改流程的显示

src/views/bpm/processInstance/detailNew.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="app-container" style="padding: 15px">
     <!-- 审批记录 -->
     <el-card class="box-card" v-loading="tasksLoad">
@@ -20,35 +20,37 @@
                   v-if="item.assigneeUser"
                   style="font-weight: normal; margin-right: 30px"
                 >
-                  {{ index == 0 ? ' 审批人' : '发起人' }}：{{
+                  {{ index == 0 ? '审批人' : '发起人' }}：{{
                     item.assigneeUser.nickname
                   }}
                   <el-tag type="info" size="mini">{{
                     item.assigneeUser.deptName
                   }}</el-tag>
                 </label>
-                <label style="font-weight: normal" v-if="item.createTime"
-                  >创建时间：</label
-                >
+                <label style="font-weight: normal" v-if="item.createTime">
+                  创建时间：
+                </label>
                 <label style="color: #8a909c; font-weight: normal">{{
                   item.createTime
                 }}</label>
                 <label
                   v-if="item.endTime"
                   style="margin-left: 30px; font-weight: normal"
-                  >审批时间：</label
                 >
+                  审批时间：
+                </label>
                 <label
                   v-if="item.endTime"
                   style="color: #8a909c; font-weight: normal"
                 >
-                  {{ item.endTime }}</label
-                >
+                  {{ item.endTime }}
+                </label>
                 <label
                   v-if="item.durationInMillis"
                   style="margin-left: 30px; font-weight: normal"
-                  >耗时：</label
                 >
+                  耗时：
+                </label>
                 <label
                   v-if="item.durationInMillis"
                   style="color: #8a909c; font-weight: normal"
@@ -152,9 +154,9 @@
     },
     watch: {
       id: {
-        handler(newVal, oldVal) {
+        handler(newVal) {
           if (newVal) {
-            console.log(newVal,'watchnewVal')
+            console.log(newVal, 'watchnewVal');
             this.getDetail();
           }
         },
@@ -168,11 +170,13 @@
     },
     methods: {
       getChildren(data) {
-        let arr = [];
-        arr.push(...data);
-        if (data.children) {
-          this.getChildren(data.children);
-        }
+        const arr = [];
+        (data || []).forEach((item) => {
+          if (item.children && item.children.length > 0) {
+            arr.push(...this.getChildren(item.children));
+          }
+          arr.push(item);
+        });
         return arr;
       },
 
@@ -180,7 +184,7 @@
       getDetail() {
         // 获得流程实例相关
         this.processInstanceLoading = true;
-        console.log(this.id,'this.id')
+        console.log(this.id, 'this.id');
         getProcessInstance(this.id).then((response) => {
           if (!response) {
             this.$message.error('查询不到流程信息！');
@@ -189,7 +193,7 @@
           // 设置流程信息
           this.processInstance = response;
 
-          // //将业务表单，注册为动态组件
+          // // 将业务表单注册为动态组件
           // const path = this.processInstance.processDefinition.formCustomViewPath;
           // Vue.component("async-biz-form-component", function (resolve) {
           //   require([`@/views${path}`], resolve);
@@ -205,7 +209,6 @@
           getActivityList({
             processInstanceId: this.processInstance.id
           }).then((response) => {
-            
             this.activityList = response;
           });
 
@@ -221,27 +224,10 @@
           // console.log(response,'response')
           // 移除已取消的审批
           response.forEach((task) => {
-            if (task.children.length > 0) {
-              this.tasks.push(...this.getChildren(task.children));
-            }
             // if (task.result !== 4) {
-            this.tasks.push(task);
+            this.tasks.push(...this.getChildren([task]));
             // }
           });
-          // 排序，将未完成的排在前面，已完成的排在后面；
-          this.tasks.sort((a, b) => {
-            // 有已完成的情况，按照完成时间倒序
-            if (a.endTime && b.endTime) {
-              return b.endTime - a.endTime;
-            } else if (a.endTime) {
-              return 1;
-            } else if (b.endTime) {
-              return -1;
-              // 都是未完成，按照创建时间倒序
-            } else {
-              return b.createTime - a.createTime;
-            }
-          });
 
           // 需要审核的记录
           const userId = store.getters.userId;