BizResourceBooking 资源预约

资源维度 × 日期的时段网格预约组件：资源清单切换（含停用置灰）、半点/整点粒度时段表（空闲 / 已占 / 已过三态）、点选两格圈定区间并即时冲突拦截、事由与参与人表单（时长边界 + 容纳上限校验）、我的预约取消与变更（变更 = 预填 + 提交自动替换旧约）、周期预约（每周 / 每两周 × N 期，整组冲突检测与整组取消）。与 BizAppointmentPicker（个人时段选择表单件）互补：本组件面向「多资源 + 多人冲突」的业务面板层，适用于会议室预订、车辆调度、共享设备与场地预约等场景。

基础用法

资源预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

我的预约（近 1 条）

2026-10-27 09:00~10:30长江会议室待使用

左列选资源、中列时段表点选两格圈区（起点 → 终点）、右侧表单提交；已占时段红底显示预约人与事由。

<script setup lang="ts">
/** 基础用法：会议室时段表点选圈区 → 事由/参与人 → 提交；已占时段红底展示预约人 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

const bookings = ref<BizBookingRecord[]>([
  { id: 'a1', resourceId: 'm1', date: dayStr(), start: '10:00', end: '11:30', booker: '张伟', purpose: '周会', mine: false },
  { id: 'a2', resourceId: 'm1', date: dayStr(), start: '14:00', end: '15:00', booker: '李娜', purpose: '客户接待', mine: false },
  { id: 'a3', resourceId: 'm1', date: dayStr(1), start: '09:00', end: '10:30', booker: '当前用户', purpose: '评审会', mine: true },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      :resources="[
        { id: 'm1', name: '长江会议室', capacity: 12, location: '3F 东侧', tags: ['投屏', '白板'] },
        { id: 'm2', name: '黄河会议室', capacity: 6, location: '3F 西侧', tags: ['电视'] },
        { id: 'm3', name: '珠江会议室', capacity: 30, location: '5F', tags: ['视频会议', '音响'] },
      ]"
      :bookings="bookings"
      current-user="当前用户"
    />
  </div>
</template>

显示代码

车辆调度（容量校验）

公务车辆预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 09:00已过

09:00 – 10:00已过

10:00 – 11:00已过

11:00 – 12:00已过

12:00 – 13:00已过

13:00 – 14:00已过

14:00 – 15:00已过

15:00 – 16:00已过

16:00 – 17:00已过

17:00 – 18:00空闲可约

18:00 – 19:00空闲可约

19:00 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

capacity 为数字时参与提交校验：5 座车填 6 个参与人会被拦截；停用资源置灰不可选。

<script setup lang="ts">
/** 车辆调度：多资源切换对比占用；容纳人数参与上限校验（5 座车选 6 人被拦） */
import { BizResourceBooking } from 'vue3-ep-biz-lib'

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

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      title="公务车辆预约"
      :granularity="60"
      :resources="[
        { id: 'v1', name: '商务车 · 苏A·D8821', capacity: 5, location: '地库 B2-03', tags: ['接送机'] },
        { id: 'v2', name: '中巴 · 苏A·F1176', capacity: 14, location: '地库 B2-05' },
        { id: 'v3', name: '货车 · 苏A·G5520', capacity: 2, location: '后勤区', tags: ['物资转运'], disabled: true },
      ]"
      :bookings="[
        { id: 'b1', resourceId: 'v1', date: dayStr(), start: '09:00', end: '12:00', booker: '行政部', purpose: '机场接客户', mine: false },
        { id: 'b2', resourceId: 'v2', date: dayStr(), start: '13:00', end: '18:00', booker: '市场部', purpose: '团建通勤', mine: false },
      ]"
      @submit="(p) => console.log('vehicle booking', p)"
    />
  </div>
</template>

显示代码

冲突拦截

资源预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

09:00~12:00 已被占用：选中起点后跨越占用格，终点即被拦截；成功提交 0 次。

跨占用圈区时终点被拦截；提交前还有一道兜底校验（红字提示）。

<script setup lang="ts">
/** 冲突拦截：09:00-12:00 已被占用，圈定跨占用区间（如 08:30 ~ 13:00）提交时被红字拦截 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingPayload } from 'vue3-ep-biz-lib'

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

const submitted = ref<BizBookingPayload[]>([])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      :resources="[{ id: 'r1', name: '检测仪 A', capacity: 2, location: '实验室 201' }]"
      :bookings="[
        { id: 'c1', resourceId: 'r1', date: dayStr(), start: '09:00', end: '12:00', booker: '质检组', purpose: '批次抽检', mine: false },
      ]"
      @submit="(p) => submitted.push(p)"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      09:00~12:00 已被占用：选中起点后跨越占用格，终点即被拦截；成功提交 {{ submitted.length }} 次。
    </p>
  </div>
</template>

显示代码

远程模式（三接口）

资源预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

request 拉取占用、submit-request 提交（服务端再校验一次冲突）、cancel-request 取消；事件流水实时回显。

<script setup lang="ts">
/** 远程模式：request 拉取 / submitRequest 提交 / cancelRequest 取消，事件流水实时回显 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingPayload, BizBookingRecord } from 'vue3-ep-biz-lib'

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

/** 模拟服务端库 */
const server: BizBookingRecord[] = [
  { id: 's1', resourceId: 'rm1', date: dayStr(), start: '10:00', end: '11:00', booker: '王芳', purpose: '面试', mine: false },
]

const request = () =>
  new Promise<BizBookingRecord[]>((resolve) => setTimeout(() => resolve(server.map((r) => ({ ...r }))), 500))

const submitRequest = (payload: BizBookingPayload) =>
  new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      const clash = server.some(
        (r) => r.resourceId === payload.resourceId && r.date === payload.date && r.start < payload.end && r.end > payload.start,
      )
      if (clash) reject(new Error('conflict'))
      else {
        server.push({ id: `s-${server.length + 1}`, resourceId: payload.resourceId, date: payload.date, start: payload.start, end: payload.end, booker: '当前用户', purpose: payload.purpose, mine: true })
        resolve()
      }
    }, 500)
  })

const cancelRequest = (_record: BizBookingRecord) =>
  new Promise<void>((resolve) => setTimeout(() => resolve(), 400))

const log = ref<string[]>([])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      :resources="[{ id: 'rm1', name: '云端会议室', capacity: 8, location: 'SaaS 租户区' }]"
      :request="request"
      :submit-request="submitRequest"
      :cancel-request="cancelRequest"
      @submit="(p) => log.push(`submit ${p.date} ${p.start}~${p.end}`)"
      @cancel="(r) => log.push(`cancel ${r.date} ${r.start}~${r.end}`)"
    />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      事件流水：{{ log.join(' ｜ ') }}
    </p>
  </div>
</template>

显示代码

我的预约（取消 / 变更）

资源预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

我的预约（近 3 条）

2026-10-26 16:00~17:00洽谈室 1使用中

2026-10-27 09:30~11:00洽谈室 1待使用

2026-10-28 14:00~15:30洽谈室 2待使用

mine: true 的记录进入底部面板；取消需二次确认，「变更」载入原信息，提交成功后旧约自动取消。

<script setup lang="ts">
/** 我的预约面板：待使用/使用中标签、取消（二次确认）、变更（预填+提交自动替换旧约） */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

const bookings = ref<BizBookingRecord[]>([
  { id: 'm1', resourceId: 'r1', date: dayStr(), start: '16:00', end: '17:00', booker: '当前用户', purpose: '项目例会', mine: true, status: 'using' },
  { id: 'm2', resourceId: 'r1', date: dayStr(1), start: '09:30', end: '11:00', booker: '当前用户', purpose: '方案评审', mine: true },
  { id: 'm3', resourceId: 'r2', date: dayStr(2), start: '14:00', end: '15:30', booker: '当前用户', purpose: '客户访谈', mine: true },
  { id: 'o1', resourceId: 'r1', date: dayStr(1), start: '13:00', end: '14:00', booker: '陈晨', mine: false },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      :my-limit="5"
      :resources="[
        { id: 'r1', name: '洽谈室 1', capacity: 4, location: '2F' },
        { id: 'r2', name: '洽谈室 2', capacity: 4, location: '2F' },
      ]"
      :bookings="bookings"
    />
  </div>
</template>

显示代码

周期预约（每周）

资源预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

重复

事由

参与人

输入姓名回车添加

allow-recurring 开启重复选择：每周 × 4 期提交产生系列记录（我的预约带「系列」标）。

<script setup lang="ts">
/** 周期预约基础：每周 × 4 期，提交产生系列记录（我的预约带「系列」标），可整组取消 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

const bookings = ref<BizBookingRecord[]>([
  { id: 'b1', resourceId: 'm1', date: dayStr(1), start: '09:00', end: '10:00', booker: '张伟', purpose: '晨会' },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      allow-recurring
      :my-limit="8"
      :resources="[
        { id: 'm1', name: '长江会议室', capacity: 8, location: '3F' },
        { id: 'm2', name: '黄河会议室', capacity: 6, location: '3F' },
      ]"
      :bookings="bookings"
    />
  </div>
</template>

显示代码

周期预约（每两周）

双周例会预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

重复

事由

参与人

输入姓名回车添加

双周口径 × 3 期，适合双周例会 / 双周盘点等低频例会场景。

<script setup lang="ts">
/** 双周周期：每两周 × 3 期（如双周例会），首期日期即当前查看日期 */
import { BizResourceBooking } from 'vue3-ep-biz-lib'

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

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      allow-recurring
      title="双周例会预约"
      :my-limit="6"
      :resources="[{ id: 'm1', name: '决策会议室', capacity: 12, location: '5F' }]"
      :bookings="[
        { id: 'o1', resourceId: 'm1', date: dayStr(7), start: '14:00', end: '15:00', booker: '李娜', purpose: '评审' },
      ]"
    />
  </div>
</template>

显示代码

整组冲突拦截

周期冲突演示（第 3 / 5 期被占）

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

重复

事由

参与人

输入姓名回车添加

任一期次与既有预约冲突即整组拒绝提交，消息标出冲突期次与日期。

<script setup lang="ts">
/** 整组冲突拦截：第 3 期与既有预约冲突时整组拒绝提交，消息标出冲突期次与日期 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

/* 第 3 周（今天 +14）10:00~11:00 已被占用：每周 × 4 提交必然撞期 */
const bookings = ref<BizBookingRecord[]>([
  { id: 'block-1', resourceId: 'm1', date: dayStr(14), start: '10:00', end: '11:00', booker: '陈晨', purpose: '季度复盘' },
  { id: 'block-2', resourceId: 'm1', date: dayStr(28), start: '10:30', end: '11:30', booker: '王芳', purpose: '面试专场' },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      allow-recurring
      title="周期冲突演示（第 3 / 5 期被占）"
      :my-limit="6"
      :resources="[{ id: 'm1', name: '长江会议室', capacity: 8, location: '3F' }]"
      :bookings="bookings"
    />
  </div>
</template>

显示代码

系列整组取消

系列预约整组取消

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

我的预约（近 3 条）

2026-11-02 09:30~10:30长江会议室系列待使用

2026-11-09 09:30~10:30长江会议室系列待使用

2026-11-16 09:30~10:30长江会议室系列待使用

共享 seriesId 的多期记录取消时二次确认「整组取消」，逐期外抛 cancel 事件。

<script setup lang="ts">
/** 系列整组取消：共享 seriesId 的多期记录取消时二次确认「整组取消」，逐期外抛 cancel */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

const SR = 'sr-demo-1001'

const bookings = ref<BizBookingRecord[]>([
  { id: 's1', resourceId: 'm1', date: dayStr(7), start: '09:30', end: '10:30', booker: '当前用户', purpose: '每周需求评审', mine: true, seriesId: SR },
  { id: 's2', resourceId: 'm1', date: dayStr(14), start: '09:30', end: '10:30', booker: '当前用户', purpose: '每周需求评审', mine: true, seriesId: SR },
  { id: 's3', resourceId: 'm1', date: dayStr(21), start: '09:30', end: '10:30', booker: '当前用户', purpose: '每周需求评审', mine: true, seriesId: SR },
  { id: 'x1', resourceId: 'm1', date: dayStr(7), start: '14:00', end: '15:00', booker: '赵磊', purpose: '单次预约（对照）' },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      title="系列预约整组取消"
      :my-limit="6"
      :resources="[{ id: 'm1', name: '长江会议室', capacity: 8, location: '3F' }]"
      :bookings="bookings"
    />
  </div>
</template>

显示代码

期数上限与载荷

期数上限演示（2~4 期）

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

重复

事由

参与人

输入姓名回车添加

max-repeat-count 钳制期数；submit 载荷携带 repeat（kind / count / 全期日期清单）。

<script setup lang="ts">
/** 期数上限：maxRepeatCount=4 钳制期数（2~4），submit 载荷携带 repeat 全期日期清单 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingPayload } from 'vue3-ep-biz-lib'

const logs = ref<string[]>([])

const onSubmit = (payload: BizBookingPayload): void => {
  const desc = payload.repeat
    ? `周期预约：${payload.repeat.kind} × ${payload.repeat.count} 期（${payload.repeat.dates.join('、')}）`
    : `单次预约：${payload.date}`
  logs.value = [desc, ...logs.value].slice(0, 4)
}
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      allow-recurring
      :max-repeat-count="4"
      title="期数上限演示（2~4 期）"
      :my-limit="8"
      :resources="[{ id: 'm1', name: '黄河会议室', capacity: 6, location: '3F' }]"
      :bookings="[]"
      @submit="onSubmit"
    />
    <p v-if="logs.length" style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">submit 载荷日志：</p>
    <p v-for="l in logs" :key="l" style="margin: 4px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">{{ l }}</p>
  </div>
</template>

显示代码

远程周期预约

周期预约（远程模式）

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

重复

事由

参与人

输入姓名回车添加

submit-request 收到含 repeat 的整组载荷一次落库；整组取消时 cancel-request 逐单回调。

<script setup lang="ts">
/** 远程周期预约：submitRequest 收到含 repeat 的整组载荷，cancelRequest 整组逐单回调 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingPayload, BizBookingRecord } from 'vue3-ep-biz-lib'

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

const remoteRecords = ref<BizBookingRecord[]>([
  { id: 'srv-1', resourceId: 'm1', date: dayStr(7), start: '13:00', end: '14:00', booker: '陈晨', purpose: '运营周会' },
])

const logs = ref<string[]>([])

const request = () =>
  new Promise<BizBookingRecord[]>((resolve) => {
    setTimeout(() => resolve(remoteRecords.value.map((r) => ({ ...r }))), 300)
  })

const submitRequest = (payload: BizBookingPayload) =>
  new Promise<void>((resolve) => {
    setTimeout(() => {
      const seriesId = payload.repeat ? `srv-series-${Date.now()}` : undefined
      for (const d of payload.repeat?.dates ?? [payload.date]) {
        remoteRecords.value.push({
          id: `srv-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
          resourceId: payload.resourceId,
          date: d,
          start: payload.start,
          end: payload.end,
          booker: '当前用户',
          purpose: payload.purpose,
          mine: true,
          seriesId,
        })
      }
      logs.value = [`服务端落库：${payload.repeat ? `系列 ${payload.repeat.count} 期` : '单次预约'}`, ...logs.value].slice(0, 5)
      resolve()
    }, 400)
  })

const cancelRequest = (record: BizBookingRecord) =>
  new Promise<void>((resolve) => {
    setTimeout(() => {
      remoteRecords.value = remoteRecords.value.filter((r) => r.id !== record.id)
      logs.value = [`服务端取消：${record.date} ${record.start}~${record.end}${record.seriesId ? '（系列成员）' : ''}`, ...logs.value].slice(0, 5)
      resolve()
    }, 300)
  })
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      allow-recurring
      title="周期预约（远程模式）"
      :my-limit="8"
      :resources="[{ id: 'm1', name: '长江会议室', capacity: 8, location: '3F' }]"
      :request="request"
      :submit-request="submitRequest"
      :cancel-request="cancelRequest"
    />
    <p v-if="logs.length" style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">服务端交互日志：</p>
    <p v-for="l in logs" :key="l" style="margin: 4px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">{{ l }}</p>
  </div>
</template>

显示代码

营业时段与整点粒度

羽毛球场预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

10:00 – 11:00已过

11:00 – 12:00已过

12:00 – 13:00已过

13:00 – 14:00已过

14:00 – 15:00已过

15:00 – 16:00已过

16:00 – 17:00已过

17:00 – 18:00空闲可约

18:00 – 19:00空闲可约

19:00 – 20:00空闲可约

20:00 – 21:00空闲可约

21:00 – 22:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

day-start / day-end 收窄网格，granularity: 60 切整点粒度（场馆 / 门店按小时计费场景）。

<script setup lang="ts">
/** 营业时段与整点粒度：dayStart/dayEnd 收窄网格，granularity 60 时段表更疏朗 */
import { BizResourceBooking } from 'vue3-ep-biz-lib'

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

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      title="羽毛球场预约"
      :day-start="10"
      :day-end="22"
      :granularity="60"
      :resources="[
        { id: 'c1', name: '1 号场地', location: '体育馆 B1' },
        { id: 'c2', name: '2 号场地', location: '体育馆 B1' },
      ]"
      :bookings="[
        { id: 'g1', resourceId: 'c1', date: dayStr(), start: '19:00', end: '21:00', booker: '刘强', purpose: '俱乐部活动', mine: false },
      ]"
    />
  </div>
</template>

显示代码

时长边界

专家咨询预约（每场 1~2 小时）

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

min-duration / max-duration 按「格数 × 粒度」换算时长，提交前即时校验。

min-duration / max-duration 控制单次预约时长，提交前即时提示。

<script setup lang="ts">
/** 时长边界：最短 60 分钟 / 最长 120 分钟，圈定 30 分钟或跨 3 小时提交都会被提示拦截 */
import { BizResourceBooking } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      title="专家咨询预约（每场 1~2 小时）"
      :min-duration="60"
      :max-duration="120"
      :granularity="30"
      :resources="[{ id: 'e1', name: '法律顾问 · 周律师', location: '线上会议室' }]"
      :bookings="[]"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      min-duration / max-duration 按「格数 × 粒度」换算时长，提交前即时校验。
    </p>
  </div>
</template>

显示代码

停用资源

共享设备预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

disabled 资源（维修 / 封场）不可选，即使程序化切到该资源提交也会被拦。

<script setup lang="ts">
/** 停用资源：disabled 置灰不可选（维修中/封场），网格切走后提交也被拦截 */
import { BizResourceBooking } from 'vue3-ep-biz-lib'

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

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      title="共享设备预约"
      :resources="[
        { id: 'd1', name: '3D 打印机 A', location: '创客空间' },
        { id: 'd2', name: '3D 打印机 B', location: '创客空间', disabled: true },
        { id: 'd3', name: '激光雕刻机', location: '创客空间', disabled: true },
      ]"
      :bookings="[
        { id: 'x1', resourceId: 'd1', date: dayStr(), start: '13:00', end: '15:00', booker: '研发组', mine: false },
      ]"
    />
  </div>
</template>

显示代码

过去日期防护

默认：禁止回看

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

allow-past：可回看历史占用

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30空闲可约

08:30 – 09:00空闲可约

09:00 – 09:30空闲可约

09:30 – 10:00空闲可约

10:00 – 10:30空闲可约

10:30 – 11:00空闲可约

11:00 – 11:30空闲可约

11:30 – 12:00空闲可约

12:00 – 12:30空闲可约

12:30 – 13:00空闲可约

13:00 – 13:30空闲可约

13:30 – 14:00空闲可约

14:00 – 14:30空闲可约

14:30 – 15:00空闲可约

15:00 – 15:30空闲可约

15:30 – 16:00空闲可约

16:00 – 16:30空闲可约

16:30 – 17:00空闲可约

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

默认禁止选择历史日期、今日已过时段划线不可点；allow-past 开启后可回看历史排期（已完成 / 已取消记录不占时段）。

<script setup lang="ts">
/** 过去防护：默认禁选历史日期、今日已过时段划线不可点；allowPast 开启后可回看历史排期 */
import { BizResourceBooking } from 'vue3-ep-biz-lib'

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

<template>
  <div style="display: flex; flex-direction: column; gap: 20px; max-width: 1080px">
    <BizResourceBooking
      title="默认：禁止回看"
      :resources="[{ id: 'p1', name: '路演厅', capacity: 50, location: '1F' }]"
      :bookings="[
        { id: 'h1', resourceId: 'p1', date: dayStr(-1), start: '10:00', end: '12:00', booker: '品牌部', mine: false, status: 'done' },
      ]"
    />
    <BizResourceBooking
      title="allow-past：可回看历史占用"
      allow-past
      :resources="[{ id: 'p2', name: '路演厅（档案视图）', capacity: 50, location: '1F' }]"
      :bookings="[
        { id: 'h2', resourceId: 'p2', date: dayStr(-1), start: '10:00', end: '12:00', booker: '品牌部', purpose: '发布会', mine: false, status: 'done' },
      ]"
    />
  </div>
</template>

显示代码

只读占用总览

前台值班 · 占用总览

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

readonly 隐藏新建表单与取消操作，仅资源切换 + 占用一览，适合前台值班台 / 大屏。

<script setup lang="ts">
/** 只读模式：无新建表单与取消操作，仅资源切换 + 时段占用一览（值班台 / 大屏场景） */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

const bookings = ref<BizBookingRecord[]>([
  { id: 'k1', resourceId: 's1', date: dayStr(), start: '09:00', end: '10:30', booker: '产品组', purpose: '晨会', mine: false },
  { id: 'k2', resourceId: 's1', date: dayStr(), start: '13:00', end: '17:00', booker: '交付组', purpose: '季度复盘', mine: false },
  { id: 'k3', resourceId: 's2', date: dayStr(), start: '10:00', end: '12:00', booker: '人事部', purpose: '培训', mine: false },
  { id: 'k4', resourceId: 's2', date: dayStr(), start: '15:00', end: '16:00', booker: '财务部', purpose: '预算会', mine: false },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      title="前台值班 · 占用总览"
      readonly
      :resources="[
        { id: 's1', name: '主会议室', capacity: 20, location: '6F' },
        { id: 's2', name: '培训教室', capacity: 40, location: '7F' },
      ]"
      :bookings="bookings"
    />
  </div>
</template>

显示代码

插槽

资源预约

请选择资源 · 2026-10-26 时段表空闲 已占 已选

时段状态

08:00 – 08:30已过

08:30 – 09:00已过

09:00 – 09:30已过

09:30 – 10:00已过

10:00 – 10:30已过

10:30 – 11:00已过

11:00 – 11:30已过

11:30 – 12:00已过

12:00 – 12:30已过

12:30 – 13:00已过

13:00 – 13:30已过

13:30 – 14:00已过

14:00 – 14:30已过

14:30 – 15:00已过

15:00 – 15:30已过

15:30 – 16:00已过

16:00 – 16:30已过

16:30 – 17:00已过

17:00 – 17:30空闲可约

17:30 – 18:00空闲可约

18:00 – 18:30空闲可约

18:30 – 19:00空闲可约

19:00 – 19:30空闲可约

19:30 – 20:00空闲可约

新建预约

时段点击左侧空闲时段圈定区间

事由

参与人

输入姓名回车添加

我的预约（近 1 条）

2026-10-27 10:00~11:30共享工位 A 区待使用单号 t1

resource-extra 资源卡底部追加信息、my-booking-extra 我的预约行追加内容。

<script setup lang="ts">
/** 插槽：resource-extra 资源卡追加信息、my-booking-extra 我的预约行追加操作区 */
import { ref } from 'vue'
import { BizResourceBooking } from 'vue3-ep-biz-lib'
import type { BizBookingRecord } from 'vue3-ep-biz-lib'

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

const bookings = ref<BizBookingRecord[]>([
  { id: 't1', resourceId: 'z1', date: dayStr(1), start: '10:00', end: '11:30', booker: '当前用户', purpose: '跨组协作', mine: true },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizResourceBooking
      :resources="[
        { id: 'z1', name: '共享工位 A 区', capacity: 8, location: '灵活办公层' },
        { id: 'z2', name: '共享工位 B 区', capacity: 8, location: '灵活办公层' },
      ]"
      :bookings="bookings"
    >
      <template #resource-extra="{ resource }">
        <span style="font-size: 12px; color: var(--el-color-primary)">楼层引导：{{ resource.location }}入口扫码进入</span>
      </template>
      <template #my-booking-extra="{ record }">
        <span style="font-size: 12px; color: var(--el-text-color-placeholder)">单号 {{ record.id }}</span>
      </template>
    </BizResourceBooking>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'资源预约'	面板标题
resources	BizBookingResource[]	[]	资源清单：{ id, name, capacity?, location?, tags?, disabled? }；capacity 为数字时参与人数上限校验
bookings	BizBookingRecord[]	[]	预约记录（本地模式数据源）：{ id, resourceId, date, start, end, booker, purpose?, status?, mine?, seriesId? }
day-start	number	8	网格起始小时
day-end	number	20	网格结束小时（不含）
granularity	30 | 60	30	时段粒度（分钟）
date	string	今天	初始查看日期（YYYY-MM-DD）
allow-past	boolean	false	允许选择过去日期与已过时段（历史回看）
min-duration	number	30	单次预约最小时长（分钟）
max-duration	number	240	单次预约最大时长（分钟）
require-purpose	boolean	true	事由必填
current-user	string	'当前用户'	当前用户名（新预约归属）
request	() => Promise<BizBookingRecord[]>	—	远端拉取预约记录（远程模式）
submit-request	(payload) => Promise<void>	—	预约提交（远程模式，失败提示后中止）
cancel-request	(record) => Promise<void>	—	取消预约（远程模式）
my-limit	number	5	我的预约面板展示条数
allow-recurring	boolean	false	开启周期预约（重复：每周 / 每两周 × N 期）
max-repeat-count	number	8	周期预约最大期数（期数钳制 2 ~ 该值）
readonly	boolean	false	只读模式：仅查看占用，隐藏表单与取消

Events

事件名	参数	说明
submit	(payload: BizBookingPayload)	预约提交（先于 submitRequest 外抛）；payload 携带 replaceOf 时为变更提交，携带 repeat 时为周期预约（dates 含全期日期）
cancel	(record: BizBookingRecord)	预约取消（含变更提交后的旧约自动取消；系列整组取消时逐期外抛）

Slots

插槽名	说明
resource-extra	{ resource } 资源卡底部追加内容（建议非交互元素，卡片本身为按钮）
my-booking-extra	{ record } 我的预约行尾部追加内容

Expose

属性/方法	说明
refresh	() => Promise<void> 重新拉取预约（request 注入时）
prefillFrom	(record: BizBookingRecord) => void 以既有记录预填新建表单（「变更」的程序化入口）

口径说明

• 时段占用：[start, end) 左闭右开；status 为 canceled / done 的记录不占时段。
• 冲突拦截：三层——圈区终点校验、提交前兜底校验、远程模式 submitRequest 服务端复验（示例中的 reject 分支）。
• 变更：不直接改旧约，而是「预填 + replaceOf 提交」：新约落库后旧约置 canceled 并外抛 cancel 事件，保证审计可追溯；系列预约成员不支持单期变更（提示整组取消后重提）。
• 周期预约：首期 = 当前查看日期，之后按每周 / 每两周步进；提交前整组冲突检测（任一期次冲突即整组拒绝，消息标出冲突期次与日期，被替换旧约不计冲突）；落库为共享 seriesId 的多期记录，取消走「整组取消」二次确认。
• 已过判定：仅当查看日期为今天且时段结束时刻 ≤ 当前分钟时置灰；跨天与 allow-past 场景不受影响。