在日常开发需求中,可能会遇到给员工进行排班的需求,如果只是在table表格中显示,会显得枯燥、不直观,今天我们就来写一个可以自定义的日历排班功能,用的是vue2+element-ui。
(图一):日历中显示排班数据,排班数据可以使用鼠标进行拖动,改变排班的顺序。
(图三):可以对单日排班信息进行操作,显示单日排班时间的具体信息等。
批量排班
日期选择
{{
data.day
.split("-")
.slice(1)
.join("-")
}}
{{ dayValue.groupName }}
{{
data.day
.split("-")
.slice(1)
.join("-")
}}
暂无排班
班次:
早
中
晚
班别:
甲
乙
丙
添加
早
中
晚
甲
乙
丙
移除
{{
data.day
.split("-")
.slice(1)
.join("-")
}}
{{ initHolidayDate(data) }}
选中的日期:
{{day.date}}