train-student/src/views/user/checkWork.vue

<template>
  <div id="checkWork">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <!-- <topInfo></topInfo> -->
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <el-col :span="24" class="leaveBtn">
            <!-- <van-button round type="info" icon="smile" @click="onClickRight()">考勤打卡</van-button> -->
            <punchBtn :show="show" :stuInfo="stuInfo" @openClick="openClick" @onSubmit="onSubmit"></punchBtn>
          </el-col>
          <el-col :span="24" class="leaveList">
            <checkList :checkWorkList="checkWorkList"></checkList>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import checkList from '@/layout/user/checkList.vue';
import punchBtn from '@/layout/user/punchBtn.vue';
import { createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: mapAttendance } = createNamespacedHelpers('attendance');
export default {
  name: 'checkWork',
  props: {},
  components: {
    NavBar, //头部导航
    checkList, //考勤列表
    punchBtn, //考勤打卡
  },
  data: () => ({
    checkWorkList: [
      {
        studentid: '流域',
        attend: [
          {
            date: '2020-02-25',
            time: '80:30',
            status: '0',
          },
          {
            date: '2020-02-25',
            time: '80:30',
            status: '1',
          },
          {
            date: '2020-02-25',
            time: '80:30',
            status: '2',
          },
        ],
      },
    ],
    show: false,
    stuInfo: {},
    title: '',
    isleftarrow: '',
    transitionName: 'fade',
    navShow: true,
  }),
  created() {
    this.searchInfo();
  },
  computed: {},
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
  methods: {
    ...mapAttendance(['fetch']),
    searchInfo() {
      let site = JSON.parse(sessionStorage.getItem('site'));
      this.$set(this, `stuInfo`, site);
    },
    openClick() {
      this.show = true;
    },
    onSubmit(form) {
      console.log(form);
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
.main .leaveBtn {
  text-align: center;
  padding: 15px 0;
}
</style>