企业官网建设流程全解析

网站安全维护内容,erp系统怎么自学,芜湖十大企业排名,深圳网站建设与网站制作目录前言一 步骤跳转二 日期与时段设置2.1 变量定义2.2 布局搭建2.2.1 日期范围选择区域2.2.2 重复规则配置区域2.2.3 日期生成操作区域2.3 显示自定义规则最终效果总结前言 在上一篇《批量排班功能实现指南#xff08;一#xff09;#xff1a;医生选择》中#xff0c;我…目录前言一 步骤跳转二 日期与时段设置2.1 变量定义2.2 布局搭建2.2.1 日期范围选择区域2.2.2 重复规则配置区域2.2.3 日期生成操作区域2.3 显示自定义规则最终效果总结前言在上一篇《批量排班功能实现指南一医生选择》中我们完成了批量排班的第一步——医生选择功能的搭建。通过可视化的医生选择界面管理员可以轻松地批量选择跨科室的医生为后续的排班配置奠定了基础。本篇将继续深入批量排班的核心功能——第二步日期与时段设置。这一步是整个批量排班功能的关键环节涉及灵活的日期范围选择智能的重复规则配置高效的时段批量操作直观的日期列表预览通过本篇的学习你将掌握如何构建一个既灵活又高效的日期时段选择系统让管理员能够快速配置复杂的排班日期规则。一 步骤跳转我们上一篇只是搭建了视图还没有功能可以从第一歩切换到第二步我们先把这个功能实现一下。在第一个选项卡里继续添加普通容器里边添加两个按钮按钮内容改为取消和下一步选择日期取消按钮的点击事件设置为关闭弹窗即可下一步按钮点击的时候我们需要校验是否有选择医生新建一个javascript方法exportdefault function({event, data}){const selectedDoctors$w.page.dataset.state.selectedDoctors;// 校验医生选择if(!selectedDoctors||selectedDoctors.length0){$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.repeatRuleworkdays// 变量名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.isGeneratingDatesfalse// 变量名showCustomWeekdays// 类型布尔值// 说明是否显示自定义星期选择器$w.page.dataset.state.showCustomWeekdaysfalse2.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(selectedRule3){// 选择自定义显示星期选择器$w.page.dataset.state.showCustomWeekdaystrue;}else{// 选择其他规则隐藏星期选择器并清空选择$w.page.dataset.state.showCustomWeekdaysfalse;$w.page.dataset.state.customWeekdays[];}}然后给单选组件设置值改变事件调用我们的方法在方法切换好布尔值变量的值后我们给普通容器绑定条件展示这样就可以看到组件的显示和隐藏最终效果点击批量排班需要选择医生选好医生点击下一步显示日期设置界面默认不显示周日到周六切换到自定义周几显示复选总结本篇我们介绍了日期与时段设置的功能。先是讲解如果通过顶部选项卡的API方法调用切换选中标签接着搭建了视图创建了控制显示的方法。这里难点是如何覆盖组件样式达到我们的目标核心在你要吃透CSS的布局样式才能面对困难。