管理端开发日记②：订单详情、流程与数据回显

1. 页面结构#

src/views/manage/delivery-order/detail.vue 采用左侧地图、右侧信息区的布局。右侧按内容拆分为基础信息、图片凭证、流程记录和操作区。

2. 多数据源回显#

详情页不能把所有数据硬塞进一个超大接口。订单与飞行任务的更新频率不同，图片也需要鉴权下载，因此页面分别请求，再汇总成视图模型。

1
async function loadDetail() {
2
  loading.value = true
3
  try {
4
    const [orderResult, proofResult, historyResult, logResult] =
5
      await Promise.allSettled([
6
        getDeliveryOrder(orderId.value),
7
        listDeliveryProof({ orderId: orderId.value }),
8
        listDeliveryOrderHistory({ orderId: orderId.value }),
9
        getDeliveryOrderProcessLogs(orderId.value)
10
      ])
11

12
    detail.value = valueOf(orderResult, {})
13
    proofList.value = rowsOf(proofResult)
14
    orderHistoryList.value = rowsOf(historyResult)
15
    processLogs.value = rowsOf(logResult)
16
    await loadWayline()
17
  } finally {
18
    loading.value = false
19
  }
20
}

这里使用 Promise.allSettled 而不是 Promise.all，因为某一组非核心数据失败时，不应让整个详情页变成空白。例如签收图暂时读取失败，订单基本资料与流程日志仍然可以展示。

3. 图片凭证按业务类型分组#

凭证并不是普通附件，它带有明确语义：

1
const proofGroups = {
2
  ORDER_PHOTO: '订单截图',
3
  GOODS_PHOTO: '货品照片',
4
  SIGN_PHOTO: '签收凭证'
5
}

页面通过 AuthenticatedImage 获取受保护图片，而不是直接拼接服务器路径。这样既携带登录凭证，又可以统一处理加载失败、临时地址和缓存。

图片分组后，审核员可以快速判断“订单来源是否可信”“货品是否满足飞行条件”；订单完成后又能独立查看签收凭证，不会把所有图片混成一排。

4. 流程日志比当前状态更有解释力#

当前状态只能说明现在在哪里，流程日志才能解释为什么走到这里。页面将日志按时间排序并构造成时间线：

1
const sortedLogs = computed(() => [...processLogs.value].sort((a, b) => {
2
  return new Date(a.operateTime || a.createTime) -
3
    new Date(b.operateTime || b.createTime)
4
}))

每个节点显示操作名称、操作人、时间和备注。对于被驳回后重新提交的订单，还会从历史记录中读取 rejectReason、rejectExplain，让新版本和旧版本之间的关系可追溯。

5. 状态驱动底部操作区#

详情页不允许用户随意触发任何接口，而是由订单状态确定按钮：

1
<template v-if="detail.orderStatus === 'PENDING_AUDIT'">
2
  <el-button @click="rejectOrder">驳回</el-button>
3
  <el-button type="primary" @click="approveOrder">审核通过</el-button>
4
</template>

每次操作成功后重新执行 loadDetail()，而不是在前端手工猜测新状态。服务端才是状态机的最终裁判，重新拉取可以同步流程日志、任务编号和更新时间。

6. 数据回显中的空值和异步顺序#

详情数据返回前，模板中的 detail.orderStatus、坐标和图片列表都可能为空。页面默认使用空对象和空数组，并用 -- 处理缺失字段。地图必须在容器完成渲染后初始化，航线又依赖订单坐标和任务数据，因此加载顺序大致为：

1
读取订单与关联数据
2
        ↓
3
等待 DOM 完成渲染
4
        ↓
5
初始化地图实例
6
        ↓
7
解析航点并绘制航线
8
        ↓
9
放置起点、终点和无人机

这类顺序问题不会总是报错，却会表现为“偶尔没有线”“切换页面后地图空白”，所以比普通表单更需要明确生命周期。

7. 本篇小结#

1
if (submitting.value) return
2
submitting.value = true
3
try {
4
  await approveDeliveryOrder(detail.value.orderId)
5
  await loadDetail()
6
} finally {
7
  submitting.value = false
8
}