考勤

src/views/home/classmenu.vue

@@ -9,7 +9,7 @@
           <el-image :src="topImage"></el-image>
         </el-col>
         <van-col :span="24">
-          <el-col :span="8" class="list" v-for="(item, index) in menuList" :key="index" @click="turnTo(item.name)">
+          <el-col :span="8" class="list" v-for="(item, index) in menuList" :key="index" @click.native="turnTo(item.name)">
             <i :class="item.icon"></i>
             <p>{{ item.name }}</p>
           </el-col>

src/views/user/attendance.vue

@@ -5,6 +5,36 @@
         <van-col :span="24" class="top">
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </van-col>
+        <van-col :span="24" class="main">
+          <van-dropdown-menu>
+            <van-dropdown-item v-model="type" :options="typeOption" @change="typeChange" />
+            <van-dropdown-item v-model="selvalue" :options="selOption" @change="selChange" />
+          </van-dropdown-menu>
+          <van-col v-if="display === 'stu'" :span="24">
+            <van-col :span="24" v-for="(item, index) in attendList" :key="index" class="attendList">
+              <p>
+                <span>{{ item.date }}</span>
+                <span>{{ item.time }}</span>
+                <span>{{ item.status === '0' ? '未签到' : item.status === '1' ? '已签到' : item.status === '2' ? '迟到' : '' }}</span>
+                <span>{{ item.type === '0' ? '上课考勤' : item.type === '1' ? '寝室考勤' : '' }}</span>
+              </p>
+            </van-col>
+          </van-col>
+          <van-col v-if="display === 'time'" :span="24">
+            <van-collapse v-model="stuid" accordion v-for="(item, index) in stuList" :key="index">
+              <van-collapse-item :title="item.name" :name="item._id" @click.native="stuChange(item.id)">
+                <van-col :span="24" v-for="(item, index) in stuAttendList" :key="index" class="attendList">
+                  <p>
+                    <span>{{ item.date }}</span>
+                    <span>{{ item.time }}</span>
+                    <span>{{ item.status === '0' ? '未签到' : item.status === '1' ? '已签到' : item.status === '2' ? '迟到' : '' }}</span>
+                    <span>{{ item.type === '0' ? '上课考勤' : item.type === '1' ? '寝室考勤' : '' }}</span>
+                  </p>
+                </van-col>
+              </van-collapse-item>
+            </van-collapse>
+          </van-col>
+        </van-col>
       </van-col>
     </van-row>
   </div>
@@ -12,9 +42,13 @@
 
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
+import _ from 'lodash';
 import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
+var moment = require('moment');
+const { mapActions: util } = createNamespacedHelpers('util');
 const { mapActions: attendance } = createNamespacedHelpers('attendance');
 const { mapActions: student } = createNamespacedHelpers('student');
+const { mapActions: classes } = createNamespacedHelpers('classes');
 export default {
   name: 'attendance',
   props: {},
@@ -24,19 +58,119 @@ export default {
   data: () => ({
     title: '',
     isleftarrow: '',
+    display: '',
     navShow: true,
+    type: '1',
+    selvalue: {},
+    typeOption: [
+      { text: '按学生查看', value: '0' },
+      { text: '按时间查看', value: '1' },
+    ],
+    selOption: [],
+    attendList: [],
+    stuList: [],
+    stuid: '',
+    stuAttendList: [],
   }),
   created() {
-    this.search();
+    this.typeChange();
   },
   computed: {
     ...mapState(['user', 'classid']),
   },
   methods: {
-    ...attendance(['query']),
-    async search() {
-      const attendList = await this.query({ classid: this.classid });
-      console.log(attendList);
+    ...attendance(['query', 'fetch']),
+    ...classes({ classFetch: 'fetch' }),
+    ...student({ stuQuery: 'query' }),
+    ...util({ modelFetch: 'fetch' }),
+    async typeChange() {
+      if (this.type === '1') {
+        const classes = await this.classFetch(this.classid);
+        const dateList = await this.getAllDays(classes.data.startdate, classes.data.enddate);
+        const selOption = [];
+        for (const date of dateList) {
+          const sel = {};
+          sel.text = date;
+          sel.value = date;
+          selOption.push(sel);
+        }
+        this.$set(this, `selOption`, selOption);
+      } else if (this.type === '0') {
+        const stuList = await this.stuQuery({ classid: this.classid });
+        const selOption = [];
+        for (const stu of stuList.data) {
+          const sel = {};
+          sel.text = stu.name;
+          sel.value = stu.id;
+          selOption.push(sel);
+        }
+        this.$set(this, `selOption`, selOption);
+      }
+    },
+    async selChange() {
+      if (this.type === '0') {
+        this.display = 'stu';
+        const attendance = await this.modelFetch({ model: 'attendance', studentid: this.selvalue });
+        if (attendance.data) {
+          this.$set(this, `attendList`, attendance.data.attend);
+        }
+      }
+      if (this.type === '1') {
+        const stuList = await this.stuQuery({ classid: this.classid });
+        this.$set(this, `stuList`, stuList.data);
+        this.display = 'time';
+      }
+    },
+    async stuChange(id) {
+      const attendance = await this.modelFetch({ model: 'attendance', studentid: this.stuid });
+      if (attendance.data) {
+        const stuattend = _.filter(attendance.data.attend, item => item.date === this.selvalue);
+        this.$set(this, `stuAttendList`, stuattend);
+      } else {
+        this.stuAttendList = [];
+      }
+    },
+    // 取得日期间所有日期
+    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;
+      }
     },
   },
   mounted() {
@@ -63,4 +197,20 @@ export default {
   height: 46px;
   overflow: hidden;
 }
+.attendList {
+  border-bottom: 1px solid #f5f5f5;
+}
+.attendList span {
+  margin-right: 10px;
+}
+.attendList span:nth-child(3) {
+  float: right;
+  margin-left: 10px;
+  width: 60px;
+}
+.attendList span:last-child {
+  float: right;
+  margin-left: 10px;
+  width: 80px;
+}
 </style>