feat(waybill): 优化打卡时间轴按打卡时间排序展示

- 新增 computed 属性 orderedWaybillPunchRecords，按打卡时间升序排序已打卡记录
- 未打卡记录保持后端返回的节点顺序，排在已打卡记录之后
- 引入方法 waybillPunchRecordTimestamp 解析打卡时间，支持多种日期格式
- 修正 el-timeline v-for 使用 orderedWaybillPunchRecords 避免 key 冲突
- 保持原有流程节点顺序不变，仅调整时间轴展示顺序

src/views/business/components/waybill-manage-page.vue

@@ -1923,6 +1923,12 @@
                     }}</strong
                   >
                 </div>
+                <div
+                  v-if="!waybillIsCarrier(detailRow)"
+                  class="waybill-manage-page__waybill-detail-field"
+                >
+                  <span>里程(km)</span><strong>{{ detailRow.mileage || '-' }}</strong>
+                </div>
               </template>
               <template v-else-if="waybillIsNonRoadTransport(detailRow)">
                 <div class="waybill-manage-page__waybill-detail-field">
@@ -2029,8 +2035,8 @@
                   <div v-loading="waybillPunchRecordsLoading">
                     <el-timeline v-if="waybillPunchRecords.length">
                       <el-timeline-item
-                        v-for="(record, index) in waybillPunchRecords"
-                        :key="record.nodeCode || record.id || index"
+                        v-for="(record, index) in orderedWaybillPunchRecords"
+                        :key="`${record.nodeCode || record.id || 'punch'}-${index}`"
                         :timestamp="record.punchTime || record.statusName || '未打卡'"
                         :type="record.punched ? 'primary' : 'info'"
                         :color="record.punched ? '#2b6ce8' : '#c0c4cc'"
@@ -3545,6 +3551,25 @@ export default {
         addBtn: this.canCreate,
       };
     },
+    // 打卡时间轴按打卡时间先后展示：已打卡记录按打卡时间升序在前，
+    // 未打卡记录保持流程节点原顺序排在其后。
+    orderedWaybillPunchRecords() {
+      const records = Array.isArray(this.waybillPunchRecords) ? this.waybillPunchRecords : [];
+      return records
+        .map((record, index) => ({
+          record,
+          index,
+          punchedAt: this.waybillPunchRecordTimestamp(record),
+        }))
+        .sort((a, b) => {
+          const aPunched = a.punchedAt !== null;
+          const bPunched = b.punchedAt !== null;
+          if (aPunched && bPunched) return a.punchedAt - b.punchedAt || a.index - b.index;
+          if (aPunched !== bPunched) return aPunched ? -1 : 1;
+          return a.index - b.index;
+        })
+        .map(item => item.record);
+    },
     isStandaloneWaybillPage() {
       return this.standaloneFormPage && standaloneWaybillFormPaths.includes(this.$route.path);
     },
@@ -4492,6 +4517,19 @@ export default {
         })
         .catch(() => []);
     },
+    // 解析打卡时间（支持常见日期字符串格式），未打卡或无有效时间返回 null
+    waybillPunchRecordTimestamp(record = {}) {
+      if (record.punched === false || record.statusName === '未打卡') return null;
+      const raw = record.punchTime || record.punchAt || record.punchDateTime || '';
+      const text = String(raw).trim();
+      if (!text) return null;
+      const parsed = this.$dayjs ? this.$dayjs(text) : null;
+      if (parsed && typeof parsed.isValid === 'function' && parsed.isValid()) {
+        return parsed.valueOf();
+      }
+      const fallback = new Date(text.replace(/-/g, '/')).getTime();
+      return Number.isNaN(fallback) ? null : fallback;
+    },
     loadWaybillPunchRecords() {
       const waybillId = this.detailRow?.id;
       if (!waybillId || this.waybillPunchRecordsLoading) return;