BizShiftCalendar 排班日历

排班日历：月视图网格（行 = 成员、列 = 日期；成员列 sticky 左、双行表头 sticky 上、容器双向滚动）、班次徽标（五色映射 EP 主题变量，超出 cell-max 折叠 +N、tooltip 列全部）、点击编辑浮层（班次复选 + 清空 + 确定）、拖拽换班（同成员 = 整格班次移动 / 跨成员 = 两人当日班次交换）、容量冲突检测（超容单元格 warning 虚线框 + 底部提示条）、当月统计（班次 chips + 成员行尾总数）、月份导航（1900-2100 钳制，schedule 按日期键存、切月天然保留）。值班排班、门店轮班、医护三班倒、客服坐席排班。

基础用法

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟店长31

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

李李娜收银31

早班

中班

早班

中班

早班

中班

早班

中班

早班

中班

早班

中班

早班

中班

早班

中班

早班

中班

早班

中班

早班

王王强理货31

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

赵赵敏收银7

中班

刘刘洋客服5

晚班

早班 50 中班 27 晚班 28 合计 105 班

5 成员 × 3 班次当月排班；点击单元格弹编辑浮层，确认后 v-model:schedule 同步更新。

<script setup lang="ts">
/** 场景：基础——5 成员 × 3 班次当月排班（默认当月、可点击编辑、拖拽换班） */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '张伟', role: '店长' },
  { id: 2, name: '李娜', role: '收银' },
  { id: 3, name: '王强', role: '理货' },
  { id: 4, name: '赵敏', role: '收银' },
  { id: 5, name: '刘洋', role: '客服' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'early', name: '早班', color: 'primary', start: '08:00', end: '16:00' },
  { key: 'mid', name: '中班', color: 'warning', start: '12:00', end: '20:00' },
  { key: 'night', name: '晚班', color: 'info', start: '16:00', end: '24:00' },
]

/** 当月全部日期（'YYYY-MM-DD'，本地时间手写计算） */
const daysOfMonth = (m: string): string[] => {
  const [y, mo] = m.split('-').map(Number)
  const total = new Date(y, mo, 0).getDate()
  return Array.from({ length: total }, (_, i) => `${m}-${String(i + 1).padStart(2, '0')}`)
}

/** mock：按日序轮转上岗，形成错落的当月排班 */
const buildSchedule = (): BizShiftSchedule => {
  const schedule: BizShiftSchedule = {}
  const put = (memberId: number, date: string, key: string): void => {
    const byDate = schedule[String(memberId)] ?? {}
    byDate[date] = [...(byDate[date] ?? []), key]
    schedule[String(memberId)] = byDate
  }
  daysOfMonth(month).forEach((date, i) => {
    put(1, date, i % 2 === 0 ? 'early' : 'night')
    put(2, date, i % 3 === 0 ? 'early' : 'mid')
    put(3, date, i % 4 === 0 ? 'night' : 'early')
    if (i % 5 === 0) put(4, date, 'mid')
    if (i % 7 === 0) put(5, date, 'night')
  })
  return schedule
}

const schedule = ref<BizShiftSchedule>(buildSchedule())
</script>

<template>
  <BizShiftCalendar v-model:schedule="schedule" :members="members" :shift-types="shiftTypes" />
</template>

一人多班与折叠

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

陈陈晨全科医生13

白班+1

大夜+1

白班+2

白班

小夜+1

白班+1

大夜

周周凯住院医师6

小夜

大夜+1

白班+1

大夜

白班 7 小夜 6 大夜 6 合计 19 班

cell-max = 1：每格直显 1 个徽标，多班折叠为 +N，悬浮查看当日全部班次。

一人一日可挂多个班次；cell-max 控制直显徽标数，超出折叠为 +N，悬浮查看当日全部班次。

<script setup lang="ts">
/** 场景：一人一日多班——cell-max 折叠超出徽标为 +N，悬浮列出全部班次 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 'm1', name: '陈晨', role: '全科医生' },
  { id: 'm2', name: '周凯', role: '住院医师' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'day', name: '白班', color: 'primary', start: '08:00', end: '16:00' },
  { key: 'evening', name: '小夜', color: 'warning', start: '16:00', end: '24:00' },
  { key: 'big', name: '大夜', color: 'danger', start: '00:00', end: '08:00' },
]

/** mock：一线医生频繁连班，单日 2-3 个班次 */
const schedule = ref<BizShiftSchedule>({
  m1: {
    [day(2)]: ['day', 'evening'],
    [day(3)]: ['big', 'day'],
    [day(8)]: ['day', 'evening', 'big'],
    [day(15)]: ['day'],
    [day(16)]: ['evening', 'big'],
    [day(22)]: ['day', 'evening'],
    [day(23)]: ['big'],
  },
  m2: {
    [day(5)]: ['evening'],
    [day(6)]: ['big', 'day'],
    [day(12)]: ['day', 'evening'],
    [day(19)]: ['big'],
  },
})
</script>

<template>
  <div>
    <BizShiftCalendar
      v-model:schedule="schedule"
      :members="members"
      :shift-types="shiftTypes"
      :cell-max="1"
    />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      cell-max = 1：每格直显 1 个徽标，多班折叠为 +N，悬浮查看当日全部班次。
    </p>
  </div>
</template>

拖拽换班

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟收银台 A10

早班

晚班

早班

晚班

早班

晚班

早班

晚班

早班

晚班

李李娜收银台 B10

晚班

早班

晚班

早班

晚班

早班

晚班

王王强理货区2

早班

早班 10 晚班 12 合计 22 班

cell-change：按住某成员有班次的格子，横向拖到同成员另一天 = 移动；拖到其他成员同一天 = 交换

按住有班次的单元格拖动：横向拖到同成员另一天 = 整格班次移动（move）；拖到其他成员 = 交换两人当日班次（swap，双方各抛一次事件）。空格子同样可接收。

<script setup lang="ts">
/** 场景：拖拽换班——同成员拖动=整格班次移动（move），跨成员拖动=两人当日班次交换（swap），事件回显 */
import { ref } from 'vue'
import { ElTag } from 'element-plus'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftCellChange, BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '张伟', role: '收银台 A' },
  { id: 2, name: '李娜', role: '收银台 B' },
  { id: 3, name: '王强', role: '理货区' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'early', name: '早班', color: 'primary', start: '08:00', end: '15:00' },
  { key: 'night', name: '晚班', color: 'info', start: '15:00', end: '22:00' },
]

/** mock：当月前 10 天的双班排班 */
const buildSchedule = (): BizShiftSchedule => {
  const schedule: BizShiftSchedule = {}
  for (let n = 1; n <= 10; n += 1) {
    schedule[1] = { ...schedule[1], [day(n)]: n % 2 === 1 ? ['early'] : ['night'] }
    schedule[2] = { ...schedule[2], [day(n)]: n % 3 === 0 ? ['early'] : ['night'] }
    if (n % 4 === 0) schedule[3] = { ...schedule[3], [day(n)]: ['early'] }
  }
  return schedule
}

const schedule = ref<BizShiftSchedule>(buildSchedule())

/** 拖拽 / 编辑事件日志（最新在前，保留 8 条） */
const logs = ref<BizShiftCellChange[]>([])
const pushLog = (payload: BizShiftCellChange): void => {
  logs.value.unshift(payload)
  if (logs.value.length > 8) logs.value.pop()
}

const typeLabel: Record<BizShiftCellChange['type'], string> = {
  edit: '编辑',
  move: '移动',
  swap: '交换',
}
const typeTag: Record<BizShiftCellChange['type'], 'primary' | 'warning' | 'success'> = {
  edit: 'primary',
  move: 'warning',
  swap: 'success',
}
</script>

<template>
  <div>
    <BizShiftCalendar
      v-model:schedule="schedule"
      :members="members"
      :shift-types="shiftTypes"
      @cell-change="pushLog"
    />
    <div style="margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px">
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">cell-change：</span>
      <template v-if="logs.length === 0">
        <span style="font-size: 12px; color: var(--el-text-color-placeholder)">
          按住某成员有班次的格子，横向拖到同成员另一天 = 移动；拖到其他成员同一天 = 交换
        </span>
      </template>
      <template v-for="(item, i) in logs" :key="i">
        <ElTag :type="typeTag[item.type]" size="small" effect="light">
          {{ typeLabel[item.type] }}
        </ElTag>
        <span style="font-size: 12px; color: var(--el-text-color-regular)">
          成员{{ item.memberId }} · {{ item.date }} → [{{ item.shifts.join('、') }}]
        </span>
      </template>
    </div>
  </div>
</template>

冲突检测

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟电工3

早班

中班

夜班

李李娜操作工3

早班

中班

早班

王王强操作工2

早班

中班

赵赵敏巡检员1

早班

刘刘洋操作工2

早班

夜班

10-03 早班 5/2 超容10-07 中班 3/1 超容

早班 6 中班 3 夜班 2 合计 11 班

当前冲突 2 处：相关单元格橙色虚线框，底部提示条逐条列出「日期班次已排/容量超容」。

capacity 声明各班次每日容量；超容的单元格橙色虚线警示，底部提示条逐条列出「日期班次已排/容量超容」，并外抛 conflicts 事件。

<script setup lang="ts">
/** 场景：冲突检测——capacity 限定每日每班人数，超容单元格虚线警示 + 底部提示条 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftConflict, BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '张伟', role: '电工' },
  { id: 2, name: '李娜', role: '操作工' },
  { id: 3, name: '王强', role: '操作工' },
  { id: 4, name: '赵敏', role: '巡检员' },
  { id: 5, name: '刘洋', role: '操作工' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'early', name: '早班', color: 'primary', start: '08:00', end: '16:00' },
  { key: 'mid', name: '中班', color: 'warning', start: '16:00', end: '24:00' },
  { key: 'night', name: '夜班', color: 'info', start: '00:00', end: '08:00' },
]

/** 容量：早班每日最多 2 人、中班每日最多 1 人 */
const capacity = { early: 2, mid: 1 }

/** mock：3 日 5 人全早班（3/2 超容）、7 日 3 人中班（3/1 超容）、12 日正常 */
const schedule = ref<BizShiftSchedule>({
  1: { [day(3)]: ['early'], [day(7)]: ['mid'], [day(12)]: ['night'] },
  2: { [day(3)]: ['early'], [day(7)]: ['mid'], [day(12)]: ['early'] },
  3: { [day(3)]: ['early'], [day(7)]: ['mid'] },
  4: { [day(3)]: ['early'] },
  5: { [day(3)]: ['early'], [day(7)]: ['night'] },
})

/** conflicts 事件回显计数（提示条由组件渲染，这里只做外部联动示例） */
const conflictCount = ref(0)
const onConflicts = (list: BizShiftConflict[]): void => {
  conflictCount.value = list.length
}
</script>

<template>
  <div>
    <BizShiftCalendar
      v-model:schedule="schedule"
      :members="members"
      :shift-types="shiftTypes"
      :capacity="capacity"
      @conflicts="onConflicts"
    />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      当前冲突 {{ conflictCount }} 处：相关单元格橙色虚线框，底部提示条逐条列出「日期 班次 已排/容量 超容」。
    </p>
  </div>
</template>

统计

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

韩韩梅客服一组20

值班

高峰支援

值班

高峰支援

值班

高峰支援

值班

高峰支援

值班

高峰支援

值班

高峰支援

值班

李李雷客服二组10

值班

JJim客服一组8

值班高峰支援

#stats 插槽：值班 28 次 / 高峰支援 10 次｜最忙成员 20 班

底部统计条展示各班次当月次数与合计；#stats 插槽可整体接管，getStats() 编程式取数。

<script setup lang="ts">
/** 场景：统计——底部班次 chips、#stats 插槽接管、expose getStats 编程式取数 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftCalendarInstance, BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '韩梅', role: '客服一组' },
  { id: 2, name: '李雷', role: '客服二组' },
  { id: 3, name: 'Jim', role: '客服一组' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'duty', name: '值班', color: 'success', start: '09:00', end: '18:00' },
  { key: 'hot', name: '高峰支援', color: 'danger', start: '18:00', end: '21:00' },
]

/** mock：值班轮转 + 部分高峰支援 */
const buildSchedule = (): BizShiftSchedule => {
  const schedule: BizShiftSchedule = {}
  for (let n = 1; n <= 20; n += 1) {
    schedule[1] = { ...schedule[1], [day(n)]: n % 3 === 0 ? ['hot'] : ['duty'] }
    schedule[2] = { ...schedule[2], [day(n)]: n % 2 === 0 ? ['duty'] : [] }
    if (n % 5 === 0) schedule[3] = { ...schedule[3], [day(n)]: ['duty', 'hot'] }
  }
  return schedule
}

const schedule = ref<BizShiftSchedule>(buildSchedule())

const cal = ref<BizShiftCalendarInstance>()
const statsSnapshot = ref('')

/** expose：getStats 编程式取当月统计 */
const readStats = (): void => {
  const s = cal.value?.getStats()
  if (s === undefined) return
  const shiftPart = Object.entries(s.byShift)
    .map(([key, count]) => `${key}:${count}`)
    .join(' ')
  const memberPart = Object.entries(s.byMember)
    .map(([id, count]) => `${id}号:${count}班`)
    .join(' ')
  statsSnapshot.value = `byShift → ${shiftPart}｜byMember → ${memberPart}`
}

const nameOf = (key: string): string => shiftTypes.find((st) => st.key === key)?.name ?? key
</script>

<template>
  <div>
    <BizShiftCalendar
      ref="cal"
      v-model:schedule="schedule"
      :members="members"
      :shift-types="shiftTypes"
    >
      <template #stats="{ byShift, byMember }">
        <span style="font-size: 12px; color: var(--el-text-color-secondary)">
          #stats 插槽：{{ nameOf('duty') }} {{ byShift.duty ?? 0 }} 次 / {{ nameOf('hot') }}
          {{ byShift.hot ?? 0 }} 次 ｜ 最忙成员 {{ Object.values(byMember)[0] ?? 0 }} 班
        </span>
      </template>
    </BizShiftCalendar>
    <div style="margin-top: 10px; display: flex; align-items: center; gap: 8px">
      <ElButton size="small" @click="readStats">expose getStats()</ElButton>
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">{{ statsSnapshot }}</span>
    </div>
  </div>
</template>

自定义插槽

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

高新（前端）12 班

场

程

场

程

场

程

场

程

场

程

场

程

休

苏珊（测试）4 班

场

休

场

休

场

休

阿明（运维）3 班

班

休

班

休

班

休

远程 6 驻场 10 值班 3 合计 19 班

#member-name 自定义成员格（含行尾计数），#cell 自定义单元格渲染（拿到 member / date / shifts）。

<script setup lang="ts">
/** 场景：自定义成员格与单元格——#member-name / #cell 插槽整体接管（只读展示） */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '高新', role: '前端' },
  { id: 2, name: '苏珊', role: '测试' },
  { id: 3, name: '阿明', role: '运维' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'remote', name: '远程', color: 'success' },
  { key: 'onsite', name: '驻场', color: 'primary' },
  { key: 'oncall', name: '值班', color: 'danger' },
]

/** mock：前 12 天混合排班 */
const buildSchedule = (): BizShiftSchedule => {
  const schedule: BizShiftSchedule = {}
  for (let n = 1; n <= 12; n += 1) {
    schedule[1] = { ...schedule[1], [day(n)]: n % 2 === 0 ? ['remote'] : ['onsite'] }
    schedule[2] = { ...schedule[2], [day(n)]: n % 3 === 0 ? ['onsite'] : [] }
    if (n % 4 === 0) schedule[3] = { ...schedule[3], [day(n)]: ['oncall'] }
  }
  return schedule
}

const schedule = ref<BizShiftSchedule>(buildSchedule())

/** 自定义单元格里的班次标记（取班次名末字符） */
const markOf = (key: string): string => shiftTypes.find((st) => st.key === key)?.name.slice(-1) ?? key
</script>

<template>
  <BizShiftCalendar
    v-model:schedule="schedule"
    :members="members"
    :shift-types="shiftTypes"
    :editable="false"
  >
    <template #member-name="{ member, count }">
      <span
        style="width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--el-color-primary)"
      />
      <span style="font-weight: 600; font-size: 13px">{{ member.name }}</span>
      <span style="font-size: 11px; color: var(--el-text-color-secondary)">（{{ member.role }}）</span>
      <span style="margin-left: auto; font-size: 12px; color: var(--el-color-success)">
        {{ count }} 班
      </span>
    </template>
    <template #cell="{ date, shifts }">
      <span
        v-if="shifts.length > 0"
        style="font-size: 12px; color: var(--el-text-color-regular); text-align: center; line-height: 16px"
      >
        <template v-for="(key, i) in shifts" :key="key">
          <span
            :style="{
              display: 'inline-block',
              padding: '0 4px',
              borderRadius: '4px',
              background:
                key === 'oncall' ? 'var(--el-color-danger-light-9)' : 'var(--el-fill-color-light)',
            }"
          >{{ markOf(key) }}</span>
          <br v-if="i === 0 && shifts.length > 1" />
        </template>
      </span>
      <span v-else style="font-size: 11px; color: var(--el-text-color-placeholder)">
        {{ Number(date.slice(8, 10)) % 5 === 0 ? '休' : '' }}
      </span>
    </template>
  </BizShiftCalendar>
</template>

月份导航与跨月数据

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

值值班长 A中控室15

白班

夜班

白班

夜班

白班

夜班

白班

夜班

白班

夜班

白班

夜班

白班

夜班

白班

值值班长 B中控室0

白班 8 夜班 7 合计 15 班

当前 2026-10 排班 15 班；切到 2026-11 仍能看到下月预排数据（schedule 以 'YYYY-MM-DD' 为键，与月份无关）。

上一月 / 下一月 / 回本月（1900-2100 钳制）；schedule 以 'YYYY-MM-DD' 为键存储，切换月份不影响其他月数据。

<script setup lang="ts">
/** 场景：月份导航——上一月 / 下一月 / 回本月，schedule 按日期键存，切月数据天然保留 */
import { computed, ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`

/** 下一个月（12 月 -> 1 月由 Date 年月参数自动进位） */
const nextMonthOf = (m: string): string => {
  const [y, mo] = m.split('-').map(Number)
  const d = new Date(y, mo, 1)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
}
const nextMonth = nextMonthOf(month)

const dayOf = (m: string, n: number): string => `${m}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '值班长 A', role: '中控室' },
  { id: 2, name: '值班长 B', role: '中控室' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'day', name: '白班', color: 'primary' },
  { key: 'night', name: '夜班', color: 'info' },
]

/** mock：本月 + 下月各排半个月（切月后各自保留） */
const buildSchedule = (): BizShiftSchedule => {
  const schedule: BizShiftSchedule = { 1: {}, 2: {} }
  for (let n = 1; n <= 15; n += 1) {
    schedule[1] = { ...schedule[1], [dayOf(month, n)]: n % 2 === 1 ? ['day'] : ['night'] }
    schedule[2] = { ...schedule[2], [dayOf(nextMonth, n)]: n % 2 === 0 ? ['day'] : ['night'] }
  }
  return schedule
}

const current = ref(month)
const schedule = ref<BizShiftSchedule>(buildSchedule())
const monthLogs = ref<string[]>([])

const onMonthChange = (m: string): void => {
  monthLogs.value.unshift(`切换到 ${m}`)
  if (monthLogs.value.length > 4) monthLogs.value.pop()
}

/** 当前展示月份的排班数（切月后重算，证明跨月数据保留） */
const currentMonthCount = computed<number>(() => {
  let count = 0
  for (const byDate of Object.values(schedule.value)) {
    for (const [date, shifts] of Object.entries(byDate)) {
      if (date.slice(0, 7) === current.value) count += shifts.length
    }
  }
  return count
})
</script>

<template>
  <div>
    <BizShiftCalendar
      v-model:month="current"
      v-model:schedule="schedule"
      :members="members"
      :shift-types="shiftTypes"
      @month-change="onMonthChange"
    />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      当前 {{ current }} 排班 {{ currentMonthCount }} 班；
      切到 {{ nextMonth }} 仍能看到下月预排数据（schedule 以 'YYYY-MM-DD' 为键，与月份无关）。
      <template v-if="monthLogs.length > 0">最近切换：{{ monthLogs.join(' ← ') }}。</template>
    </p>
  </div>
</template>

只读

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

麻麻醉组·周一手术室8

上午台下午台

麻麻醉组·周三手术室4

下午台

麻麻醉组·周五手术室10

上午台急诊备班

上午台 9 下午台 8 急诊备班 5 合计 22 班

editable = false：单元格不可点击编辑、不可拖拽，仅浏览与统计。

<script setup lang="ts">
/** 场景：只读——editable=false：单元格不可点击编辑、不可拖拽，仅浏览与统计 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '麻醉组·周一', role: '手术室' },
  { id: 2, name: '麻醉组·周三', role: '手术室' },
  { id: 3, name: '麻醉组·周五', role: '手术室' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'am', name: '上午台', color: 'primary', start: '08:00', end: '12:00' },
  { key: 'pm', name: '下午台', color: 'success', start: '14:00', end: '18:00' },
  { key: 'emerg', name: '急诊备班', color: 'danger', start: '18:00', end: '24:00' },
]

/** mock：每周固定台次（对外公示场景，只读展示） */
const buildSchedule = (): BizShiftSchedule => {
  const schedule: BizShiftSchedule = {}
  const total = new Date(Number(month.slice(0, 4)), Number(month.slice(5, 7)), 0).getDate()
  for (let n = 1; n <= total; n += 1) {
    const weekday = new Date(Number(month.slice(0, 4)), Number(month.slice(5, 7)) - 1, n).getDay()
    if (weekday === 1) schedule[1] = { ...schedule[1], [day(n)]: ['am', 'pm'] }
    if (weekday === 3) schedule[2] = { ...schedule[2], [day(n)]: ['pm'] }
    if (weekday === 5) schedule[3] = { ...schedule[3], [day(n)]: ['am', 'emerg'] }
  }
  return schedule
}

const schedule = ref<BizShiftSchedule>(buildSchedule())
</script>

<template>
  <BizShiftCalendar
    v-model:schedule="schedule"
    :members="members"
    :shift-types="shiftTypes"
    :editable="false"
  />
</template>

班次配色

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

吴吴倩导诊10

早班晚班

午班

调休

急诊

早班午班

晚班急诊

调休

郑郑爽药房6

午班晚班

调休

早班

急诊

午班

早班 3 午班 4 晚班 3 急诊 3 调休 3 合计 16 班

shiftType.color 支持 primary / success / warning / danger / info 五色（映射 Element Plus 主题变量），缺省 primary。

<script setup lang="ts">
/** 场景：五色班次——shiftType.color 映射 primary / success / warning / danger / info 主题色 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizShiftMember, BizShiftSchedule, BizShiftType } from 'vue3-ep-biz-lib'

const now = new Date()
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const day = (n: number): string => `${month}-${String(n).padStart(2, '0')}`

const members: BizShiftMember[] = [
  { id: 1, name: '吴倩', role: '导诊' },
  { id: 2, name: '郑爽', role: '药房' },
]

const shiftTypes: BizShiftType[] = [
  { key: 'am', name: '早班', color: 'primary', start: '08:00', end: '12:00' },
  { key: 'noon', name: '午班', color: 'success', start: '12:00', end: '16:00' },
  { key: 'pm', name: '晚班', color: 'warning', start: '16:00', end: '20:00' },
  { key: 'emerg', name: '急诊', color: 'danger', start: '20:00', end: '24:00' },
  { key: 'leave', name: '调休', color: 'info' },
]

/** mock：五色班次混排（未设 color 的班次缺省 primary） */
const schedule = ref<BizShiftSchedule>({
  1: {
    [day(2)]: ['am', 'pm'],
    [day(3)]: ['noon'],
    [day(4)]: ['leave'],
    [day(9)]: ['emerg'],
    [day(10)]: ['am', 'noon'],
    [day(16)]: ['pm', 'emerg'],
    [day(17)]: ['leave'],
  },
  2: {
    [day(2)]: ['noon', 'pm'],
    [day(5)]: ['leave'],
    [day(11)]: ['am'],
    [day(12)]: ['emerg'],
    [day(18)]: ['noon'],
  },
})
</script>

<template>
  <BizShiftCalendar v-model:schedule="schedule" :members="members" :shift-types="shiftTypes" />
</template>

考勤实况模式

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟早班组长0

李李娜收银员0

王王强理货员0

早班 0 中班 0 晚班 0 合计 0 班

attendance 注入后工具栏出现「计划排班 / 考勤实况」切换：实况模式渲染六态徽标（正常 / 迟到 / 早退 / 缺卡 / 请假 / 外勤），无记录日期显示灰点。

<script setup lang="ts">
/** 考勤实况基础：attendance 注入后工具栏出现「计划排班 / 考勤实况」切换，六态徽标渲染 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizAttendanceMap } 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 attendance = ref<BizAttendanceMap>({
  'u1': { [dayAt(0)]: 'late', [dayAt(-1)]: 'normal', [dayAt(-2)]: 'normal', [dayAt(-3)]: 'leave' },
  'u2': { [dayAt(0)]: 'normal', [dayAt(-1)]: 'field', [dayAt(-2)]: 'absent', [dayAt(-3)]: 'normal' },
  'u3': { [dayAt(0)]: 'early', [dayAt(-1)]: 'normal', [dayAt(-2)]: 'late', [dayAt(-3)]: 'normal' },
})
</script>

<template>
  <BizShiftCalendar
    :members="[
      { id: 'u1', name: '张伟', role: '早班组长' },
      { id: 'u2', name: '李娜', role: '收银员' },
      { id: 'u3', name: '王强', role: '理货员' },
    ]"
    :shift-types="[
      { key: 'early', name: '早班', color: 'success', start: '07:00', end: '15:00' },
      { key: 'mid', name: '中班', color: 'primary', start: '11:00', end: '19:00' },
      { key: 'late', name: '晚班', color: 'warning', start: '15:00', end: '23:00' },
    ]"
    :schedule="{}"
    :attendance="attendance"
  />
</template>

考勤异常清单

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟9

迟到

缺卡

早退

迟到

缺卡

迟到

缺卡

早退

迟到

李李娜9

迟到

缺卡

正常

缺卡

迟到

正常

迟到

缺卡

正常

王王强9

正常

迟到

正常

10-18 张伟迟到10-18 李娜迟到10-19 张伟缺卡10-19 李娜缺卡10-20 张伟早退10-21 张伟迟到…共 16 条异常

正常 11 迟到 8 早退 2 缺卡 6 请假 0 外勤 0 记录 27 条 · 出勤率 78%

迟到 / 早退 / 缺卡逐条列于底部提示条；超过 6 条截断并汇总「共 N 条异常」。

<script setup lang="ts">
/** 异常清单：迟到/早退/缺卡超过 6 条时提示条截断并汇总「共 N 条异常」 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizAttendanceMap } 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 att: BizAttendanceMap = { u1: {}, u2: {}, u3: {} }
const states = ['late', 'early', 'absent', 'late', 'absent', 'late', 'early', 'absent', 'late'] as const
states.forEach((st, i) => {
  att.u1[dayAt(-i)] = st
  att.u2[dayAt(-i)] = i % 3 === 0 ? 'normal' : (['late', 'absent'] as const)[i % 2]
  att.u3[dayAt(-i)] = i === 4 ? 'late' : 'normal'
})
const attendance = ref(att)
</script>

<template>
  <BizShiftCalendar
    :members="[
      { id: 'u1', name: '张伟' },
      { id: 'u2', name: '李娜' },
      { id: 'u3', name: '王强' },
    ]"
    :shift-types="[{ key: 'day', name: '白班', color: 'primary' }]"
    :schedule="{}"
    :attendance="attendance"
    mode="attendance"
  />
</template>

出勤率统计

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟客服4

正常

迟到

正常

李李娜客服4

外勤

正常

请假

10-24 张伟迟到

正常 5 迟到 1 早退 0 缺卡 0 请假 1 外勤 1 记录 8 条 · 出勤率 88%

实况模式统计条换为六态计数 + 出勤率；expose.getAttendanceStats() 供业务埋点。

<script setup lang="ts">
/** 出勤率统计：实况模式统计条换六态计数 + 出勤率；expose.getAttendanceStats 供业务埋点 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizAttendanceMap } 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 attendance = ref<BizAttendanceMap>({
  u1: { [dayAt(0)]: 'normal', [dayAt(-1)]: 'normal', [dayAt(-2)]: 'late', [dayAt(-3)]: 'normal' },
  u2: { [dayAt(0)]: 'leave', [dayAt(-1)]: 'normal', [dayAt(-2)]: 'normal', [dayAt(-3)]: 'field' },
})

const cal = ref<InstanceType<typeof BizShiftCalendar>>()
</script>

<template>
  <div>
    <BizShiftCalendar
      ref="cal"
      :members="[
        { id: 'u1', name: '张伟', role: '客服' },
        { id: 'u2', name: '李娜', role: '客服' },
      ]"
      :shift-types="[{ key: 'day', name: '白班' }]"
      :schedule="{}"
      :attendance="attendance"
      mode="attendance"
    />
    <el-button size="small" style="margin-top: 10px" @click="ElMessage.success(JSON.stringify(cal?.getAttendanceStats()))">
      读取考勤统计
    </el-button>
  </div>
</template>

考勤插槽

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟0

李李娜0

自定义统计：记录 6 条 · 出勤率 83%

cell 插槽作用域新增 attendance（实况时给出当日状态），stats 插槽新增 attendance 统计，可整体接管渲染。

<script setup lang="ts">
/** 插槽联动：cell 插槽作用域新增 attendance（实况时给出当日状态），stats 插槽新增 attendance 统计 */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizAttendanceMap } 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 attendance = ref<BizAttendanceMap>({
  u1: { [dayAt(0)]: 'late', [dayAt(-1)]: 'normal', [dayAt(-2)]: 'field' },
  u2: { [dayAt(0)]: 'normal', [dayAt(-1)]: 'absent', [dayAt(-2)]: 'normal' },
})
</script>

<template>
  <BizShiftCalendar
    :members="[
      { id: 'u1', name: '张伟' },
      { id: 'u2', name: '李娜' },
    ]"
    :shift-types="[{ key: 'day', name: '白班' }]"
    :schedule="{}"
    :attendance="attendance"
  >
    <template #cell="{ member, date, attendance: att }">
      <span
        :style="{
          fontSize: '12px',
          fontWeight: att === 'late' || att === 'absent' ? 700 : 400,
          color: att === 'normal' ? 'var(--el-color-success)' : att === 'leave' ? 'var(--el-text-color-placeholder)' : 'var(--el-color-danger)',
        }"
        :title="`${member.name} ${date}：${att ?? '无记录'}`"
      >{{ att ? att.slice(0, 2) : '·' }}</span>
    </template>
    <template #stats="{ attendance: stat }">
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">
        自定义统计：记录 {{ stat.total }} 条 · 出勤率 {{ stat.attendanceRate }}%
      </span>
    </template>
  </BizShiftCalendar>
</template>

受控模式切换

考勤实况计划排班

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟2

迟到

正常

李李娜2

正常

外勤

10-25 张伟迟到

正常 2 迟到 1 早退 0 缺卡 0 请假 0 外勤 1 记录 4 条 · 出勤率 100%

v-model:mode 由业务切换（HR 月度核对：先看实况再对计划），组件内工具栏切换按钮同样生效。

<script setup lang="ts">
/** 受控模式：v-model:mode 由业务切换（如 HR 月度核对流程先看实况再对计划） */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizAttendanceMap } 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 mode = ref<'plan' | 'attendance'>('attendance')

const attendance = ref<BizAttendanceMap>({
  u1: { [dayAt(0)]: 'normal', [dayAt(-1)]: 'late' },
  u2: { [dayAt(0)]: 'field', [dayAt(-1)]: 'normal' },
})
</script>

<template>
  <div>
    <el-radio-group v-model="mode" size="small" style="margin-bottom: 10px">
      <el-radio-button value="attendance">考勤实况</el-radio-button>
      <el-radio-button value="plan">计划排班</el-radio-button>
    </el-radio-group>
    <BizShiftCalendar
      v-model:mode="mode"
      :members="[
        { id: 'u1', name: '张伟' },
        { id: 'u2', name: '李娜' },
      ]"
      :shift-types="[
        { key: 'early', name: '早班', color: 'success' },
        { key: 'late', name: '晚班', color: 'warning' },
      ]"
      :schedule="{ u1: { [dayAt(-1)]: ['early'] }, u2: { [dayAt(-1)]: ['late'] } }"
      :attendance="attendance"
    />
  </div>
</template>

实况只读归档

成员当月班次

四五六日一二三四五六日一二三四五六日一二三四五六日一二三四五六

12345678910111213141516171819202122232425262728293031

张张伟值班经理3

请假

正常

正常 2 迟到 0 早退 0 缺卡 0 请假 1 外勤 0 记录 3 条 · 出勤率 67%

editable=false + mode=attendance：管理侧月度归档查看，实况与计划均不可编辑。

<script setup lang="ts">
/** 实况只读：editable=false + mode=attendance（管理侧月度归档查看，切回计划同样不可编辑） */
import { ref } from 'vue'
import { BizShiftCalendar } from 'vue3-ep-biz-lib'
import type { BizAttendanceMap } 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 attendance = ref<BizAttendanceMap>({
  u1: { [dayAt(0)]: 'normal', [dayAt(-1)]: 'normal', [dayAt(-2)]: 'leave' },
})
</script>

<template>
  <BizShiftCalendar
    :editable="false"
    mode="attendance"
    :members="[{ id: 'u1', name: '张伟', role: '值班经理' }]"
    :shift-types="[{ key: 'day', name: '全天班' }]"
    :schedule="{}"
    :attendance="attendance"
  />
</template>

Props

属性名	类型	默认值	说明
v-model:month	`string`	当月	展示月份 `'YYYY-MM'`；非法值回退当月
members	`BizShiftMember[]`	`[]`	成员列表（每成员一行；id / name / avatar / role）
shift-types	`BizShiftType[]`	`[]`	班次类型（key / name / color / start / end）
v-model:schedule	`BizShiftSchedule`	`{}`	排班表 `memberId -> 'YYYY-MM-DD' -> shiftKey[]`；内部 copy-on-write，不改写传入对象
start-week	`0 \| 1`	`1`	周起始：0 周日 / 1 周一
editable	`boolean`	`true`	可编辑（点击弹层 + 拖拽换班）
capacity	`Record<string, number>`	—	班次日容量：shiftKey -> 每日最多人数；超容警示
show-stats	`boolean`	`true`	底部统计条
cell-max	`number`	`2`	单元格直显徽标数，超出折叠 +N（tooltip 列全部）
v-model:mode	`'plan' \| 'attendance'`	`plan`（初始内部态）	展示模式：plan 计划排班 / attendance 考勤实况（attendance 未传入时恒为 plan）；未绑定 v-model 时由工具栏按钮内部切换
attendance	`BizAttendanceMap`	—	考勤记录 `memberId -> 'YYYY-MM-DD' -> 'normal' \| 'late' \| 'early' \| 'absent' \| 'leave' \| 'field'`；传入后启用实况模式

Events

事件名	参数	说明
update:month	`(month: string)`	月份变化（v-model:month）
update:mode	`(mode: 'plan' \| 'attendance')`	展示模式切换（v-model:mode）
update:schedule	`(schedule: BizShiftSchedule)`	排班表变化（v-model:schedule，新对象）
month-change	`(month: string)`	月份切换（与 update:month 同时抛出）
cell-change	`(payload: BizShiftCellChange)`	单元格变化：`{ memberId, date, shifts, type }`；type = `edit` 编辑 / `move` 同成员拖拽移动 / `swap` 跨成员交换（交换双方各抛一次）
conflicts	`(conflicts: BizShiftConflict[])`	冲突重算（schedule / month 变化触发；挂载即抛一次初始值）

Slots

插槽名	参数	说明
member-name	`{ member, count }`	自定义成员格（count = 该成员当月班次总数）
cell	`{ member, date, shifts, attendance? }`	自定义单元格（整体接管默认徽标渲染；实况模式附当日考勤状态）
stats	`{ byShift, byMember, attendance }`	自定义统计条（byShift / byMember 计划口径；attendance 实况统计）
header-extra	—	工具栏右侧扩展区

Expose

名称	类型	说明
getStats	`() => { byShift: Record<string, number>; byMember: Record<string, number> }`	当月统计
getConflicts	`() => BizShiftConflict[]`	当前冲突列表
getAttendanceStats	`() => BizAttendanceStats`	考勤统计：`{ total, byStatus 六态计数, attendanceRate 出勤率 }`
setCell	`(memberId, date, shifts) => void`	编程式设置单元格班次（触发 update:schedule + cell-change，type='edit'）
clearDay	`(date: string) => void`	清空指定日期全部成员排班（逐成员抛 cell-change）
getMonthDays	`() => string[]`	当前展示月份的全部日期（'YYYY-MM-DD' 升序）

BizShiftCalendar 排班日历 ​

基础用法 ​

一人多班与折叠 ​

拖拽换班 ​

冲突检测 ​

统计 ​

自定义插槽 ​

月份导航与跨月数据 ​

只读 ​

班次配色 ​

考勤实况模式 ​

考勤异常清单 ​

出勤率统计 ​

考勤插槽 ​

受控模式切换 ​

实况只读归档 ​

Props ​

Events ​

Slots ​

Expose ​

BizShiftCalendar 排班日历

基础用法

一人多班与折叠

拖拽换班

冲突检测

统计

自定义插槽

月份导航与跨月数据

只读

班次配色

考勤实况模式

考勤异常清单

出勤率统计

考勤插槽

受控模式切换

实况只读归档

Props

Events

Slots

Expose