train-director/src/views/classes/attendance.vue

<template>
  <div id="attendance">
    <listFrame :title="pageTitle" @query="skipsearch" :total="total" :needFilter="false" :returns="toreturn" :needAdd="false">
      <attendanceInfo :tableData="tableData" :options="options" @filterDate="filterDate"></attendanceInfo>
    </listFrame>
  </div>
</template>

<script>
import _ from 'lodash';
var moment = require('moment');
import attendanceInfo from '@frame/parts/attendance';
import listFrame from '@frame/layout/admin/list-frame';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: attendance } = createNamespacedHelpers('attendance');
const { mapActions: classes } = createNamespacedHelpers('classes');
export default {
  name: 'attendance',
  props: {},
  components: { attendanceInfo, listFrame },
  data: () => ({
    total: 0,
    attendList: [],
    tableData: [],
    options: [],
    dataList: [],
  }),
  created() {
    this.search();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  methods: {
    ...attendance(['fetch', 'query']),
    ...classes({ classFetch: 'fetch' }),
    async search() {
      const attendList = await this.query({ classid: this.id });
      this.$set(this, `attendList`, attendList.data);
      const classInfo = await this.classFetch(this.id);
      const timeList = await this.getAllDays(classInfo.data.startdate, classInfo.data.enddate);
      this.$set(this, `options`, timeList);
    },
    skipsearch({ skip = 0, limit = 10 } = {}) {
      const data = _.slice(this.dataList, skip, skip + limit);
      this.$set(this, `tableData`, data);
    },
    filterDate(time) {
      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;
            dataInfo.status = _attend.status;
            dataInfo.type = _attend.type;
            data.push(dataInfo);
          }
          dataInfo = {};
        }
      }
      this.$set(this, `dataList`, data);
      this.$set(this, `total`, data.length);
      this.skipsearch();
    },
    toreturn() {
      window.history.go(-1);
    },
    // 取得日期间所有日期
    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;
      }
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    classId: {
      handler(val) {
        if (val) {
          this.search();
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped></style>