修改

src/views/cdt/models/orderInfo.vue

@@ -49,15 +49,18 @@
         <div class="d-flex flex1 ov-hd">
             <div class="left-step-box over-auto" style="width: 230px">
                 <div class="steps-box">
-                    <template v-for="(item, index) in info?.logList" :key="index">
-                        <div class="steps-item d-flex">
+                    <template v-for="(item, index) in test_order_process" :key="index">
+                        <div class="steps-item d-flex" :class="{ 'checked': mapStatus(item.value)?.checked, 'active': mapStatus(item.value)?.active }">
                             <div class="pr-16 steps-icon-box p-rtv">
                                 <div class="steps-line"></div>
-                                <el-icon class="steps-icon"><CircleCheckFilled /></el-icon>
+                                <div v-if="mapStatus(item.value)?.active" class="steps-ball-active">
+                                    <el-icon><MoreFilled /></el-icon>
+                                </div>
+                                <el-icon v-else class="steps-icon"><CircleCheckFilled /></el-icon>
                             </div>
                             <div class="steps-content d-flex flex-cln flex1 ov-hd">
-                                <view class="f-s-16 c-666 mb-5">{{ item.operationDescription }}</view>
-                                <view class="steps-desc">{{ item?.operationTime }}</view>
+                                <view class="f-s-16 mb-5">{{ mapStatus(item.value)?.operationDescription || item.label }}</view>
+                                <view class="steps-desc">{{ mapStatus(item.value)?.operationTime }}</view>
                             </div>
                         </div>
                     </template>
@@ -174,12 +177,28 @@ import { VxeTablePropTypes } from 'vxe-table';
 import { colNoData } from '@/utils/noData';
 import { FileLook } from '@/views/models';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { test_order_status_bg, sf_router_code } = toRefs<any>(proxy?.useDict('test_order_status_bg', 'sf_router_code'));
+const { test_order_status_bg, sf_router_code, test_order_process } = toRefs<any>(proxy?.useDict('test_order_status_bg', 'sf_router_code', 'test_order_process'));
 const vxeTableRef = ref<any>(null);
 const list = ref<any[]>([]);
 const props = defineProps({
     info: propTypes.any.def(null)
 });
+const mapStatus = (value) => {
+   const logoIndex = props?.info?.logList.findIndex(({ operationType }) => operationType === value)
+   if (logoIndex !== -1) {
+       return {
+         ...props?.info?.logList[logoIndex],
+         checked:  logoIndex < props?.info?.logList.length - 1,
+         active: logoIndex === props?.info?.logList.length - 1
+       }
+   } else {
+       return {
+        checked: false,
+        active: false
+       }
+   }
+//    return
+}
 // 合并表格
 const mergeCells = ref<VxeTablePropTypes.MergeCells>([
     { row: 0, col: 0, rowspan: 2, colspan: 0 },
@@ -233,6 +252,28 @@ const steps = ref([
                 border-color: transparent;
             }
         }
+
+        &.checked {
+            .steps-icon {
+                color: var(--el-color-primary);
+            }
+
+            .steps-content {
+                color: #000;
+            }
+        }
+        &.active {
+            .steps-icon {
+                color: var(--el-color-primary);
+            }
+
+            .steps-content {
+                color: #000;
+            }
+        }
+    }
+    .steps-content {
+        color: #ebebeb;
     }
     .steps-desc {
         margin-bottom: 20px;
@@ -241,7 +282,7 @@ const steps = ref([
     }
     .steps-icon {
         font-size: 22px;
-        color: #2c9049;
+        color:  #cbcbcb;
     }
 
     .steps-line {
@@ -252,5 +293,16 @@ const steps = ref([
         width: 1px;
         border: 1px dashed #f4f4f4;
     }
+    .steps-ball-active {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        font-size: 14px;
+        color: #fff;
+        background-color:  #edb72f;
+    }
 }
 </style>