element ui table实现考勤排班表

1.项目需求

1.1需求

    制作如下的考勤排班表，可以显示每个岗位每一天的考勤排班情况，并且可以下拉选择人员排班人员更改。

1.2 难点分析

1.  在表格中嵌入下拉选择功能。
2.  需要动态显示每个月的排班情况，因此表头需要动态变化。
3. 后端返回的数据和前端需求不一样，需要对后端数据进行重构形成前端需要的数据。
4. 在前端更改的数据需要返回后端进行保存。

2.考勤排班表实现

2.1 组件库选择

      由于整体项目选择了element ui组件库，因此选择了element ui 的table和select组件进行实现。

2.2 数据结构分析

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: ['李四', '张三'],
          }
        }
      ],

2.3 实现

2.3.1 动态日期表头实现

通过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;
    },

2.3.2 表格实现

采用table组件实现，其实第一列为岗位名称，后面的列为动态的时间表头，通过v-for动态生成，并在单元格里面嵌入select 组件进行下拉选择，通过v-model绑定选择的人员，@change实现变化监听。

注：文章为该功能的实现思路，代码只包含主要功能，不可直接运行。