src/modules/appointment-calendar/AppointmentCalendarPanel.vue

@@ -8,13 +8,14 @@ export interface CalendarEvent {
   key: string
   date: string
   time: string
-  type: 'arrival' | 'delivery'
+  type: 'arrival' | 'delivery' | 'pickup'
   title: string
   subtitle?: string
   fields: Array<{ label: string; value?: string | null }>
   inboundCodes?: Array<string | null | undefined>
   canEdit?: boolean
   canDelete?: boolean
+  sourcePath?: string
 }
 
 const props = withDefaults(defineProps<{
@@ -29,6 +30,7 @@ const emit = defineEmits<{
   create: [date: string]
   edit: [event: CalendarEvent]
   delete: [event: CalendarEvent]
+  open: [event: CalendarEvent]
 }>()
 const selectedDate = ref(props.initialDate || dateKey(new Date()))
 const mode = ref<CalendarMode>('month')
@@ -45,6 +47,7 @@ const grouped = computed(() => {
 })
 const selectedEvents = computed(() => grouped.value.get(selectedDate.value) || [])
 const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+const eventTypeLabels = { arrival: '船舶到港', delivery: '预约送仓', pickup: '预约提柜' }
 const heading = computed(() => mode.value === 'month'
   ? `${selectedDate.value.slice(0, 4)}年${Number(selectedDate.value.slice(5, 7))}月`
   : `${dates.value[0]} — ${addDays(calendarRange(selectedDate.value, mode.value).to, -1)}`)
@@ -69,7 +72,7 @@ defineExpose({ selectedDate, mode })
         <div class="calendar-label">
           <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 3v4M16 3v4M3 10h18M8 15h3M14 15h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
           <strong>预约日历</strong>
-          <span class="legend arrival">船舶到港</span><span class="legend delivery">预约送仓</span>
+          <span class="legend arrival">船舶到港</span><span class="legend delivery">预约送仓</span><span class="legend pickup">预约提柜</span>
         </div>
         <div class="calendar-controls">
           <el-button v-if="canCreate" type="primary" :disabled="loading" @click="emit('create', selectedDate)">＋ 新增预约</el-button>
@@ -103,11 +106,12 @@ defineExpose({ selectedDate, mode })
       <div class="detail-events" aria-live="polite">
         <p v-if="!selectedEvents.length && !loading" class="empty-day">{{ incomplete ? '部分来源未加载，请重试后确认当天安排' : '当天暂无到港或送仓预约' }}</p>
         <article v-for="event in selectedEvents" :key="event.key" class="detail-event">
-          <div class="event-heading"><span class="event-type" :class="event.type">{{ event.type === 'arrival' ? '船舶到港' : '预约送仓' }}</span><span>{{ event.time || '—' }}</span></div>
+          <div class="event-heading"><span class="event-type" :class="event.type">{{ eventTypeLabels[event.type] }}</span><span>{{ event.time || '—' }}</span></div>
           <h3>{{ event.title }}</h3><p v-if="event.subtitle" class="event-subtitle">{{ event.subtitle }}</p>
           <dl><div v-for="field in event.fields" :key="field.label"><dt>{{ field.label }}</dt><dd>{{ field.value || '—' }}</dd></div></dl>
           <AppointmentInboundCodes v-if="event.inboundCodes" :codes="event.inboundCodes" />
-          <footer v-if="event.canEdit || event.canDelete" class="density-actions">
+          <footer v-if="event.canEdit || event.canDelete || event.sourcePath" class="density-actions">
+            <el-button v-if="event.sourcePath" class="density-action" :disabled="loading" @click="emit('open', event)">查看来源</el-button>
             <el-button v-if="event.canEdit" class="density-action" :disabled="loading" @click="emit('edit', event)">编辑</el-button>
             <el-button v-if="event.canDelete" class="density-action" data-tone="danger" :disabled="loading" @click="emit('delete', event)">取消预约</el-button>
           </footer>
@@ -127,6 +131,7 @@ defineExpose({ selectedDate, mode })
 .legend { font-size: 12px; white-space: nowrap; }
 .legend::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: #4b78e8; }
 .legend.delivery::before { background: #27a87a; }
+.legend.pickup::before { background: #c17a20; }
 .view-toggle { display: flex; border: 1px solid #dbe3ee; border-radius: 6px; padding: 2px; background: #f7f9fc; }
 .view-toggle button, .nav-button { border: 0; border-radius: 5px; background: transparent; cursor: pointer; color: #64748b; min-width: 30px; height: 30px; }
 .view-toggle button[aria-pressed='true'] { background: #fff; color: #4167d8; font-weight: 700; }
@@ -145,6 +150,7 @@ defineExpose({ selectedDate, mode })
 .event-chip { display: block; padding: 3px 6px; line-height: 16px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
 .arrival { --event-bg: #edf3ff; --event-fg: #3765d4; }
 .delivery { --event-bg: #e8f8f1; --event-fg: #18845f; }
+.pickup { --event-bg: #fff4e3; --event-fg: #995a10; }
 .event-chip, .event-type { background: var(--event-bg); color: var(--event-fg); }
 .event-chip small { display: block; margin-top: 2px; font-size: 11px; opacity: .8; }
 .event-more { padding: 1px 6px; line-height: 16px; }

src/modules/appointment-calendar/AppointmentCalendarView.test.ts

@@ -2,18 +2,18 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import AppointmentCalendarView from './AppointmentCalendarView.vue'
 import { createFbaAppointment, listFbaAppointmentCalendar, listInboundOrders } from '@/modules/overseas-warehouse'
-import { listArrivalCalendar } from './api'
+import { listArrivalCalendar, listPickupCalendar } from './api'
 import { resolvePlanningSource, saveFollowup, listUnscheduledAppointments } from './planningApi'
-const routing = vi.hoisted(() => ({ query: {} as Record<string,string>, canSourceRead: true }))
+const routing = vi.hoisted(() => ({ query: {} as Record<string,string>, canSourceRead: true, canPickup: true }))
 vi.mock('./planningApi', () => ({ resolvePlanningSource: vi.fn(), listPlanningCargo: vi.fn(), getFollowups: vi.fn(), saveFollowup: vi.fn(), listUnscheduledAppointments: vi.fn() }))
 import { listPlatformWarehouses } from '@/modules/warehouses'
 vi.mock('@/modules/warehouses', () => ({ listPlatformWarehouses: vi.fn() }))
 
 vi.mock('vue-router', () => ({ useRoute: () => routing, useRouter: () => ({ push: vi.fn() }) }))
 
-vi.mock('./api', () => ({ listArrivalCalendar: vi.fn(), deleteAppointment: vi.fn() }))
+vi.mock('./api', () => ({ listArrivalCalendar: vi.fn(), listPickupCalendar: vi.fn(), deleteAppointment: vi.fn() }))
 
-vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: (permission: string) => permission !== 'source-read' || routing.canSourceRead }) }))
+vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: (permission: string) => (permission !== 'source-read' || routing.canSourceRead) && (permission !== 'platform:firstleg:terminal-drayage:list' || routing.canPickup) }) }))
 vi.mock('@/modules/overseas-warehouse', async (importOriginal) => ({ ...(await importOriginal<typeof import('@/modules/overseas-warehouse')>()),
   createFbaAppointment: vi.fn(), getFbaAppointment: vi.fn(), listFbaAppointmentCalendar: vi.fn(),
   listInboundOrders: vi.fn(), updateFbaAppointment: vi.fn(),
@@ -45,15 +45,40 @@ function render() {
 describe('appointment calendar data integration', () => {
   beforeEach(() => {
     vi.resetAllMocks()
-    routing.query = {}; routing.canSourceRead = true
+    routing.query = {}; routing.canSourceRead = true; routing.canPickup = true
     vi.mocked(listPlatformWarehouses).mockResolvedValue({ records: ['ONT8', 'LAX9'].map(code => ({ id: code, tenantId: 0, warehouseCode: code, warehouseName: code, warehouseType: 'FBA' as const, status: 'ACTIVE' as const, internalCode: null, countryCode: 'US', timezone: 'America/Los_Angeles', contactName: null, contactPhone: null, contactEmail: null, remark: null })), page: 1, size: 50, pages: 1, total: 2 })
     vi.mocked(listFbaAppointmentCalendar).mockResolvedValue([])
     vi.mocked(listUnscheduledAppointments).mockResolvedValue({records: [], total: 0})
     vi.mocked(listArrivalCalendar).mockResolvedValue([])
+    vi.mocked(listPickupCalendar).mockResolvedValue({records: [], truncated: false, unclassifiedCount: 0, scopeBasis: 'US_DESTINATION_WAREHOUSE', timeBasis: 'SOURCE_LOCAL_UNSPECIFIED'})
     vi.mocked(listInboundOrders).mockResolvedValue({ records: candidates, total: 2, page: 1, size: 10, pages: 1 })
     vi.mocked(createFbaAppointment).mockResolvedValue({ version: 0, id: '1', appointmentNo: 'APT-AB', plannedDate: '2026-10-09', appointmentAt: null, originWarehouseId: '100', appointmentStatus: 'PENDING', selectedCount: 2, fbaWarehouseCode: 'ONT8', items: [] })
   })
 
+  it('shows the original pickup time once without claiming a port time zone and retains partial-source warnings', async () => {
+    vi.mocked(listPickupCalendar).mockResolvedValueOnce({records: [{containerBookingId: '123',bookingNo: 'CB-TEST',containerNo: 'TEST-CONT',destinationPortName: 'Port',destinationWarehouseCode: 'US-W',fleetSupplierName: 'Fleet',pickupAppointmentAt: '2026-10-09T11:00:00',actualPickupAt: null}],truncated: false,unclassifiedCount: 1,scopeBasis: 'US_DESTINATION_WAREHOUSE',timeBasis: 'SOURCE_LOCAL_UNSPECIFIED'})
+    const wrapper=render(); await flushPromises()
+    const panel=wrapper.findComponent({name:'AppointmentCalendarPanel'})
+    expect(panel.props('events')).toEqual([expect.objectContaining({type:'pickup',date:'2026-10-09',time:'11:00',sourcePath:'/container-loading/overseas/123'})])
+    expect(panel.props('incomplete')).toBe(true)
+    expect(wrapper.text()).toContain('目的仓国家待核实')
+    expect(listPickupCalendar).toHaveBeenCalledTimes(1)
+  })
+  it('does not request pickup records without pickup list permission and discloses the omitted source', async () => {
+    routing.canPickup=false
+    const wrapper=render(); await flushPromises()
+    expect(listPickupCalendar).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('无提柜查看权限')
+    expect(wrapper.findComponent({name:'AppointmentCalendarPanel'}).props('incomplete')).toBe(true)
+  })
+  it('keeps successful arrival data visible when the pickup source fails', async () => {
+    vi.mocked(listPickupCalendar).mockRejectedValueOnce(new Error('pickup unavailable'))
+    vi.mocked(listArrivalCalendar).mockResolvedValueOnce([{containerBookingId:'1',bookingNo:'CB-1',arrivalAt:'2026-10-09T09:00:00',arrivalType:'ESTIMATED'}])
+    const wrapper=render(); await flushPromises()
+    const panel=wrapper.findComponent({name:'AppointmentCalendarPanel'})
+    expect(panel.props('events')).toEqual([expect.objectContaining({type:'arrival',key:'arrival-1'})])
+    expect(panel.props('incomplete')).toBe(true)
+  })
   it('creates one shared appointment for two customers without sending a fabricated header customer', async () => {
     const wrapper = render()
     await flushPromises()

src/modules/appointment-calendar/AppointmentCalendarView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { resolvePlanningSource, listUnscheduledAppointments, type ResolvedPlanningSource } from './planningApi'
 import AppointmentFollowupDialog from './AppointmentFollowupDialog.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -24,10 +24,11 @@ import AppointmentInboundCodes from './AppointmentInboundCodes.vue'
 import AppointmentCargoPanel from './AppointmentCargoPanel.vue'
 import AppointmentContainerPanel from './AppointmentContainerPanel.vue'
 import { calendarRange, dateKey } from './calendar'
-import { deleteAppointment, listArrivalCalendar, type ArrivalCalendarEntry } from './api'
+import { deleteAppointment, listArrivalCalendar, listPickupCalendar, type ArrivalCalendarEntry, type PickupCalendarEntry } from './api'
 
 const access = useAccessPreviewStore()
 const route = useRoute()
+const router = useRouter()
 const linkedSource = ref<ResolvedPlanningSource | null>(null)
 const linkError = ref<ApiErrorDetails | null>(null)
 const linkLoading = ref(false)
@@ -35,6 +36,8 @@ let linkRequest = 0
 const workView = ref<'calendar' | 'cargo' | 'containers'>('calendar')
 const appointments = ref<FbaAppointmentDto[]>([])
 const arrivals = ref<ArrivalCalendarEntry[]>([])
+const pickups = ref<PickupCalendarEntry[]>([])
+const pickupNotice = ref('')
 const range = ref(calendarRange(dateKey(new Date()), 'month'))
 const loading = ref(false)
 const loadError = ref<ApiErrorDetails | null>(null)
@@ -99,6 +102,18 @@ const events = computed<CalendarEvent[]>(() => [...arrivals.value.map(arrival =>
     { label: '柜次号', value: arrival.bookingNo },
     { label: '货物去向', value: arrival.destinationWarehouseCode },
   ],
+})), ...pickups.value.map(pickup => ({
+  key: `pickup-${pickup.containerBookingId}`, type: 'pickup' as const,
+  date: pickup.pickupAppointmentAt.slice(0, 10), time: pickup.pickupAppointmentAt.slice(11, 16),
+  title: `${pickup.containerNo || pickup.bookingNo || '未关联柜号'} 预约提柜`,
+  sourcePath: `/container-loading/overseas/${encodeURIComponent(pickup.containerBookingId)}`,
+  subtitle: '美国目的仓相关提柜安排',
+  fields: [
+    { label: '柜次号', value: pickup.bookingNo }, { label: '目的港', value: pickup.destinationPortName },
+    { label: '目的仓', value: pickup.destinationWarehouseCode }, { label: '车队', value: pickup.fleetSupplierName },
+    { label: '实际提柜', value: pickup.actualPickupAt || '尚未记录' },
+    { label: '时间口径', value: '原提柜业务时间，港口时区待核实' },
+  ],
 })), ...appointments.value.map(appointment => ({
   key: appointment.appointmentNo, type: 'delivery' as const, date: (appointment.appointmentAt || appointment.plannedAt || appointment.plannedDate || '').slice(0, 10),
   time: (appointment.appointmentAt || appointment.plannedAt || '').slice(11, 16) + (appointment.appointmentEndAt ? `–${appointment.appointmentEndAt.slice(11, 16)}` : ''), title: `${appointment.fbaWarehouseCode} ${appointment.appointmentStatus === 'SUCCESS' ? '已确认送仓' : '计划送仓'}`,
@@ -127,21 +142,33 @@ async function load(nextRange = range.value) {
   errorTitle.value = '预约日历加载失败'
   appointments.value = []
   arrivals.value = []
+  pickups.value = []
+  const canReadPickup = access.can('platform:firstleg:terminal-drayage:list')
+  pickupNotice.value = canReadPickup ? '' : '无提柜查看权限，当前日历不包含提柜预约。'
   try {
-    const [result, arrivalResult] = await Promise.allSettled([
+    const [result, arrivalResult, pickupResult] = await Promise.allSettled([
       listFbaAppointmentCalendar(nextRange, calendarController.signal),
       listArrivalCalendar(nextRange, calendarController.signal),
+      canReadPickup ? listPickupCalendar(nextRange, calendarController.signal) : Promise.resolve(null),
     ])
     if (request !== calendarRequest) return
     if (result.status === 'fulfilled') appointments.value = result.value
     else sourceErrors.value.push({ title: '送仓预约加载失败', details: getApiErrorDetails(result.reason, '送仓预约加载失败') })
     if (arrivalResult.status === 'fulfilled') arrivals.value = arrivalResult.value
     else sourceErrors.value.push({ title: '船舶到港加载失败', details: getApiErrorDetails(arrivalResult.reason, '船舶到港加载失败') })
+    if (pickupResult.status === 'fulfilled' && pickupResult.value) {
+      pickups.value = pickupResult.value.records
+      if (pickupResult.value.truncated || Number(pickupResult.value.unclassifiedCount) > 0) pickupNotice.value = '提柜来源有超出数量上限或目的仓国家待核实的记录，当前统计不完整，请缩小日期范围或完善仓库资料。'
+    } else if (pickupResult.status === 'rejected') sourceErrors.value.push({ title: '提柜预约加载失败', details: getApiErrorDetails(pickupResult.reason, '提柜预约加载失败') })
   } catch (error) {
     if (request === calendarRequest) loadError.value = getApiErrorDetails(error, '预约日历加载失败')
   } finally { if (request === calendarRequest) loading.value = false }
 }
 
+function openSource(event: CalendarEvent) {
+  if (event.sourcePath) void router.push(event.sourcePath)
+}
+
 function openCreate(date: string) {
   ++candidateRequest
   ++detailRequest
@@ -325,7 +352,8 @@ onBeforeUnmount(() => { ++unscheduledRequest; ++calendarRequest; ++candidateRequ
     <LoadErrorState v-for="error in sourceErrors" :key="error.title" :title="error.title" :message="error.details.message" :loading="loading" @retry="load()"><template #details><ApiErrorMeta :details="error.details" /></template></LoadErrorState>
     <LoadErrorState v-if="unscheduledError" title="未定时安排加载失败" :message="unscheduledError.message" @retry="loadUnscheduled" />
     <details v-if="unscheduledTotal" class="appointment-extra"><summary>未定时安排（{{ unscheduledTotal }}）</summary><DataTable v-model:page="unscheduledPage" v-model:page-size="unscheduledSize" :data="unscheduled" :columns="unscheduledColumns" :total="unscheduledTotal" row-key="appointmentNo" @update:page="loadUnscheduled" @update:page-size="unscheduledPage = 1; loadUnscheduled()"><template #actions="{ row }"><el-button @click="openEdit({key: row.appointmentNo})">查看 / 继续</el-button></template></DataTable></details>
-    <AppointmentCalendarPanel :events="events" :loading="loading" :incomplete="sourceErrors.length > 0" :can-create="access.can(permission.inboundOrderAppointment)" @range="load" @create="openCreate" @edit="openEdit" @delete="remove" />
+    <p v-if="pickupNotice" role="status">{{ pickupNotice }}</p>
+    <AppointmentCalendarPanel :events="events" :loading="loading" :incomplete="sourceErrors.length > 0 || !!pickupNotice" :can-create="access.can(permission.inboundOrderAppointment)" @range="load" @create="openCreate" @edit="openEdit" @delete="remove" @open="openSource" />
     </div>
     <AppDialog v-model="dialogOpen" class="admin-density-dialog" :title="editing ? '编辑预约' : '新增预约'" width="min(1080px, calc(100vw - 48px))" :confirm-text="pendingSave ? '重试本次保存' : '保存'" :confirm-loading="saving" :confirm-disabled="detailLoading || !detailReady || (!editing && (!warehouse || !selected.length || candidateLoading || !!candidateError))" @confirm="save">
       <LoadErrorState v-if="dialogError" title="预约操作失败" :message="dialogError.message" :show-retry="false"><template #details><ApiErrorMeta :details="dialogError" /></template></LoadErrorState>

src/modules/appointment-calendar/PROTOTYPE_MATRIX.md

@@ -18,9 +18,10 @@
 | 整柜提柜与接仓 | 美国预约统一方案的整柜共享事项 | 独立工作视图按柜汇总，操作列左置；接仓点在行内分组，点击后共用1080px跟进弹框。整柜只选拖车/码头事项，接仓只记录对应仓库，单票只记录FBA联系；数量未知或范围不完整明确显示，不按客户复制整柜联系。首次只请求一页整柜数据，详情按点击读取；待1920×1080页面验收 |
 | 在途跨客户合批安排 | 美国预约统一方案的同起运仓、同目的仓合批 | 操作列后选择同起运仓及同目的仓，跨页累计最多100票；批量核对后在1080px弹框填写与入仓入口共用的安排表单。未知箱数保留待核实；暂扣、多目的地和已有预约不可选入。保存必须重新核对，未知结果保留同一命令供重试 |
 | 未定时安排 | 总览不得伪造时段 | 日历上方独立折叠分页列表；日期未定不补零点或09点，继续编辑仍操作原系统单号；仅有计划日期时日历显示日期，不生成确认时段 |
+| 提柜日历 | 美国业务预约统一总览 | 读取原码头提柜预约，一柜一条，点击查看来源进入清关提柜详情；按美国目的仓确认业务范围，不等于确认港口国家。保留原业务日期，明确港口时区待核实，不套用目的仓时区；未知目的仓及截断显示统计不完整。无提柜权限不请求该来源并提示范围缺失 |
 | 来源失败 | 统一方案的部分结果规则 | 日历保留成功来源并提示不完整；深链解析失败不打开假来源；跟进版本加载失败禁止保存，未知提交结果保留原请求供重试 |
 
-结束时间未明确时允许为空。系统单号、外部确认号、计划时段及确认时段保持不同语义。日历范围最多42天，每次范围变化查询预约与到港各一次；未定时列表独立分页，选中日期不发送请求。候选选仓后自动分页读取，跨页选择保留；换仓清空旧选择并丢弃旧请求，清空仓库不查货。时区由目的仓主档核实，夏令时重叠明确时差，不凭浏览器时区猜测。仓库请求失败可重试；只展示前50个匹配仓，超出提示缩小关键词。
+结束时间未明确时允许为空。系统单号、外部确认号、计划时段及确认时段保持不同语义。日历范围最多42天，每次范围变化查询预约、到港及有权限的提柜来源各一次；未定时列表独立分页，选中日期不发送请求。候选选仓后自动分页读取，跨页选择保留；换仓清空旧选择并丢弃旧请求，清空仓库不查货。时区由目的仓主档核实，夏令时重叠明确时差，不凭浏览器时区猜测。仓库请求失败可重试；只展示前50个匹配仓，超出提示缩小关键词。
 
 本轮视觉验收：待人工1920×1080截图确认。
 

src/modules/appointment-calendar/api.ts

@@ -12,6 +12,29 @@ export interface ArrivalCalendarEntry {
   arrivalType: 'ACTUAL' | 'ESTIMATED'
 }
 
+export interface PickupCalendarEntry {
+  containerBookingId: string
+  bookingNo: string
+  containerNo: string | null
+  destinationPortName: string | null
+  destinationWarehouseCode: string | null
+  fleetSupplierName: string | null
+  pickupAppointmentAt: string
+  actualPickupAt: string | null
+}
+export interface PickupCalendar {
+  records: PickupCalendarEntry[]
+  truncated: boolean
+  unclassifiedCount: number
+  scopeBasis: 'US_DESTINATION_WAREHOUSE'
+  timeBasis: 'SOURCE_LOCAL_UNSPECIFIED'
+}
+export async function listPickupCalendar(query: { from: string; to: string }, signal?: AbortSignal) {
+  return unwrapApiResponse(await http.get<ApiEnvelope<PickupCalendar>, ApiEnvelope<PickupCalendar>>(
+    '/platform/v1/terminal-drayages/calendar', { params: query, signal },
+  ))
+}
+
 export async function listArrivalCalendar(query: { from: string; to: string }, signal?: AbortSignal) {
   const response = await http.get<ApiEnvelope<ArrivalCalendarEntry[]>, ApiEnvelope<ArrivalCalendarEntry[]>>(
     '/platform/v1/port-schedules/arrival-calendar', { params: query, signal },