BizAppointmentPicker 预约选择

预约选择器：左侧迷你月历 + 右侧当日时段列表。月历支持 min-date / max-date 区间、workday-only（复用 BizWorkdayCalendar 的法定节假日数据口径）与自定义 disabled-date；时段列表展示容量 / 已约 / 剩余，约满与禁用自动置灰，支持单选与多选（可设上限）。适用于医院挂号、门店服务预约、会议室预订、设备 / 场地预约、回访时间选择。

与相关组件的分工

BizScheduleTime 是「按周几的固定营业排班编辑」；BizWorkdayCalendar 是「工作日判定与展示」；本组件是「具体日期 → 当日时段 → 余量」的预约选择——三者可组合：用 ScheduleTime 配置排班规则，经业务侧展开为本组件某日的时段与容量。

基础用法（静态时段）

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

当前选择：未选择；月历绿点 = 该日有可约时段，15:00-16:00 已约满置灰。

slots 全月一套时段：选日期 → 选时段；月历绿点标记有可约时段的日期，约满时段置灰显示「已约满」。

<script setup lang="ts">
/** 场景：基础单选——静态时段（全月一套），选日期 → 选时段 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection } from 'vue3-ep-biz-lib'

const slots = [
  { id: '09:00-10:00', start: '09:00', end: '10:00', capacity: 10, booked: 2 },
  { id: '10:00-11:00', start: '10:00', end: '11:00', capacity: 10, booked: 5 },
  { id: '11:00-12:00', start: '11:00', end: '12:00', capacity: 8, booked: 1 },
  { id: '14:00-15:00', start: '14:00', end: '15:00', capacity: 10, booked: 9 },
  { id: '15:00-16:00', start: '15:00', end: '16:00', capacity: 6, booked: 6 },
  { id: '16:00-17:00', start: '16:00', end: '17:00', capacity: 6, booked: 0 },
]

const selected = ref<BizAppointmentSelection | null>(null)
</script>

<template>
  <div style="max-width: 760px">
    <BizAppointmentPicker v-model="selected" :slots="slots" />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      当前选择：{{ selected ? `${selected.date} ${selected.slotIds.join('、')}` : '未选择' }}；月历绿点 = 该日有可约时段，15:00-16:00 已约满置灰。
    </p>
  </div>
</template>

容量与按日期映射

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

key(0) 当天整体约满（月历禁用无绿点）；其余日期按 booked 展示「余 N」，某时段约满单独置灰。

slots-by-date 按日期（YYYY-MM-DD）映射不同余量，也支持 YYYY-MM 做全月兜底；某天全部约满时月历直接禁用该日期。

<script setup lang="ts">
/** 场景：容量与约满——slotsByDate 按日期映射余量，约满自动置灰、全满日期月历直接禁用 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection, BizAppointmentSlot } from 'vue3-ep-biz-lib'

const pad = (n: number): string => String(n).padStart(2, '0')
const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const baseSlots = (seed: number): BizAppointmentSlot[] =>
  ['09:00-11:00', '11:00-12:00', '14:00-16:00', '16:00-18:00'].map((id, i) => ({
    id,
    start: id.split('-')[0],
    end: id.split('-')[1],
    capacity: 5,
    booked: (seed + i) % 6,
  }))

const slotsByDate: Record<string, BizAppointmentSlot[]> = {
  [key(0)]: baseSlots(5),
  [key(1)]: baseSlots(2),
  [key(2)]: baseSlots(0),
  [key(3)]: baseSlots(4),
}

const selected = ref<BizAppointmentSelection | null>(null)
</script>

<template>
  <div style="max-width: 760px">
    <BizAppointmentPicker v-model="selected" :slots-by-date="slotsByDate" min-date="2024-01-01" />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      key(0) 当天整体约满（月历禁用无绿点）；其余日期按 booked 展示「余 N」，某时段约满单独置灰。
    </p>
  </div>
</template>

多时段多选（上限）

2026 年 10 月

一二三四五六日

未选择日期 · 可选 2 个时段

请先在左侧选择日期

已选 0 个时段

multiple 开启多时段勾选（再次点击取消），max=2 限制上限：已选 2 个后再点提示「最多可选择 2 个时段」；未配 capacity 的时段显示「可预约」。

multiple 开启多时段勾选（再次点击取消），max 限制一次预约的时段数，超出提示并忽略。

<script setup lang="ts">
/** 场景：多时段多选 + 上限——一次理疗最多约 2 个时段，超出提示 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection } from 'vue3-ep-biz-lib'

const slots = [
  { id: '08:00-09:30' },
  { id: '10:00-11:30' },
  { id: '13:30-15:00' },
  { id: '15:30-17:00' },
]

const selected = ref<BizAppointmentSelection | null>(null)
</script>

<template>
  <div style="max-width: 760px">
    <BizAppointmentPicker v-model="selected" :slots="slots" multiple :max="2" />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      multiple 开启多时段勾选（再次点击取消），max=2 限制上限：已选 2 个后再点提示「最多可选择 2 个时段」；未配 capacity 的时段显示「可预约」。
    </p>
  </div>
</template>

仅工作日可约

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

切到 2026 年 10 月可见：周末置灰，国庆假期（10/1-10/7）同样禁用，10/10 补班日可选——与 BizWorkdayCalendar 同一套法定数据口径。

workday-only 复用内置法定节假日数据：周末、国庆等假期禁用，调休补班日可选——与考勤 / 请假口径一致。

<script setup lang="ts">
/** 场景：工作日可约——workdayOnly 复用法定节假日口径，周末与节假日不可选 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection } from 'vue3-ep-biz-lib'

const slots = [
  { id: '09:00-11:00', capacity: 12, booked: 3 },
  { id: '14:00-16:00', capacity: 12, booked: 7 },
]

const selected = ref<BizAppointmentSelection | null>(null)
</script>

<template>
  <div style="max-width: 760px">
    <BizAppointmentPicker v-model="selected" :slots="slots" month="2026-10" workday-only />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      切到 2026 年 10 月可见：周末置灰，国庆假期（10/1-10/7）同样禁用，10/10 补班日可选——与 BizWorkdayCalendar 同一套法定数据口径。
    </p>
  </div>
</template>

异步余量加载

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

点击日期出现「时段加载中…」，700ms 后渲染当日时段；同一天重复切换走缓存不再请求；奇数种子日 14:00-15:00 演示单时段禁用（不可约）。

slots-request 按日期拉取时段与余量（余量天然在后端）：选中日期才请求并缓存，加载中有占位；slots-loaded 事件可做埋点。

<script setup lang="ts">
/** 场景：异步余量——slotsRequest 按日拉取（模拟接口），选中日期才加载并缓存 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection, BizAppointmentSlot } from 'vue3-ep-biz-lib'

/** 模拟接口：按日期种子生成当日余量 */
const slotsRequest = (date: string): Promise<BizAppointmentSlot[]> =>
  new Promise((resolve) => {
    setTimeout(() => {
      const seed = Number(date.split('-').join('')) % 7
      resolve(
        ['08:30-09:30', '09:30-10:30', '10:30-11:30', '14:00-15:00', '15:00-16:00'].map((id, i) => ({
          id,
          start: id.split('-')[0],
          end: id.split('-')[1],
          capacity: 8,
          booked: (seed + i * 2) % 9,
          disabled: i === 3 && seed % 2 === 0,
        })),
      )
    }, 700)
  })

const selected = ref<BizAppointmentSelection | null>(null)
</script>

<template>
  <div style="max-width: 760px">
    <BizAppointmentPicker v-model="selected" :slots-request="slotsRequest" />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      点击日期出现「时段加载中…」，700ms 后渲染当日时段；同一天重复切换走缓存不再请求；奇数种子日 14:00-15:00 演示单时段禁用（不可约）。
    </p>
  </div>
</template>

表单集成与必选校验

作为表单控件嵌入 el-form：自定义 validator 校验「必须选择日期与时段」，与其他字段一起走统一提交校验。

<script setup lang="ts">
/** 场景：表单集成 + 必选校验——作为表单控件嵌入 el-form，自定义 validator 校验必选 */
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection } from 'vue3-ep-biz-lib'

const slots = [
  { id: '09:00-10:00', capacity: 10, booked: 1 },
  { id: '10:00-11:00', capacity: 10, booked: 4 },
  { id: '15:00-16:00', capacity: 6, booked: 2 },
]

const formRef = ref<FormInstance>()
const form = reactive<{ patient: string; appointment: BizAppointmentSelection | null }>({
  patient: '',
  appointment: null,
})

const rules = {
  patient: [{ required: true, message: '请输入就诊人姓名', trigger: 'blur' }],
  appointment: [
    {
      required: true,
      validator: (_r: unknown, _v: unknown, callback: (err?: Error) => void) =>
        form.appointment === null ? callback(new Error('请选择就诊日期与时段')) : callback(),
      trigger: 'change',
    },
  ],
}

const submit = (): void => {
  formRef.value?.validate((valid) => {
    if (!valid) return
    ElMessage.success(`预约成功：${form.appointment?.date} ${form.appointment?.slotIds.join('、')}`)
  })
}
</script>

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" style="max-width: 780px">
    <el-form-item label="就诊人" prop="patient">
      <el-input v-model="form.patient" placeholder="姓名" style="max-width: 240px" />
    </el-form-item>
    <el-form-item label="就诊时间" prop="appointment">
      <BizAppointmentPicker v-model="form.appointment" :slots="slots" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交预约</el-button>
    </el-form-item>
  </el-form>
</template>

编辑回显

2026 年 10 月

一二三四五六日

2026-10-27周二 · 选择一个时段

该日期暂无可约时段

已选 1 个时段 10:00-11:00

打开即回显：月份定位到 2026-10、日期高亮、10:00-11:00 带选中角标（异步加载完成后呈现）；换选其他时段即时更新。

传入 v-model 初始值即回显：月份自动定位、日期高亮、已选时段带角标（异步模式下先加载该日时段再呈现选中态）。

<script setup lang="ts">
/** 场景：编辑回显——传入 modelValue 自动定位月份与日期（异步模式下加载该日时段） */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection } from 'vue3-ep-biz-lib'

/** 明天 10:00 的存量预约 */
const tomorrow = new Date(Date.now() + 24 * 3600 * 1000)
const pad = (n: number): string => String(n).padStart(2, '0')
const initDate = `${tomorrow.getFullYear()}-${pad(tomorrow.getMonth() + 1)}-${pad(tomorrow.getDate())}`

const initial = ref<BizAppointmentSelection>({ date: initDate, slotIds: ['10:00-11:00'] })

const slotsRequest = (date: string): Promise<{ id: string; capacity: number; booked: number }[]> =>
  new Promise((resolve) => {
    setTimeout(() => {
      const seed = Number(date.slice(-2)) % 5
      resolve(
        ['09:00-10:00', '10:00-11:00', '11:00-12:00', '14:00-15:00'].map((id, i) => ({
          id,
          capacity: 6,
          booked: (seed + i) % 7,
        })),
      )
    }, 500)
  })
</script>

<template>
  <div style="max-width: 760px">
    <BizAppointmentPicker v-model="initial" :slots-request="slotsRequest" />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      打开即回显：月份定位到 {{ initDate.slice(0, 7) }}、日期高亮、10:00-11:00 带选中角标（异步加载完成后呈现）；换选其他时段即时更新。
    </p>
  </div>
</template>

会议室预订（多资源切换）

A101（8 人）B202（16 人）C303（30 人 · 投影）

2026 年 10 月

一二三四五六日

未选择日期 · 可选 2 个时段

请先在左侧选择日期

已选 0 个时段

当前资源：A101；切换会议室后已选清空、时段重新加载；仅工作日可订、每时段容量 1（约满即占）。

资源（会议室）切换场景：:key 强制重建 + 各资源独立 slots-request；配合 workday-only、每时段容量 1（约满即占）、max 限制连订时长。

<script setup lang="ts">
/** 场景：会议室预订——多资源切换，每个会议室独立余量（切资源清空已选并重载） */
import { computed, ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizAppointmentSelection, BizAppointmentSlot } from 'vue3-ep-biz-lib'

type Room = { id: string; name: string; capacity: number }

const rooms: Room[] = [
  { id: 'A101', name: 'A101（8 人）', capacity: 8 },
  { id: 'B202', name: 'B202（16 人）', capacity: 16 },
  { id: 'C303', name: 'C303（30 人 · 投影）', capacity: 30 },
]
const room = ref('A101')

const selected = ref<BizAppointmentSelection | null>(null)

/** 每个会议室独立的时段余量（真实项目按 roomId 查询接口） */
const slotsRequest = (date: string): Promise<BizAppointmentSlot[]> =>
  new Promise((resolve) => {
    const current = rooms.find((r) => r.id === room.value) ?? rooms[0]
    setTimeout(() => {
      const seed = (Number(date.slice(-2)) + current.id.charCodeAt(0)) % 6
      resolve(
        ['09:00-10:30', '10:30-12:00', '13:30-15:00', '15:00-16:30', '16:30-18:00'].map((id, i) => ({
          id,
          start: id.split('-')[0],
          end: id.split('-')[1],
          capacity: 1,
          booked: (seed + i) % 2,
        })),
      )
    }, 500)
  })

const hint = computed(() => `当前资源：${room.value}`)
</script>

<template>
  <div style="max-width: 820px">
    <el-radio-group v-model="room" style="margin-bottom: 10px">
      <el-radio-button v-for="r in rooms" :key="r.id" :value="r.id">{{ r.name }}</el-radio-button>
    </el-radio-group>
    <BizAppointmentPicker
      :key="room"
      v-model="selected"
      :slots-request="slotsRequest"
      multiple
      :max="2"
      workday-only
    />
    <p style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      {{ hint }}；切换会议室后已选清空、时段重新加载；仅工作日可订、每时段容量 1（约满即占）。
    </p>
  </div>
</template>

占用时段（booked-slots）

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

booked-slots 命中的时段红字标注「已约 · 原因（占用人）」并禁点；与 disabled / capacity 各自独立叠加。

<script setup lang="ts">
/** 基础占用：booked-slots 命中的时段红字「已约 · 原因」并禁点，点击其余时段正常回抛 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizBookedSlot } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const booked = ref<BizBookedSlot[]>([
  { slotId: '09:00-10:00', reason: '复诊号已满', booker: '王医生' },
  { slotId: '11:00-12:00', reason: '专家会诊' },
])
</script>

<template>
  <BizAppointmentPicker
    :min-date="dayAt(0)"
    :slots="[
      { id: '09:00-10:00', start: '09:00', end: '10:00' },
      { id: '10:00-11:00', start: '10:00', end: '11:00' },
      { id: '11:00-12:00', start: '11:00', end: '12:00' },
      { id: '14:00-15:00', start: '14:00', end: '15:00' },
    ]"
    :booked-slots="booked"
  />
</template>

撞占拦截提示

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

点选已占时段弹出 booked-tip 提示（附占用原因），可按业务自定义文案。

<script setup lang="ts">
/** 撞占拦截：点选已占时段弹出提示（含占用原因）；booked-tip 自定义文案 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizBookedSlot } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const booked = ref<BizBookedSlot[]>([{ slotId: 's2', reason: '场地档期冲突', booker: '市场部' }])
</script>

<template>
  <BizAppointmentPicker
    :min-date="dayAt(0)"
    booked-tip="该档期已被占用，请换个时间"
    :slots="[
      { id: 's1', label: '上午场 09:00-12:00' },
      { id: 's2', label: '下午场 14:00-17:00' },
      { id: 's3', label: '晚间场 18:00-21:00' },
    ]"
    :booked-slots="booked"
  />
</template>

按日切换占用

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

date-change 时业务拉取当日占用并替换 booked-slots（顾问日程 / 场地档期场景）。

<script setup lang="ts">
/** 按日切换占用：date-change 时业务拉当日占用并替换 booked-slots（顾问日程场景） */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizBookedSlot } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

/** 模拟服务端：偶数日 10 点档被占，奇数日 15 点档被占 */
const booked = ref<BizBookedSlot[]>([])

const loadBooked = (date: string): void => {
  const day = Number(date.slice(-2))
  booked.value = day % 2 === 0
    ? [{ slotId: 't2', reason: '客户面谈', booker: '李顾问' }]
    : [{ slotId: 't3', reason: '内部评审' }]
}

loadBooked(dayAt(0))
</script>

<template>
  <BizAppointmentPicker
    :min-date="dayAt(0)"
    :slots="[
      { id: 't1', label: '09:00-10:00' },
      { id: 't2', label: '10:00-11:00' },
      { id: 't3', label: '15:00-16:00' },
    ]"
    :booked-slots="booked"
    @date-change="loadBooked"
  />
</template>

多选与容量叠加

2026 年 10 月

一二三四五六日

未选择日期 · 可选 2 个时段

请先在左侧选择日期

已选 0 个时段

multiple 多选 + capacity 余量与 booked 占用并存：约满、占用、可约三态同屏。

<script setup lang="ts">
/** 多选与占用叠加：multiple 多时段选择 + capacity 余量与 booked 并存（both 通道各自生效） */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizBookedSlot } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const booked = ref<BizBookedSlot[]>([{ slotId: 'r2', reason: '已包场' }])
</script>

<template>
  <BizAppointmentPicker
    :min-date="dayAt(0)"
    multiple
    :max="2"
    :slots="[
      { id: 'r1', label: '09:00-11:00', capacity: 4, booked: 1 },
      { id: 'r2', label: '11:00-13:00', capacity: 4, booked: 0 },
      { id: 'r3', label: '14:00-16:00', capacity: 2, booked: 2 },
    ]"
    :booked-slots="booked"
  />
</template>

占用动态释放

2026 年 10 月

一二三四五六日

未选择日期 · 选择一个时段

请先在左侧选择日期

已选 0 个时段

4 秒后 09:00-10:00 档释放，占角标消失恢复可选。

booked-slots 缩减后已占时段恢复可选、月历圆点联动（余量刷新场景）。

<script setup lang="ts">
/** 占用动态释放：15 秒后服务端释放一个档期（booked-slots 缩减），已占变可约、日期圆点恢复 */
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'
import type { BizBookedSlot } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const booked = ref<BizBookedSlot[]>([
  { slotId: 'a1', reason: '临时会议' },
  { slotId: 'a2', reason: '临时会议' },
])

let timer: ReturnType<typeof setTimeout> | undefined

onMounted(() => {
  timer = setTimeout(() => {
    booked.value = [{ slotId: 'a2', reason: '临时会议' }]
  }, 4000)
})
onBeforeUnmount(() => {
  if (timer !== undefined) clearTimeout(timer)
})
</script>

<template>
  <div>
    <BizAppointmentPicker
      :min-date="dayAt(0)"
      :slots="[
        { id: 'a1', label: '09:00-10:00' },
        { id: 'a2', label: '10:00-11:00' },
      ]"
      :booked-slots="booked"
    />
    <p style="margin: 10px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      4 秒后 09:00-10:00 档释放，占角标消失恢复可选。
    </p>
  </div>
</template>

回显撞占兜底

2026 年 10 月

一二三四五六日

2026-10-26周一 · 选择一个时段

已选 2 个时段 g1、g2

modelValue 回显撞占的时段自动剔除并提示；getSelection 只返回有效时段。

<script setup lang="ts">
/** 回显撞占兜底：modelValue 回显含已占时段时自动剔除并提示；getSelection 只返回有效时段 */
import { ref } from 'vue'
import { BizAppointmentPicker } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const value = ref({ date: dayAt(0), slotIds: ['g1', 'g2'] })
</script>

<template>
  <BizAppointmentPicker
    v-model="value"
    :min-date="dayAt(0)"
    :slots="[
      { id: 'g1', label: '09:00-10:00' },
      { id: 'g2', label: '10:00-11:00' },
      { id: 'g3', label: '11:00-12:00' },
    ]"
    :booked-slots="[{ slotId: 'g1', reason: '回显时已被他人抢先预约' }]"
  />
</template>

Props

属性名	类型	默认值	说明
model-value / v-model	`BizAppointmentSelection \| null`	`null`	选中结果 `{ date, slotIds }`
slots	`BizAppointmentSlot[]`	`[]`	静态时段：全部日期共用一套
slots-by-date	`Record<string, BizAppointmentSlot[]>`	—	静态时段：按日期映射（`YYYY-MM-DD` 精确 > `YYYY-MM` 全月兜底 > slots）
slots-request	`(date) => Promise<BizAppointmentSlot[]>`	—	异步时段数据源（优先级最高，按日拉取余量并缓存）
multiple	`boolean`	`false`	多时段选择
max	`number`	—	multiple 时最多可选时段数
month	`string`	当月	初始月份（`YYYY-MM`）
workday-only	`boolean`	`false`	仅工作日可约（复用 BizWorkdayCalendar 法定节假日口径）
disabled-date	`(date) => boolean`	—	额外日期禁用判定（与区间 / workday-only 叠加）
min-date / max-date	`string`	—	可约起止日期（`YYYY-MM-DD`，含端点）
show-remaining	`boolean`	`true`	是否展示时段剩余名额
booked-slots	`BizBookedSlot[]`	`[]`	已占时段：命中 slotId 禁用并标注「已约 · 原因（占用人）」，与 disabled / capacity 叠加
booked-text	`string`	`'已约'`	占用时段展示文案
booked-tip	`string`	`'该时段已被预约，请选择其他时段'`	撞占提示文案（点选 / 回显 / 余量刷新触发）
loading-text	`string`	`'时段加载中…'`	异步加载占位文案
empty-text	`string`	`'该日期暂无可约时段'`	无时段占位文案

BizAppointmentSlot

字段	类型	说明
id	`string`	时段标识（当日内唯一，如 `'09:00-10:00'`）
label	`string`	展示名（缺省取 id）
start / end	`string`	开始 / 结束时间（HH:mm，展示用）
capacity	`number`	容量（缺省视为不限）
booked	`number`	已约数（与 capacity 计算剩余，`booked ≥ capacity` 置灰）
disabled	`boolean`	单时段禁用（维护 / 闭诊）

Events

事件名	参数	说明
update:model-value / change	`BizAppointmentChangePayload \| null`	选中变化：`{ date, slotIds, slots }`；清空选择时为 `null`
date-change	`(date)`	选中日期变化（切换日期会先清空时段选择）
slots-loaded	`(date, slots)`	异步时段加载完成

Expose

名称	类型	说明
goToday	`() => void`	回到今天（今天可约则同时选中）
switchMonth	`(ym) => void`	切换月份（`YYYY-MM`）
getSelection	`() => payload \| null`	当前完整选中（含时段对象，可直接提交）

行为要点

切换日期清空时段：预约语义下跨日保留时段易误提交，切日即清空（外部经 v-model 重新赋值可恢复）；
静态模式日期预判：slots / slots-by-date 模式月历可预判「全满日禁用 + 绿点标记」，异步模式日期状态未知不标记；
数据源切换自动重置：slots / slotsByDate / slotsRequest 引用变化时清空已选与缓存（多资源切换配合 :key 双保险）；
约满与禁用不可点：按钮置灰且点击无效，非弹错式打断。

BizAppointmentPicker 预约选择 ​

基础用法（静态时段） ​

容量与按日期映射 ​

多时段多选（上限） ​

仅工作日可约 ​

异步余量加载 ​

表单集成与必选校验 ​

编辑回显 ​

会议室预订（多资源切换） ​

占用时段（booked-slots） ​

撞占拦截提示 ​

按日切换占用 ​

多选与容量叠加 ​

占用动态释放 ​

回显撞占兜底 ​

Props ​

BizAppointmentSlot ​

Events ​

Expose ​

行为要点 ​

BizAppointmentPicker 预约选择

基础用法（静态时段）

容量与按日期映射

多时段多选（上限）

仅工作日可约

异步余量加载

表单集成与必选校验

编辑回显

会议室预订（多资源切换）

占用时段（booked-slots）

撞占拦截提示

按日切换占用

多选与容量叠加

占用动态释放

回显撞占兜底

Props

BizAppointmentSlot

Events

Expose

行为要点