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

- 新增 computed 属性 orderedWaybillPunchRecords,按打卡时间升序排序已打卡记录
- 未打卡记录保持后端返回的节点顺序,排在已打卡记录之后
- 引入方法 waybillPunchRecordTimestamp 解析打卡时间,支持多种日期格式
- 修正 el-timeline v-for 使用 orderedWaybillPunchRecords 避免 key 冲突
- 保持原有流程节点顺序不变,仅调整时间轴展示顺序
This commit is contained in:
2026-09-17 14:47:29 +08:00
parent 2684624979
commit 17c482e21a
2 changed files with 52 additions and 2 deletions
+12
View File
@@ -0,0 +1,12 @@
# 2026-09-17 工作日志
## 运单管理详情:打卡时间轴改为按打卡顺序展示
- 文件:`src/views/business/components/waybill-manage-page.vue`(详情页「执行详情 → 打卡详情」tab)
- 需求:时间轴不再固定按流程节点顺序(发货/在途/到货/卸货/签收/回单),改为按打卡时间先后展示。
- 实现(不改后端、不改原始数据):
1. 新增 computed `orderedWaybillPunchRecords`:映射出 `punchedAt`(毫秒时间戳)后排序 —— **已打卡记录按打卡时间升序排在前**,未打卡记录保持后端返回的节点顺序排在其后;时间相同用原索引稳定排序。
2. 新增 method `waybillPunchRecordTimestamp(record)``punched === false``statusName === '未打卡'` 直接返回 null(防止后端返回计划时间造成误序);优先 `this.$dayjs(text).valueOf()`,失败兜底 `new Date(text.replace(/-/g,'/'))`(兼容 Safari)。
3. 模板 `el-timeline``v-for` 改用 `orderedWaybillPunchRecords``key``record.nodeCode || record.id || index` 改为 `${nodeCode||id||'punch'}-${index}`,避免同节点多次打卡(在途)时 key 重复。
- 校验:项目根目录临时脚本 `_verify-sfc.mjs`@vue/compiler-sfc parse + compileScript + compileTemplate)通过,已删除脚本。
- 注意:`getPunchRecords``src/api/business/waybill-manage.js``/punch-records`)后端未提供节点排序字段,排序只能在前端做。