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

<template>
  <div id="stuLeave">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <stuleaveList :stuleaveList="stuleaveList" @clickShow="clickShow" @clickDown="clickDown" :leaveInfo="leaveInfo" :show="show"></stuleaveList>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import stuleaveList from '@/layout/user/stuleaveList.vue';
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: mapClass } = createNamespacedHelpers('classes');
const { mapActions: mapStudent } = createNamespacedHelpers('student');
const { mapActions: mapLeave } = createNamespacedHelpers('leave');
export default {
  name: 'stuLeave',
  props: {},
  components: {
    NavBar, //头部导航
    stuleaveList, //学生請假列表
  },
  data: () => ({
    stuleaveList: [],
    leaveInfo: [
      {
        name: '你好',
      },
    ],
    show: false,
    title: '',
    isleftarrow: '',
    navShow: true,
  }),
  created() {
    this.searchInfo();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    ...mapState(['user']),
  },
  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: {
    ...mapClass({ classinfo: 'query', classFetch: 'fetch' }),
    ...mapStudent({ list: 'query', add: 'create', fet: 'fetch', updates: 'update' }),
    ...mapLeave({ leaveinfo: 'query', leaveFetch: 'fetch' }),
    // 查询学生列表
    async searchInfo({ ...info } = {}) {
      let classid = this.id;
      const stu = await this.list({ classid });
      console.log(stu);
      this.$set(this, `stuleaveList`, stu.data);
    },
    async clickShow(id) {
      this.show = true;
      const leaveList = await this.leaveinfo(id);
      var result = leaveList.data.filter(item => item.studentid === id);
      this.$set(this, `leaveInfo`, result);
    },
    clickDown() {
      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;
}
</style>