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

perf: defer container workbench data loading

Browse Source
This commit is contained in:
ouyangxq
2026-09-08 20:55:30 +08:00
parent 8910e88563
commit f25839c4b5
5 changed files with 187 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/loading-lists/components/ContainerFeesPanel.test.ts
+18 -6
View File
@@ -111,18 +111,26 @@ describe('ContainerFeesPanel contract', () => {
expect(listContainerCostDetails).not.toHaveBeenCalledWith('11', expect.anything())
})
it('uses the summary container ID when fee rows are empty', async () => {
it('does not request any Finance data when container fees are empty', async () => {
vi.mocked(listContainerFees).mockResolvedValue([])
await mountPanel(['firstleg:inbound:fee-detail:view'])
expect(listContainerCostDetails).toHaveBeenCalledWith('11', '99')
await mountPanel(['firstleg:inbound:fee-detail:view', 'platform:finance:settlement-ar:list', 'platform:finance:settlement-ap:list'])
expect(listContainerCostDetails).not.toHaveBeenCalled()
expect(listFinanceReceivableSettlements).not.toHaveBeenCalled()
expect(listFinancePayableSettlements).not.toHaveBeenCalled()
expect(getFinanceSettlement).not.toHaveBeenCalled()
})
it('uses the summary container ID when fee rows agree', async () => {
it('loads Finance data only on an explicit single request when fee rows agree', async () => {
vi.mocked(listContainerFees).mockResolvedValue([
{ id: '1', loadingPlanId: '9', containerBookingId: '99', containerNo: null, feeItemId: '1', feeItemName: '费用A', direction: 'RECEIVABLE', supplierId: null, supplierName: null, supplierCategory: null, businessDate: '2026-08-12', amount: 10, currency: 'CNY', reviewStatus: 'PENDING', sourceStatus: 'ACTIVE', sourceVersion: 1, remark: null, reviewerName: null, reviewedAt: null, reviewReason: null },
])
await mountPanel(['firstleg:inbound:fee-detail:view'])
const wrapper = await mountPanel(['firstleg:inbound:fee-detail:view', 'platform:finance:settlement-ar:list'])
expect(listContainerCostDetails).not.toHaveBeenCalled()
expect(listFinanceReceivableSettlements).not.toHaveBeenCalled()
await wrapper.findAll('button').find((button) => button.text() === '加载财务状态')!.trigger('click')
await flushPromises()
expect(listContainerCostDetails).toHaveBeenCalledWith('11', '99')
expect(listFinanceReceivableSettlements).toHaveBeenCalledTimes(1)
})
it('fails closed when fee rows disagree with the summary container', async () => {
@@ -130,7 +138,9 @@ describe('ContainerFeesPanel contract', () => {
{ id: '2', loadingPlanId: '9', containerBookingId: '100', containerNo: null, feeItemId: '2', feeItemName: '费用B', direction: 'PAYABLE', supplierId: '41', supplierName: '承运商A', supplierCategory: 'TRUCKING', businessDate: '2026-08-12', amount: 20, currency: 'CNY', reviewStatus: 'PENDING', sourceStatus: 'ACTIVE', sourceVersion: 1, remark: null, reviewerName: null, reviewedAt: null, reviewReason: null },
])
const wrapper = await mountPanel(['firstleg:inbound:fee-detail:view', 'firstleg:fee-item:view'])
expect(wrapper.text()).toContain('柜次费用加载失败')
await wrapper.findAll('button').find((button) => button.text() === '加载财务状态')!.trigger('click')
await flushPromises()
expect(wrapper.text()).toContain('财务状态加载失败')
expect(listContainerCostDetails).not.toHaveBeenCalled()
})
@@ -161,6 +171,8 @@ describe('ContainerFeesPanel contract', () => {
'firstleg:inbound:fee-detail:view', 'firstleg:inbound:fee-detail:edit', 'firstleg:inbound:fee-detail:review',
'platform:finance:settlement-ar:list',
])
await wrapper.findAll('button').find((button) => button.text() === '加载财务状态')!.trigger('click')
await flushPromises()
expect(wrapper.findAll('button').some((button) => button.text() === '调整')).toBe(false)
expect(wrapper.findAll('button').some((button) => button.text() === '作废')).toBe(false)
expect(getFinanceSettlement).toHaveBeenCalledWith('ar-1')
src/modules/loading-lists/components/ContainerFeesPanel.vue
+30 -13
View File
@@ -26,7 +26,10 @@ const feeItems = ref<ApplicableFeeItem[]>([])
const suppliers = ref<ContainerFeeSupplierOption[]>([])
const costs = ref<ContainerCostDetail[]>([])
const loading = ref(false)
const financeLoading = ref(false)
const financeLoaded = ref(false)
const error = ref<ApiErrorDetails | null>(null)
const financeError = ref<ApiErrorDetails | null>(null)
const feeItemsError = ref<ApiErrorDetails | null>(null)
const suppliersError = ref<ApiErrorDetails | null>(null)
const feeItemsLoading = ref(false)
@@ -183,21 +186,35 @@ async function load() {
const feeRows = await listContainerFees(props.planId, requestedAccountId)
if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
fees.value = feeRows
await loadSettledFeeIds(requestedAccountId, feeRows, sequence)
if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
settledFeeIds.value = new Set(feeRows.filter((item) => item.settlementMode === 'DIRECT_PAID').map((item) => item.id))
costs.value = []
const containerIds = [...new Set(feeRows.map((item) => item.containerBookingId).filter((value): value is string => Boolean(value)))]
if (containerIds.some((value) => value !== props.containerBookingId)) throw new Error('柜次费用与装柜摘要的柜次标识不一致，已停止查询财务分摊')
const currentContainerId = props.containerBookingId
if (currentContainerId) {
const result = await listContainerCostDetails(requestedAccountId, currentContainerId)
if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
costs.value = result
}
financeLoaded.value = false
financeError.value = null
} catch (cause) { if (sequence === loadSequence && requestedAccountId === accountId.value) error.value = getApiErrorDetails(cause, '柜次费用加载失败') }
finally { if (sequence === loadSequence) loading.value = false }
}
async function loadFinanceDetails() {
if (!accountId.value || !canView.value || !fees.value.length || financeLoading.value) return
const sequence = loadSequence
const requestedAccountId = accountId.value
const feeRows = [...fees.value]
financeLoading.value = true; financeError.value = null
try {
const containerIds = [...new Set(feeRows.map((item) => item.containerBookingId).filter((value): value is string => Boolean(value)))]
if (containerIds.some((value) => value !== props.containerBookingId)) throw new Error('柜次费用与装柜摘要的柜次标识不一致，已停止查询财务分摊')
await loadSettledFeeIds(requestedAccountId, feeRows, sequence)
if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
costs.value = props.containerBookingId ? await listContainerCostDetails(requestedAccountId, props.containerBookingId) : []
if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
financeLoaded.value = true
} catch (cause) {
if (sequence === loadSequence && requestedAccountId === accountId.value) financeError.value = getApiErrorDetails(cause, '财务状态加载失败')
} finally {
if (sequence === loadSequence && requestedAccountId === accountId.value) financeLoading.value = false
}
}
async function loadSettledFeeIds(customerId: string, feeRows: ContainerFeeResource[], sequence: number) {
const settled = new Set(feeRows.filter((item) => item.settlementMode === 'DIRECT_PAID').map((item) => item.id))
settledFeeIds.value = settled
@@ -334,7 +351,7 @@ function initializeCustomer() { accountId.value = customerOptions.value.length =
function clearCustomerContext() {
loadSequence += 1
supplierLoadSequence += 1
fees.value = []; settledFeeIds.value = new Set(); costs.value = []; feeItems.value = []; suppliers.value = []; error.value = null; feeItemsError.value = null; suppliersError.value = null; loading.value = false; feeItemsLoading.value = false; suppliersLoading.value = false; loadedSupplierCategory.value = undefined
fees.value = []; settledFeeIds.value = new Set(); costs.value = []; feeItems.value = []; suppliers.value = []; error.value = null; financeError.value = null; feeItemsError.value = null; suppliersError.value = null; loading.value = false; financeLoading.value = false; financeLoaded.value = false; feeItemsLoading.value = false; suppliersLoading.value = false; loadedSupplierCategory.value = undefined
editorOpen.value = false; rejectOpen.value = false; target.value = null; rejection.value = ''
resetForm()
}
@@ -367,7 +384,7 @@ onMounted(() => void load())
<LoadErrorState v-else-if="error" compact title="柜次费用加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
<DataTable v-else :data="fees" :columns="columns" :loading="loading" preference-key="container-fees" row-key="id" empty-text="当前客户暂无柜次费用">
<template #toolbar-start><div class="fees-table-title"><strong>费用明细</strong><span>{{ fees.length }} 条</span></div></template>
<template #actions="{ row }"><div class="row-actions"><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="success" @click="approve(row as ContainerFeeResource)"><Check :size="15" />通过</el-button><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="danger" @click="openReject(row as ContainerFeeResource)"><CircleX :size="15" />驳回</el-button><el-button v-if="canEdit && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" link type="primary" @click="openAdjust(row as ContainerFeeResource)"><Pencil :size="15" />调整</el-button><el-button v-if="canReview && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" link type="danger" @click="voidFee(row as ContainerFeeResource)"><Trash2 :size="15" />作废</el-button></div></template>
<template #actions="{ row }"><div class="row-actions"><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="success" @click="approve(row as ContainerFeeResource)"><Check :size="15" />通过</el-button><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="danger" @click="openReject(row as ContainerFeeResource)"><CircleX :size="15" />驳回</el-button><el-button v-if="canEdit && financeLoaded && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" link type="primary" @click="openAdjust(row as ContainerFeeResource)"><Pencil :size="15" />调整</el-button><el-button v-if="canReview && financeLoaded && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" link type="danger" @click="voidFee(row as ContainerFeeResource)"><Trash2 :size="15" />作废</el-button></div></template>
<template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : 'warning'" effect="plain">{{ row.direction === 'RECEIVABLE' ? '应收' : '应付' }}</el-tag></template>
<template #settlementMode="{ row }">{{ settlementLabel(row as ContainerFeeResource) }}</template>
<template #paidSummary="{ row }">{{ paidSummary(row as ContainerFeeResource) }}</template>
@@ -376,7 +393,7 @@ onMounted(() => void load())
<template #amount="{ row }">{{ money(row.amount) }}</template><template #reviewStatus="{ row }"><StatusBadge :status="row.reviewStatus === 'PENDING' ? '待审核' : row.reviewStatus === 'APPROVED' ? '已通过' : '已驳回'" /></template><template #sourceStatus="{ row }"><StatusBadge :status="row.sourceStatus === 'ACTIVE' ? '有效' : '已作废'" /></template>
</DataTable>
<div v-if="accountId" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div></header><el-empty v-if="!loading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #orderNo="{ row }">{{ orderNumbers.get(row.orderId) || '订单编码待补充' }}</template><template #inboundCode="{ row }">{{ row.inboundId ? (inboundCodes.get(row.inboundId) || '入仓码待补充') : '—' }}</template><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
<div v-if="accountId && fees.length" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div><el-button :loading="financeLoading" @click="loadFinanceDetails">{{ financeLoaded ? '刷新财务状态' : '加载财务状态' }}</el-button></header><LoadErrorState v-if="financeError" compact title="财务状态加载失败" :message="financeError.message" @retry="loadFinanceDetails"><template #details><ApiErrorMeta :details="financeError" /></template></LoadErrorState><el-empty v-else-if="!financeLoaded" description="点击加载财务状态后查看结算与成本分摊" :image-size="64" /><el-empty v-else-if="!financeLoading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #orderNo="{ row }">{{ orderNumbers.get(row.orderId) || '订单编码待补充' }}</template><template #inboundCode="{ row }">{{ row.inboundId ? (inboundCodes.get(row.inboundId) || '入仓码待补充') : '—' }}</template><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
</template>
<AppDialog v-model="editorOpen" :title="target ? '调整已审核费用' : '新增柜次费用'" confirm-text="保存" :confirm-loading="saving" @confirm="save">