train-student/src/layout/class/classList.vue

<template>
  <div id="classList">
    <el-row>
      <el-col :span="24">
        <van-tabs v-model="active">
          <van-tab title="班级名单">
            <span v-if="role === '4'">
              <headNameList v-on="$listeners" :headNameList="headNameList" :assignShow="assignShow" :assignForm="assignForm"></headNameList>
            </span>
            <span v-else>
              <stuNameList :stuNameList="stuNameList"></stuNameList>
            </span>
          </van-tab>
          <van-tab title="班级分组">
            <classGroup :groupList="groupList" v-on="$listeners" :stuIdAndGroupId="stuIdAndGroupId"></classGroup>
          </van-tab>
        </van-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import headNameList from '@/layout/class/nameList/headNameList.vue';
import stuNameList from '@/layout/class/nameList/stuNameList.vue';
import classGroup from '@/layout/class/classGroup.vue';
export default {
  name: 'classList',
  props: {
    headNameList: null, //班主任看班級學生名單
    assignShow: null, //指派职务弹窗
    assignForm: null, //指派职务form表单
    stuNameList: null, //学生看班级学生名单
    groupList: null,
    stuIdAndGroupId: null, //登陆者id和小组id
  },
  components: {
    // 显示班级学生名称（带有职务）
    // 班主任：点击学生指派学生担任职务。
    // 学委：给学生上分（平时成绩只有一个，课程作业成绩，都要显示）
    headNameList, //班主任班级学生名单
    stuNameList, //学生班级学生名单
    classGroup, //班级分组
  },
  data: () => ({
    active: 0,
    role: '4',
    // groupList: [],
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
/deep/.van-tabs__line {
  width: 50% !important;
  background-color: #405ffe;
}
/deep/.van-tab--active {
  color: #405ffe;
}
</style>