train-center/src/views/train-plan/attendance.vue

<template>
  <div id="index">
    <list-frame title="考勤管理" @query="onsearch" :total="total" :needFilter="false" :needAdd="false">
      <el-form :inline="true" size="mini">
        <el-form-item label="期">
          <el-select v-model="form.termid" placeholder="请选择期数" @change="getClasses">
            <el-option v-for="(i, index) in termList" :key="index" :label="`第${i.term}期`" :value="i._id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="批次">
          <el-select v-model="form.batchid" placeholder="请先选择期数" @change="getClasses">
            <el-option v-for="(i, index) in batchList" :key="index" :label="i.name" :value="i._id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="班级">
          <el-select v-model="form.classid" placeholder="请先选择班级">
            <el-option v-for="(i, index) in classList" :key="index" :label="i.name" :value="i._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="mini" @click="onsearch()"> 查询</el-button>
        </el-form-item>
      </el-form>
      <data-table :fields="fields" :data="list"> </data-table>
    </list-frame>
  </div>
</template>
<script>
import _ from 'lodash';
import listFrame from '@frame/layout/admin/list-frame';
import dataTable from '@frame/components/data-table';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: attendance } = createNamespacedHelpers('attendance');
const { mapActions: student } = createNamespacedHelpers('student');
const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
const { mapActions: classes } = createNamespacedHelpers('classes');

export default {
  metaInfo: { title: '考勤管理' },
  name: 'attendance',
  props: {},
  components: {
    listFrame,
    dataTable,
  },
  data: () => ({
    classList: [],
    batchList: [],
    termList: [],
    fields: [
      { label: '学生姓名', prop: 'stuname' },
      { label: '日期', prop: 'date' },
      { label: '时间', prop: 'time' },

      {
        label: '类型',
        prop: 'type',
        format: item => {
          return item === '0' ? '上课考勤' : item === '1' ? '上课考勤' : '';
        },
      },
      {
        label: '状态',
        prop: 'status',
        format: item => {
          return item === '0' ? '未签到' : item === '1' ? '签到' : '迟到';
        },
      },
    ],
    form: {},
    list: [],
    total: 0,
  }),
  created() {
    this.searchinfo();
  },
  computed: { ...mapState(['user', 'defaultOption']) },
  methods: {
    ...attendance(['query', 'delete']),
    ...student({ stuquery: 'query' }),
    ...trainplan({ planfetch: 'fetch' }),
    ...classes({ classesquery: 'query' }),
    async searchinfo() {
      const res = await this.planfetch(this.defaultOption.planid);
      let terms = res.data.termnum;
      this.$set(this, `termList`, terms);
      if (this.defaultOption.termid) {
        this.form.termid = this.defaultOption.termid;
        this.getClasses(this.form.termid);
      }
    },
    getBatch(termid) {
      let batchs = this.termList.filter(f => f._id === termid);
      if (batchs.length > 0) {
        let { batchnum } = batchs[0];
        this.$set(this, `batchList`, batchnum);
      }
    },
    async getClasses(termid) {
      const res = await this.classesquery({ termid });
      var arr = res.data.filter(item => item.type == '0');
      this.$set(this, `classList`, arr);
    },
    async onsearch({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ termid: this.form.termid, classid: this.form.classid, ...info });
      const newdatas = [];
      for (const data of res.data) {
        for (const attend of data.attend) {
          let newdata = { stuname: data.stuname, ...attend };
          newdatas.push(newdata);
        }
      }
      if (this.$checkRes(res)) {
        this.$set(this, `total`, newdatas.length);
        let _newdatas = newdatas.splice(skip, skip + limit);
        this.$set(this, `list`, _newdatas);
      }
    },
  },
  watch: {
    defaultOption: {
      handler(val) {
        this.form.termid = this.defaultOption.termid;
        this.getBatch(this.form.termid);
      },
      deep: true,
    },
  },
};
</script>

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