html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): unify inbound fee refresh controls

Browse Source
This commit is contained in:
ouyangxq
2026-09-15 18:16:09 +08:00
parent ccc72be4b9
commit 55576a7c84
6 changed files with 36 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/inbounds/fee/InboundFeePanel.test.ts
+22
View File
@@ -121,6 +121,28 @@ describe('InboundFeePanel', () => {
expect(wrapper.find('.surface-panel').exists()).toBe(false)
})
it('keeps the compact title and refresh action on one heading row', async () => {
const pinia = setupPermissions(['firstleg:fba-pricing:view'])
const wrapper = mount(InboundFeePanel, {
props: { customerId: '10001', inboundId: '88', compact: true, displayOnly: true },
global: { plugins: [pinia, ElementPlus] },
})
await flushPromises()
const heading = wrapper.get('.fee-heading--compact')
expect(heading.get('#inbound-fee-title').text()).toBe('头程自动初算')
expect(heading.find('button[aria-label="刷新费用快照"]').exists()).toBe(true)
})
it('keeps the refresh icon visible and spinning while the snapshot reloads', () => {
const source = readFileSync(resolve(process.cwd(), 'src/modules/inbounds/fee/InboundFeePanel.vue'), 'utf8')
expect(source).toContain('class="fee-refresh-button"')
expect(source).toContain(':aria-busy="loading"')
expect(source).toContain(`<RefreshCw :size="16" :class="{ 'is-spinning': loading }" />`)
expect(source).not.toMatch(/aria-label="刷新费用快照"[^>]*:loading=/)
expect(source).toContain('@keyframes fee-refresh-spin')
})
it('supports a display-only fee snapshot without calculation or transition actions', async () => {
vi.mocked(getLatestInboundFee).mockResolvedValue({ ...snapshot, feeStatus: 'CALCULATED', confirmedAt: null, sentAt: null })
const pinia = setupPermissions([
src/modules/inbounds/fee/InboundFeePanel.vue
+10 -5
View File
@@ -364,7 +364,8 @@ defineExpose({ reload: loadFee })
<template>
<section class="inbound-fee-panel" :aria-busy="loading" aria-labelledby="inbound-fee-title">
<header class="fee-heading" :class="{ 'fee-heading--compact': compact }">
<div v-if="!compact" class="fee-heading-copy">
<h3 v-if="compact" id="inbound-fee-title" class="fee-heading-title--compact">头程自动初算</h3>
<div v-else class="fee-heading-copy">
<span class="fee-heading-icon" aria-hidden="true"><CircleDollarSign :size="20" /></span>
<div>
<h3 id="inbound-fee-title">入库费用快照</h3>
@@ -374,12 +375,13 @@ defineExpose({ reload: loadFee })
<div class="fee-heading-actions">
<el-tooltip content="刷新费用快照" placement="top">
<el-button
class="fee-refresh-button"
circle
aria-label="刷新费用快照"
:loading="loading"
:disabled="!customerContextId || !normalizedInboundId || !canView"
:aria-busy="loading"
:disabled="loading || !customerContextId || !normalizedInboundId || !canView"
@click="loadFee()"
><RefreshCw :size="16" /></el-button>
><RefreshCw :size="16" :class="{ 'is-spinning': loading }" /></el-button>
</el-tooltip>
<el-button
v-if="!displayOnly && canCalculate"
@@ -584,7 +586,8 @@ defineExpose({ reload: loadFee })
<style scoped>
.inbound-fee-panel { min-width: 0; color: var(--cc-text); }
.fee-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.fee-heading--compact { justify-content: flex-end; padding-bottom: 6px; }
.fee-heading--compact { align-items: center; justify-content: space-between; padding: 12px 0 8px; }
.fee-heading h3.fee-heading-title--compact { color: #344054; font-size: var(--admin-font-section, 14px); line-height: 1.4; }
.fee-heading-copy { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
.fee-heading-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; background: #eef4ff; color: var(--cc-primary); }
.fee-heading h3, .section-title h4 { margin: 0; }
@@ -592,6 +595,7 @@ defineExpose({ reload: loadFee })
.fee-heading p, .section-title p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
.fee-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fee-heading-actions .el-button { margin-left: 0; }
.fee-refresh-button .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
.fee-loading { padding: 20px 0; }
.inbound-fee-panel :deep(.el-alert p) { margin: 5px 0 0; line-height: 1.55; }
.inbound-fee-panel :deep(.el-alert .el-button) { margin-top: 8px; }
@@ -605,6 +609,7 @@ defineExpose({ reload: loadFee })
.fee-total strong { color: #0f5c49; font-size: 21px; letter-spacing: -.01em; }
.fee-summary-item strong { font-size: 15px; }
.version-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@keyframes fee-refresh-spin { to { transform: rotate(360deg); } }
.calculation-section, .fee-timeline { padding: 10px 0; border-bottom: 1px solid var(--cc-border); }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.calculation-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
src/modules/unified-orders/components/InboundFeeDetailManager.test.ts
+1
View File
@@ -182,6 +182,7 @@ describe('InboundFeeDetailManager', () => {
})
it('spins only the refresh icon while fee rows are loading', () => {
expect(source).toContain('class="fee-refresh-button" circle aria-label="刷新费用明细"')
expect(source).toContain(':aria-busy="loading" :disabled="loading"')
expect(source).toContain(`<RefreshCw :size="16" :class="{ 'is-spinning': loading }" />`)
expect(source).not.toMatch(/aria-label="刷新费用明细"[^>]*:loading=/)
src/modules/unified-orders/components/InboundFeeDetailManager.vue
+2 -2
View File
@@ -276,7 +276,7 @@ onMounted(() => void load())
<div class="fee-toolbar">
<span>共 {{ rows.length }} 条应收应付费用明细</span>
<div>
<el-tooltip content="刷新费用明细" placement="top"><el-button circle aria-label="刷新费用明细" :aria-busy="loading" :disabled="loading" @click="load"><RefreshCw :size="16" :class="{ 'is-spinning': loading }" /></el-button></el-tooltip>
<el-tooltip content="刷新费用明细" placement="top"><el-button class="fee-refresh-button" circle aria-label="刷新费用明细" :aria-busy="loading" :disabled="loading" @click="load"><RefreshCw :size="16" :class="{ 'is-spinning': loading }" /></el-button></el-tooltip>
<el-button v-if="access.can('firstleg:inbound:fee-detail:edit') && canViewFeeItems" type="primary" @click="openEditor('create')"><Plus :size="16" />新增费用</el-button>
</div>
</div>
@@ -365,7 +365,7 @@ onMounted(() => void load())
.fee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); color: var(--el-text-color-secondary); font-size: var(--admin-font-body); }
.fee-toolbar > div { display: flex; flex-wrap: wrap; gap: var(--admin-space-3); }
.fee-toolbar :deep(.el-button + .el-button) { margin-left: 0; }
.fee-toolbar .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
.fee-refresh-button .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6); margin-top: var(--admin-space-5); }
.fee-form :deep(.el-select), .fee-form :deep(.el-date-editor), .fee-form :deep(.el-input-number) { width: 100%; }
.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
src/modules/unified-orders/pages/UnifiedOrdersView.test.ts
+1 -1
View File
@@ -602,7 +602,7 @@ describe('UnifiedOrdersView contract', () => {
expect(source).toContain('display-only')
expect(source).toContain(':key="`fee-${normalizedInboundId}-${feePanelRevision}`"')
expect(source).toContain('feePanelRevision.value += 1')
expect(source).toContain('头程自动初算')
expect(source).not.toContain('<h3 class="fee-section-title">头程自动初算</h3>')
expect(source).toContain('其他费用明细')
expect(source).toContain('@changed="loadDetail(true)"')
expect(source).toContain('firstLegTransportModeLabel(detail.order.order?.transportMode)')
src/modules/unified-orders/pages/UnifiedOrdersView.vue
-1
View File
@@ -2387,7 +2387,6 @@ onBeforeUnmount(() => {
<div><dt>对客费用合计</dt><dd>{{ feeMoney(customerFeeTotal) }}</dd><small>已发布头程费用 + 已审核其他应收</small></div>
<div><dt>已审核其他应付</dt><dd>{{ feeMoney(otherFeeSummary.approvedPayable) }}</dd><small>单列展示，不计入对客费用</small></div>
</dl>
<h3 class="fee-section-title">头程自动初算</h3>
<InboundFeePanel
:key="`fee-${normalizedInboundId}-${feePanelRevision}`"
:customer-id="String(detail.summary.tenantId)"