From f9744bf5de57fe644104c81cb5946eefe5915b93 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Tue, 20 Oct 2026 22:06:35 +0800
Subject: [PATCH] fix(appointments): use Element date and time pickers

---
 .../AppointmentBatchForm.test.ts              |  4 ++-
 .../AppointmentBatchForm.vue                  |  4 +--
 .../AppointmentCalendarDialogs.native.test.ts | 20 +++++++++--
 .../AppointmentCalendarView.test.ts           |  4 ++-
 .../AppointmentCalendarView.vue               |  4 +--
 .../appointment-calendar/PROTOTYPE_MATRIX.md  | 15 ++++++++
 .../WorkCommandForm.test.ts                   |  8 +++--
 .../appointment-calendar/WorkCommandForm.vue  |  4 +--
 .../WorkReceivingPanel.test.ts                |  2 ++
 .../WorkReceivingPanel.vue                    | 10 +++---
 .../temporal-picker.test-support.ts           |  8 +++++
 .../temporalControls.test.ts                  | 36 +++++++++++++++++++
 src/styles/adminDensity.test.ts               |  3 +-
 13 files changed, 102 insertions(+), 20 deletions(-)
 create mode 100644 src/modules/appointment-calendar/temporal-picker.test-support.ts
 create mode 100644 src/modules/appointment-calendar/temporalControls.test.ts

diff --git a/src/modules/appointment-calendar/AppointmentBatchForm.test.ts b/src/modules/appointment-calendar/AppointmentBatchForm.test.ts
index eb2aea64..9a3800c3 100644
--- a/src/modules/appointment-calendar/AppointmentBatchForm.test.ts
+++ b/src/modules/appointment-calendar/AppointmentBatchForm.test.ts
@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, expect, it, vi } from 'vitest'
 import AppointmentBatchForm from './AppointmentBatchForm.vue'
@@ -13,6 +14,7 @@ vi.mock('./batchApi', async original => ({ ...await original<typeof import('./ba
 vi.mock('./workApi', async original => ({ ...await original<typeof import('./workApi')>(), getWorkItems: vi.fn() }))
 let guard: LeaveGuard
 function render() { return mount(AppointmentBatchForm, { props: { batchKey: 'FBA_APPOINTMENT:1' }, global: { provide: { 'appointment-work-leave-guard': (value: LeaveGuard) => { guard = value; return () => undefined } }, stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
   ElButton: { props: ['nativeType', 'disabled'], template: '<button :type="nativeType || \'button\'" :disabled="disabled"><slot /></button>' },
   LoadErrorState: { props: ['message'], template: '<section role="alert">{{ message }}<button @click="$emit(\'retry\')">重试读取</button></section>' }, ApiErrorMeta: true, CargoVerificationForm: true,
 } } }) }
@@ -176,7 +178,7 @@ it('retries a new destination without exposing the prior batch or retaining its
   expect(wrapper.text()).not.toContain('AP-001'); expect(wrapper.find('form').exists()).toBe(false)
   await wrapper.get('[role="alert"] button').trigger('click'); await flushPromises()
   expect(wrapper.text()).toContain('AP-CURRENT')
-  expect((wrapper.findAll('input[type="date"]')[0]!.element as HTMLInputElement).value).toBe('2026-10-22')
+  expect((wrapper.findAll('input[data-picker-kind="date"]')[0]!.element as HTMLInputElement).value).toBe('2026-10-22')
   expect((wrapper.get('[aria-label="来源1分出箱数"]').element as HTMLInputElement).value).toBe('0')
   expect(getAppointmentBatch).toHaveBeenLastCalledWith('FBA_APPOINTMENT:2')
   expect(repartitionAppointments).not.toHaveBeenCalled(); wrapper.unmount()
diff --git a/src/modules/appointment-calendar/AppointmentBatchForm.vue b/src/modules/appointment-calendar/AppointmentBatchForm.vue
index a404117b..d6701b5a 100644
--- a/src/modules/appointment-calendar/AppointmentBatchForm.vue
+++ b/src/modules/appointment-calendar/AppointmentBatchForm.vue
@@ -121,10 +121,10 @@ onMounted(() => load())
         <p v-for="reason in context.blockReasons" :key="reason" role="status">{{ reason }}</p>
         <div v-if="!context.sources.length" aria-label="原批次货物快照"><p>当前批次无分批资格，以下为原预约保留的货物资料。</p><div v-for="(item, index) in context.appointment.items" :key="item.id" class="allocation-row"><b>来源 {{ index + 1 }} · {{ item.inboundCode || '原票业务号未提供' }}</b><p>{{ item.fbaWarehouseCode }} · {{ item.packageCount ?? '箱数待核实' }}<span v-if="item.packageCount != null"> 箱</span></p><p>货件：{{ item.shipmentReferences?.join('、') || '待核实' }}</p></div></div>
         <div class="batch-modes"><el-button :disabled="saving || !!pending || !context.allowedActions.includes('SPLIT')" @click="changeMode('split')">分成两次送仓</el-button><el-button :disabled="saving || !!pending || !context.allowedActions.includes('MERGE')" @click="changeMode('merge')">同仓合并安排</el-button></div>
-        <form @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
+        <form class="density-form" @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
           <div v-for="(source, index) in context.sources" :key="allocationKey(source)" class="allocation-row"><b>来源 {{ index + 1 }} · {{ sourceLabel(source) }}</b><p>本批 {{ source.packageCount ?? '待核实' }} 箱 · 原箱数 {{ source.originalPackages ?? '未知' }}</p><p>货件：{{ source.shipmentReferences.join('、') || '待核实' }}</p><label v-if="mode === 'split'">分到第二批的箱数<input v-model="form.moved[allocationKey(source)]" type="number" min="0" :max="source.packageCount ?? undefined" step="1" :aria-label="`来源${index + 1}分出箱数`"></label><el-button v-if="context.allowedActions.includes('VERIFY_CARGO')" @click="verify(source)">核实本票资料</el-button></div>
           <template v-if="mode === 'merge'"><label>查找另一批工作事项<input v-model="keyword" placeholder="预约号、批次号、柜号" maxlength="80" @keydown.enter.prevent="searchCandidates()"></label><el-button :loading="candidateLoading" @click="searchCandidates()">查询批次</el-button><LoadErrorState v-if="candidateError" title="合并候选不可用" :message="candidateError.message" @retry="searchCandidates(candidatePage)" /><div v-for="candidate in candidates?.records.filter(item => item.batchKey && item.batchKey !== activeKey)" :key="candidate.workItemKey" class="batch-candidate"><span>{{ candidate.title }} · {{ candidate.destinationName || '目的仓待核实' }}</span><el-button :disabled="candidateLoading" @click="chooseOther(candidate.batchKey!)">核对并选择</el-button></div><p v-if="candidates && !candidates.records.length">本页未查询到工作事项。</p><div v-if="candidates && candidates.total > 8" class="batch-modes"><el-button :disabled="candidatePage === 1 || candidateLoading" @click="searchCandidates(candidatePage - 1)">上一页</el-button><span>第 {{ candidatePage }} 页</span><el-button :disabled="candidatePage * 8 >= candidates.total || candidateLoading" @click="searchCandidates(candidatePage + 1)">下一页</el-button></div><p v-if="other">已核对：{{ other.appointment.appointmentNo }}，{{ other.sources.length }} 条来源；提交时再次逐来源校验。</p></template>
-          <label>{{ mode === 'split' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<input v-model="form.firstDate" type="date"></label><label v-if="mode === 'split'">第二批目标日期（可不填）<input v-model="form.nextDate" type="date"></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" /></label>
+          <label>{{ mode === 'split' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<el-date-picker v-model="form.firstDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label v-if="mode === 'split'">第二批目标日期（可不填）<el-date-picker v-model="form.nextDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" /></label>
         </fieldset><LoadErrorState v-if="saveError" title="批次调整未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canSubmit || !!result">{{ pending ? '重试本次调整' : mode === 'split' ? '拆分为两批预约安排' : '合并为一批继续预约' }}</el-button></form>
       </template>
     </template>
diff --git a/src/modules/appointment-calendar/AppointmentCalendarDialogs.native.test.ts b/src/modules/appointment-calendar/AppointmentCalendarDialogs.native.test.ts
index 753fb4cd..918ca3af 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarDialogs.native.test.ts
+++ b/src/modules/appointment-calendar/AppointmentCalendarDialogs.native.test.ts
@@ -62,10 +62,13 @@ it('keeps the arrival context and typed local time across native fullscreen and
   expect(dialog.props('width')).toBe('520px')
   expect(dialog.get('[aria-label="到仓业务信息"]').text()).toContain('TEST-CONT 计划到仓')
   expect(dialog.text()).not.toContain(warehouse.sourceContainerBookingId)
-  await dialog.get('input[type="datetime-local"]').setValue('2026-10-22T09:30')
+  const picker = dialog.getComponent({ name: 'ElDatePicker' })
+  expect(picker.props()).toMatchObject({ type: 'datetime', valueFormat: 'YYYY-MM-DDTHH:mm', format: 'YYYY-MM-DD HH:mm' })
+  expect(dialog.getComponent({ name: 'ElForm' }).props('labelWidth')).toBe('150px')
+  picker.vm.$emit('update:modelValue', '2026-10-22T09:30'); await flushPromises()
   await dialog.get('button[aria-label="展开全屏"]').trigger('click'); await flushPromises()
   expect(dialog.findComponent({ name: 'ElDialog' }).props('fullscreen')).toBe(true)
-  expect((dialog.get('input').element as HTMLInputElement).value).toBe('2026-10-22T09:30')
+  expect(picker.props('modelValue')).toBe('2026-10-22T09:30')
   await dialog.get('.el-dialog__footer .el-button--primary').trigger('click'); await flushPromises()
   expect(saveWarehouseArrival).toHaveBeenCalledExactlyOnceWith(warehouse.sourceContainerBookingId, { estimatedWarehouseArrivalAt: '2026-10-22T09:30:00', expectedVersion: 3 }, expect.any(String))
 })
@@ -73,7 +76,7 @@ it('locks the real arrival input after an unknown outcome and reuses its immutab
   vi.mocked(saveWarehouseArrival).mockRejectedValueOnce(new Error('connection lost'))
   const wrapper = await open(); wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('edit', event); await flushPromises()
   const dialog = wrapper.findAllComponents(AppDialog).find(item => item.props('title') === '调整计划到仓')!
-  await dialog.get('input').setValue('2026-10-22T09:30')
+  dialog.getComponent({ name: 'ElDatePicker' }).vm.$emit('update:modelValue', '2026-10-22T09:30'); await flushPromises()
   await dialog.get('.el-dialog__footer .el-button--primary').trigger('click'); await flushPromises()
   expect(dialog.get('input').attributes('disabled')).toBeDefined()
   expect(dialog.text()).toContain('上次提交结果尚未确认')
@@ -81,6 +84,17 @@ it('locks the real arrival input after an unknown outcome and reuses its immutab
   await dialog.get('.el-dialog__footer .el-button--primary').trigger('click'); await flushPromises()
   expect(vi.mocked(saveWarehouseArrival).mock.calls[1]).toEqual(vi.mocked(saveWarehouseArrival).mock.calls[0])
 })
+it('clears the Element arrival picker without saving an empty required time', async () => {
+  const wrapper = await open(); wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('edit', event); await flushPromises()
+  const dialog = wrapper.findAllComponents(AppDialog).find(item => item.props('title') === '调整计划到仓')!
+  const picker = dialog.getComponent({ name: 'ElDatePicker' })
+  expect(dialog.find('input[type="datetime-local"]').exists()).toBe(false)
+  picker.vm.$emit('update:modelValue', '2026-10-22T09:30'); await flushPromises()
+  expect(dialog.props('confirmDisabled')).toBe(false)
+  picker.vm.$emit('update:modelValue', null); await flushPromises()
+  expect(dialog.props('confirmDisabled')).toBe(true)
+  expect(saveWarehouseArrival).not.toHaveBeenCalled()
+})
 it('keeps complete long cargo names accessible in the selectable table', async () => {
   const wrapper = await open()
   wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('create'); await vi.dynamicImportSettled(); await flushPromises()
diff --git a/src/modules/appointment-calendar/AppointmentCalendarView.test.ts b/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
index 528f29a2..b776a5ba 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
+++ b/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { onBeforeRouteLeave } from 'vue-router'
@@ -17,6 +18,7 @@ const warehouse: WarehouseArrival = { sourceContainerBookingId: '1', containerNo
 const row: ScheduleEvent = { key: 'warehouse-1', type: 'warehouse', date: '2026-10-21', time: '', title: 'TEST-CONT 计划到仓', fields: [], warehouse, canEdit: true }
 export function renderSchedule() {
   return mount(AppointmentCalendarView, { global: { stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
     AdminPage: { template: '<main><slot /></main>' },
     AppointmentCalendarPanel: { name: 'AppointmentCalendarPanel', props: ['events', 'loading', 'incomplete', 'initialDate', 'initialMode', 'canCreate'], template: '<section data-calendar />' },
     AppDialog: { name: 'AppDialog', props: ['modelValue', 'beforeClose', 'confirmDisabled', 'confirmLoading'], emits: ['confirm'], template: '<section v-if="modelValue" data-dialog><slot /><button data-save :disabled="confirmDisabled" @click="$emit(\'confirm\')">保存</button><button data-close @click="beforeClose(() => {})">关闭</button></section>' },
@@ -109,7 +111,7 @@ describe('simplified appointment entry', () => {
     vi.mocked(saveWarehouseArrival).mockRejectedValueOnce(new Error('network interrupted')).mockResolvedValueOnce({})
     const wrapper = renderSchedule(); await flushPromises()
     wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('edit', row); await flushPromises()
-    await wrapper.get('input[type="datetime-local"]').setValue('2026-10-22T09:30')
+    await wrapper.get('input[data-temporal-picker]').setValue('2026-10-22T09:30')
     await wrapper.get('[data-save]').trigger('click'); await flushPromises()
     expect(wrapper.text()).toContain('提交结果尚未确认')
     expect(wrapper.get('input').attributes('disabled')).toBeDefined()
diff --git a/src/modules/appointment-calendar/AppointmentCalendarView.vue b/src/modules/appointment-calendar/AppointmentCalendarView.vue
index ce7483d5..c5120884 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarView.vue
+++ b/src/modules/appointment-calendar/AppointmentCalendarView.vue
@@ -183,8 +183,8 @@ onBeforeUnmount(() => { ++generation; controller?.abort() })
         </section>
 
         <section class="density-dialog-section" data-tone="work" aria-label="调整到仓时间">
-          <el-form class="density-form" label-position="left" label-width="110px" :disabled="saving || unknownResult">
-            <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="计划到仓时间" required><template #label><span>计划到仓时间<InlineHelp title="到仓时间说明"><p>自动计划为到港日期加2个自然日；人工保存后优先使用人工时间。填写接仓地点当地时间。</p></InlineHelp></span></template><el-input v-model="plannedAt" type="datetime-local" :disabled="saving || unknownResult" required aria-label="计划到仓时间" placeholder="接仓地点当地时间" /></el-form-item></td></tr></tbody></table>
+          <el-form class="density-form" label-position="left" label-width="150px" :disabled="saving || unknownResult">
+            <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="计划到仓时间" required><template #label>计划到仓时间<InlineHelp title="到仓时间说明"><p>自动计划为到港日期加2个自然日；人工保存后优先使用人工时间。填写接仓地点当地时间。</p></InlineHelp></template><el-date-picker v-model="plannedAt" type="datetime" :disabled="saving || unknownResult" required aria-label="计划到仓时间" placeholder="接仓地点当地时间" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DDTHH:mm" clearable /></el-form-item></td></tr></tbody></table>
           </el-form>
         </section>
         <p v-if="unknownResult" role="status">上次提交结果尚未确认，请使用原请求重试，避免重复修改。</p>
diff --git a/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md b/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
index 9cb526df..190e3ea8 100644
--- a/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
+++ b/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
@@ -1,5 +1,20 @@
 # 预约工作日历逐操作矩阵
 
+## 2026-10-20 日期时间组件统一（当前确认）
+
+依据：用户截图 `codex-clipboard-ed442cca-1bd2-43d3-87e8-6671e5bcc508.png`，以及随后明确要求排查并优化同类原生日期输入。保留现有业务入口与承载方式，使用 Element Plus 日期/时间控件及已有公共表单样式。
+
+| 页面/组件 | 操作与承载 | 本次调整 | 验收 |
+|---|---|---|---|
+| AppointmentCalendarView | 调整计划到仓，原520px居中弹框及全屏能力 | 1处日期时间选择器；分钟精度沿用原请求格式；标签宽度150px，说明图标与标签并排，控件沿用公共满宽样式 | 自动检查通过；待人工1920×1080、100%截图确认 |
+| WorkReceivingPanel | 原业务深链中的客户计划、后送与跟进，原表单 | 5处日期/日期时间输入；日期与秒精度的当地时间分别保存；调整开始/结束时段后仍清除原时差依据 | 自动检查通过；待人工截图确认 |
+| WorkCommandForm | 跟进、收货要求，原表单 | 3处日期、2处时间输入；跨日结束日期显式保留；不推断次日、不转换地点时区 | 自动检查通过；待人工截图确认 |
+| AppointmentBatchForm | 原分批/合并表单 | 2处可空目标日期，保留跨批分配、版本、幂等与原写权限 | 自动检查通过；待人工截图确认 |
+
+共4组件13处。日期使用 `el-date-picker`，时间使用 `el-time-picker`；保留原权限、处理中及未知结果锁定、清空与未保存保护。新增控件显式接收原禁用条件，宽度复用 `density-form`，不新增全局日期控件外观规则。
+
+自动验证：受影响7个测试文件88项通过；类型检查与生产构建通过。全量回归执行464个文件4203项，4201项通过，两项旧公共样式断言（标签宽度、追加样式类）更新后，该样式文件65项全部复验通过。后台业务模板原生日期/时间控件残留检查通过。本轮未部署TEST，未进行真实HTTP或人工页面截图验收。
+
 ## 2026-10-20 排车入口收敛
 
 用户指出预约日历仍跳旧车次详情。排车标签改用服务端关联真实整车主单返回的排车单号，打开 `/overseas-warehouse/dispatches/:dispatchNo` 独立排车详情；返回按钮显示“返回预约日历”并保留原日期与月/周视图。无合法日历返回参数时继续走原列表或拼车登记返回逻辑，外部返回地址拒绝。读取权限与排车列表一致，不要求旧车次列表权限；独立旧车次、取消排车主单不进入活动日历，不按TR号猜DS号。原四类、地点日期和实际发车归属规则保持。自动检查与发布/真实HTTP分别记录，1920×1080、100%人工操作截图待确认。
diff --git a/src/modules/appointment-calendar/WorkCommandForm.test.ts b/src/modules/appointment-calendar/WorkCommandForm.test.ts
index 31b3fe06..b8bff029 100644
--- a/src/modules/appointment-calendar/WorkCommandForm.test.ts
+++ b/src/modules/appointment-calendar/WorkCommandForm.test.ts
@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, expect, it, vi } from 'vitest'
 import WorkCommandForm from './WorkCommandForm.vue'
@@ -13,6 +14,7 @@ vi.mock('./workApi', async original => ({ ...await original<typeof import('./wor
 let guard: LeaveGuard
 function render(action: WorkAction = followAction, detail = workDetail({ item: workItem({ allowedActions: [action], nextAction: action }) })) {
   return mount(WorkCommandForm, { props: { detail, action, refreshing: false }, global: { provide: { 'appointment-work-leave-guard': (value: LeaveGuard) => { guard = value; return () => undefined } }, stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
     ElButton: { props: ['nativeType', 'disabled'], template: '<button :type="nativeType" :disabled="disabled"><slot /></button>' },
     LoadErrorState: { props: ['message'], template: '<div role="alert">{{ message }}</div>' }, ApiErrorMeta: true,
   } } })
@@ -79,7 +81,7 @@ const requirementAction: WorkAction = { code: 'SAVE_REQUIREMENT', label: '登记
 it('preserves an explicit cross-day local interval in the requirement request', async () => {
   const wrapper = render(requirementAction)
   await wrapper.findAll('textarea')[1]!.setValue('跨日收货窗口')
-  const dates = wrapper.findAll('input[type=date]'), times = wrapper.findAll('input[type=time]')
+  const dates = wrapper.findAll('input[data-picker-kind=date]'), times = wrapper.findAll('input[data-picker-kind=time]')
   await dates[0]!.setValue('2026-10-15'); await times[0]!.setValue('23:00')
   await dates[1]!.setValue('2026-10-16'); await times[1]!.setValue('01:00')
   await wrapper.get('form').trigger('submit'); await flushPromises()
@@ -93,7 +95,7 @@ it.each([
 ])('rejects incomplete or non-increasing interval %s %s %s without inferring a next day', async (endDate, endTime, startTime) => {
   const wrapper = render(requirementAction)
   await wrapper.findAll('textarea')[1]!.setValue('核对时间')
-  const dates = wrapper.findAll('input[type=date]'), times = wrapper.findAll('input[type=time]')
+  const dates = wrapper.findAll('input[data-picker-kind=date]'), times = wrapper.findAll('input[data-picker-kind=time]')
   await dates[0]!.setValue('2026-10-15'); await times[0]!.setValue(startTime)
   await dates[1]!.setValue(endDate); await times[1]!.setValue(endTime)
   await wrapper.get('form').trigger('submit'); await flushPromises()
@@ -102,7 +104,7 @@ it.each([
 it('saves a date-only requirement with all time fields null', async () => {
   const wrapper = render(requirementAction)
   await wrapper.findAll('textarea')[1]!.setValue('具体时段待回复')
-  await wrapper.findAll('input[type=date]')[0]!.setValue('2026-10-15')
+  await wrapper.findAll('input[data-picker-kind=date]')[0]!.setValue('2026-10-15')
   await wrapper.get('form').trigger('submit'); await flushPromises()
   expect(submitWorkCommand).toHaveBeenCalledWith('work-delivery-1', expect.objectContaining({ payload: expect.objectContaining({ target: { date: '2026-10-15', startTime: null, endDate: null, endTime: null, timezone: 'America/Los_Angeles' } }) }))
   wrapper.unmount()
diff --git a/src/modules/appointment-calendar/WorkCommandForm.vue b/src/modules/appointment-calendar/WorkCommandForm.vue
index b38f2eba..e21e987a 100644
--- a/src/modules/appointment-calendar/WorkCommandForm.vue
+++ b/src/modules/appointment-calendar/WorkCommandForm.vue
@@ -92,9 +92,9 @@ async function save() {
     <p v-if="missingContext" role="alert">{{ missingContext }}</p>
     <fieldset :disabled="!allowed || refreshing || saving || !!pending">
       <template v-if="command === 'CONFIRM_ROUTE'"><label>运输方式<select v-model="form.flow"><option value="TRANSFER">先入海外仓，再分批送仓</option><option value="DIRECT">整柜直接送目的仓</option></select></label><label>路线说明<textarea v-model="form.reason" maxlength="1000" /></label></template>
-      <template v-else-if="command === 'SAVE_FOLLOWUP'"><label>跟进负责人<select v-model="form.ownerId" required><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>本次回复<textarea v-model="form.note" required maxlength="1000" /></label><label>下次跟进日期（可留空）<input v-model="form.followupDate" type="date"></label></template>
+      <template v-else-if="command === 'SAVE_FOLLOWUP'"><label>跟进负责人<select v-model="form.ownerId" required><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>本次回复<textarea v-model="form.note" required maxlength="1000" /></label><label>下次跟进日期（可留空）<el-date-picker v-model="form.followupDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label></template>
       <template v-else-if="command === 'RESOLVE_REVIEW'"><p v-for="reason in detail.review?.reasons" :key="reason">{{ reason }}</p><label>本次核对结果<textarea v-model="form.note" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'SAVE_REQUIREMENT'"><label>目标日期（可暂不填）<input v-model="form.date" type="date"></label><div class="time-fields"><label>开始时段（可留空）<input v-model="form.startTime" type="time"></label><label>结束日期（可留空）<input v-model="form.endDate" type="date"></label><label>结束时段（可留空）<input v-model="form.endTime" type="time"></label></div><p>{{ item.timezone || '地点时区待核实' }}</p><label v-if="item.type === 'DELIVERY'"><input v-model="form.bookingRequired" type="checkbox">需要收货方预约</label><label>收货要求<textarea v-model="form.receivingRequirements" :required="!form.bookingRequired" maxlength="1000" /></label><label>处理说明<textarea v-model="form.reason" required maxlength="1000" /></label></template>
+      <template v-else-if="command === 'SAVE_REQUIREMENT'"><label>目标日期（可暂不填）<el-date-picker v-model="form.date" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><div class="time-fields"><label>开始时段（可留空）<el-time-picker v-model="form.startTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label><label>结束日期（可留空）<el-date-picker v-model="form.endDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>结束时段（可留空）<el-time-picker v-model="form.endTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label></div><p>{{ item.timezone || '地点时区待核实' }}</p><label v-if="item.type === 'DELIVERY'"><input v-model="form.bookingRequired" type="checkbox">需要收货方预约</label><label>收货要求<textarea v-model="form.receivingRequirements" :required="!form.bookingRequired" maxlength="1000" /></label><label>处理说明<textarea v-model="form.reason" required maxlength="1000" /></label></template>
       <template v-else-if="command === 'HANDOFF_RETURN'"><p>转交保留原预约和责任记录；接手方确认前持续跟进。</p><label>接手方类型<select v-model="form.recipientKind" @change="changeRecipient"><option value="EXTERNAL">外部车队 / 联系人</option><option value="SUPPLIER">已登记海外车队</option><option value="USER">当前关联负责人</option></select></label><label v-if="form.recipientKind === 'EXTERNAL'">接手方名称<input v-model="form.recipientName" required maxlength="200"></label><template v-else-if="form.recipientKind === 'SUPPLIER'"><label>查找海外车队<input v-model="supplierKeyword" maxlength="80" @keydown.enter.prevent="searchSuppliers"></label><el-button :loading="supplierLoading" @click="searchSuppliers">查询车队</el-button><LoadErrorState v-if="supplierError" title="还空车队不可用" :message="supplierError.message" @retry="searchSuppliers" /><label>接手车队<select v-model="form.recipientId" required :disabled="supplierLoading || !!supplierError"><option value="" disabled>请选择已登记海外车队</option><option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">{{ supplier.name }}</option></select></label><p v-if="supplierTotal > suppliers.length">请输入更完整名称缩小查询范围。</p></template><label v-else>接手负责人<select v-model="form.recipientId" required><option value="" disabled>请选择</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>转交原因<textarea v-model="form.reason" required maxlength="1000" /></label></template>
       <template v-else-if="command === 'ACCEPT_RETURN'"><p>原责任方：{{ detail.returnHandoff?.from.name || '—' }} → 接手方：{{ detail.returnHandoff?.to.name || '—' }}</p><label>接手反馈依据<textarea v-model="form.note" :required="detail.returnHandoff?.to.kind !== 'USER'" maxlength="1000" /></label><p>确认接手只记录责任，实际还空仍按原业务操作。</p></template>
     </fieldset>
diff --git a/src/modules/appointment-calendar/WorkReceivingPanel.test.ts b/src/modules/appointment-calendar/WorkReceivingPanel.test.ts
index cab16ccc..431ecf95 100644
--- a/src/modules/appointment-calendar/WorkReceivingPanel.test.ts
+++ b/src/modules/appointment-calendar/WorkReceivingPanel.test.ts
@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, expect, it, vi } from 'vitest'
 import { ElMessageBox } from 'element-plus'
@@ -26,6 +27,7 @@ function agreement(status = 'ACTIVE'): api.ReceivingAgreement { return { agreeme
 function pendingChange(): api.ReceivingPending { return { changeKey: 'CHANGE-1', version: 1, status: 'WAITING', intent: { batchKey: 'FBA_APPOINTMENT:1', batchVersion: 3, customerId: 'customer-a', quantities: [{ sourceKey: 'ORDER:1', destinationKey: 'FBA:ONT8', retainedPackages: 0, expectedSourceVersion: 'source-v3', expectedVerificationVersion: 2 }], laterDate: null, ownerId: 'owner-related', nextFollowupDate: '2026-10-21', reason: '本客户后送', transportVersion: 'transport-v1' }, originalMembers: [members()[0]!], originalAgreements: [agreement()], followup: { ownerId: 'owner-related', ownerName: '已核实负责人', nextFollowupDate: '2026-10-21' } } }
 function result(status = 'APPLIED'): api.ReceivingResult { return { changeKey: null, status, batches: [context().batch], agreements: [], steps: [{ step: 'BOOK_RECEIVING', status: 'SUCCESS', targetKey: 'GROUP-1', message: '已保存真实预约' }], nextActions: ['REVIEW_TRANSPORT'] } }
 function render() { return mount(WorkReceivingPanel, { props: { batchKey: 'FBA_APPOINTMENT:1', canWrite: true, owners: [{ id: 'owner-related', name: '关联负责人' }] }, global: { provide: { 'appointment-work-leave-guard': (value: LeaveGuard) => { guard = value; return () => undefined } }, stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
   ElButton: { props: ['disabled', 'nativeType'], template: '<button :disabled="disabled" :type="nativeType || \'button\'"><slot /></button>' },
   FbaAppointmentFields: { name: 'FbaAppointmentFields', props: ['model', 'disabled'], template: '<div data-booking-fields />' },
   LoadErrorState: { props: ['message', 'showRetry'], template: '<section role="alert">{{ message }}<button v-if="showRetry !== false" @click="$emit(\'retry\')">重试读取</button></section>' }, ApiErrorMeta: true,
diff --git a/src/modules/appointment-calendar/WorkReceivingPanel.vue b/src/modules/appointment-calendar/WorkReceivingPanel.vue
index bea37661..8f85325d 100644
--- a/src/modules/appointment-calendar/WorkReceivingPanel.vue
+++ b/src/modules/appointment-calendar/WorkReceivingPanel.vue
@@ -264,7 +264,7 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
         <ReceivingScope :members="[]" :transport="context.transport" />
         <el-button :disabled="locked || !edit || !context.allowedActions.includes('BOOK_RECEIVING')" @click="newBooking">登记当前未覆盖货物的正式预约</el-button>
       </template>
-      <form v-else @submit.prevent="save()">
+      <form v-else class="density-form" @submit.prevent="save()">
         <fieldset :disabled="locked || !formWritable">
           <template v-if="mode === 'refresh'">
             <h4>{{ customerName(customer) || '—' }} · 核对本客户最新货物资料</h4><p>采用后仅更新本客户的资料快照，本批箱数和其他客户的确认保持不变；保存核实资料不会自动执行采用。</p>
@@ -279,15 +279,15 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
             <p v-for="item in customerItems" :key="item.id">{{ item.inboundCode || '—' }} · {{ item.packageCount ?? '箱数待核实' }}</p>
             <p>{{ planTimezone || '目的仓时区待核实' }} · 只保存本客户计划，其他客户的确认保持不变。</p>
             <p v-if="!planEligible(customer)" role="status">本客户资格已变化，暂不能保存普通计划，请返回范围概览核对。</p>
-            <label>目标送仓日期<input v-model="planForm.plannedDate" type="date" aria-label="客户计划日期"></label>
-            <label>计划开始时段<input v-model="planForm.plannedAt" @change="planForm.startOffset = ''" type="datetime-local" step="1" aria-label="客户计划开始"></label>
-            <label>计划结束时段<input v-model="planForm.plannedEndAt" @change="planForm.endOffset = ''" type="datetime-local" step="1" aria-label="客户计划结束"></label>
+            <label>目标送仓日期<el-date-picker v-model="planForm.plannedDate" type="date" aria-label="客户计划日期" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label>
+            <label>计划开始时段<el-date-picker v-model="planForm.plannedAt" @change="planForm.startOffset = ''" type="datetime" aria-label="客户计划开始" :disabled="locked || !formWritable" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></label>
+            <label>计划结束时段<el-date-picker v-model="planForm.plannedEndAt" @change="planForm.endOffset = ''" type="datetime" aria-label="客户计划结束" :disabled="locked || !formWritable" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></label>
             <details><summary>计划时段的夏令时信息</summary><p>当地时钟回拨导致时刻重复时，请按仓库确认填写对应时差。跳时期间不存在的当地时刻不可用，请选择有效时间。</p><label>计划开始时差<input v-model="planForm.startOffset" aria-label="客户计划开始时差" placeholder="如 -07:00"></label><label>计划结束时差<input v-model="planForm.endOffset" aria-label="客户计划结束时差" placeholder="如 -08:00"></label></details>
             <label>本次联系结果<select v-model="planForm.appointmentStatus" aria-label="客户计划状态"><option value="PENDING">等待对方确认</option><option value="FAILED">未约成</option></select></label>
             <label>{{ planForm.appointmentStatus === 'FAILED' ? '未约成原因' : '联系备注' }}<textarea v-model="planForm.appointmentRemark" maxlength="1000" aria-label="客户计划备注" /></label>
 
           </template>
-          <template v-if="mode === 'customer'"><h4>仅本客户调整，其他客户保持原安排</h4><div v-for="item in customerItems" :key="item.id"><p>{{ item.inboundCode || '原票业务号未提供' }} · 当前 {{ item.packageCount ?? '待核实' }} 箱</p><label v-if="item.destinationKey">本次先送箱数<input v-model="adjustment.retained[sourceKey({ sourceKey: item.sourceKey, destinationKey: item.destinationKey })]" type="number" min="0" :max="item.packageCount ?? undefined" step="1" aria-label="本次先送箱数"></label></div><label>后送目标日期<input v-model="adjustment.laterDate" type="date"></label><label>负责人<select v-model="adjustment.ownerId" required aria-label="调整负责人"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>下一次跟进日期<input v-model="adjustment.followup" type="date"></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></template>
+          <template v-if="mode === 'customer'"><h4>仅本客户调整，其他客户保持原安排</h4><div v-for="item in customerItems" :key="item.id"><p>{{ item.inboundCode || '原票业务号未提供' }} · 当前 {{ item.packageCount ?? '待核实' }} 箱</p><label v-if="item.destinationKey">本次先送箱数<input v-model="adjustment.retained[sourceKey({ sourceKey: item.sourceKey, destinationKey: item.destinationKey })]" type="number" min="0" :max="item.packageCount ?? undefined" step="1" aria-label="本次先送箱数"></label></div><label>后送目标日期<el-date-picker v-model="adjustment.laterDate" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>负责人<select v-model="adjustment.ownerId" required aria-label="调整负责人"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>下一次跟进日期<el-date-picker v-model="adjustment.followup" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></template>
           <template v-if="mode === 'resolve' && change"><h4>仓库回复：本次客户调整</h4><ReceivingScope :members="change.originalMembers" :transport="context.transport" /><p v-for="(quantity, index) in change.intent.quantities" :key="sourceKey(quantity)">货物 {{ index + 1 }} · 本次先送 {{ quantity.retainedPackages }} 箱</p><p>负责人 {{ change.followup.ownerName || '—' }} · 跟进 {{ change.followup.nextFollowupDate || '待安排' }}</p><p>后送日期 {{ change.intent.laterDate || '未定' }} · {{ change.intent.reason }}</p><p v-for="agreement in change.originalAgreements" :key="agreement.agreementKey">原约号 {{ agreement.details.confirmationNo || '—' }} · {{ agreement.details.appointmentAt || '时段未定' }} · {{ agreement.timezone || '时区待核实' }}</p><label>仓库同意保留量和移出量的回复依据<textarea v-model="evidence" maxlength="1000" aria-label="仓库回复依据" /></label></template>
           <template v-if="group"><h4>{{ mode === 'book' ? '整组重约当前范围' : '整份预约当前范围' }}</h4><ReceivingScope :members="mode === 'book' ? selectedBookMembers : group.agreement.members" :transport="group.transport" /><div v-for="(excluded, index) in group.excludedMembers" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除范围 {{ index + 1 }} · {{ excluded.member.appointmentNo }}：{{ excluded.reason }}</div></template>
           <template v-if="mode === 'book'"><p>未取得确认时，可先按客户保存目标或未约成原因。</p><el-button v-for="member in bookMembers.filter(row => row.batchKey === batchKey && planEligible(row.customerId))" :key="member.customerId" :disabled="locked || !edit" @click="openPlan(member.customerId)">{{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }} · 保存目标 / 未约成</el-button><p v-if="!group && cargoIncomplete" role="status">货物数量或来源资料待核实，当前不能登记正式预约。</p><p v-if="bookingScopeChanged" role="status">当前成员范围已变化，请核对上方范围后重新填写预约，原输入不会自动套用给其他客户。<el-button :disabled="locked" @click="resetBookingScope">按当前范围重新填写</el-button></p><template v-if="!group"><p v-for="(excluded, index) in context.executionScope.members.filter(row => row.completed || !row.canRebook)" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除客户范围 {{ index + 1 }}：{{ excluded.reason || (excluded.completed ? '已完成' : '当前不可重新预约') }}</p></template><ReceivingScope v-if="!group" :members="selectedBookMembers" :transport="context.transport" /><LoadErrorState v-if="scopeError" title="所选客户执行资格读取失败" :message="scopeError.message" :loading="scopeLoading" @retry="refreshSelectedScope" /><p v-if="scopeLoading">正在核对所选客户执行资格…</p><p v-if="!scopeLoading && !scopeError && selectedBookMembers.length && !selectedExecutionAllowed" role="status">所选客户执行资格不完整或不可办理，请核对后重新选择。</p><p v-for="(eligibility, index) in selectedExecution?.members.filter(row => row.completed || !row.canRebook) || []" :key="index" role="status">所选范围 {{ index + 1 }}：{{ eligibility.reason || '当前不可重新预约' }}</p><div aria-label="本次预约客户"><h4>选择本次取得确认的客户</h4><label v-for="(member, index) in bookMembers" :key="memberKey(member)"><input v-model="selectedMemberKeys" @change="refreshSelectedScope" :value="memberKey(member)" type="checkbox" :aria-label="`选择预约客户 ${index + 1}`">{{ member.appointmentNo }} · {{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }}</label><p v-if="!selectedBookMembers.length">请至少选择一个客户。</p></div><label><input v-model="separate" type="checkbox">所选客户分别登记预约</label><p>共同预约须由仓库明确确认覆盖当前全部所选客户和货量；重复填写同一约号不能代替共同预约。</p><template v-for="(row, index) in (bookingScopeChanged ? [] : bookingRows)" :key="index"><h4>{{ separate ? `${row.member?.appointmentNo} · ${row.member?.customerName || '—'} · 客户范围 ${index + 1}` : '一份共同预约' }}</h4><FbaAppointmentFields :model="bookingForms[row.index]!" :timezone="group?.agreement.timezone || context.batch.timezone" :disabled="locked || !edit" /><label>仓库确认覆盖依据<textarea v-model="bookingEvidence[row.index]" maxlength="1000" aria-label="预约覆盖依据" /></label></template></template>
diff --git a/src/modules/appointment-calendar/temporal-picker.test-support.ts b/src/modules/appointment-calendar/temporal-picker.test-support.ts
new file mode 100644
index 00000000..1a2683ae
--- /dev/null
+++ b/src/modules/appointment-calendar/temporal-picker.test-support.ts
@@ -0,0 +1,8 @@
+const input = {
+  props: ['modelValue', 'disabled', 'type', 'format', 'valueFormat'],
+  emits: ['update:modelValue', 'change'],
+  template: `<input data-temporal-picker :data-picker-kind="type || 'time'" :value="modelValue" :disabled="disabled" @input="$emit('update:modelValue', $event.target.value); $emit('change', $event.target.value)">`,
+}
+
+export const DatePickerStub = { name: 'ElDatePicker', ...input }
+export const TimePickerStub = { name: 'ElTimePicker', ...input }
diff --git a/src/modules/appointment-calendar/temporalControls.test.ts b/src/modules/appointment-calendar/temporalControls.test.ts
new file mode 100644
index 00000000..fbbe7d1c
--- /dev/null
+++ b/src/modules/appointment-calendar/temporalControls.test.ts
@@ -0,0 +1,36 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { parse } from 'vue/compiler-sfc'
+import { expect, it } from 'vitest'
+
+/** 持续检查后台业务模板，避免再次用原生日期控件替代 Element 公共控件。 */
+it('uses Element date and time pickers throughout Admin business templates', () => {
+  const root = join(process.cwd(), 'src/modules')
+  const violations: string[] = []
+  function inspect(content: DocumentFragment, file: string) {
+    for (const input of content.querySelectorAll('input, el-input')) {
+      const type = input.getAttribute('type') || ''
+      if (/^(date|time|month|week|datetime-local)$/.test(type)) {
+        violations.push(`${relative(root, file)} ${input.tagName.toLowerCase()} type=${type}`)
+      }
+    }
+    // 条件和插槽模板的内容位于独立的 DocumentFragment 中。
+    for (const template of content.querySelectorAll('template')) inspect(template.content, file)
+  }
+  function visit(directory: string) {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      const file = join(directory, entry.name)
+      if (entry.isDirectory()) visit(file)
+      else if (entry.name.endsWith('.vue')) {
+        const source = parse(readFileSync(file, 'utf8')).descriptor.template?.content
+        if (source) {
+          const template = document.createElement('template')
+          template.innerHTML = source
+          inspect(template.content, file)
+        }
+      }
+    }
+  }
+  visit(root)
+  expect(violations).toEqual([])
+})
diff --git a/src/styles/adminDensity.test.ts b/src/styles/adminDensity.test.ts
index a194f908..8e9cb5c2 100644
--- a/src/styles/adminDensity.test.ts
+++ b/src/styles/adminDensity.test.ts
@@ -399,7 +399,8 @@ describe('approved Admin density ownership', () => {
     expect(dialogs).toHaveLength(3)
     for (const dialog of dialogs) { expect(dialog).toContain('admin-density-dialog'); expect(dialog).toContain('fullscreenable') }
     expect(view.template!.content).toContain('density-table density-table--editable')
-    expect(view.template!.content).toContain('label-position="left" label-width="110px"')
+    expect(view.template!.content).toContain('label-position="left" label-width="150px"')
+    expect(view.template!.content).toContain('<el-date-picker v-model="plannedAt" type="datetime"')
     expect(view.styles.map(style => style.content).join('\n')).not.toContain('arrival-field')
     expect(create.template!.content).toContain('aria-label="预约保存回执"')
     expect(create.template!.content).not.toContain('<FbaAppointmentFields')