医院批量排班实战指南（二）日期与时段设置

前言

在上一篇《批量排班功能实现指南（一）：医生选择》中，我们完成了批量排班的第一步——医生选择功能的搭建。通过可视化的医生选择界面，管理员可以轻松地批量选择跨科室的医生，为后续的排班配置奠定了基础。

本篇将继续深入批量排班的核心功能——第二步：日期与时段设置。这一步是整个批量排班功能的关键环节，涉及：

• 灵活的日期范围选择
• 智能的重复规则配置
• 高效的时段批量操作
• 直观的日期列表预览

通过本篇的学习，你将掌握如何构建一个既灵活又高效的日期时段选择系统，让管理员能够快速配置复杂的排班日期规则。

一 步骤跳转

我们上一篇只是搭建了视图，还没有功能可以从第一歩切换到第二步，我们先把这个功能实现一下。在第一个选项卡里，继续添加普通容器，里边添加两个按钮，按钮内容改为取消和下一步选择日期

取消按钮的点击事件，设置为关闭弹窗即可

下一步按钮点击的时候我们需要校验是否有选择医生，新建一个javascript方法

exportdefault function({event, data}){const selectedDoctors=$w.page.dataset.state.selectedDoctors;// 校验医生选择if(!selectedDoctors||selectedDoctors.length===0){$w.utils.showToast({title:'请至少选择一位医生', icon:'error', duration:1000});return;}// 校验通过提示$w.utils.showToast({title:`已选择 ${selectedDoctors.length}位医生`, icon:'success'});// ✅ 校验通过，切换到第二步$w.topTab1.selectTab({value:"2"});}

然后给按钮配置点击事件，调用我们这个方法

二 日期与时段设置

2.1 变量定义

在代码区继续定义第二步所需的页面变量：

// 变量名：dateRange// 类型：对象// 说明：日期范围选择$w.page.dataset.state.dateRange={startDate:"",endDate:""}// 变量名：repeatRule// 类型：文字// 说明：重复规则 daily/workdays/weekends/custom$w.page.dataset.state.repeatRule="workdays"// 变量名：customWeekdays// 类型：数组// 说明：自定义星期选择 [0,1,2,3,4,5,6] (0=周日,1=周一...)$w.page.dataset.state.customWeekdays=[]// 变量名：selectedDates// 类型：数组// 说明：生成的日期列表，每项包含date和timeSlots$w.page.dataset.state.selectedDates=[]// 变量名：isGeneratingDates// 类型：布尔值// 说明：是否正在生成日期（用于显示加载状态）$w.page.dataset.state.isGeneratingDates=false// 变量名：showCustomWeekdays// 类型：布尔值// 说明：是否显示自定义星期选择器$w.page.dataset.state.showCustomWeekdays=false

2.2 布局搭建

2.2.1 日期范围选择区域

添加一个网格布局，改为6:6布局

列里添加日期选择组件

这里要重设一下组件的宽度，改为100%，要不然就会出现横向的滚动条

2.2.2 重复规则配置区域

继续添加行，列的数量改为1

添加单选组件，修改选项

2.2.3 日期生成操作区域

继续添加行，在列里添加普通容器，放入按钮组件

2.3 显示自定义规则

在重复规则中，前两个选项是默认规则，我们需要在算法中实现。第三个规则需要用户勾选星期，我们定义一个方法来控制视图的显隐。

首先需要在单选下添加一个普通容器，里边添加文本组件，文本内容设置为选择星期。然后添加一个多选组件设置为周日到周六

多选组件默认是从上到下排列，不符合我们的要求，我们需要覆盖一下组件样式，输入如下样式

:root{}:scope .wd-checkbox-group{display: flex;flex-direction: row;align-items: center;}:scope .wd-checkbox-wrap{margin:0005px;}

究竟覆盖哪个样式类，也是非常耗时间的一件事，还是那么一个原则，厂商总是把困难留给用户，把方便留给自己。

样式调好了之后，就需要我们通过单选来控制多选是否显示，输入如下控制代码

exportdefault function({event, data}){const selectedRule=$w.radio1.value;//1=每天,2=仅工作日,3=自定义 // 处理重复规则切换if(selectedRule==="3"){// 选择自定义，显示星期选择器$w.page.dataset.state.showCustomWeekdays=true;}else{// 选择其他规则，隐藏星期选择器并清空选择$w.page.dataset.state.showCustomWeekdays=false;$w.page.dataset.state.customWeekdays=[];}}

然后给单选组件设置值改变事件，调用我们的方法

在方法切换好布尔值变量的值后，我们给普通容器绑定条件展示，这样就可以看到组件的显示和隐藏

最终效果

点击批量排班，需要选择医生，选好医生点击下一步

显示日期设置界面，默认不显示周日到周六

切换到自定义周几，显示复选

总结

本篇我们介绍了日期与时段设置的功能。先是讲解如果通过顶部选项卡的API方法调用切换选中标签，接着搭建了视图，创建了控制显示的方法。这里难点是如何覆盖组件样式达到我们的目标，核心在你要吃透CSS的布局样式才能面对困难。