考勤

parts/attendance.vue

@@ -1,12 +1,13 @@
 <template>
   <div id="attendance">
-    <el-select v-model="value" placeholder="请选择">
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+    <el-select v-model="value" placeholder="请选择" @change="filterDate">
+      <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item"> </el-option>
     </el-select>
     <el-table :data="tableData" border style="width: 100%">
-      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
-      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
-      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="date" label="日期"> </el-table-column>
+      <el-table-column prop="time" label="时间"> </el-table-column>
+      <el-table-column prop="name" label="姓名"> </el-table-column>
+      <el-table-column prop="status" label="状态"> </el-table-column>
     </el-table>
   </div>
 </template>
@@ -15,6 +16,7 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: attendance } = createNamespacedHelpers('attendance');
 const { mapActions: classes } = createNamespacedHelpers('classes');
+const moment = require('moment');
 export default {
   name: 'attendance',
   props: {
@@ -25,17 +27,81 @@ export default {
     tableData: [],
     options: [],
     value: '',
+    attendList: [],
   }),
   created() {},
   computed: {},
   methods: {
     ...attendance(['fetch', 'query']),
-    ...classes(['searchDate']),
+    ...classes({ classFetch: 'fetch' }),
     async search() {
-      const List = await this.query({ classid: this.classId });
-      const data = await this.searchDate({ classid: this.classId });
-      console.log(List);
-      console.log(data);
+      const attendList = await this.query({ classid: this.classId });
+      this.$set(this, `attendList`, attendList.data);
+      const classInfo = await this.classFetch(this.classId);
+      const timeList = await this.getAllDays(classInfo.data.startdate, classInfo.data.enddate);
+      this.$set(this, `options`, timeList);
+    },
+    filterDate(time) {
+      console.log(this.attendList);
+      const data = [];
+      for (const attendInfo of this.attendList) {
+        let dataInfo = {};
+        const attend = attendInfo.attend;
+        for (const _attend of attend) {
+          dataInfo.name = attendInfo.stuname;
+          if (moment(time).isSame(_attend.date)) {
+            dataInfo.date = time;
+            dataInfo.time = _attend.time;
+            console.log(_attend.status);
+            dataInfo.status = _attend.status == '0' ? '未签到' : _attend.status == '1' ? '已签到' : _attend.status == '2' ? '迟到' : '';
+            data.push(dataInfo);
+          }
+          dataInfo = {};
+        }
+      }
+      this.$set(this, `tableData`, data);
+    },
+    // 取得日期间所有日期
+    async getAllDays(begin_date, end_date) {
+      const errArr = [],
+        resultArr = [],
+        dateReg = /^[2]\d{3}-[01]\d-[0123]\d$/;
+      if (typeof begin_date !== 'string' || begin_date === '' || !dateReg.test(begin_date)) {
+        return errArr;
+      }
+      if (typeof end_date !== 'string' || end_date === '' || !dateReg.test(end_date)) {
+        return errArr;
+      }
+      try {
+        const beginTimestamp = Date.parse(new Date(begin_date)),
+          endTimestamp = Date.parse(new Date(end_date));
+        // 开始日期小于结束日期
+        if (beginTimestamp > endTimestamp) {
+          return errArr;
+        }
+        // 开始日期等于结束日期
+        if (beginTimestamp === endTimestamp) {
+          resultArr.push(begin_date);
+          return resultArr;
+        }
+        let tempTimestamp = beginTimestamp,
+          tempDate = begin_date;
+        // 新增日期是否和结束日期相等， 相等跳出循环
+        while (tempTimestamp !== endTimestamp) {
+          resultArr.push(tempDate);
+          // 增加一天
+          tempDate = moment(tempTimestamp)
+            .add(1, 'd')
+            .format('YYYY-MM-DD');
+          // 将增加时间变为时间戳
+          tempTimestamp = Date.parse(new Date(tempDate));
+        }
+        // 将最后一天放入数组
+        resultArr.push(end_date);
+        return resultArr;
+      } catch (err) {
+        return errArr;
+      }
     },
   },
   watch: {