审批状态问题优化

src/components/pro-tabs/bns-timeline-tabs.vue

@@ -20,7 +20,8 @@
               <span>审批部门：{{ item.section }}</span>
               <span style="margin-left: 50px">审批人：{{ item.name }}</span>
               <p>审批时间： {{ item.time }}</p>
-              <p>审批状态： {{ auditingType(item) }}</p>
+              <!-- <p>审批状态： {{ auditingType(item) }}</p> -->
+              <p>审批状态： {{ item.status }}</p>
               <p v-if="item.name.indexOf(userName) != -1 && showType == 2">
                 审批意见：
                 <el-input
@@ -98,7 +99,15 @@
             :key="index"
             style="width: 100%; display: flex; flex-direction: column; align-items: center"
           >
-            <div
+            <div :class="styleByType(item, index)">
+              {{ item.checkPerson }} (
+              {{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
+              <span style="margin-left: 15px; font-size: 20px; font-weight: bold">
+                <!-- {{ index < currentCheckIndex && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }} -->
+                {{ iconByType(item, index) }}
+              </span>
+            </div>
+            <!-- <div
               :class="{
                 highlight: index < currentCheckIndex,
                 normal: index > currentCheckIndex,
@@ -110,7 +119,7 @@
               <span style="margin-left: 15px; font-size: 20px; font-weight: bold">
                 {{ index < currentCheckIndex && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }}
               </span>
-            </div>
+            </div> -->
 
             <!-- <div :class="styleByType(item)">
               {{ item.name }} ( {{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
@@ -196,6 +205,24 @@ export default {
         return false
       }
     },
+    // 根据审核状态以及审核结果添加样式
+    styleByType() {
+      return (item, index) => {
+        if (this.items[index].status == '审核通过') return 'highlight'
+        if (this.items[index].status == '审核驳回') return 'rejectHighlight'
+        if (item.isActive != 1) return 'normal'
+        if (item.isActive == 1) return 'currentLight'
+      }
+    },
+    // 根据审核状态以及审核结果添加符号
+    iconByType() {
+      return (item, index) => {
+        if (this.items[index].status == '审核通过') return '√'
+        if (this.items[index].status == '审核驳回') return 'X'
+        if (this.items[index].status == '撤回' || (this.items[index].status == '' && item.isActive != 10)) return '?'
+        if (this.items[index].status == '' && item.isActive == 10) return '?'
+      }
+    },
   },
   watch: {
     items: {
@@ -343,12 +370,6 @@ export default {
       if (item.status === '已审核' && item.agree == 2) return '审核驳回'
       if (item.status === '已审核' && (item.agree == 4 || item.agree == null)) return '撤回'
     },
-
-    // 根据审核状态以及审核结果添加样式
-    styleByType(item) {
-      console.log('item修改样式', item)
-      if (item.status === '未审核') return 'currentLight'
-    },
   },
 }
 </script>
@@ -390,6 +411,18 @@ export default {
   border-radius: 5px;
   background: #35c50c;
 }
+.rejectHighlight {
+  /* Add any specific styles for the highlighted state */
+  padding: 8px;
+  /* border: 1px solid green; */
+  width: 50%;
+  text-align: center;
+  height: 50px;
+  font-size: 14px;
+  margin-top: 2px;
+  border-radius: 5px;
+  background: #f56c6c;
+}
 .currentLight {
   /* Add any specific styles for the highlighted state */
   padding: 8px;