BizScheduleTime 排班时段

按天配置多个起止时段：时间下拉步进可配、行内即时校验（起止顺序 / 同日重叠 / allow-overnight 跨天）、每日合计与每周合计。门店营业时间、客服排班、医生出诊、设备巡检窗口；与 BizCalendarBoard 组合可构成「按周排班」的完整方案。

门店营业时间

周一8 小时

至

3 小时

至

5 小时

周二8 小时

至

3 小时

至

5 小时

周三9 小时 30 分

至

9 小时 30 分

周四9 小时 30 分

至

9 小时 30 分

周五11 小时

至

11 小时

周六12 小时

至

12 小时

周日0 分钟

休息

每周合计 58 小时（休息 1 天：周日）

周一~周日逐天配置时段，周日留空即休息；底部每周合计。

<script setup lang="ts">
/** 场景：门店营业时间——按天配置多个时段，每日合计 + 每周合计 */
import { ref } from 'vue'
import { BizScheduleTime } from 'vue3-ep-biz-lib'
import type { BizScheduleDay } from 'vue3-ep-biz-lib'

const schedule = ref<BizScheduleDay[]>([
  { day: 1, segments: [{ start: '09:00', end: '12:00' }, { start: '13:30', end: '18:30' }] },
  { day: 2, segments: [{ start: '09:00', end: '12:00' }, { start: '13:30', end: '18:30' }] },
  { day: 3, segments: [{ start: '09:00', end: '18:30' }] },
  { day: 4, segments: [{ start: '09:00', end: '18:30' }] },
  { day: 5, segments: [{ start: '09:00', end: '20:00' }] },
  { day: 6, segments: [{ start: '10:00', end: '22:00' }] },
  { day: 7, segments: [] },
])
</script>

<template>
  <div style="max-width: 720px">
    <BizScheduleTime v-model="schedule" />
  </div>
</template>

显示代码

提交校验

周一6 小时

至

3 小时

至

3 小时

时段之间存在重叠

周二0 分钟

至

-8 小时

存在结束时间不晚于开始时间的时段

每周合计 6 小时（休息 0 天：无）

重叠 / 顺序错误行内标红，expose validate() 返回逐日错误清单。

<script setup lang="ts">
/** 场景：排班提交校验——行内即时标红重叠/顺序问题，提交前 validate() 兜底 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizScheduleTime } from 'vue3-ep-biz-lib'
import type { BizScheduleTimeInstance } from 'vue3-ep-biz-lib'

const scheduleRef = ref<BizScheduleTimeInstance>()
const schedule = ref([
  { day: 1, segments: [{ start: '09:00', end: '12:00' }, { start: '11:00', end: '14:00' }] },
  { day: 2, segments: [{ start: '18:00', end: '10:00' }] },
])

const submit = (): void => {
  const result = scheduleRef.value?.validate()
  if (!result?.valid) {
    ElMessage.error(result?.errors.map((e) => `周${e.day}：${e.message}`).join('；'))
    return
  }
  ElMessage.success('排班保存成功')
}
</script>

<template>
  <div style="max-width: 640px">
    <BizScheduleTime ref="scheduleRef" v-model="schedule" :days="[1, 2]" />
    <ElButton type="primary" style="margin-top: 10px" @click="submit">保存排班</ElButton>
  </div>
</template>

显示代码

跨天时段（夜班）

周一8 小时

至

8 小时

周二9 小时

至

9 小时

周三8 小时

至

8 小时

每周合计 25 小时（休息 0 天：无）

周一起 22:00 → 次日 06:00 的夜班按 8 小时计入；不开启跨天时该时段会标红提示顺序错误

allow-overnight 后结束 < 开始视为持续到次日（22:00 → 06:00 计 8 小时）。

<script setup lang="ts">
/** 场景：跨天时段——值班类排班（结束 < 开始视为持续到次日），allow-overnight 打开 */
import { ref } from 'vue'
import { ElAlert } from 'element-plus'
import { BizScheduleTime } from 'vue3-ep-biz-lib'

const schedule = ref([
  { day: 1, segments: [{ start: '22:00', end: '06:00' }] },
  { day: 2, segments: [{ start: '08:30', end: '17:30' }] },
  { day: 3, segments: [{ start: '22:00', end: '06:00' }] },
])
</script>

<template>
  <div style="max-width: 640px">
    <BizScheduleTime v-model="schedule" :days="[1, 2, 3]" allow-overnight />
    <ElAlert
      style="margin-top: 10px"
      type="info"
      :closable="false"
      show-icon
      title="周一起 22:00 → 次日 06:00 的夜班按 8 小时计入；不开启跨天时该时段会标红提示顺序错误"
    />
  </div>
</template>

显示代码

自定义天集合

早班（周一/周四）9 小时

至

9 小时

早班（周一/周四）0 分钟

休息

每周合计 9 小时（休息 1 天：早班（周一/周四））

days 传 { day, label } 自定义排班行（门店轮班场景）。

<script setup lang="ts">
/** 场景：自定义天集合——仅排工作日，并用 { day, label } 改标签（如门店轮班） */
import { ref } from 'vue'
import { BizScheduleTime } from 'vue3-ep-biz-lib'

const schedule = ref([
  { day: 1, segments: [{ start: '09:00', end: '18:00' }] },
  { day: 2, segments: [{ start: '09:00', end: '18:00' }] },
])

const days = [
  { day: 1, label: '早班（周一/周四）' },
  { day: 4, label: '早班（周一/周四）' },
]
</script>

<template>
  <div style="max-width: 640px">
    <BizScheduleTime v-model="schedule" :days="days" />
  </div>
</template>

显示代码

工时核算（expose）

周一8 小时

至

3 小时

至

5 小时

周二9 小时

至

9 小时

周三0 分钟

休息

每周合计 17 小时（休息 1 天：周三）

getDayTotal(day) / getWeekTotal() 计算薪酬基准工时。

<script setup lang="ts">
/** 场景：工时核算——expose getDayTotal / getWeekTotal 计算薪酬基准 */
import { ref } from 'vue'
import { ElButton, ElTag } from 'element-plus'
import { BizScheduleTime } from 'vue3-ep-biz-lib'
import type { BizScheduleTimeInstance } from 'vue3-ep-biz-lib'

const scheduleRef = ref<BizScheduleTimeInstance>()
const schedule = ref([
  { day: 1, segments: [{ start: '09:00', end: '12:00' }, { start: '13:00', end: '18:00' }] },
  { day: 2, segments: [{ start: '09:00', end: '18:00' }] },
  { day: 3, segments: [] },
])

const totals = ref<{ monday: string; week: string } | null>(null)

const calc = (): void => {
  const monday = scheduleRef.value?.getDayTotal(1) ?? 0
  const week = scheduleRef.value?.getWeekTotal() ?? 0
  const fmt = (m: number): string => `${Math.floor(m / 60)} 小时 ${m % 60} 分`
  totals.value = { monday: fmt(monday), week: fmt(week) }
}
</script>

<template>
  <div style="max-width: 640px">
    <BizScheduleTime ref="scheduleRef" v-model="schedule" :days="[1, 2, 3]" />
    <div style="margin-top: 10px; display: flex; gap: 10px; align-items: center">
      <ElButton type="primary" size="small" @click="calc">核算工时</ElButton>
      <ElTag v-if="totals" type="success">周一 {{ totals.monday }}</ElTag>
      <ElTag v-if="totals" type="warning">本周合计 {{ totals.week }}</ElTag>
    </div>
  </div>
</template>

显示代码

医生出诊（15 分钟步进）

周一6 小时 45 分

至

3 小时 45 分

至

3 小时

周二0 分钟

休息

周三3 小时 45 分

至

3 小时 45 分

周四0 分钟

休息

周五0 分钟

休息

周六0 分钟

休息

周日0 分钟

休息

每周合计 10 小时 30 分（休息 5 天：周二、周四、周五、周六、周日）

step="00:15" 号段粒度 + 提交前校验。

<script setup lang="ts">
/** 场景：医生出诊——号段粒度 15 分钟 + 提交前校验，展示 change 轨迹 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizScheduleTime } from 'vue3-ep-biz-lib'
import type { BizScheduleDay, BizScheduleTimeInstance } from 'vue3-ep-biz-lib'

const scheduleRef = ref<BizScheduleTimeInstance>()
const schedule = ref<BizScheduleDay[]>([
  { day: 1, segments: [{ start: '08:00', end: '11:45' }, { start: '14:00', end: '17:00' }] },
  { day: 3, segments: [{ start: '08:00', end: '11:45' }] },
])

const submit = (): void => {
  const result = scheduleRef.value?.validate()
  if (!result?.valid) {
    ElMessage.error('出诊时段有冲突，请调整后提交')
    return
  }
  ElMessage.success('出诊表已发布')
}
</script>

<template>
  <div style="max-width: 640px">
    <BizScheduleTime ref="scheduleRef" v-model="schedule" step="00:15" />
    <ElButton type="primary" style="margin-top: 10px" @click="submit">发布出诊表</ElButton>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	BizScheduleDay[]	[]	每天一项：{ day: 1~7, segments: [{ start, end }] }
days	(number | { day: number; label: string })[]	[1..7]	排班天集合，可用对象自定义标签
allow-overnight	boolean	false	时段可跨天（结束 < 开始视为到次日）
step	string	'00:30'	时间下拉步进（ElTimeSelect step）
show-summary	boolean	true	展示每日合计与每周合计
disabled	boolean	false	整体禁用

Events

事件名	参数	说明
update:model-value	(value: BizScheduleDay[])	任意时段增删改后回发完整排班
change	(day: number, value: BizScheduleDay[])	变化日 + 完整排班

Expose

名称	类型	说明
validate	() => { valid: boolean; errors: { day: number; message: string }[] }	全量校验
getDayTotal	(day: number) => number	指定天合计（分钟）
getWeekTotal	() => number	每周合计（分钟）