Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ouyangxq
|
6738eae457 |
@@ -36,11 +36,11 @@ describe('adminNavigation', () => {
|
||||
{ title: '客户服务', children: ['异常订单'] },
|
||||
{ title: '财务管理', children: ['客户账户', '客户应收应付', '应收款统计表', '客户对账单', '结算单应收', '结算单应付'] },
|
||||
{ title: '海外仓', children: ['经营总览', '销量分析', '库存分析', '数据采集'] },
|
||||
{ title: '通用', children: ['费用项目', '汇率管理', '仓库管理', '海外仓报价', '车队报价', '船期价格表', '下载中心'] },
|
||||
{ title: '通用', children: ['费用项目', '汇率管理', '仓库管理', '海外仓报价', '车队报价', '船期价格表', '下载中心', '供应商列表'] },
|
||||
{ title: '系统管理', children: ['用户管理', '角色权限', '菜单权限'] },
|
||||
])
|
||||
expect(visible).toHaveLength(13)
|
||||
expect(visible.flatMap(node => node.children ?? [])).toHaveLength(56)
|
||||
expect(visible.flatMap(node => node.children ?? [])).toHaveLength(57)
|
||||
expect(adminNavigation.find((item) => item.key === 'notifications')).toBeUndefined()
|
||||
})
|
||||
|
||||
@@ -196,12 +196,13 @@ describe('adminNavigation', () => {
|
||||
expect(getNavigationLeaves(filtered).map((item) => item.path)).toEqual(['/dashboard', '/master-data/fee-items'])
|
||||
})
|
||||
|
||||
it('retains the supplier route permission while omitting its entry from the latest sidebar', () => {
|
||||
it('shows the restored supplier entry under general only with its list permission', () => {
|
||||
const visible = filterAdminNavigation(adminNavigation, new Set(['platform:supplier:list']))
|
||||
const missing = filterAdminNavigation(adminNavigation, new Set())
|
||||
|
||||
expect(getNavigationLeaves(adminNavigation).find(item => item.path === '/suppliers')?.permission).toBe('platform:supplier:list')
|
||||
expect(getNavigationLeaves(visible).map((item) => item.path)).toEqual(['/dashboard'])
|
||||
expect(getNavigationLeaves(visible).map((item) => item.path)).toEqual(['/dashboard', '/suppliers'])
|
||||
expect(visible.find(item => item.title === '通用')?.children?.map(item => item.path)).toEqual(['/suppliers'])
|
||||
expect(getNavigationLeaves(missing).map((item) => item.path)).toEqual(['/dashboard'])
|
||||
})
|
||||
|
||||
|
||||
@@ -204,7 +204,7 @@ export const adminNavigation: AdminNavigationNode[] = [
|
||||
{ key: 'fleet-quotes', title: '车队报价', icon: Truck, path: '/overseas-master-data/fleet-quotes', permission: 'platform:fleet:quote:list' },
|
||||
{ key: 'fba-carrier-rates', title: '船期价格表', icon: CircleDollarSign, path: '/first-leg-pricing/carrier-rates', permission: 'firstleg:fba-pricing:rate:view' },
|
||||
{ key: 'download-center', title: '下载中心', icon: Download, path: '/downloads', permission: 'platform:download:list' },
|
||||
{ key: 'supplier-list', title: '供应商列表', icon: ContactRound, path: '/suppliers', permission: 'platform:supplier:list', hidden: true },
|
||||
{ key: 'supplier-list', title: '供应商列表', icon: ContactRound, path: '/suppliers', permission: 'platform:supplier:list' },
|
||||
{ key: 'express-companies', title: '快递公司', icon: Truck, path: '/master-data/express-companies', permission: 'platform:express:list', hidden: true },
|
||||
{ key: 'counterparties', title: '往来单位', icon: ContactRound, path: '/master-data/counterparties', permission: 'platform:counterparty:list', hidden: true },
|
||||
{ key: 'mojia-sku-sync', title: '称重机器', icon: Database, path: '/general/mojia-sku-sync', permission: 'platform:mojia-sku-sync:list', hidden: true },
|
||||
|
||||
@@ -32,7 +32,7 @@ type FilterModel = QueryModel & {
|
||||
expectedArrivalRange: string[]
|
||||
}
|
||||
|
||||
const props = defineProps<{ mode: InboundTaskMode; title?: string }>()
|
||||
const props = defineProps<{ mode: InboundTaskMode }>()
|
||||
const router = useRouter()
|
||||
const access = useAccessPreviewStore()
|
||||
const page = ref(1)
|
||||
@@ -356,9 +356,8 @@ onBeforeUnmount(() => { disposed = true; requestSerial += 1; optionsRequestSeria
|
||||
:aria-label="`${taskLabel}待办列表`"
|
||||
@selection-change="handleReviewSelectionChange"
|
||||
>
|
||||
<template #toolbar-start><h1>{{ title || (isReview ? '测量数据审核' : '订单测量') }}</h1></template>
|
||||
<template #toolbar-start><h1>{{ isReview ? '测量数据审核' : '订单测量' }}</h1></template>
|
||||
<template #filters>
|
||||
<slot name="status-tabs" />
|
||||
<QueryToolbar
|
||||
v-model="filters"
|
||||
:ariaLabel="`${taskLabel}待办筛选`"
|
||||
|
||||
@@ -3,7 +3,6 @@ export { createInboundHoldIdempotencyKey, downloadInboundCartonLabelsBatch, down
|
||||
export { default as DropshipPalletPrintPanel } from './core/DropshipPalletPrintPanel.vue'
|
||||
export { default as InboundMeasurementPanel } from './measurement/InboundMeasurementPanel.vue'
|
||||
export { default as InboundMeasurementDialog } from './measurement/InboundMeasurementDialog.vue'
|
||||
export { default as InboundTaskList } from './components/InboundTaskList.vue'
|
||||
export { default as MeasurementEvidenceThumbnail } from './measurement/components/MeasurementEvidenceThumbnail.vue'
|
||||
export { default as InboundFeePanel } from './fee/InboundFeePanel.vue'
|
||||
export {
|
||||
|
||||
@@ -89,6 +89,19 @@
|
||||
|
||||
以上仅为代码接入依据，真实界面验收仍待执行。
|
||||
|
||||
## 2026-10-19 出车记录统计与列表优化
|
||||
|
||||
依据：当前对话图1（现状）、图2（原型）；用户确认优先在前端优化。沿当前实际发车口径与接口，不恢复原型手填发车事实。
|
||||
|
||||
| 页面 | 操作 | 原型承载/布局 | 当前实现 | 本轮结论 |
|
||||
|---|---|---|---|---|
|
||||
| 出车记录 | 统计与查询 | 图2上方独立四栏饼图，下方记录与筛选 | 图1统计位于列表筛选和表格之间，条形明细内部滚动 | 独立四栏饼图及彩色图例；用户追加确认只改饼图、保留现有日期/目的地统计分组；列表一套日期/关键词/货源/状态查询，同一响应更新统计与记录；币种切换独立展示，顶部均价明确为最近统计日值，不相加或简单平均每日均价；长图例与完整统计按需展开 |
|
||||
| 出车记录 | 列表、导出 | 图2列表独立卡片，操作第一列，导出在右上 | integrated列表、字段设置、XLSX下载任务 | 保留公共连续列表，整理默认列；完整字段仍可通过字段设置显示；导出沿原筛选及权限 |
|
||||
| 出车记录 | 详情、实测编辑、凭证预览 | 图2仅能确认列表编辑入口；当前操作以既有确认矩阵为准 | 详情独立路由；实测820px居中及按需凭证预览 | 不改变承载、读写权限或请求方式 |
|
||||
| 出车记录 | 新增、审核、删除 | 图2有新增记录，未定义审核/删除 | 当前列表无新增/审核/删除 | 不新增业务动作，实际发车事实仍由既有作业链产生 |
|
||||
|
||||
本轮只调整前端；自动检查与人工视觉验收分别记录，修改后1920×1080、100%截图待用户确认。
|
||||
|
||||
## 新版报价与出车记录接入
|
||||
|
||||
| 入口 | 原型依据 | 当前承载 | 核对边界 |
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { afterEach, expect, it } from 'vitest'
|
||||
import { mount, type VueWrapper } from '@vue/test-utils'
|
||||
import TripOperationsCharts from './TripOperationsCharts.vue'
|
||||
import type { TripOperationsCharts as Charts, TripOperationsSummary } from '../api/tripOperations'
|
||||
|
||||
const wrappers: VueWrapper[] = []
|
||||
const emptyCharts = (): Charts => ({ physicalPallets: [], destinationTrips: [], externalAgreedAmounts: [], externalPalletRates: [] })
|
||||
const summary = (): TripOperationsSummary => ({ trips: 20, inTransit: 5, completed: 15, physicalPallets: 90, palletSpaces: 100, ownPackages: 50, externalPackages: 20, externalAgreedAmounts: [{ currency: 'CNY', amount: 390 }, { currency: 'USD', amount: 100 }], costs: { visible: false, unrecordedTrips: null, unallocatedTrips: null, totals: [] } })
|
||||
function render(charts: Charts, totals = summary()) {
|
||||
const wrapper = mount(TripOperationsCharts, { props: { charts, summary: totals }, global: { stubs: { ElButton: { template: '<button><slot/></button>' } } } })
|
||||
wrappers.push(wrapper)
|
||||
return wrapper
|
||||
}
|
||||
afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()))
|
||||
|
||||
it('renders all four statistics as pies with matching legends and server totals', () => {
|
||||
const charts = emptyCharts()
|
||||
charts.physicalPallets = [{ label: '每日实运托盘', unit: '托', points: [{ label: '2026-10-02', value: 10 }] }]
|
||||
charts.destinationTrips = [{ label: '目的地涉及车次', unit: '次', points: [{ label: 'ONT8', value: 3 }, { label: 'ABE2', value: 8 }] }]
|
||||
charts.externalAgreedAmounts = [{ label: 'CNY', unit: 'CNY', points: [{ label: '2026-10-02', value: 390 }] }]
|
||||
charts.externalPalletRates = [{ label: 'CNY', unit: 'CNY/标准托位', points: [{ label: '2026-10-07', value: 30 }, { label: '2026-10-02', value: 90 }] }]
|
||||
const original = structuredClone(charts)
|
||||
const wrapper = render(charts)
|
||||
expect(wrapper.findAll('.pie-chart')).toHaveLength(4)
|
||||
expect(wrapper.find('polyline').exists()).toBe(false)
|
||||
expect(wrapper.find('.bar-track').exists()).toBe(false)
|
||||
expect(wrapper.find('.chart--pallets .chart-metric').text()).toBe('90 托')
|
||||
expect(wrapper.find('.chart--rates .chart-metric').text()).toContain('CNY/标准托位 30.00')
|
||||
expect(wrapper.find('.chart--rates .series-caption').text()).toContain('2026-10-07')
|
||||
expect(wrapper.find('.chart--rates').text()).toContain('顶部为最近统计日均价')
|
||||
expect(wrapper.findAll('.chart--rates .pie-slice').map(slice => slice.attributes('aria-label'))).toEqual(['2026-10-02：90.00 CNY/标准托位', '2026-10-07：30.00 CNY/标准托位'])
|
||||
expect(wrapper.find('.chart--destinations .chart-legend .legend-dot').attributes('style')).toContain('rgb(59, 130, 246)')
|
||||
expect(wrapper.find('.chart--destinations .pie-slice').attributes('fill')).toBe('#3b82f6')
|
||||
expect(charts).toEqual(original)
|
||||
})
|
||||
|
||||
it('switches currency without combining monetary amounts or adding daily rates', async () => {
|
||||
const charts = emptyCharts()
|
||||
charts.externalAgreedAmounts = [{ label: 'CNY', unit: 'CNY', points: [{ label: '2026-10-02', value: 390 }] }, { label: 'USD', unit: 'USD', points: [{ label: '2026-10-03', value: 100 }] }]
|
||||
const wrapper = render(charts)
|
||||
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('CNY 390.00')
|
||||
expect(wrapper.find('.chart--amounts').findAll('svg')).toHaveLength(1)
|
||||
const usd = wrapper.findAll('.chart--amounts .series-selector button').find(button => button.text() === 'USD')!
|
||||
await usd.trigger('click')
|
||||
expect(usd.attributes('aria-pressed')).toBe('true')
|
||||
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('USD 100.00')
|
||||
expect(wrapper.find('.chart--amounts .pie-slice').attributes('aria-label')).toBe('2026-10-03：100.00 USD')
|
||||
await wrapper.setProps({ charts: { ...charts, externalAgreedAmounts: [charts.externalAgreedAmounts[0]!] } })
|
||||
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('CNY 390.00')
|
||||
})
|
||||
|
||||
it('includes every destination in its pie while collapsing long legends and preserving complete details', () => {
|
||||
const charts = emptyCharts()
|
||||
charts.destinationTrips = [{ label: '目的地涉及车次', unit: '次', points: Array.from({ length: 7 }, (_, index) => ({ label: `FBA-${index}`, value: index + 1 })) }]
|
||||
const wrapper = render(charts)
|
||||
const destination = wrapper.find('.chart--destinations')
|
||||
expect(destination.find('.chart-metric').text()).toBe('7 个目的地')
|
||||
expect(destination.findAll('.pie-slice')).toHaveLength(7)
|
||||
expect(destination.find('.legend-details').attributes('open')).toBeUndefined()
|
||||
expect(destination.find('.legend-details summary').text()).toBe('展开其余 2 项图例')
|
||||
expect(wrapper.find('[aria-label="派送目的地明细"]').findAll('tbody tr')).toHaveLength(7)
|
||||
expect(wrapper.find('[aria-label="派送目的地明细"]').text()).toContain('FBA-0')
|
||||
})
|
||||
|
||||
it('draws a single positive value as a full pie and retains known zero values without invalid geometry', () => {
|
||||
const charts = emptyCharts()
|
||||
charts.physicalPallets = [{ label: '托盘', unit: '托', points: [{ label: '2026-10-01', value: 0 }, { label: '2026-10-02', value: 2 }] }]
|
||||
charts.externalPalletRates = [{ label: 'USD', unit: 'USD/标准托位', points: [{ label: '2026-10-01', value: 0 }] }]
|
||||
const wrapper = render(charts)
|
||||
expect(wrapper.find('.chart--pallets .pie-slice').attributes('d')).toBe('M 80 8 A 72 72 0 1 1 80 152 A 72 72 0 1 1 80 8 Z')
|
||||
expect(wrapper.find('.chart--rates .pie-empty').exists()).toBe(true)
|
||||
expect(wrapper.find('.chart--rates .chart-metric').text()).toContain('0.00')
|
||||
expect(wrapper.find('.chart--pallets .chart-legend').text()).toContain('2026-10-01')
|
||||
expect(wrapper.html()).not.toMatch(/NaN|Infinity/)
|
||||
})
|
||||
|
||||
it('shows missing amounts and rates as unknown and omits empty detail controls', () => {
|
||||
const wrapper = render(emptyCharts(), { ...summary(), physicalPallets: 0, externalAgreedAmounts: [] })
|
||||
expect(wrapper.findAll('.chart-empty')).toHaveLength(4)
|
||||
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('—')
|
||||
expect(wrapper.find('.chart--rates .chart-metric').text()).toBe('—')
|
||||
expect(wrapper.find('details').exists()).toBe(false)
|
||||
})
|
||||
@@ -1,28 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { TripOperationsCharts, TripOperationsSeries } from '../api/tripOperations'
|
||||
const props = defineProps<{ charts: TripOperationsCharts }>()
|
||||
import { computed, ref } from 'vue'
|
||||
import type { TripOperationsCharts, TripOperationsSeries, TripOperationsSummary } from '../api/tripOperations'
|
||||
|
||||
const props = defineProps<{ charts: TripOperationsCharts; summary: TripOperationsSummary }>()
|
||||
const selectedSeries = ref<Record<string, string>>({})
|
||||
const palette = ['#3b82f6', '#14b8a6', '#f59e0b', '#8b5cf6', '#f46565', '#06b6d4', '#ec4899', '#84cc16', '#6366f1', '#f97316']
|
||||
const sections = computed(() => [
|
||||
{ title: '实运托盘', note: '按实际发车日（UTC）汇总，物理托盘去重', series: props.charts.physicalPallets },
|
||||
{ title: '派送目的地', note: '各目的地涉及的车次，同车多站可分别出现', series: props.charts.destinationTrips },
|
||||
{ title: '外接约定金额', note: '按币种分别展示，不代表财务应收或实收', series: props.charts.externalAgreedAmounts },
|
||||
{ title: '外接按托报价均价', note: '按确认计价托位加权，排除整单报价', series: props.charts.externalPalletRates },
|
||||
])
|
||||
function width(value: number, series: TripOperationsSeries) { const max = Math.max(...series.points.map(p => p.value), 0); return max ? value / max * 100 : 0 }
|
||||
{ key: 'pallets', title: '实运托盘', note: '按实际发车日（UTC）分布，物理托盘去重', series: props.charts.physicalPallets, money: false },
|
||||
{ key: 'destinations', title: '派送目的地', note: '按目的地涉及车次分布，同车多站可分别计入', series: props.charts.destinationTrips, money: false },
|
||||
{ key: 'amounts', title: '外接约定金额', note: '按日期分布，各币种独立展示，不代表应收或实收', series: props.charts.externalAgreedAmounts, money: true },
|
||||
{ key: 'rates', title: '外接按托报价均价', note: '按日均价数值对比，顶部为最近统计日均价', series: props.charts.externalPalletRates, money: true },
|
||||
].map(section => {
|
||||
const series = section.series.filter(series => series.points.length).map(series => ({
|
||||
...series,
|
||||
points: [...series.points].sort((a, b) => section.key === 'destinations' ? b.value - a.value || a.label.localeCompare(b.label) : a.label.localeCompare(b.label)),
|
||||
}))
|
||||
return { ...section, series, active: series.find(series => series.label === selectedSeries.value[section.key]) ?? series[0] ?? null }
|
||||
}))
|
||||
const destinationCount = computed(() => new Set(props.charts.destinationTrips.flatMap(series => series.points.map(point => point.label))).size)
|
||||
const hasPoints = computed(() => sections.value.some(section => section.series.length))
|
||||
const number = (value: number, money = false) => value.toLocaleString('zh-CN', { minimumFractionDigits: money ? 2 : 0, maximumFractionDigits: 2 })
|
||||
const color = (index: number) => palette[index % palette.length]!
|
||||
const seriesTitle = (series: TripOperationsSeries) => series.label === series.unit ? series.label : `${series.label}（${series.unit}）`
|
||||
const amount = (currency: string) => props.summary.externalAgreedAmounts.find(amount => amount.currency === currency)
|
||||
|
||||
function slices(series: TripOperationsSeries) {
|
||||
const total = series.points.reduce((sum, point) => sum + Math.max(0, point.value), 0)
|
||||
if (!total) return []
|
||||
let angle = -Math.PI / 2
|
||||
return series.points.flatMap((point, index) => {
|
||||
if (point.value <= 0) return []
|
||||
const end = angle + point.value / total * Math.PI * 2
|
||||
const startX = 80 + 72 * Math.cos(angle), startY = 80 + 72 * Math.sin(angle)
|
||||
const endX = 80 + 72 * Math.cos(end), endY = 80 + 72 * Math.sin(end)
|
||||
const path = point.value === total
|
||||
? 'M 80 8 A 72 72 0 1 1 80 152 A 72 72 0 1 1 80 8 Z'
|
||||
: `M 80 80 L ${startX} ${startY} A 72 72 0 ${end - angle > Math.PI ? 1 : 0} 1 ${endX} ${endY} Z`
|
||||
angle = end
|
||||
return [{ ...point, color: color(index), path }]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template><section class="operations-charts" aria-label="出车数据统计"><article v-for="section in sections" :key="section.title" class="chart">
|
||||
<strong>{{ section.title }}</strong><p>{{ section.note }}</p>
|
||||
<p v-if="!section.series.some(s => s.points.length)">暂无对应统计</p>
|
||||
<div class="chart-values"><template v-for="(series, si) in section.series" :key="`${series.label}-${si}`"><div v-if="series.points.length"><b>{{ series.label }}（{{ series.unit }}）</b>
|
||||
<div v-for="(point, pi) in series.points" :key="pi" class="point"><span>{{ point.label }}</span><div class="bar-track" aria-hidden="true"><div class="bar" :style="{ width: width(point.value, series) + '%' }" /></div><span>{{ point.value }}</span></div>
|
||||
</div></template></div>
|
||||
</article></section></template>
|
||||
|
||||
<template>
|
||||
<div class="operations-visualizations">
|
||||
<section class="operations-charts" aria-label="出车统计饼图">
|
||||
<article v-for="section in sections" :key="section.key" class="chart" :class="`chart--${section.key}`" :aria-label="section.title">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<div class="chart-metric">
|
||||
<strong v-if="section.key === 'pallets'">{{ number(summary.physicalPallets) }} <small>托</small></strong>
|
||||
<strong v-else-if="section.key === 'destinations'">{{ number(destinationCount) }} <small>个目的地</small></strong>
|
||||
<template v-else-if="section.key === 'amounts'">
|
||||
<strong v-if="section.active && amount(section.active.label)"><small>{{ section.active.label }}</small> {{ number(amount(section.active.label)!.amount, true) }}</strong>
|
||||
<strong v-else>—</strong>
|
||||
</template>
|
||||
<template v-else>
|
||||
<strong v-if="section.active"><small>{{ section.active.unit }}</small> {{ number(section.active.points[section.active.points.length - 1]!.value, true) }}</strong>
|
||||
<strong v-else>—</strong>
|
||||
</template>
|
||||
</div>
|
||||
<p class="chart-note">{{ section.note }}</p>
|
||||
<div v-if="section.series.length > 1" class="series-selector" role="group" :aria-label="`${section.title}币种或系列`">
|
||||
<el-button v-for="series in section.series" :key="series.label" size="small" :type="section.active?.label === series.label ? 'primary' : 'default'" :aria-pressed="section.active?.label === series.label" @click="selectedSeries[section.key] = series.label">{{ series.label }}</el-button>
|
||||
</div>
|
||||
<template v-if="section.active">
|
||||
<p class="series-caption">{{ seriesTitle(section.active) }}<template v-if="section.key === 'rates'"> · {{ section.active.points[section.active.points.length - 1]!.label }}</template></p>
|
||||
<svg class="pie-chart" viewBox="0 0 160 160" role="img" :aria-label="`${section.title} · ${seriesTitle(section.active)}饼图，完整数值见图例及统计明细`">
|
||||
<circle v-if="!slices(section.active).length" cx="80" cy="80" r="72" class="pie-empty" />
|
||||
<path v-for="slice in slices(section.active)" :key="slice.label" :d="slice.path" :fill="slice.color" class="pie-slice" tabindex="0" :aria-label="`${slice.label}：${number(slice.value, section.money)} ${section.active.unit}`"><title>{{ slice.label }}：{{ number(slice.value, section.money) }} {{ section.active.unit }}</title></path>
|
||||
<text v-if="!slices(section.active).length" x="80" y="84" text-anchor="middle" class="pie-empty-label">暂无正值数据</text>
|
||||
</svg>
|
||||
<ul class="chart-legend" :aria-label="`${section.title}图例`">
|
||||
<li v-for="(point, pointIndex) in section.active.points.slice(0, 5)" :key="point.label" :title="`${point.label}：${number(point.value, section.money)} ${section.active.unit}`"><span class="legend-dot" :style="{ background: color(pointIndex) }" aria-hidden="true" /><span>{{ point.label }}</span><strong>{{ number(point.value, section.money) }}</strong></li>
|
||||
</ul>
|
||||
<details v-if="section.active.points.length > 5" class="legend-details">
|
||||
<summary>展开其余 {{ section.active.points.length - 5 }} 项图例</summary>
|
||||
<ul class="chart-legend">
|
||||
<li v-for="(point, pointIndex) in section.active.points.slice(5)" :key="point.label"><span class="legend-dot" :style="{ background: color(pointIndex + 5) }" aria-hidden="true" /><span>{{ point.label }}</span><strong>{{ number(point.value, section.money) }}</strong></li>
|
||||
</ul>
|
||||
</details>
|
||||
</template>
|
||||
<p v-else class="chart-empty">暂无对应统计</p>
|
||||
</article>
|
||||
</section>
|
||||
<details v-if="hasPoints" class="chart-details">
|
||||
<summary>查看完整统计明细</summary>
|
||||
<div class="chart-details-grid">
|
||||
<section v-for="section in sections" :key="section.key" :aria-label="`${section.title}明细`">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<p v-if="section.key === 'rates'" class="chart-note">各日均价按确认计价托位加权，排除整单报价；不将每日均价相加或简单平均为期间均价。</p>
|
||||
<p v-if="!section.series.length" class="chart-note">暂无对应统计</p>
|
||||
<table v-for="(series, seriesIndex) in section.series" :key="`${series.label}-${seriesIndex}`" class="density-table">
|
||||
<caption>{{ seriesTitle(series) }}</caption>
|
||||
<thead><tr><th scope="col">{{ section.key === 'destinations' ? '目的地' : '日期（UTC）' }}</th><th scope="col">数值</th></tr></thead>
|
||||
<tbody><tr v-for="point in series.points" :key="point.label"><td>{{ point.label }}</td><td>{{ number(point.value, section.money) }}</td></tr></tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.operations-charts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--admin-space-3); }
|
||||
.chart { display:grid; align-content:start; gap:var(--admin-space-2); min-width:0; padding:var(--admin-space-3); border:1px solid var(--cc-border); border-radius:var(--admin-radius); background:var(--admin-surface); }
|
||||
.chart > strong { font-size:var(--admin-font-section); }
|
||||
.chart p { margin:0; line-height:1.6; color:var(--cc-muted); font-size:var(--admin-font-caption); }
|
||||
.chart-values { max-height:220px; overflow:auto; }
|
||||
.point { display:grid; grid-template-columns:minmax(95px,1fr) minmax(45px,1fr) minmax(40px,auto); gap:var(--admin-space-2); align-items:center; margin:var(--admin-space-2) 0; }
|
||||
.bar-track { height:10px; background:var(--el-fill-color-light); }.bar { height:100%; background:var(--el-color-primary); }
|
||||
.operations-visualizations { display: grid; gap: var(--admin-space-3); min-width: 0; }
|
||||
.operations-charts, .chart-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-6); }
|
||||
.chart { min-width: 0; padding-right: var(--admin-space-6); border-right: 1px solid var(--cc-border); color: var(--cc-text); text-align: center; }
|
||||
.chart:last-child { padding-right: 0; border-right: 0; }
|
||||
.chart h3, .chart-details h3 { margin: 0 0 var(--admin-space-2); font-size: var(--admin-font-section); }
|
||||
.chart-metric { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--admin-space-1) var(--admin-space-5); margin-bottom: var(--admin-space-1); font-variant-numeric: tabular-nums; }
|
||||
.chart-metric > strong { font-size: calc(var(--admin-font-title) * 1.25); overflow-wrap: anywhere; }
|
||||
.chart-metric small { font-size: var(--admin-font-caption); font-weight: normal; color: var(--cc-muted); }
|
||||
.chart-note, .chart-empty, .series-caption { margin: 0; font-size: var(--admin-font-caption); color: var(--cc-muted); line-height: 1.6; }
|
||||
.chart-empty { display: grid; min-height: 136px; place-content: center; }
|
||||
.series-caption { margin-top: var(--admin-space-2); }
|
||||
.series-selector { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--admin-space-2); margin-top: var(--admin-space-2); }
|
||||
.series-selector :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
.pie-chart { display: block; width: 136px; height: 136px; max-width: 100%; margin: var(--admin-space-2) auto; overflow: visible; }
|
||||
.pie-slice { stroke: var(--admin-surface); stroke-width: 2; stroke-linejoin: round; }
|
||||
.pie-slice:hover, .pie-slice:focus-visible { stroke: var(--cc-text); stroke-width: 3; outline: none; }
|
||||
.pie-empty { fill: var(--el-fill-color-light); }
|
||||
.pie-empty-label { fill: var(--cc-muted); font-size: var(--admin-font-caption); }
|
||||
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--admin-space-1) var(--admin-space-3); padding: 0; margin: 0; list-style: none; font-size: var(--admin-font-caption); }
|
||||
.chart-legend li { display: inline-flex; align-items: baseline; gap: var(--admin-space-1); min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
||||
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
|
||||
.chart-legend strong { font-weight: normal; color: var(--cc-muted); }
|
||||
.chart-details summary, .legend-details summary { width: fit-content; cursor: pointer; color: var(--el-color-primary); font-size: var(--admin-font-caption); }
|
||||
.legend-details summary { margin: var(--admin-space-2) auto; }
|
||||
.chart-details summary:focus-visible, .legend-details summary:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
|
||||
.chart-details-grid { margin-top: var(--admin-space-5); }
|
||||
.chart-details-grid > section { min-width: 0; }
|
||||
.chart-details table { width: 100%; table-layout: fixed; }
|
||||
.chart-details caption { text-align: left; padding: var(--admin-space-2) 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
|
||||
.chart-details td { overflow-wrap: anywhere; }
|
||||
@media (max-width: 1100px) { .operations-charts, .chart-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chart:nth-child(2n) { padding-right: 0; border-right: 0; } }
|
||||
@media (max-width: 720px) { .operations-charts, .chart-details-grid { grid-template-columns: minmax(0, 1fr); } .chart { padding-right: 0; padding-bottom: var(--admin-space-5); border-right: 0; border-bottom: 1px solid var(--cc-border); } .chart:last-child { padding-bottom: 0; border-bottom: 0; } }
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,8 @@ import { afterEach, expect, it, vi } from 'vitest'
|
||||
import { shallowMount, flushPromises, type VueWrapper } from '@vue/test-utils'
|
||||
import FleetQuotesView from './FleetQuotesView.vue'
|
||||
import TripOperationsView from './TripOperationsView.vue'
|
||||
import QueryToolbar from '@/shared/components/QueryToolbar.vue'
|
||||
import TripOperationsCharts from '../components/TripOperationsCharts.vue'
|
||||
import * as quotes from '../api/fleetQuotes'
|
||||
import * as reports from '../api/tripOperations'
|
||||
vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: (p: string) => p.endsWith(':list') }) }))
|
||||
@@ -9,10 +11,10 @@ vi.mock('vue-router', () => ({ useRouter: () => ({ push: vi.fn() }) }))
|
||||
vi.mock('../api/fleetQuotes', () => ({ listFleetQuotes: vi.fn(), setFleetQuoteStatus: vi.fn(), deleteFleetQuote: vi.fn(), exportFleetQuotes: vi.fn(), saveFleetCsv: vi.fn() }))
|
||||
vi.mock('../api/tripOperations', () => ({ listTripOperations: vi.fn(), exportTripOperations: vi.fn() }))
|
||||
const wrappers: VueWrapper[] = []
|
||||
const layout = { template: '<div><slot/></div>' }
|
||||
const layout = { template: '<div><slot name="metrics"/><slot name="state"/><slot/></div>' }
|
||||
function mount(component: object) { const wrapper = shallowMount(component, { global: { stubs: { AdminPage: layout, ListPageLayout: layout, QueryToolbar: true,
|
||||
DataTable: { name: 'DataTable', props: ['data', 'columns'], template: '<div><slot name="toolbar-start"/><slot name="toolbar-actions"/><slot name="filters"/><slot name="notices"/></div>' }, ElButton: { template: '<button><slot/></button>' },
|
||||
LoadErrorState: true, FleetQuoteEditor: true, FleetQuoteImport: true, ApiErrorMeta: true } } }); wrappers.push(wrapper); return wrapper }
|
||||
ElTooltip: true, LoadErrorState: true, FleetQuoteEditor: true, FleetQuoteImport: true, ApiErrorMeta: true } } }); wrappers.push(wrapper); return wrapper }
|
||||
afterEach(() => { wrappers.splice(0).forEach(w => w.unmount()); vi.clearAllMocks() })
|
||||
it('quotes read-only view fetches a page once and hides all write/export tools', async () => {
|
||||
vi.mocked(quotes.listFleetQuotes).mockResolvedValue({ records: [], total: 0, page: 1, size: 20, pages: 0 })
|
||||
@@ -24,4 +26,30 @@ it('operations uses server totals rather than displayed page size', async () =>
|
||||
vi.mocked(reports.listTripOperations).mockResolvedValue({ page: { records: [], total: 21, page: 1, size: 20, pages: 2 }, summary: { trips: 21, inTransit: 12, completed: 9, physicalPallets: 40, palletSpaces: 40, ownPackages: 70, externalPackages: 10, externalAgreedAmounts: [], costs: { visible: false, unrecordedTrips: null, unallocatedTrips: null, totals: [] } }, charts: { physicalPallets: [], destinationTrips: [], externalAgreedAmounts: [], externalPalletRates: [] } })
|
||||
const wrapper = mount(TripOperationsView); await flushPromises()
|
||||
expect(reports.listTripOperations).toHaveBeenCalledTimes(1); expect(wrapper.text()).toContain('实际出车 21 次'); expect(wrapper.text()).not.toContain('导出CSV')
|
||||
expect(wrapper.findComponent(TripOperationsCharts).props('summary').physicalPallets).toBe(40)
|
||||
expect(wrapper.find('.operations-overview').element.compareDocumentPosition(wrapper.findComponent({ name: 'DataTable' }).element) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
|
||||
expect(wrapper.findComponent({ name: 'DataTable' }).props('columns').find((column: { key: string }) => column.key === 'finance')).toMatchObject({ defaultVisible: false })
|
||||
})
|
||||
it('operations queries charts and records together and resets with only one request', async () => {
|
||||
vi.mocked(reports.listTripOperations).mockResolvedValue({ page: { records: [], total: 0, page: 1, size: 20, pages: 0 }, summary: { trips: 0, inTransit: 0, completed: 0, physicalPallets: 0, palletSpaces: 0, ownPackages: 0, externalPackages: 0, externalAgreedAmounts: [], costs: { visible: false, unrecordedTrips: null, unallocatedTrips: null, totals: [] } }, charts: { physicalPallets: [], destinationTrips: [], externalAgreedAmounts: [], externalPalletRates: [] } })
|
||||
const wrapper = mount(TripOperationsView); await flushPromises()
|
||||
const initial = vi.mocked(reports.listTripOperations).mock.calls[0]![0]
|
||||
const toolbar = wrapper.findComponent(QueryToolbar)
|
||||
toolbar.vm.$emit('update:modelValue', { from: '2026-10-01', to: '2026-10-07', keyword: 'TRIP', sourceType: 'EXTERNAL', status: 'IN_TRANSIT' })
|
||||
toolbar.vm.$emit('search'); await flushPromises()
|
||||
expect(reports.listTripOperations).toHaveBeenLastCalledWith(expect.objectContaining({ from: '2026-10-01T00:00:00Z', to: '2026-10-08T00:00:00.000Z', keyword: 'TRIP', sourceType: 'EXTERNAL', status: 'IN_TRANSIT' }))
|
||||
expect(wrapper.text()).toContain('2026-10-01 至 2026-10-07（UTC）')
|
||||
toolbar.vm.$emit('update:modelValue', { from: '2026-09-01', to: '2026-09-07' }); await flushPromises()
|
||||
expect(wrapper.text()).toContain('2026-10-01 至 2026-10-07（UTC）')
|
||||
toolbar.vm.$emit('reset'); toolbar.vm.$emit('search'); await flushPromises()
|
||||
expect(reports.listTripOperations).toHaveBeenCalledTimes(3)
|
||||
expect(reports.listTripOperations).toHaveBeenLastCalledWith(initial)
|
||||
expect(toolbar.props('modelValue')).toMatchObject({ keyword: '', sourceType: '', status: '' })
|
||||
})
|
||||
it('operations shows query failures without leaving stale statistics', async () => {
|
||||
vi.mocked(reports.listTripOperations).mockRejectedValue(new Error('统计暂不可用'))
|
||||
const wrapper = mount(TripOperationsView); await flushPromises()
|
||||
expect(wrapper.findComponent(TripOperationsCharts).exists()).toBe(false)
|
||||
expect(wrapper.findComponent({ name: 'LoadErrorState' }).attributes('message')).toBe('运营记录加载失败')
|
||||
expect(wrapper.text()).not.toContain('实际出车 0 次')
|
||||
})
|
||||
|
||||
@@ -20,48 +20,79 @@ const router = useRouter(), access = useAccessPreviewStore()
|
||||
const result = ref<TripOperationsResult | null>(null), page = ref(1), size = ref(20), loading = ref(false), exporting = ref(false), error = ref<ApiErrorDetails | null>(null)
|
||||
const recordOpen = ref(false), selected = ref<TripOperationsRow | null>(null)
|
||||
const today = new Date().toISOString().slice(0, 10), monthAgo = new Date(Date.now() - 30 * 86400000).toISOString().slice(0, 10)
|
||||
const filters = ref<QueryModel>({ from: monthAgo, to: today, keyword: '', sourceType: '', status: '' })
|
||||
const defaultFilters = () => ({ from: monthAgo, to: today, keyword: '', sourceType: '', status: '' })
|
||||
const filters = ref<QueryModel>(defaultFilters())
|
||||
const displayedRange = ref('')
|
||||
let applied: TripOperationsQuery = range(), sequence = 0
|
||||
const fields: QueryField[] = [
|
||||
{ key: 'from', label: '实际发车起日(UTC)', type: 'date', width: 185 }, { key: 'to', label: '实际发车止日(UTC)', type: 'date', width: 185 },
|
||||
{ key: 'keyword', label: '关键词', type: 'input', width: 235, placeholder: '车次 / 发车车牌 / 司机 / 目的仓' },
|
||||
{ key: 'sourceType', label: '货源', type: 'select', width: 145, options: [{ value: 'OWN', label: '含自有业务' }, { value: 'EXTERNAL', label: '含外接业务' }] },
|
||||
{ key: 'status', label: '状态', type: 'select', width: 130, options: [{ value: 'IN_TRANSIT', label: '在途' }, { value: 'COMPLETED', label: '货物已结案' }] },
|
||||
{ key: 'from', label: '实际发车起日(UTC)', placeholder: '发车起日（UTC）', type: 'date', width: 150, props: { 'aria-label': '实际发车起日（UTC）' } },
|
||||
{ key: 'to', label: '实际发车止日(UTC)', placeholder: '发车止日（UTC）', type: 'date', width: 150, props: { 'aria-label': '实际发车止日（UTC）' } },
|
||||
{ key: 'keyword', label: '关键词', type: 'input', width: 270, placeholder: '车次 / 车牌 / 司机 / 目的仓', props: { 'aria-label': '车次、车牌、司机或目的仓' } },
|
||||
{ key: 'sourceType', label: '货源', placeholder: '全部货源', type: 'select', width: 140, props: { 'aria-label': '货源' }, options: [{ value: 'OWN', label: '含自有业务' }, { value: 'EXTERNAL', label: '含外接业务' }] },
|
||||
{ key: 'status', label: '状态', placeholder: '全部状态', type: 'select', width: 140, props: { 'aria-label': '状态' }, options: [{ value: 'IN_TRANSIT', label: '在途' }, { value: 'COMPLETED', label: '货物已结案' }] },
|
||||
]
|
||||
const columns: DataTableColumn[] = [{ key: 'actions', label: '操作', width: 185, fixed: 'left', slotName: 'actions' }, { key: 'tripNo', label: '车次号', minWidth: 220 },
|
||||
const columns: DataTableColumn[] = [{ key: 'actions', label: '操作', width: 140, fixed: 'left', slotName: 'actions' }, { key: 'tripNo', label: '车次号', minWidth: 220 },
|
||||
{ key: 'status', label: '状态', width: 125, slotName: 'status' }, { key: 'vehiclePlate', label: '发车车牌', minWidth: 125 }, { key: 'driverName', label: '发车司机', minWidth: 100 },
|
||||
{ key: 'warehouseName', label: '起运仓', minWidth: 150 }, { key: 'destinations', label: '目的地', minWidth: 180, slotName: 'destinations' },
|
||||
{ key: 'departedAt', label: '实际发车(UTC)', minWidth: 190 }, { key: 'completedAt', label: '货物结案(UTC)', minWidth: 190 },
|
||||
{ key: 'physicalPallets', label: '实物托盘', width: 100 }, { key: 'palletSpaces', label: '标准托位', width: 100 }, { key: 'ownPackages', label: '自有箱数', width: 100 }, { key: 'externalPackages', label: '外接箱数', width: 100 },
|
||||
{ key: 'agreed', label: '外接约定金额', minWidth: 170, slotName: 'agreed' }, { key: 'distance', label: '实际里程(mile)', width: 140, slotName: 'distance' }, { key: 'fuel', label: '实际油耗(L)', width: 130, slotName: 'fuel' }, { key: 'finance', label: '应收 / 实收', minWidth: 260, slotName: 'finance' }, { key: 'cost', label: '已登记直接成本', minWidth: 200, slotName: 'cost' }, { key: 'allocated', label: '自有 / 外接分摊', minWidth: 240, slotName: 'allocated' }]
|
||||
{ key: 'departedAt', label: '实际发车(UTC)', minWidth: 190 }, { key: 'physicalPallets', label: '实物托盘', width: 100 },
|
||||
{ key: 'agreed', label: '外接约定金额', minWidth: 170, slotName: 'agreed' },
|
||||
{ key: 'completedAt', label: '货物结案(UTC)', minWidth: 190, defaultVisible: false },
|
||||
{ key: 'palletSpaces', label: '标准托位', width: 100, defaultVisible: false }, { key: 'ownPackages', label: '自有箱数', width: 100, defaultVisible: false }, { key: 'externalPackages', label: '外接箱数', width: 100, defaultVisible: false },
|
||||
{ key: 'distance', label: '实际里程(mile)', width: 140, slotName: 'distance', defaultVisible: false }, { key: 'fuel', label: '实际油耗(L)', width: 130, slotName: 'fuel', defaultVisible: false },
|
||||
{ key: 'finance', label: '应收 / 实收', minWidth: 260, slotName: 'finance', defaultVisible: false }, { key: 'cost', label: '已登记直接成本', minWidth: 200, slotName: 'cost', defaultVisible: false }, { key: 'allocated', label: '自有 / 外接分摊', minWidth: 240, slotName: 'allocated', defaultVisible: false }]
|
||||
function range(): TripOperationsQuery {
|
||||
const from = String(filters.value.from || monthAgo), to = String(filters.value.to || today)
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(from) || !/^\d{4}-\d{2}-\d{2}$/.test(to) || Number.isNaN(Date.parse(from)) || Number.isNaN(Date.parse(to))) throw new Error('请输入有效日期 YYYY-MM-DD')
|
||||
return { from: `${from}T00:00:00Z`, to: new Date(Date.parse(`${to}T00:00:00Z`) + 86400000).toISOString(), keyword: String(filters.value.keyword || '') || undefined, sourceType: (filters.value.sourceType || undefined) as TripOperationsQuery['sourceType'], status: String(filters.value.status || '') || undefined }
|
||||
}
|
||||
async function load() { const current = ++sequence; loading.value = true; error.value = null; try { const data = await listTripOperations({ ...applied, page: page.value, size: size.value }); if (current === sequence) result.value = data } catch (e) { if (current === sequence) { result.value = null; error.value = getApiErrorDetails(e, '运营记录加载失败') } } finally { if (current === sequence) loading.value = false } }
|
||||
async function load() {
|
||||
const current = ++sequence, query = { ...applied, page: page.value, size: size.value }
|
||||
loading.value = true; error.value = null
|
||||
try {
|
||||
const data = await listTripOperations(query)
|
||||
if (current === sequence) {
|
||||
result.value = data
|
||||
displayedRange.value = `${query.from.slice(0, 10)} 至 ${new Date(Date.parse(query.to) - 86400000).toISOString().slice(0, 10)}（UTC）`
|
||||
}
|
||||
} catch (e) {
|
||||
if (current === sequence) { result.value = null; error.value = getApiErrorDetails(e, '运营记录加载失败') }
|
||||
} finally { if (current === sequence) loading.value = false }
|
||||
}
|
||||
function search() { try { applied = range(); if (page.value !== 1) page.value = 1; else void load() } catch (e) { error.value = getApiErrorDetails(e, '日期范围无效') } }
|
||||
function resetFilters() { filters.value = defaultFilters() }
|
||||
function openRecord(tripNo: unknown) { const row = result.value?.page.records.find(item => item.tripNo === tripNo); if (row) { selected.value = row; recordOpen.value = true } }
|
||||
async function download() { exporting.value = true; try { await submitExport('TRIP_OPERATIONS_LIST', '出车记录', applied) } catch (e) { error.value = getApiErrorDetails(e, '导出失败') } finally { exporting.value = false } }
|
||||
const money = (rows: TripOperationsMoney[]) => rows.length ? rows.map(r => `${r.currency} ${r.amount.toFixed(2)}`).join(' / ') : '—'
|
||||
watch([page, size], load); onMounted(load); onBeforeUnmount(() => { sequence++ })
|
||||
</script>
|
||||
<template><AdminPage class="admin-density"><ListPageLayout aria-label="出车记录">
|
||||
<template #metrics>
|
||||
<section class="operations-overview" aria-labelledby="operations-statistics-title" :aria-busy="loading">
|
||||
<header class="operations-heading">
|
||||
<h2 id="operations-statistics-title">出车数据统计</h2>
|
||||
<span class="operations-note">{{ loading ? '正在更新统计与记录…' : displayedRange }} · 与下方列表筛选一致</span>
|
||||
</header>
|
||||
<template v-if="result">
|
||||
<TripOperationsCharts :charts="result.charts" :summary="result.summary" />
|
||||
<footer class="operations-footer">
|
||||
<div class="operations-summary" aria-live="polite">
|
||||
<span>实际出车 <strong>{{ result.summary.trips }}</strong> 次</span><span>在途 <strong>{{ result.summary.inTransit }}</strong> 次</span><span>货物结案 <strong>{{ result.summary.completed }}</strong> 次</span>
|
||||
</div>
|
||||
<el-tooltip placement="top" :show-after="200" content="按实际发车时间查询，每趟车只计一次；货源筛选展示含该类货物的整趟车。物理托盘去重；同车多站可分别计入目的地。外接约定金额不代表应收或实收，结案不代表车辆与司机已释放。">
|
||||
<el-button link aria-label="查看统计口径">统计口径</el-button>
|
||||
</el-tooltip>
|
||||
</footer>
|
||||
<p v-if="result.summary.costs.visible" class="operations-note operations-costs">已登记直接成本：{{ result.summary.costs.totals.length ? result.summary.costs.totals.map(c => `${c.currency} ${c.directCost.toFixed(2)}`).join(' / ') : '—' }}；未登记 {{ result.summary.costs.unrecordedTrips ?? '—' }} 趟，已登记但未能分摊 {{ result.summary.costs.unallocatedTrips ?? '—' }} 趟。</p>
|
||||
</template>
|
||||
<p v-else class="operations-placeholder operations-note" role="status">{{ loading ? '正在加载出车统计…' : '暂无统计数据' }}</p>
|
||||
</section>
|
||||
</template>
|
||||
<template #state>
|
||||
<LoadErrorState v-if="error" title="查询或导出失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
||||
</template>
|
||||
<DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="true" preference-key="fleet-operations-table" v-model:page="page" v-model:page-size="size" :data="result?.page.records || []" :columns="columns" :total="result?.page.total || 0" :loading="loading" row-key="tripNo" empty-text="该范围暂无实际出车记录">
|
||||
<template #toolbar-start><h1>出车记录</h1></template>
|
||||
<template #filters><QueryToolbar v-model="filters" :fields="fields" ariaLabel="运营记录查询" preference-key="fleet-operations-query" :loading="loading" @search="search" @reset="search" /></template>
|
||||
<template #notices>
|
||||
<div class="operations-overview">
|
||||
<LoadErrorState v-if="error" title="查询或导出失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
||||
<TripOperationsCharts v-if="result" :charts="result.charts" />
|
||||
<div v-if="result" class="operations-summary" aria-live="polite">
|
||||
<span>实际出车 <strong>{{ result.summary.trips }}</strong> 次</span><span>在途 <strong>{{ result.summary.inTransit }}</strong> 次</span><span>货物结案 <strong>{{ result.summary.completed }}</strong> 次</span>
|
||||
<span>实物托盘 <strong>{{ result.summary.physicalPallets }}</strong> 托</span><span>外接约定 {{ money(result.summary.externalAgreedAmounts) }}</span>
|
||||
</div>
|
||||
<p v-if="result?.summary.costs.visible" class="operations-note">已登记直接成本：{{ result.summary.costs.totals.length ? result.summary.costs.totals.map(c => `${c.currency} ${c.directCost.toFixed(2)}`).join(' / ') : '—' }}；未登记 {{ result.summary.costs.unrecordedTrips }} 趟，已登记但未能分摊 {{ result.summary.costs.unallocatedTrips }} 趟。</p>
|
||||
<p class="operations-note">按实际发车时间查询，每趟车只计一次；货源筛选展示含该类货物的整趟车。约定金额不代表应收或实收，结案不代表车辆与司机已释放。</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #filters><QueryToolbar v-model="filters" :fields="fields" ariaLabel="运营记录查询" preference-key="fleet-operations-query" :loading="loading" @search="search" @reset="resetFilters" /></template>
|
||||
<template #toolbar-actions><el-button v-if="access.can('platform:fleet:operations:export') && access.can('platform:download:list')" :loading="exporting" @click="download">导出</el-button></template>
|
||||
<template #actions="{ row }"><div class="density-actions row-actions admin-text-actions"><el-button v-if="access.can('platform:fleet:trip:list')" class="density-action" @click="router.push({ name: 'overseas-master-data-trip-detail', params: { tripNo: row.tripNo } })">详情</el-button><el-button class="density-action" @click="openRecord(row.tripNo)">实测记录</el-button></div></template>
|
||||
<template #status="{ row }">{{ row.status === 'COMPLETED' ? '货物已结案' : '在途' }}</template><template #destinations="{ row }">{{ row.destinations.map((d: TripOperationsRow['destinations'][number]) => d.label).join(' / ') }}</template>
|
||||
@@ -73,7 +104,12 @@ watch([page, size], load); onMounted(load); onBeforeUnmount(() => { sequence++ }
|
||||
<TripOperationsRecordDialog v-model="recordOpen" :row="selected" :readonly="!access.can('platform:fleet:operations:edit')" @saved="load" />
|
||||
</ListPageLayout></AdminPage></template>
|
||||
<style scoped>
|
||||
.operations-overview { display: grid; gap: var(--admin-space-3); min-width: 0; }
|
||||
.operations-overview { display: grid; gap: var(--admin-space-3); min-width: 0; padding: var(--admin-space-5); background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); }
|
||||
.operations-heading, .operations-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--admin-space-3) var(--admin-space-6); }
|
||||
.operations-heading h2 { margin: 0; font-size: var(--admin-font-title); }
|
||||
.operations-footer { border-top: 1px solid var(--cc-border); padding-top: var(--admin-space-3); }
|
||||
.operations-summary { display: flex; flex-wrap: wrap; gap: var(--admin-space-2) var(--admin-space-6); font-variant-numeric: tabular-nums; }
|
||||
.operations-note { margin: 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.6; }
|
||||
.operations-placeholder { min-height: var(--admin-empty-height); display: grid; place-content: center; }
|
||||
.operations-costs { padding-top: var(--admin-space-1); }
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@ export type UnifiedOrderMainStatus =
|
||||
export const unifiedOrderStatusOptions: Array<{ value: UnifiedOrderMainStatus; label: string }> = [
|
||||
{ value: 'PENDING_REVIEW', label: '待审核' },
|
||||
{ value: 'WAIT_MEASURE', label: '待测量数据' },
|
||||
{ value: 'WAIT_PALLETIZE', label: '一件代发打托' },
|
||||
{ value: 'WAIT_PALLETIZE', label: '待一件代发组托' },
|
||||
{ value: 'WAIT_SPLIT', label: '待分柜' },
|
||||
{ value: 'LOADING', label: '装柜中' },
|
||||
{ value: 'LOADED', label: '装柜完成' },
|
||||
|
||||
@@ -14,10 +14,7 @@ vi.mock('vue-router', () => ({
|
||||
vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: () => true }) }))
|
||||
vi.mock('@/modules/iam', () => ({ listPlatformTenants: vi.fn().mockResolvedValue({ records: [], page: 1, size: 200, total: 0, pages: 0 }) }))
|
||||
vi.mock('@/modules/warehouses', () => ({ listAllPlatformWarehouses: vi.fn().mockResolvedValue([]) }))
|
||||
vi.mock('@/modules/inbounds', () => ({
|
||||
downloadWeightImage: vi.fn(), getInboundMeasurement: vi.fn(),
|
||||
InboundTaskList: { name: 'InboundTaskList', props: ['mode', 'title'], template: '<section><slot name="status-tabs" /></section>' },
|
||||
}))
|
||||
vi.mock('@/modules/inbounds', () => ({ downloadWeightImage: vi.fn(), getInboundMeasurement: vi.fn() }))
|
||||
vi.mock('@/modules/downloads', () => ({ createPlatformExportTask: vi.fn() }))
|
||||
vi.mock('@/shared/components/exportTaskCreatedDialog', () => ({ showExportTaskCreatedDialog: vi.fn() }))
|
||||
vi.mock('@/modules/unified-orders/workflows', () => ({ UnifiedOrderWorkflowPanel: { template: '<div />' } }))
|
||||
@@ -54,7 +51,6 @@ function mountView() {
|
||||
directives: { loading: () => undefined },
|
||||
stubs: {
|
||||
AdminPage: { template: '<main><slot /></main>' },
|
||||
InboundTaskList: false,
|
||||
ListPageLayout: { template: '<section><slot name="toolbar" /><slot name="state" /><slot /></section>' },
|
||||
QueryToolbar: { name: 'QueryToolbar', props: ['modelValue'], emits: ['update:modelValue', 'search', 'reset'], template: '<div data-testid="query-toolbar" />' },
|
||||
DataTable: { name: 'DataTable', props: ['page', 'pageSize', 'data'], emits: ['update:page', 'update:pageSize', 'selection-change'], template: '<div data-testid="data-table"><slot name="toolbar-start" /><slot name="toolbar-actions" /><slot name="filters" /><slot name="notices" /><div v-for="row in data" :key="row.orderId" class="test-row"><slot name="estimatedVolume" :row="row" /><slot name="expectedArrival" :row="row" /></div></div>' },
|
||||
@@ -98,25 +94,6 @@ describe('UnifiedOrdersView list request coordination', () => {
|
||||
expect(listPlatformUnifiedOrders).toHaveBeenCalledTimes(5)
|
||||
})
|
||||
|
||||
it('opens the existing measurement review list beside measurement and returns to order queries', async () => {
|
||||
const wrapper = mountView()
|
||||
await flushPromises()
|
||||
const labels = wrapper.findAll('[role="tab"]').map((tab) => tab.text())
|
||||
expect(labels.indexOf('测量数据审核')).toBe(labels.indexOf('待测量数据') + 1)
|
||||
|
||||
await wrapper.findAll('[role="tab"]').find((tab) => tab.text() === '测量数据审核')!.trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.getComponent({ name: 'InboundTaskList' }).props()).toMatchObject({ mode: 'review', title: '订单列表' })
|
||||
expect(wrapper.get('[aria-selected="true"]').text()).toBe('测量数据审核')
|
||||
expect(listPlatformUnifiedOrders).toHaveBeenCalledTimes(1)
|
||||
|
||||
await wrapper.findAll('[role="tab"]').find((tab) => tab.text() === '待测量数据')!.trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.findComponent({ name: 'InboundTaskList' }).exists()).toBe(false)
|
||||
expect(listPlatformUnifiedOrders).toHaveBeenLastCalledWith(expect.objectContaining({ mainStatus: 'WAIT_MEASURE' }))
|
||||
expect(listPlatformUnifiedOrders).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
|
||||
it('does not apply draft filters to pagination until query is submitted', async () => {
|
||||
const wrapper = mountView()
|
||||
await flushPromises()
|
||||
|
||||
@@ -62,7 +62,7 @@ describe('UnifiedOrdersView contract', () => {
|
||||
|
||||
it('exposes the product main statuses including dropship palletizing', () => {
|
||||
expect(unifiedOrderStatusOptions.map((item) => item.label)).toEqual([
|
||||
'待审核', '待测量数据', '一件代发打托', '待分柜', '装柜中', '装柜完成', '派送完成', '已完成',
|
||||
'待审核', '待测量数据', '待一件代发组托', '待分柜', '装柜中', '装柜完成', '派送完成', '已完成',
|
||||
])
|
||||
for (const legacyLabel of ['待客户确认', '差异处理中', '派送中', '进入分柜']) {
|
||||
expect(source).not.toContain(legacyLabel)
|
||||
@@ -72,7 +72,7 @@ describe('UnifiedOrdersView contract', () => {
|
||||
it('renders accessible current-status tabs with keyboard navigation', () => {
|
||||
expect(source).toContain('role="tablist"')
|
||||
expect(source).toContain('role="tab"')
|
||||
expect(source).toContain(':aria-selected="selectedTab === tab.value"')
|
||||
expect(source).toContain(':aria-selected="selectedStatus === tab.value"')
|
||||
expect(source).toContain("event.key === 'ArrowRight'")
|
||||
expect(source).toContain("event.key === 'ArrowLeft'")
|
||||
expect(source).toContain("event.key === 'Home'")
|
||||
|
||||
@@ -82,7 +82,6 @@ import {
|
||||
updateMeasurementOuterDimensions,
|
||||
InboundFeePanel,
|
||||
InboundMeasurementDialog,
|
||||
InboundTaskList,
|
||||
MeasurementEvidenceThumbnail,
|
||||
DropshipPalletPrintPanel,
|
||||
sendInboundFee,
|
||||
@@ -323,9 +322,6 @@ const showAdvancedFilters = ref(false)
|
||||
const filters = ref<FilterModel>(emptyFilters())
|
||||
const appliedFilters = ref<FilterModel>(emptyFilters())
|
||||
const selectedStatus = ref<UnifiedOrderMainStatus | ''>('')
|
||||
const measurementReviewSelected = ref(false)
|
||||
const selectedTab = computed(() => measurementReviewSelected.value ? 'MEASUREMENT_REVIEW' : selectedStatus.value)
|
||||
const statusTabList = ref<HTMLElement | null>(null)
|
||||
const businessInboundCode = computed(() => route.name === 'unified-order-detail-by-inbound-code' && typeof route.params.inboundCode === 'string'
|
||||
? route.params.inboundCode.trim()
|
||||
: '')
|
||||
@@ -588,9 +584,7 @@ async function waitForSavedMeasurementVersion(tenantId: string, inboundId: strin
|
||||
|
||||
const statusTabs = computed(() => [
|
||||
{ value: '' as const, label: '全部' },
|
||||
...unifiedOrderStatusOptions.flatMap((tab) => tab.value === 'WAIT_MEASURE' && can('firstleg:inbound:measurement-review')
|
||||
? [tab, { value: 'MEASUREMENT_REVIEW' as const, label: '测量数据审核' }]
|
||||
: [tab]),
|
||||
...unifiedOrderStatusOptions,
|
||||
])
|
||||
|
||||
const warehouseOptions = computed(() => warehouses.value.map((warehouse) => ({
|
||||
@@ -712,11 +706,8 @@ function optionalBoolean(value: string | null | undefined) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
function selectStatus(status: UnifiedOrderMainStatus | '' | 'MEASUREMENT_REVIEW') {
|
||||
if (selectedTab.value === status) return
|
||||
measurementReviewSelected.value = status === 'MEASUREMENT_REVIEW'
|
||||
if (measurementReviewSelected.value) selectedOrders.value = []
|
||||
if (status === 'MEASUREMENT_REVIEW') return
|
||||
function selectStatus(status: UnifiedOrderMainStatus | '') {
|
||||
if (selectedStatus.value === status) return
|
||||
selectedStatus.value = status
|
||||
if (page.value === 1) void loadOrders()
|
||||
else page.value = 1
|
||||
@@ -733,9 +724,8 @@ function handleTabKeydown(event: KeyboardEvent, index: number) {
|
||||
const tab = statusTabs.value[nextIndex]
|
||||
if (!tab) return
|
||||
selectStatus(tab.value)
|
||||
void nextTick(() => {
|
||||
statusTabList.value?.querySelectorAll<HTMLElement>('[role="tab"]')[nextIndex]?.focus()
|
||||
})
|
||||
const buttons = (event.currentTarget as HTMLElement).parentElement?.querySelectorAll<HTMLElement>('[role="tab"]')
|
||||
buttons?.[nextIndex]?.focus()
|
||||
}
|
||||
|
||||
function can(permission: string) {
|
||||
@@ -1584,7 +1574,6 @@ async function loadWarehouses() {
|
||||
}
|
||||
|
||||
async function loadOrders() {
|
||||
if (measurementReviewSelected.value) return
|
||||
selectedApprovalOrders.value = []
|
||||
selectedOrders.value = []
|
||||
loading.value = true
|
||||
@@ -2702,27 +2691,7 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div v-if="measurementReviewSelected" id="unified-orders-results" role="tabpanel">
|
||||
<InboundTaskList mode="review" title="订单列表">
|
||||
<template #status-tabs>
|
||||
<div ref="statusTabList" class="status-tabs density-status-tabs" role="tablist" aria-label="订单主状态">
|
||||
<button
|
||||
v-for="(tab, index) in statusTabs"
|
||||
:key="tab.value || 'ALL'"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="selectedTab === tab.value"
|
||||
aria-controls="unified-orders-results"
|
||||
:tabindex="selectedTab === tab.value ? 0 : -1"
|
||||
:class="['status-tab', { 'is-active': selectedTab === tab.value }]"
|
||||
@click="selectStatus(tab.value)"
|
||||
@keydown="handleTabKeydown($event, index)"
|
||||
>{{ tab.label }}</button>
|
||||
</div>
|
||||
</template>
|
||||
</InboundTaskList>
|
||||
</div>
|
||||
<ListPageLayout v-else ariaLabel="统一订单列表">
|
||||
<ListPageLayout ariaLabel="统一订单列表">
|
||||
|
||||
|
||||
|
||||
@@ -2732,16 +2701,16 @@ onBeforeUnmount(() => {
|
||||
<template #toolbar-start><h1>订单列表</h1></template>
|
||||
<template #filters>
|
||||
<div class="orders-query-panel integrated-query-group">
|
||||
<div ref="statusTabList" class="status-tabs density-status-tabs" role="tablist" aria-label="订单主状态">
|
||||
<div class="status-tabs density-status-tabs" role="tablist" aria-label="订单主状态">
|
||||
<button
|
||||
v-for="(tab, index) in statusTabs"
|
||||
:key="tab.value || 'ALL'"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="selectedTab === tab.value"
|
||||
:aria-selected="selectedStatus === tab.value"
|
||||
aria-controls="unified-orders-results"
|
||||
:tabindex="selectedTab === tab.value ? 0 : -1"
|
||||
:class="['status-tab', { 'is-active': selectedTab === tab.value }]"
|
||||
:tabindex="selectedStatus === tab.value ? 0 : -1"
|
||||
:class="['status-tab', { 'is-active': selectedStatus === tab.value }]"
|
||||
@click="selectStatus(tab.value)"
|
||||
@keydown="handleTabKeydown($event, index)"
|
||||
>{{ tab.label }}</button>
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
|
||||
describe('unified order status labels', () => {
|
||||
it('maps order, review and loading statuses to domain-specific Chinese', () => {
|
||||
expect(unifiedOrderStatusLabel('WAIT_PALLETIZE')).toBe('一件代发打托')
|
||||
expect(unifiedOrderStatusLabel('WAIT_PALLETIZE')).toBe('待一件代发组托')
|
||||
expect(unifiedOrderStatusLabel('WAIT_SPLIT')).toBe('待分柜')
|
||||
expect(unifiedOrderReviewStatusLabel('APPROVED')).toBe('审核通过')
|
||||
expect(unifiedOrderLoadingStatusLabel('LOADED')).toBe('已配载')
|
||||
|
||||
@@ -9,7 +9,7 @@ const orderStatusLabels: Record<string, string> = {
|
||||
CANCELLED: '已取消',
|
||||
PENDING_REVIEW: '待审核',
|
||||
WAIT_MEASURE: '待测量数据',
|
||||
WAIT_PALLETIZE: '一件代发打托',
|
||||
WAIT_PALLETIZE: '待一件代发组托',
|
||||
WAIT_SPLIT: '待分柜',
|
||||
LOADING: '装柜中',
|
||||
LOADED: '装柜完成',
|
||||
|
||||
@@ -71,6 +71,7 @@ const generalCatalogConsumers = [
|
||||
'overseas-master-data/components/CapacityInquiryTable.vue',
|
||||
'overseas-master-data/components/CapacityOfferSettingsDialog.vue',
|
||||
'overseas-master-data/pages/TripOperationsView.vue',
|
||||
'overseas-master-data/components/TripOperationsCharts.vue',
|
||||
'overseas-master-data/pages/TripDetailView.vue',
|
||||
'overseas-master-data/components/TripPlanDialog.vue',
|
||||
'overseas-master-data/pages/DriverDetailView.vue',
|
||||
|
||||
Reference in New Issue
Block a user