优化

2026-08-10 16:24:54 +08:00
parent e119b48662
commit 820432a381
52 changed files with 1015 additions and 705 deletions
@@ -19,9 +19,12 @@ import {
  type PlatformFirstLegOrderStatus,
 } from '@/modules/first-leg-orders/api/platformFirstLegOrders'
 import { ApiResponseError, getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
+import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
@@ -421,9 +424,12 @@ onMounted(() => void loadTenants())
 </script>

 <template>
+  <AdminPage>
  <div class="business-page">
    <template v-if="isDetailPage">
      <section class="surface-panel detail-page" v-loading="detailLoading">
+        <DetailPageLayout ariaLabel="头程订单详情">
+        <template #header>
        <header class="detail-page-header">
          <div>
            <h1>订单详情</h1>
@@ -431,6 +437,7 @@ onMounted(() => void loadTenants())
          </div>
          <el-button @click="closeDetailPage"><ArrowLeft :size="16" />返回订单列表</el-button>
        </header>
+        </template>

        <template v-if="detail">
          <div class="order-detail-head">
@@ -498,11 +505,14 @@ onMounted(() => void loadTenants())
            <el-timeline><el-timeline-item v-for="item in detail.statusHistory" :key="item.id" :timestamp="`${formattedDate(item.occurredAt)} · ${item.operatorName || '系统'}`" placement="top"><strong>{{ statusLabel(item.toStatus) }}</strong><p>{{ item.reason || item.action || '状态已更新。' }}</p></el-timeline-item></el-timeline>
          </div>
        </template>
-        <el-empty v-else-if="!detailLoading" description="订单详情暂不可用"><el-button type="primary" @click="closeDetailPage">返回订单列表</el-button></el-empty>
+        <el-empty v-else-if="!detailLoading" description="订单详情暂不可用"><el-button type="primary" @click="closeDetailPage"><ArrowLeft :size="16" />返回订单列表</el-button></el-empty>
+        </DetailPageLayout>
      </section>
    </template>

    <template v-else>
+      <ListPageLayout ariaLabel="头程订单列表">
+      <template #toolbar>
      <QueryToolbar
        v-model="filters"
        ariaLabel="头程订单筛选"
@@ -513,18 +523,21 @@ onMounted(() => void loadTenants())
        @search="searchOrders"
        @reset="resetOrders"
      />
+      </template>

      <el-alert v-if="tenantLoadError" type="warning" :closable="false" show-icon role="alert">
        <template #title><div class="api-error-alert-title"><span>{{ tenantLoadError.message }}</span><ApiErrorMeta :details="tenantLoadError" /></div></template>
        <el-button link type="warning" @click="loadTenants">重新加载企业列表</el-button>
      </el-alert>

-      <el-alert v-if="loadError" type="error" :closable="false" show-icon role="alert">
-        <template #title><div class="api-error-alert-title"><span>{{ loadError.message }}</span><ApiErrorMeta :details="loadError" /></div></template>
-        <el-button link type="danger" @click="loadOrders">重新加载</el-button>
-      </el-alert>
+      <template v-if="loadError" #state>
+        <el-alert type="error" :closable="false" show-icon role="alert">
+          <template #title><div class="api-error-alert-title"><span>{{ loadError.message }}</span><ApiErrorMeta :details="loadError" /></div></template>
+          <el-button link type="danger" @click="loadOrders">重新加载</el-button>
+        </el-alert>
+      </template>

-      <section class="surface-panel table-panel">
+      <section v-if="!loadError" class="surface-panel table-panel">
        <DataTable
          v-model:page="page"
          v-model:page-size="pageSize"
@@ -537,13 +550,13 @@ onMounted(() => void loadTenants())
          empty-text="当前没有符合条件的头程订单"
          row-key="id"
        >
-          <template #toolbar-start><div><h2>头程订单列表</h2><p>共 {{ total }} 条订单</p></div></template>
+          <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 条订单</span></template>
          <template #actions="{ row }">
            <div class="table-actions order-row-actions">
              <el-button link type="primary" :disabled="actionLoadingId === String((row as PlatformFirstLegOrderResource).id)" @click="openDetail(row as PlatformFirstLegOrderResource)"><Eye :size="15" />详情</el-button>
              <el-button v-if="actionLabel(row as PlatformFirstLegOrderResource)" link type="success" :loading="actionLoadingId === String((row as PlatformFirstLegOrderResource).id)" @click="runLifecycleAction(row as PlatformFirstLegOrderResource)">{{ actionLabel(row as PlatformFirstLegOrderResource) }}</el-button>
              <el-dropdown v-if="hasSecondaryActions(row as PlatformFirstLegOrderResource)" trigger="click" popper-class="first-leg-action-menu" :disabled="actionLoadingId === String((row as PlatformFirstLegOrderResource).id)" @command="runSecondaryAction($event, row as PlatformFirstLegOrderResource)">
-                <el-button link type="primary" aria-label="更多订单操作"><MoreHorizontal :size="17" />更多</el-button>
+                <el-button link type="primary" aria-label="更多订单操作" title="更多订单操作"><MoreHorizontal :size="17" /></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-if="canMaintainExpress(row as PlatformFirstLegOrderResource)" command="express"><PackageCheck :size="15" />维护快递</el-dropdown-item>
@@ -561,9 +574,9 @@ onMounted(() => void loadTenants())
          <template #destination="{ row }"><div class="primary-cell"><strong>{{ (row as PlatformFirstLegOrderResource).destinationWarehouseName || '-' }}</strong><span>{{ (row as PlatformFirstLegOrderResource).destinationCountryCode || '-' }}</span></div></template>
          <template #receivingWarehouse="{ row }"><div class="primary-cell"><strong>{{ (row as PlatformFirstLegOrderResource).receivingWarehouseName || '-' }}</strong><span>{{ (row as PlatformFirstLegOrderResource).receivingWarehouseAddress || '-' }}</span></div></template>
          <template #express="{ row }"><div class="primary-cell"><strong>{{ (row as PlatformFirstLegOrderResource).expressCompany || '未维护' }}</strong><span>{{ (row as PlatformFirstLegOrderResource).expressTrackingNo || '—' }}</span></div></template>
-          <template #empty><el-empty description="当前没有符合条件的头程订单" /></template>
        </DataTable>
      </section>
+      </ListPageLayout>
    </template>

    <el-dialog v-model="expressDialogOpen" title="维护履约快递" width="min(520px, calc(100vw - 28px))">
@@ -577,6 +590,7 @@ onMounted(() => void loadTenants())
      <template #footer><el-button :disabled="noteSaving" @click="noteDialogOpen = false">取消</el-button><el-button type="primary" :loading="noteSaving" @click="saveNote">保存备注</el-button></template>
    </el-dialog>
  </div>
+  </AdminPage>
 </template>

 <style scoped>