优化头程订单工具栏与报关资料弹框

This commit is contained in:
2026-10-21 23:20:11 +08:00
parent 24439b15a3
commit 7adb97d145
2 changed files with 28 additions and 24 deletions
@@ -2115,16 +2115,16 @@ async function searchOrders(model: QueryModel) {
<QueryToolbar v-model="filters" class="first-leg-query-toolbar" layout="grid" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" />
<div class="client-card order-table-card">
<nav class="order-queue-tabs" aria-label="订单事项分类">
<button v-for="queue in ORDER_QUEUES" :key="queue.key" type="button"
:class="{ active: activeOrderQueue === queue.key }" :aria-pressed="activeOrderQueue === queue.key"
@click="selectOrderQueue(queue.key)">
{{ queue.label }}<span v-if="queue.key !== 'all' && orderQueueCounts[queue.key]"
:class="queue.todo ? 'queue-count' : 'queue-stage-count'">{{ queue.todo ? orderQueueCounts[queue.key] : `(${orderQueueCounts[queue.key]})` }}</span>
</button>
</nav>
<DataTable :page="tablePage" :page-size="tablePageSize" @update:page="changeOrderPage" @update:page-size="changeOrderPageSize" :data="pagedOrders" :columns="visibleOrderColumns" :key="orderTableVersion" :loading="store.loading" :total="store.total" :page-sizes="[10, 20, 50]" row-key="id" empty-text="暂无订单" class="prototype-order-table" :row-actions="getOrderRowActions" @selection-change="handleOrderSelectionChange">
<template #toolbar>
<nav class="order-queue-tabs" aria-label="订单事项分类">
<button v-for="queue in ORDER_QUEUES" :key="queue.key" type="button"
:class="{ active: activeOrderQueue === queue.key }" :aria-pressed="activeOrderQueue === queue.key"
@click="selectOrderQueue(queue.key)">
{{ queue.label }}<span v-if="queue.key !== 'all' && orderQueueCounts[queue.key]"
:class="queue.todo ? 'queue-count' : 'queue-stage-count'">{{ queue.todo ? orderQueueCounts[queue.key] : `(${orderQueueCounts[queue.key]})` }}</span>
</button>
</nav>
<span v-if="selectedOrderCount">已选 {{ selectedOrderCount }} 条</span>
</template>
<template #toolbar-actions>
@@ -2586,10 +2586,7 @@ async function searchOrders(model: QueryModel) {
.supporting-data-error span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
.order-row-actions, .editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
.order-table-card { padding: 0; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); box-shadow: none; }
.prototype-order-table :deep(.data-table__toolbar) { flex-wrap: nowrap; }
.prototype-order-table :deep(.data-table__toolbar-heading) { min-width: 0; flex: 1; flex-wrap: nowrap; }
.prototype-order-table :deep(.data-table__toolbar-actions) { flex-shrink: 0; }
.order-queue-tabs { display: flex; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; padding: 7px 0 10px; scrollbar-width: thin; }
.order-queue-tabs { display: flex; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; padding: 14px 16px 10px; border-bottom: 1px solid var(--client-border); scrollbar-width: thin; }
.order-queue-tabs button { flex-shrink: 0; white-space: nowrap; }
.queue-stage-count { margin-left: 3px; }
.order-queue-tabs button { position: relative; min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #667085; cursor: pointer; font: inherit; font-weight: 600; }