优化
This commit is contained in:
@@ -6,6 +6,7 @@ const props = withDefaults(defineProps<{
|
||||
value?: string | null
|
||||
emptyText?: string
|
||||
copyable?: boolean
|
||||
compact?: boolean
|
||||
copyLabel?: string
|
||||
}>(), { value: null, emptyText: '—', copyable: false, copyLabel: '尾程单号' })
|
||||
|
||||
@@ -18,7 +19,7 @@ const fullTitle = computed(() => displayValue.value === props.emptyText ? undefi
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="order-reference-text" :title="fullTitle"><span class="order-reference-text__value">{{ displayValue }}</span><CopyButton v-if="copyable && fullTitle" class="order-reference-text__copy" :value="displayValue" :label="copyLabel" button-text="" /></span>
|
||||
<span class="order-reference-text" :title="fullTitle"><span class="order-reference-text__value">{{ displayValue }}</span><CopyButton v-if="copyable && fullTitle" class="order-reference-text__copy" :text="compact" :size="compact ? 'small' : undefined" :value="displayValue" :label="copyLabel" button-text="" /></span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import '@/styles/adminDensity.css'
|
||||
import { ArrowLeft } from '@lucide/vue'
|
||||
import AdminPage from '@/shared/components/AdminPage.vue'
|
||||
import StatusBadge from '@/shared/components/StatusBadge.vue'
|
||||
import ContractPendingNotice from './ContractPendingNotice.vue'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
@@ -19,8 +20,15 @@ defineEmits<{ back: [] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }">
|
||||
<header class="overseas-detail-head">
|
||||
<AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }" :aria-label="title">
|
||||
<header v-if="dense" class="density-detail-header">
|
||||
<div class="overseas-detail-title density-detail-heading">
|
||||
<el-button link class="density-back" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回列表</el-button>
|
||||
<h1 class="density-detail-title"><slot name="reference">{{ referenceValue }}</slot></h1>
|
||||
<StatusBadge v-if="statusText" :status="statusText" />
|
||||
</div>
|
||||
</header>
|
||||
<header v-else class="overseas-detail-head">
|
||||
<el-button :class="{ 'density-back': dense }" :link="dense" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回</el-button>
|
||||
<div class="overseas-detail-title">
|
||||
<h1>{{ title }}</h1>
|
||||
@@ -28,7 +36,7 @@ defineEmits<{ back: [] }>()
|
||||
</div>
|
||||
<span class="overseas-detail-status" :class="{ 'is-live': !pending }" role="status">{{ statusText }}</span>
|
||||
</header>
|
||||
|
||||
<slot name="overview" />
|
||||
<ContractPendingNotice v-if="pending" :domain="domain" />
|
||||
<slot />
|
||||
</AdminPage>
|
||||
@@ -37,17 +45,11 @@ defineEmits<{ back: [] }>()
|
||||
<style scoped>
|
||||
.overseas-detail-page { min-width: 0; }
|
||||
.overseas-detail-head { display: flex; min-height: 44px; align-items: center; gap: 12px; }
|
||||
.overseas-detail-title { min-width: 0; flex: 1; }
|
||||
.overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
|
||||
.overseas-detail-title p { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
|
||||
.overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
|
||||
.overseas-detail-head .overseas-detail-title { min-width: 0; flex: 1; }
|
||||
.overseas-detail-head .overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
|
||||
.overseas-detail-head .overseas-detail-title p { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
|
||||
.overseas-detail-head .overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
|
||||
.overseas-detail-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 10px; border: 1px solid #f3d19e; border-radius: 999px; background: #fdf6ec; color: #b88230; font-size: 12px; font-weight: 600; white-space: nowrap; }
|
||||
.overseas-detail-status.is-live { border-color: var(--el-color-success-light-7); background: var(--el-color-success-light-9); color: var(--el-color-success-dark-2); }
|
||||
.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); gap: 0; }
|
||||
.admin-density .overseas-detail-head { padding: var(--admin-space-3) var(--admin-space-5); gap: var(--admin-space-5); border-bottom: 1px solid var(--cc-border); flex-wrap: wrap; }
|
||||
.admin-density .overseas-detail-title { display: flex; flex: 0 1 auto; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-5); }
|
||||
.admin-density .overseas-detail-title h1 { font-size: var(--admin-font-section); font-weight: 500; }
|
||||
.admin-density .overseas-detail-title p { margin: 0; font-size: var(--admin-font-caption); }
|
||||
.admin-density .overseas-detail-title strong { font-size: var(--admin-font-title); overflow-wrap: anywhere; }
|
||||
.admin-density .overseas-detail-status { font-size: var(--admin-font-caption); }
|
||||
.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); gap: 0; }
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@ const component = (name: string) => readFileSync(resolve(process.cwd(), 'src/mod
|
||||
describe('overseas warehouse 1920px layout acceptance', () => {
|
||||
it('keeps action columns first and wide enough for every visible action', () => {
|
||||
const widths: Record<string, number> = {
|
||||
'LastMileOrdersView.vue': 230,
|
||||
'LastMileOrdersView.vue': 330,
|
||||
'InboundOrdersView.vue': 300,
|
||||
'DispatchesView.vue': 380,
|
||||
'OutboundsView.vue': 180,
|
||||
|
||||
@@ -7,7 +7,7 @@ import QueryToolbar, { type QueryModel } from '@/shared/components/QueryToolbar.
|
||||
import { cancelDispatch, getDispatchBolPdf, listDispatches, removeDispatchItem, transferDispatchToDelivery, updateDispatch } from '../api/dispatches'
|
||||
import DispatchesView from './DispatchesView.vue'
|
||||
|
||||
const canPermission = vi.hoisted(() => vi.fn(() => true))
|
||||
const canPermission = vi.hoisted(() => vi.fn<(permissionCode: string) => boolean>(() => true))
|
||||
vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: canPermission }) }))
|
||||
vi.mock('../api/dispatches', () => ({ listDispatches: vi.fn(), removeDispatchItem: vi.fn(), getDispatchBolPdf: vi.fn(), updateDispatch: vi.fn(), cancelDispatch: vi.fn(), transferDispatchToDelivery: vi.fn() }))
|
||||
|
||||
@@ -54,6 +54,23 @@ describe('DispatchesView', () => {
|
||||
canPermission.mockReset().mockReturnValue(true)
|
||||
})
|
||||
|
||||
|
||||
it.each([
|
||||
[[], ['查看', '打印BOL'], false],
|
||||
[['edit'], ['查看', '打印BOL', '编辑'], false],
|
||||
[['cancel'], ['查看', '打印BOL', '取消'], false],
|
||||
[['transfer-delivery'], ['查看', '打印BOL', '转派送'], false],
|
||||
[['edit', 'cancel'], ['查看', '打印BOL', '编辑', '更多'], true],
|
||||
[['edit', 'cancel', 'transfer-delivery'], ['查看', '打印BOL', '编辑', '更多'], true],
|
||||
])('uses the row action threshold for permissions %j', async (allowed, labels, overflow) => {
|
||||
canPermission.mockImplementation(code => allowed.some(action => code === 'platform:overseas-warehouse:dispatch:' + action))
|
||||
const wrapper = mount(DispatchesView, { global: { plugins: [ElementPlus] } })
|
||||
await flushPromises()
|
||||
const actions = wrapper.get('.el-table__body-wrapper .density-actions')
|
||||
expect(actions.findAll('button').map(button => button.text().trim())).toEqual(labels)
|
||||
expect(actions.find('.el-dropdown').exists()).toBe(overflow)
|
||||
})
|
||||
|
||||
it('loads immediately and sends only supported page filters', async () => {
|
||||
const wrapper = mount(DispatchesView, { global: { plugins: [ElementPlus] } })
|
||||
await flushPromises()
|
||||
|
||||
@@ -341,6 +341,9 @@ async function openBol(row: DispatchListItem) {
|
||||
bolLoadingNo.value = ''
|
||||
}
|
||||
}
|
||||
function rowActionCount(row: DispatchListItem) {
|
||||
return 2 + Number(canEdit(row)) + Number(canTransfer(row)) + Number(canCancel(row))
|
||||
}
|
||||
function isPendingDeparture(row: DispatchListItem) {
|
||||
return row.statusCode === 'PENDING_DEPARTURE'
|
||||
}
|
||||
@@ -557,7 +560,7 @@ onMounted(load)
|
||||
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" :loading="loading" ariaLabel="排车列表筛选" preference-key="overseas-dispatches-query" :search-on-reset="false" @search="search" @reset="reset" /></template>
|
||||
<template v-if="loadError" #state><LoadErrorState title="排车列表加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template>
|
||||
<section v-if="!loadError" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-dispatches" row-key="id" empty-text="暂无排车记录" @update:page="load()" @update:page-size="page = 1; load()">
|
||||
<template #actions="{ row }"><div class="density-actions"><el-button class="density-action" data-tone="neutral" size="small" @click="openDetail(row as DispatchListItem)">查看</el-button><el-button class="density-action" data-tone="neutral" size="small" :loading="bolLoadingNo === (row as DispatchListItem).dispatchNo" @click="openBol(row as DispatchListItem)">打印BOL</el-button><el-button class="density-action" data-tone="success" v-if="canTransfer(row as DispatchListItem)" size="small" @click="openTransfer(row as DispatchListItem)">转派送</el-button><el-dropdown v-if="canEdit(row as DispatchListItem) || canCancel(row as DispatchListItem)" trigger="click" @command="handleMore(String($event), row as DispatchListItem)"><el-button class="density-action" :aria-label="`更多操作 · ${row.orderNo || row.dispatchNo || '当前记录'}`" title="更多操作" data-tone="neutral" size="small" ><MoreHorizontal aria-hidden="true" :size="15" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canEdit(row as DispatchListItem)" command="edit">编辑</el-dropdown-item><el-dropdown-item v-if="canCancel(row as DispatchListItem)" command="cancel" divided>取消</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
|
||||
<template #actions="{ row }"><div class="density-actions"><el-button class="density-action" data-tone="neutral" size="small" @click="openDetail(row as DispatchListItem)">查看</el-button><el-button class="density-action" data-tone="neutral" size="small" :loading="bolLoadingNo === (row as DispatchListItem).dispatchNo" @click="openBol(row as DispatchListItem)">打印BOL</el-button><el-button class="density-action" data-tone="neutral" v-if="canEdit(row as DispatchListItem)" size="small" @click="handleMore('edit', row as DispatchListItem)">编辑</el-button><el-button class="density-action" data-tone="success" v-if="canTransfer(row as DispatchListItem) && !canEdit(row as DispatchListItem)" size="small" @click="openTransfer(row as DispatchListItem)">转派送</el-button><el-button class="density-action" data-tone="danger" v-if="canCancel(row as DispatchListItem) && rowActionCount(row as DispatchListItem) <= 3" size="small" @click="handleMore('cancel', row as DispatchListItem)">取消</el-button><el-dropdown v-if="rowActionCount(row as DispatchListItem) > 3" trigger="click" @command="handleMore(String($event), row as DispatchListItem)"><el-button class="density-action" :aria-label="`更多操作 · ${row.orderNo || row.dispatchNo || '当前记录'}`" title="更多操作" data-tone="neutral" size="small" ><MoreHorizontal aria-hidden="true" :size="15" />更多</el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canTransfer(row as DispatchListItem) && canEdit(row as DispatchListItem)" @click="openTransfer(row as DispatchListItem)">转派送</el-dropdown-item><el-dropdown-item v-if="canCancel(row as DispatchListItem)" command="cancel" divided>取消</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
|
||||
<template #status="{ row }"><StatusBadge :status="String((row as DispatchListItem).status || '—')" /></template>
|
||||
<template #pagination-left>共 {{ total }} 条排车记录</template>
|
||||
</DataTable></section>
|
||||
|
||||
@@ -64,7 +64,7 @@ describe('inventory customer-name snapshots', () => {
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('华远贸易')
|
||||
expect(wrapper.text()).toContain('洛杉矶仓')
|
||||
expect(wrapper.find('.overseas-detail-title p').text()).toBe(`入库单号 / 入仓码 / SKU ${balance.inboundOrderNo} / ${balance.inboundCode} / ${balance.skuCode}`)
|
||||
expect(wrapper.find('.density-detail-title').text()).toBe(`${balance.inboundOrderNo} / ${balance.inboundCode} / ${balance.skuCode}`)
|
||||
expect(wrapper.text()).toContain('美本土散板')
|
||||
expect(wrapper.text()).not.toContain('美本土散版')
|
||||
expect(wrapper.text()).not.toContain('ONT8目的仓')
|
||||
@@ -78,7 +78,7 @@ describe('inventory customer-name snapshots', () => {
|
||||
routing.route.query = { inboundCode: balance.inboundCode }
|
||||
const inboundCodeWrapper = mount(InventoryDetailView, { attachTo: document.body, global: { plugins: [createPinia(), ElementPlus] } })
|
||||
await flushPromises()
|
||||
expect(inboundCodeWrapper.find('.overseas-detail-title p').text()).toBe(`入仓码 ${balance.inboundCode}`)
|
||||
expect(inboundCodeWrapper.find('.density-detail-title').text()).toBe(`${balance.inboundCode}`)
|
||||
expect(inboundCodeWrapper.text()).not.toContain(balance.id)
|
||||
|
||||
inboundCodeWrapper.unmount()
|
||||
@@ -86,7 +86,7 @@ describe('inventory customer-name snapshots', () => {
|
||||
routing.route.query = {}
|
||||
const emptyWrapper = mount(InventoryDetailView, { attachTo: document.body, global: { plugins: [createPinia(), ElementPlus] } })
|
||||
await flushPromises()
|
||||
expect(emptyWrapper.find('.overseas-detail-title p').text()).toBe('业务标识 —')
|
||||
expect(emptyWrapper.find('.density-detail-title').text()).toBe('—')
|
||||
expect(emptyWrapper.text()).not.toContain(balance.id)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import ElementPlus from 'element-plus'
|
||||
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { getLastMileOrder } from '../api/lastMileOrders'
|
||||
import LastMileOrderDetailView from './LastMileOrderDetailView.vue'
|
||||
|
||||
const push = vi.hoisted(() => vi.fn())
|
||||
vi.mock('vue-router', () => ({ useRoute: () => ({ params: { orderId: 'internal-order-id' } }), useRouter: () => ({ push }) }))
|
||||
vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: () => false }) }))
|
||||
vi.mock('../api/lastMileOrders', () => ({ getLastMileOrder: vi.fn(), createLastMileOrderFee: vi.fn() }))
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
describe('LastMileOrderDetailView domestic detail alignment', () => {
|
||||
beforeEach(() => {
|
||||
push.mockReset()
|
||||
vi.mocked(getLastMileOrder).mockResolvedValue({
|
||||
order: { id: 'internal-order-id', customerId: 'customer-1', orderNo: 'FL-WH-001', currentStatus: 'PENDING_ASSIGNMENT', customerName: '示例客户', overseasWarehouseName: '洛杉矶仓', packageCount: 0, palletCount: 2, volumeCbm: 6.374, inboundCode: 'IN-001', containerNo: 'CONT-001', customerRemark: '完整保留客户备注', updatedAt: '2026-09-14T10:00:00' },
|
||||
cargo: [{ id: 'cargo-1', skuCode: 'SKU-001', productNameZh: '测试货物' }], fees: [], statusHistory: [], operationHistory: [],
|
||||
})
|
||||
})
|
||||
|
||||
it('shows one business heading, a semantic status and summary without losing basic fields', async () => {
|
||||
const wrapper = mount(LastMileOrderDetailView, { global: { plugins: [ElementPlus] } })
|
||||
await flushPromises()
|
||||
expect(wrapper.findAll('h1')).toHaveLength(1)
|
||||
expect(wrapper.get('h1').text()).toBe('FL-WH-001')
|
||||
const header = wrapper.get('.density-detail-header')
|
||||
expect(header.text()).not.toContain('尾程订单详情')
|
||||
expect(header.text()).not.toContain('尾程单号')
|
||||
expect(header.get('.status-badge').classes()).toContain('is-warning')
|
||||
expect(header.get('.order-reference-text__copy').classes()).toContain('is-text')
|
||||
const summary = wrapper.get('[aria-label="尾程订单概览"]')
|
||||
expect(summary.findAll('dd').map(item => item.text())).toEqual(['示例客户', '洛杉矶仓', '0 箱', '2 托', '6.374 m³', expect.stringContaining('2026-09-14')])
|
||||
const fields = wrapper.get('dl[aria-label="基本信息"]')
|
||||
expect(fields.findAll('dt')).toHaveLength(19)
|
||||
expect(fields.text()).toContain('CONT-001')
|
||||
expect(fields.text()).toContain('完整保留客户备注')
|
||||
expect(fields.findAll('.wide')).toHaveLength(2)
|
||||
expect(wrapper.text()).not.toContain('internal-order-id')
|
||||
await header.get('.density-back').trigger('click')
|
||||
expect(push).toHaveBeenCalledWith({ name: 'overseas-last-mile-orders' })
|
||||
})
|
||||
|
||||
it('keeps all five tab panels reachable after applying the shared tab style', async () => {
|
||||
const wrapper = mount(LastMileOrderDetailView, { global: { plugins: [ElementPlus] } })
|
||||
await flushPromises()
|
||||
const tabs = wrapper.findAll('[role="tab"]')
|
||||
expect(tabs.map(tab => tab.text())).toEqual(['📋基本信息', '📦货物信息', '🗓️计划信息', '💰费用明细', '📝操作记录'])
|
||||
for (const [index, tab] of tabs.entries()) {
|
||||
await tab.trigger('click')
|
||||
await flushPromises()
|
||||
expect(tab.attributes('aria-selected')).toBe('true')
|
||||
const panel = wrapper.findAll('[role="tabpanel"]')[index]!
|
||||
expect(panel.isVisible()).toBe(true)
|
||||
if (index === 1) expect(panel.text()).toContain('SKU-001')
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -18,7 +18,7 @@ import { overseasWarehousePermissions as permission } from '../permissions'
|
||||
import OverseasDetailShell from '../components/OverseasDetailShell.vue'
|
||||
import OrderReferenceText from '../components/OrderReferenceText.vue'
|
||||
|
||||
interface DetailField { label: string; value: string | number }
|
||||
interface DetailField { label: string; value: string | number; wide?: boolean }
|
||||
interface CargoRow { id: string; sku: string; productName: string; pallets: number; cartons: number; quantity: number; weight: number; volume: number }
|
||||
interface DocumentRow { type: string; number: string; createdAt: string; quote: string }
|
||||
interface FeeRow { id: string; item: string; currency: string; amount: string; status: string; description: string }
|
||||
@@ -65,8 +65,8 @@ const orderFields = computed<DetailField[]>(() => {
|
||||
{ label: '目的仓', value: text(order?.fbaWarehouseCode || order?.transferWarehouseName) },
|
||||
{ label: '是否暂扣', value: yesNo(order?.detained) },
|
||||
{ label: '是否异常', value: yesNo(order?.abnormal) },
|
||||
{ label: '异常原因', value: order?.abnormal ? text(order.subOrderStatus) : '—' },
|
||||
{ label: '备注（客户）', value: text(order?.customerRemark) },
|
||||
{ label: '异常原因', wide: true, value: order?.abnormal ? text(order.subOrderStatus) : '—' },
|
||||
{ label: '备注（客户）', wide: true, value: text(order?.customerRemark) },
|
||||
]
|
||||
})
|
||||
const containerFields = computed<DetailField[]>(() => {
|
||||
@@ -83,6 +83,18 @@ const containerFields = computed<DetailField[]>(() => {
|
||||
{ label: '货柜节点', value: containerNodeLabel(order?.containerNode) },
|
||||
]
|
||||
})
|
||||
const basicFields = computed(() => [...orderFields.value, ...containerFields.value])
|
||||
const overviewFields = computed(() => {
|
||||
const order = detail.value?.order
|
||||
return [
|
||||
{ label: '客户', value: text(order?.customerName) },
|
||||
{ label: '海外仓', value: text(order?.overseasWarehouseName) },
|
||||
{ label: '总箱数', value: order?.packageCount == null ? '—' : order.packageCount + ' 箱' },
|
||||
{ label: '总托数', value: order?.palletCount == null ? '—' : order.palletCount + ' 托' },
|
||||
{ label: '体积', value: order?.volumeCbm == null ? '—' : order.volumeCbm + ' m³' },
|
||||
{ label: '最近更新', value: formatOverseasDateTime(order?.updatedAt) },
|
||||
]
|
||||
})
|
||||
const planFields = computed<DetailField[]>(() => {
|
||||
const order = detail.value?.order
|
||||
return [
|
||||
@@ -171,16 +183,20 @@ onMounted(load)
|
||||
|
||||
<template>
|
||||
<OverseasDetailShell class="admin-density" dense title="尾程订单详情" reference-label="尾程单号" :reference-value="referenceValue" back-label="返回尾程订单" domain="尾程订单详情" :pending="false" :status-text="detail ? lastMileStatusLabel(detail.order.currentStatus) : '加载中'" @back="back">
|
||||
<template #reference><OrderReferenceText :value="referenceValue" copyable /></template>
|
||||
<template #reference><OrderReferenceText :value="referenceValue" copyable compact /></template>
|
||||
<template #overview>
|
||||
<dl v-if="detail" class="density-detail-overview" aria-label="尾程订单概览">
|
||||
<div v-for="field in overviewFields" :key="field.label"><dt>{{ field.label }}</dt><dd>{{ field.value }}</dd></div>
|
||||
</dl>
|
||||
</template>
|
||||
<OperationErrorToast :details="mutationError" />
|
||||
<LoadErrorState v-if="loadError" title="尾程订单详情加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
|
||||
<section v-else v-loading="loading" class="detail-surface" :aria-busy="loading">
|
||||
<el-tabs v-model="activeTab" class="detail-tabs density-element-tabs density-contained-tabs">
|
||||
<el-tab-pane name="basic"><template #label><span class="density-tab-icon" aria-hidden="true">📋</span><span>基本信息</span></template>
|
||||
<div class="basic-grid">
|
||||
<section class="info-panel"><h2>订单信息</h2><dl class="detail-fields density-fields"><div v-for="field in orderFields" :key="field.label"><dt>{{ field.label }}</dt><dd :class="{ 'detail-field-value--business': isSingleLineBusinessField(field) }" :title="isSingleLineBusinessField(field) ? String(field.value) : undefined">{{ field.value }}</dd></div></dl></section>
|
||||
<section class="info-panel"><h2>货柜信息</h2><dl class="detail-fields density-fields"><div v-for="field in containerFields" :key="field.label"><dt>{{ field.label }}</dt><dd :class="{ 'detail-field-value--business': isSingleLineBusinessField(field) }" :title="isSingleLineBusinessField(field) ? String(field.value) : undefined">{{ field.value }}</dd></div></dl></section>
|
||||
</div>
|
||||
<dl class="detail-fields density-fields" aria-label="基本信息">
|
||||
<div v-for="field in basicFields" :key="field.label" :class="{ wide: field.wide }"><dt>{{ field.label }}</dt><dd :class="{ 'detail-field-value--business': isSingleLineBusinessField(field) }" :title="isSingleLineBusinessField(field) ? String(field.value) : undefined">{{ field.value }}</dd></div>
|
||||
</dl>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="cargo"><template #label><span class="density-tab-icon" aria-hidden="true">📦</span><span>货物信息</span></template><section class="table-panel"><DataTable :data="cargo" :columns="cargoColumns" column-settings-mode="hide" row-key="id" empty-text="暂无货物明细"></DataTable></section></el-tab-pane>
|
||||
<el-tab-pane name="plan"><template #label><span class="density-tab-icon" aria-hidden="true">🗓️</span><span>计划信息</span></template>
|
||||
@@ -207,6 +223,7 @@ onMounted(load)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-fields > div.wide { grid-column: span 2; }
|
||||
.detail-field-value--business { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.plan-panel { margin-bottom: var(--admin-space-5); }
|
||||
.related-panel { margin-top: var(--admin-space-5); }
|
||||
@@ -214,11 +231,10 @@ onMounted(load)
|
||||
.fee-form-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--admin-space-5); }
|
||||
.fee-form-full { grid-column: 1 / -1; }
|
||||
.fee-form :deep(.el-select), .fee-form :deep(.el-input-number) { width: 100%; }
|
||||
@media (max-width: 1100px) { .basic-grid { grid-template-columns: 1fr; } .plan-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 720px) { .detail-tabs :deep(.el-tabs__header) { padding: 0 10px; } .detail-tabs :deep(.el-tabs__content) { padding: 12px; } .detail-tabs :deep(.el-tabs__item) { padding: 0 12px; } .detail-fields, .plan-fields, .fee-form-grid { grid-template-columns: 1fr; } .fee-form-full { grid-column: auto; } }
|
||||
@media (max-width: 1100px) { .plan-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 720px) { .detail-tabs :deep(.el-tabs__header) { padding: 0 10px; } .detail-tabs :deep(.el-tabs__content) { padding: 12px; } .detail-tabs :deep(.el-tabs__item) { padding: 0 12px; } .detail-fields, .plan-fields, .fee-form-grid { grid-template-columns: 1fr; } .fee-form-full, .detail-fields > div.wide { grid-column: auto; } }
|
||||
|
||||
.detail-surface { min-width: 0; min-height: 0; margin-top: 0; border: 0; border-radius: 0; background: #fff; overflow: hidden; }
|
||||
.basic-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--admin-space-5); }
|
||||
.info-panel, .table-panel { min-width: 0; border: 0; border-radius: 0; background: #fff; overflow: hidden; }
|
||||
.info-panel h2, .table-panel h2 { margin: 0; padding: 0 0 var(--admin-space-3); border-bottom: 0; color: var(--cc-text); font-size: var(--admin-font-section); }
|
||||
.table-panel :deep(.data-table__toolbar) { min-height: 0; }
|
||||
|
||||
@@ -158,6 +158,20 @@ async function chooseContainer(wrapper: Awaited<ReturnType<typeof mountView>>) {
|
||||
}
|
||||
|
||||
describe('LastMileOrdersView pending order and container conversion', () => {
|
||||
it.each([
|
||||
[[], ['查看'], false],
|
||||
[['inbound-order:create'], ['查看', '填写入库计划'], false],
|
||||
[['last-mile-order:edit'], ['查看', '暂扣订单', '人工修改节点'], false],
|
||||
[['inbound-order:create', 'last-mile-order:edit'], ['查看', '填写入库计划', '更多'], true],
|
||||
])('only collapses row actions above three for %j', async (allowed, labels, overflow) => {
|
||||
canAccess.mockImplementation(code => allowed.some(action => code === 'platform:overseas-warehouse:' + action))
|
||||
vi.mocked(listLastMileOrders).mockResolvedValue({ records: [{ id: 'order-1', customerId, orderNo: 'LM-1', currentStatus: 'PENDING_ASSIGNMENT', orderType: 'FIRST_LEG' }], page: 1, size: 10, total: 1, pages: 1 })
|
||||
const wrapper = await mountView()
|
||||
const actions = wrapper.get('.el-table__body-wrapper .row-actions')
|
||||
expect(actions.findAll('button').map(button => button.text().trim())).toEqual(labels)
|
||||
expect(actions.find('.el-dropdown').exists()).toBe(overflow)
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
canAccess.mockReset().mockReturnValue(true)
|
||||
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
|
||||
@@ -656,7 +670,7 @@ describe('LastMileOrdersView pending order and container conversion', () => {
|
||||
expect(source).toContain('.container-detail-summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }')
|
||||
expect(source).toContain('.container-workbench-card__warehouse strong { min-width: 0; overflow: hidden; color: var(--cc-text); font-size: var(--admin-font-section); text-overflow: ellipsis; white-space: nowrap; }')
|
||||
expect(source).toContain('.container-workbench-card__actions { display: flex; justify-content: flex-end; padding-top: 2px; white-space: nowrap; }')
|
||||
expect(source).toContain("{ key: 'actions', label: '操作', width: 230, fixed: 'left'")
|
||||
expect(source).toContain("{ key: 'actions', label: '操作', width: 330, fixed: 'left'")
|
||||
})
|
||||
|
||||
it('loads only active FBA master data and submits exact string fields for a cross-customer transfer', async () => {
|
||||
|
||||
@@ -196,7 +196,7 @@ function newReceivingWarehouseIdempotencyKey() {
|
||||
return `container-receiving-warehouse-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
|
||||
}
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 230, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'actions', label: '操作', width: 330, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'selection', type: 'selection', width: 48, fixed: 'left' },
|
||||
{ key: 'orderNo', prop: 'orderNo', label: '尾程单号', minWidth: 170, slotName: 'orderNo' },
|
||||
{ key: 'consolidated', prop: 'consolidated', label: '合托标记', width: 100, hideable: false },
|
||||
@@ -765,6 +765,13 @@ watch(containerConvertOpen, (open) => {
|
||||
containerConversionIdempotencyKey = ''
|
||||
})
|
||||
|
||||
function rowActionCount(source: object) {
|
||||
const row = source as LastMileOrderListItem
|
||||
return 1
|
||||
+ Number(access.can(permission.warehouseTransferApprove) && row.orderTypeCode === 'WAREHOUSE_TRANSFER' && row.currentStatusCode === 'PENDING_REVIEW')
|
||||
+ Number(access.can(permission.inboundOrderCreate))
|
||||
+ (access.can(permission.lastMileOrderTransfer) ? 2 : 0)
|
||||
}
|
||||
function openDetail(source: object) {
|
||||
const row = source as LastMileOrderListItem
|
||||
void router.push({ name: 'overseas-last-mile-order-detail', params: { orderId: row.id } })
|
||||
@@ -837,7 +844,7 @@ onMounted(() => { void load() })
|
||||
</section>
|
||||
<section v-else-if="!loadError" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-last-mile-orders" row-key="id" empty-text="暂无尾程订单" @selection-change="onSelectionChange" @update:page="load()" @update:page-size="page = 1; load()">
|
||||
<template #toolbar-actions><el-button v-if="access.can(permission.lastMileOrderExport)" plain :loading="exportLoading" @click="exportOrders"><Download :size="16" />导出订单</el-button><el-button v-if="access.can(permission.lastMileOrderTransfer)" plain :disabled="!selectedRows.length || actionLoading" @click="openTransfer">转仓</el-button><el-button v-if="access.can(permission.inboundOrderCreate)" type="primary" plain :disabled="selectedRows.length !== 1 || actionLoading" @click="openInboundPlan()">生成入库计划</el-button><el-button v-if="statusTab === '待分配' && access.can(permission.inboundOrderCreate)" type="primary" :disabled="actionLoading" @click="openContainerConversion">按柜批量生成</el-button></template>
|
||||
<template #actions="{ row }"><div class="row-actions density-actions"><el-button class="density-action" data-tone="neutral" size="small" @click="openDetail(row)">查看</el-button><el-button class="density-action" data-tone="warning" v-if="access.can(permission.warehouseTransferApprove) && row.orderTypeCode === 'WAREHOUSE_TRANSFER' && row.currentStatusCode === 'PENDING_REVIEW'" size="small" @click="openTransferReview(row)">审核</el-button><el-dropdown v-if="access.can(permission.lastMileOrderTransfer) || access.can(permission.inboundOrderCreate)" trigger="click"><el-button class="density-action" :aria-label="`更多操作 · ${row.orderNo || row.dispatchNo || '当前记录'}`" title="更多操作" data-tone="neutral" size="small" ><MoreHorizontal aria-hidden="true" :size="15" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="access.can(permission.inboundOrderCreate)" :disabled="row.detained" @click="openInboundPlan(row)">填写入库计划</el-dropdown-item><el-dropdown-item v-if="access.can(permission.lastMileOrderTransfer)" @click="openHold(row)">{{ row.detained ? '解除暂扣' : '暂扣订单' }}</el-dropdown-item><el-dropdown-item v-if="access.can(permission.lastMileOrderTransfer)" @click="openManualNodes(row)">人工修改节点</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
|
||||
<template #actions="{ row }"><div class="row-actions density-actions"><el-button class="density-action" data-tone="neutral" size="small" @click="openDetail(row)">查看</el-button><el-button class="density-action" data-tone="warning" v-if="access.can(permission.warehouseTransferApprove) && row.orderTypeCode === 'WAREHOUSE_TRANSFER' && row.currentStatusCode === 'PENDING_REVIEW'" size="small" @click="openTransferReview(row)">审核</el-button><el-button class="density-action" data-tone="neutral" v-if="access.can(permission.inboundOrderCreate)" :disabled="row.detained" size="small" @click="openInboundPlan(row)">填写入库计划</el-button><template v-if="rowActionCount(row) <= 3 && access.can(permission.lastMileOrderTransfer)"><el-button class="density-action" data-tone="warning" size="small" @click="openHold(row)">{{ row.detained ? '解除暂扣' : '暂扣订单' }}</el-button><el-button class="density-action" data-tone="neutral" size="small" @click="openManualNodes(row)">人工修改节点</el-button></template><el-dropdown v-if="rowActionCount(row) > 3" trigger="click"><el-button class="density-action" :aria-label="`更多操作 · ${row.orderNo || row.dispatchNo || '当前记录'}`" title="更多操作" data-tone="neutral" size="small" ><MoreHorizontal aria-hidden="true" :size="15" />更多</el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="access.can(permission.lastMileOrderTransfer)" @click="openHold(row)">{{ row.detained ? '解除暂扣' : '暂扣订单' }}</el-dropdown-item><el-dropdown-item v-if="access.can(permission.lastMileOrderTransfer)" @click="openManualNodes(row)">人工修改节点</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
|
||||
<template #orderNo="{ row }"><OrderReferenceText :value="String(row.orderNo || '')" copyable /></template>
|
||||
<template #pagination-left>共 {{ total }} 条尾程订单 · 已选 {{ selectedRows.length }} 条</template>
|
||||
</DataTable></section>
|
||||
|
||||
@@ -144,7 +144,7 @@ describe('overseas warehouse first-batch prototype contract', () => {
|
||||
const detail = source('LastMileOrderDetailView.vue')
|
||||
expect(list).toContain('<OrderReferenceText :value="String(row.orderNo || \'\')" copyable />')
|
||||
expect(detail).toContain('lastMileOrderReference(detail.value?.order.orderNo')
|
||||
expect(detail).toContain('<OrderReferenceText :value="referenceValue" copyable />')
|
||||
expect(detail).toContain('<OrderReferenceText :value="referenceValue" copyable compact />')
|
||||
expect(list).not.toMatch(/padStart|LMO-\$\{|slice\([^)]*orderNo/)
|
||||
expect(detail).not.toMatch(/padStart|LMO-\$\{|slice\([^)]*orderNo/)
|
||||
})
|
||||
@@ -159,7 +159,7 @@ describe('overseas warehouse first-batch prototype contract', () => {
|
||||
expect(tailLeg).toContain('<span>操作记录</span>')
|
||||
expect(tailLeg).toContain('title="新增费用"')
|
||||
expect(tailLeg).toContain('lastMileOrderReference(detail.value?.order.orderNo')
|
||||
expect(tailLeg).toContain('<OrderReferenceText :value="referenceValue" copyable />')
|
||||
expect(tailLeg).toContain('<OrderReferenceText :value="referenceValue" copyable compact />')
|
||||
const inbound = source('InboundOrderDetailView.vue')
|
||||
expect(inbound).toContain('getInboundPlan')
|
||||
expect(inbound).not.toContain('detail.value?.sourceOrderId')
|
||||
|
||||
@@ -563,7 +563,7 @@ describe('UnifiedOrdersView contract', () => {
|
||||
|
||||
it('renders order detail as a routed full page instead of a drawer', () => {
|
||||
expect(source).toContain('<template v-if="isDetailRoute">')
|
||||
expect(source).toContain('class="order-detail-header"')
|
||||
expect(source).toContain('class="order-detail-header density-detail-header"')
|
||||
expect(source).toContain('aria-label="订单详情模块"')
|
||||
expect(source).toContain("{ key: 'basic', label: '基本信息'")
|
||||
expect(source).toContain("{ key: 'measurement', label: '测量数据'")
|
||||
|
||||
@@ -2215,11 +2215,11 @@ onBeforeUnmount(() => {
|
||||
</AppDialog>
|
||||
<template v-if="isDetailRoute">
|
||||
<DetailPageLayout ariaLabel="统一订单详情">
|
||||
<header class="order-detail-header">
|
||||
<div class="order-detail-heading">
|
||||
<header class="order-detail-header density-detail-header">
|
||||
<div class="order-detail-heading density-detail-heading">
|
||||
<el-button link class="back-button density-back" @click="fromMeasurementReview ? returnToMeasurementReviews() : closeDetail()"><ArrowLeft :size="16" />{{ fromMeasurementReview ? '返回测量审核列表' : '返回列表' }}</el-button>
|
||||
<div class="order-title">
|
||||
<h1>{{ detail?.summary.inboundCode || '入仓码暂缺' }}</h1>
|
||||
<h1 class="density-detail-title">{{ detail?.summary.inboundCode || '入仓码暂缺' }}</h1>
|
||||
</div>
|
||||
<StatusBadge v-if="detail" :status="statusLabel(detail.summary.mainStatus)" />
|
||||
</div>
|
||||
@@ -2235,7 +2235,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<div v-else v-loading="detailLoading" class="order-detail-content">
|
||||
<template v-if="detail">
|
||||
<dl class="detail-overview" aria-label="订单概览">
|
||||
<dl class="detail-overview density-detail-overview" aria-label="订单概览">
|
||||
<div><dt>客户</dt><dd>{{ customerName(detail.summary) }}</dd></div>
|
||||
<div><dt>渠道</dt><dd>{{ detail.summary.channelName || '未配置渠道' }}</dd></div>
|
||||
<div><dt>总箱数</dt><dd>{{ detail.summary.totalPackageCount ?? '—' }} 箱 <small>（{{ detail.order.cargoes.length }} 条货品）</small></dd></div>
|
||||
@@ -2802,10 +2802,6 @@ onBeforeUnmount(() => {
|
||||
<style scoped>
|
||||
.detail-tabs { border: 1px solid var(--cc-border); border-block: 0; }
|
||||
|
||||
.detail-overview > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
|
||||
.detail-overview dt { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.detail-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
||||
.detail-overview small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.panel-title > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-1, 4px) var(--admin-space-5, 12px); }
|
||||
.compact-empty { margin: 0; padding: 14px var(--admin-space-4, 10px); color: var(--cc-muted); text-align: center; font-size: var(--admin-font-body, 13px); }
|
||||
.approval-facts { margin: 0; border-top: 1px solid var(--cc-border); }
|
||||
@@ -2886,16 +2882,16 @@ onBeforeUnmount(() => {
|
||||
.primary-cell { display: grid; min-width: 0; gap: var(--admin-space-1, 4px); }
|
||||
.primary-cell strong { overflow-wrap: anywhere; }
|
||||
.primary-cell span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); overflow-wrap: anywhere; }
|
||||
.order-detail-header { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); margin-bottom: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); border: 1px solid var(--cc-border); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--admin-surface, #fff); }
|
||||
.order-detail-heading { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4, 10px); }
|
||||
.order-detail-header { border: 1px solid var(--cc-border); border-bottom: 0; border-radius: 4px 4px 0 0; }
|
||||
|
||||
.back-button { flex: 0 0 auto; padding: 0; }
|
||||
.order-title { min-width: 0; }
|
||||
.order-title h1 { margin: 0; color: #172033; font-size: var(--admin-font-title, 16px); line-height: 1.5; overflow-wrap: anywhere; }
|
||||
|
||||
.detail-header-actions { display: flex; flex: 0 0 auto; gap: var(--admin-space-3, 8px); }
|
||||
.detail-header-actions :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
.detail-load-error { min-height: 280px; }
|
||||
.order-detail-content { min-width: 0; }
|
||||
.detail-overview { display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); margin: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); border: 1px solid var(--cc-border); border-top: 0; background: var(--admin-surface, #fff); }
|
||||
.detail-overview { border: 1px solid var(--cc-border); border-top: 0; }
|
||||
.detail-panel { min-width: 0; padding: var(--admin-space-5, 12px); border: 1px solid var(--cc-border); border-radius: 0 0 4px 4px; background: var(--admin-surface, #fff); }
|
||||
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); min-height: var(--admin-action-height, 28px); margin-bottom: var(--admin-space-3, 8px); }
|
||||
.panel-title h2 { margin: 0; color: #344054; font-size: var(--admin-font-section, 14px); font-weight: 600; }
|
||||
|
||||
@@ -5,7 +5,7 @@ const props = defineProps<{ status: string }>()
|
||||
|
||||
const tone = computed(() => {
|
||||
if (['正常', '启用', '已完成', '已审核', '审核通过', '已入库', '装柜完成', '派送完成', '已确认', '已放舱'].includes(props.status)) return 'success'
|
||||
if (['待审核', '草稿', '待处理', '未提交', '未录入', '待测量数据', '待分柜', '变更中'].includes(props.status)) return 'warning'
|
||||
if (['待审核', '草稿', '待处理', '待分配', '未提交', '未录入', '待测量数据', '待分柜', '变更中'].includes(props.status)) return 'warning'
|
||||
if (['已受理', '已订舱', '已提交', '运输中', '处理中', '装柜中'].includes(props.status)) return 'info'
|
||||
if (['停用', '已取消', '已驳回', '审核驳回', '失败', '订舱失败'].includes(props.status)) return 'danger'
|
||||
return 'neutral'
|
||||
|
||||
+26
-11
@@ -99,6 +99,16 @@
|
||||
:is(.admin-density, .admin-density-dialog) .el-button.density-action:disabled { color: var(--el-button-disabled-text-color); border-color: var(--el-button-disabled-border-color); background: var(--admin-surface); }
|
||||
:is(.admin-density, .admin-density-dialog) .el-button.density-action:focus-visible { outline: 2px solid var(--action-color); outline-offset: 2px; }
|
||||
|
||||
/* Detail headings and summaries shared by domestic and overseas pages. */
|
||||
.admin-density .density-detail-header { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); margin-bottom: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
|
||||
.admin-density .density-detail-heading { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4, 10px); }
|
||||
.admin-density .density-detail-title { min-width: 0; margin: 0; color: #172033; font-size: var(--admin-font-title, 16px); line-height: 1.5; overflow-wrap: anywhere; }
|
||||
.admin-density .density-detail-overview { border-bottom: 1px solid var(--cc-border); display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); margin: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
|
||||
.admin-density .density-detail-overview > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
|
||||
.admin-density .density-detail-overview dt { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.admin-density .density-detail-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
||||
.admin-density .density-detail-overview small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
|
||||
/* Back navigation stays in the detail heading, beside its business identifier. */
|
||||
.admin-density .el-button.density-back { height: var(--admin-control-height); padding: 0; border: 0; background: transparent; color: var(--cc-muted); font-size: var(--admin-font-body); font-weight: 400; box-shadow: none; }
|
||||
.admin-density .el-button.density-back:hover { color: var(--cc-primary); background: transparent; }
|
||||
@@ -106,12 +116,18 @@
|
||||
|
||||
/* Navigation tabs shared by customer/order details. Layout-specific borders stay local. */
|
||||
.admin-density .density-tabs { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; background: var(--admin-surface); scrollbar-width: thin; }
|
||||
.admin-density .density-tabs > button { position: relative; display: inline-flex; min-width: max-content; height: var(--admin-tab-height); min-height: var(--admin-tab-height); flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--admin-space-2); padding: 0 var(--admin-space-6); border: 0; background: transparent; color: #475467; font-size: var(--admin-font-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
|
||||
.admin-density .density-tabs > button::after { position: absolute; right: var(--admin-space-5); bottom: 0; left: var(--admin-space-5); height: 2px; background: transparent; content: ''; }
|
||||
.admin-density .density-tabs > button:hover { background: #fafbff; color: #344054; }
|
||||
.admin-density .density-tabs > button.active { background: #f7f8ff; color: var(--cc-primary); font-weight: 600; }
|
||||
.admin-density .density-tabs > button.active::after { background: var(--cc-primary); }
|
||||
.admin-density .density-tabs > button:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
|
||||
.admin-density .density-tabs > button,
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item { position: relative; display: inline-flex; min-width: max-content; height: var(--admin-tab-height); min-height: var(--admin-tab-height); flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--admin-space-2); padding: 0 var(--admin-space-6); border: 0; background: transparent; color: #475467; font-size: var(--admin-font-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
|
||||
.admin-density .density-tabs > button::after,
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item::after { position: absolute; right: var(--admin-space-5); bottom: 0; left: var(--admin-space-5); height: 2px; background: transparent; content: ''; }
|
||||
.admin-density .density-tabs > button:hover,
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:hover { background: #fafbff; color: #344054; }
|
||||
.admin-density .density-tabs > button.active,
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active { background: #f7f8ff; color: var(--cc-primary); font-weight: 600; }
|
||||
.admin-density .density-tabs > button.active::after,
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active::after { background: var(--cc-primary); }
|
||||
.admin-density .density-tabs > button:focus-visible,
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
|
||||
.admin-density .density-tab-icon { display: inline-flex; width: var(--admin-tab-icon-slot); height: var(--admin-tab-icon-slot); flex: 0 0 var(--admin-tab-icon-slot); align-items: center; justify-content: center; font: var(--admin-tab-icon-size)/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
|
||||
|
||||
.admin-density-drawer .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
|
||||
@@ -126,16 +142,15 @@
|
||||
:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); }
|
||||
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
||||
|
||||
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
|
||||
|
||||
/* Element tabs retain their keyboard handling and use the shared detail-tab scale. */
|
||||
.admin-density .density-element-tabs { min-width: 0; background: var(--admin-surface); border-bottom: 1px solid var(--admin-table-border); }
|
||||
.admin-density .density-element-tabs > .el-tabs__header { margin: 0; }
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__item { height: var(--admin-tab-height); padding: 0 var(--admin-space-6); font-size: var(--admin-font-body); font-weight: 500; color: #475467; }
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__item.is-active { color: var(--cc-primary); font-weight: 600; }
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__item:hover { color: var(--cc-primary); }
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__active-bar { background-color: var(--cc-primary); }
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav-wrap::after { height: 1px; background: var(--cc-border); }
|
||||
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__active-bar { display: none; }
|
||||
.admin-density .density-element-tabs:not(.density-contained-tabs) > .el-tabs__content { display: none; }
|
||||
.admin-density .density-contained-tabs > .el-tabs__content { padding: var(--admin-space-5); }
|
||||
.admin-density .density-element-tabs .el-tabs__item { gap: var(--admin-space-2); }
|
||||
|
||||
/* Explicit page descriptions share the teleported detail table scale. */
|
||||
.admin-density .density-descriptions .el-descriptions__label.el-descriptions__cell { width: var(--admin-label-width); font-size: var(--admin-font-caption); background: var(--admin-label-bg); }
|
||||
|
||||
@@ -99,6 +99,23 @@ const cssRoot = (css: string) => {
|
||||
|
||||
describe('approved Admin density ownership', () => {
|
||||
|
||||
it('uses identical authored tab paint for native domestic and Element overseas tabs', () => {
|
||||
const element = '.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item'
|
||||
const rules: string[][] = []
|
||||
cssRoot(shared).walkRules(rule => { rules.push(rule.selectors) })
|
||||
for (const [nativeSuffix, elementSuffix] of [['', ''], ['::after', '::after'], [':hover', ':hover'], ['.active', '.is-active'], ['.active::after', '.is-active::after'], [':focus-visible', ':focus-visible']]) {
|
||||
expect(rules.some(selectors => selectors.includes('.admin-density .density-tabs > button' + nativeSuffix) && selectors.includes(element + elementSuffix))).toBe(true)
|
||||
}
|
||||
const domestic = read('modules/unified-orders/pages/UnifiedOrdersView.vue')
|
||||
const overseasShell = read('modules/overseas-warehouse/components/OverseasDetailShell.vue')
|
||||
for (const className of ['density-detail-header', 'density-detail-heading', 'density-detail-title']) {
|
||||
expect(domestic).toContain(className)
|
||||
expect(overseasShell).toContain(className)
|
||||
}
|
||||
expect(domestic).toContain('density-detail-overview')
|
||||
expect(read('modules/overseas-warehouse/pages/LastMileOrderDetailView.vue')).toContain('density-detail-overview')
|
||||
})
|
||||
|
||||
it('covers all ten overseas warehouse menus, details and both return inventory modes', () => {
|
||||
const navigation = read('core/navigation/adminNavigation.ts')
|
||||
const section = navigation.slice(navigation.indexOf("key: 'overseas-inventory'"), navigation.indexOf("key: 'customer-service'"))
|
||||
|
||||
Reference in New Issue
Block a user