制作如下的考勤排班表,可以显示每个岗位每一天的考勤排班情况,并且可以下拉选择人员排班人员更改。
由于整体项目选择了element ui组件库,因此选择了element ui 的table和select组件进行实现。
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
从element ui官方的示例可知,table对应的数据结构形式,表格中的一行对应table中的一条数据。因此考勤排班表的数据格式也需要组织为对应的结构,其中name为岗位名称,20221201对应的日期表头,selectPerson为该岗位可以选择的人员。
gridData: [
{
name: '岗位1',
20221201: {
name: '张三',
id: "1",
selectPerson: ['李四', '张三'],
},
20221202: {
name: '李四',
id: "2",
selectPerson: ['李四', '张三'],
}
}
],
通过new Date()函数获取日期,实现动态的日期表头。最后获取的两个重要的list为dateindex和everyDay。以2022年12月为例,dateindex=[20221201, 20221202, 20221203 ,......],everyDay=['1 周四', ‘2 周五’, ‘3 周六’,.....]。
getEveryDay( ) {
const yearandMonth = this.getYearandMonth()
var date = new Date()
var month = new Date().getMonth()
date.setMonth(month + 1);
date.setDate(0);
const dayArry = [];
const peoplelist = {};
const dateArray = [];
// 获取月份的某一天
const day = date.getDate();
for (let i = 1; i <= day; i++) {
date.setDate(i); // 如果只获取当前选择月份的每一天,则不需要date.setDate(i)只需dayArry.push(i)即可,其中date.setDate(i)是设置当前月份的每一天
dayArry.push(i + " " + this.getWeekday(date.getDay())); // 选中月份的每一天和当天是星期几
const strday = ("0" + i).slice(-2); //获取当前日(1-31日)
dateArray.push(yearandMonth + strday);
}
this.dateindex = dateArray;
this.everyDay = dayArry;
},
getWeekday(day) {
return ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][day];
},
getYearandMonth() {
const nowdata = new Date(new Date().getTime());
const year = nowdata.getFullYear();
const month = ("0" + (nowdata.getMonth() + 1)).slice(-2); //获取当前月份(0~11,0代表1月)
return year + month;
},
采用table组件实现,其实第一列为岗位名称,后面的列为动态的时间表头,通过v-for动态生成,并在单元格里面嵌入select 组件进行下拉选择,通过v-model绑定选择的人员,@change实现变化监听。
注:文章为该功能的实现思路,代码只包含主要功能,不可直接运行。