train-student/src/views/class/index.vue

<template>
  <div id="index">
    <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">
          <el-tabs v-model="activeName">
            <el-tab-pane label="班级名单" name="first">
              <el-col :span="24">
                <el-button type="primary" size="mini">查看平时成绩</el-button>
              </el-col>
              <el-col :span="24">
                <name-list :data="studentList"></name-list>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="班级分组" name="second">
              <classGroup :groupList="groupList" :stuIdAndGroupId="stuIdAndGroupId"></classGroup>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24" class="foot">
          <footInfo></footInfo>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import footInfo from '@/layout/common/footInfo.vue';
// 班级分组
import classGroup from './newClass/classGroup.vue';
import nameList from './newClass/nameList.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: group } = createNamespacedHelpers('group');
const { mapActions: student } = createNamespacedHelpers('student');
export default {
  metaInfo: { title: '班级名单' },
  name: 'index',
  props: {},
  components: {
    NavBar, //头部导航
    footInfo, //底部导航
    // 班级分组
    classGroup,
    //班级名单
    nameList,
  },
  data: function() {
    return {
      title: '',
      isleftarrow: '',
      navShow: true,
      // 班级信息
      // 头部标签
      activeName: 'first',
      // 小组列表
      groupList: [],
      stuIdAndGroupId: {},
      //学生列表
      studentList: [],
    };
  },
  async created() {
    await this.toGetStudentList();
    // 查看班级小组
    await this.findGroup();
  },
  methods: {
    ...student({ getStudentList: 'query' }),
    ...group({ groupQuery: 'query' }),
    // 查学生
    async toGetStudentList() {
      const res = await this.getStudentList({ classid: this.user.classid });
      if (res) this.$set(this, `studentList`, res.data);
    },
    // 查询小组
    async findGroup() {
      let stuid = this.user.userid;
      let classid = this.user.classid;
      const res = await this.groupQuery({ classid });
      if (res.errcode === 0) {
        this.$set(this, 'groupList', res.data);
        // 登陆者所在组
        // 组id
        let groupId = '';
        // 所有有组学生id
        let studentIds = [];
        var i = this.groupList.findIndex(value => {
          var v = value.students.findIndex(value => {
            studentIds.push(value.stuid);
            return stuid === value.stuid;
          });
          return v != -1;
        });
        if (i != -1) {
          groupId = this.groupList[i].id;
        }
        // 登录者id+組id
        let stuIdAndGroupId = {
          // 登陆者id
          stuid: stuid,
          // 登陆者属于哪个组id
          groupId: groupId,
        };
        this.$set(this, 'stuIdAndGroupId', stuIdAndGroupId);
      }
    },
  },
  computed: {
    ...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;
    },
  },
};
</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;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs__nav {
  width: 100%;
}
/deep/.el-tabs__item {
  padding: 0;
  width: 50%;
  text-align: center;
}
.foot {
  height: 90px;
  overflow: hidden;
}
</style>