admin-web/src/modules/overseas-master-data/components/CapacityInquiryTable.vue

<script setup lang="ts">
import '@/styles/adminWorkbench.css'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import RowActions, { type RowActionItem } from '@/shared/components/RowActions.vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { inquiryCargoLabel, offerTime, type CapacityInquiry } from '../capacityOfferTypes'
withDefaults(defineProps<{ rows: CapacityInquiry[]; total: number; loading: boolean; busy?: boolean; integrated?: boolean; failed?: boolean }>(), { busy: false, integrated: false, failed: false })
const page = defineModel<number>('page', { default: 1 }), size = defineModel<number>('size', { default: 20 })
const emit = defineEmits<{ action: [key: string, row: CapacityInquiry] }>()
const access = useAccessPreviewStore()
function actions(row: CapacityInquiry, busy: boolean): RowActionItem[] {
  const manage = access.can('platform:fleet:capacity-offer:manage')
  const write = (kind: string) => manage || access.can('platform:fleet:capacity-offer:list') && access.can(`platform:fleet:capacity-offer:inquiry-${kind}`)
  const items: RowActionItem[] = [{ key: 'view', label: '查看进度', priority: 10 },
    { key: 'incoming', label: '安排来货', visible: manage && row.progress.primaryAction === 'INCOMING' && access.can('platform:fleet:trip:booking-edit'), disabled: busy },
    { key: 'receipt', label: '查看收货并核量', visible: manage && row.progress.primaryAction === 'RECEIPT' && access.can('platform:fleet:trip:booking-confirm'), disabled: busy },
    { key: 'bind', label: '确认排入本车', visible: manage && row.progress.primaryAction === 'BIND' && access.can('platform:fleet:trip:booking-edit') && access.can('platform:fleet:trip:edit') && access.can('platform:overseas-warehouse:dispatch:create'), disabled: busy },
    { key: 'fulfillment', label: '收货进度', visible: !!row.incomingNo, disabled: busy },
    { key: 'edit', label: '补充资料', visible: row.actions.canEdit && write('edit'), disabled: busy },
    { key: 'confirm', label: '核对并确认', visible: (row.actions.canConfirm || row.actions.canEdit) && manage, disabled: busy },
    { key: 'cancel', label: '取消意向', visible: row.actions.canCancel && write('cancel'), disabled: busy, tone: 'danger' }]
  const primary = items.find(action => action.visible !== false && action.key.toUpperCase() === row.progress.primaryAction)
  if (primary) { primary.priority = 20; primary.tone = 'primary' }
  return items
}
const columns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 320, fixed: 'left', slotName: 'actions' },
  { key: 'bookingNo', label: '意向 / 预订号', minWidth: 210, singleLine: false }, { key: 'customerName', label: '客户', minWidth: 210, singleLine: false },
  { key: 'tripNo', label: '车次号', minWidth: 210 }, { key: 'destinationLabel', label: '卸货站', minWidth: 130 },
  { key: 'status', label: '当前进度 / 下一步', minWidth: 270, slotName: 'status', singleLine: false }, { key: 'cargo', label: '货量', minWidth: 270, slotName: 'cargo', singleLine: false },
  { key: 'agreedAmount', label: '约定运费（非实收）', minWidth: 165, slotName: 'amount' }, { key: 'businessOrderNo', label: '本土订单号', minWidth: 210 },
  { key: 'updatedAt', label: '更新时间', minWidth: 180, slotName: 'time' },
]
</script>
<template><div class="workbench-table"><DataTable :appearance="integrated ? 'integrated' : 'default'" :results-visible="!failed" preference-key="fleet-capacity-inquiries" column-settings-mode="show" v-model:page="page" v-model:page-size="size" :columns="columns" :data="rows" :total="total" :loading="loading" row-key="bookingNo" empty-text="当前范围暂无意向">
  <template v-if="$slots['toolbar-start']" #toolbar-start><slot name="toolbar-start" /></template>
  <template v-if="$slots.filters" #filters><slot name="filters" /></template>
  <template v-if="$slots.notices" #notices><slot name="notices" /></template>
  <template #actions="{ row }"><RowActions :max-visible="1" :actions="actions(row as CapacityInquiry, busy)" text-actions @action="emit('action', $event, row as CapacityInquiry)" /></template>
  <template #status="{ row }"><strong>{{ row.progress.label }} · {{ row.progress.reservation }}</strong><div>下一步：{{ row.progress.owner }}</div><small class="inquiry-reason">{{ row.progress.message }}</small></template>
  <template #cargo="{ row }"><div>{{ inquiryCargoLabel(row.status) }}：{{ row.cargo.packageCount ?? '—' }} 箱 · {{ row.cargo.palletSpaces ?? '—' }} 托位 · {{ row.cargo.weightKg ?? '—' }} kg · {{ row.cargo.volumeCbm ?? '—' }} m³</div><div>预计实托数：{{ row.expectedPalletCount ?? '—' }}</div></template>
  <template #amount="{ row }">{{ row.agreedAmount == null ? '待报价' : `${Number(row.agreedAmount).toFixed(2)} ${row.cargo.currency || ''}` }}</template>
  <template #time="{ row }">{{ offerTime(row.updatedAt) }}</template>
</DataTable></div></template>
<style scoped>.inquiry-reason{display:block;color:var(--workbench-muted);font-size:var(--admin-font-caption);white-space:normal}</style>