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">
          <span v-if="this.user.type === '1'">
            <headClassList :headClassList="headClassList" @clickStu="clickStu"></headClassList>
          </span>
          <span v-else>
            <classList
              :stuNameList="stuNameList"
              :groupList="groupList"
              @createGroup="createGroup"
              :createGroupDialog="createGroupDialog"
              :groupForm="groupForm"
              @saveGroup="saveGroup"
              @deleteGroup="deleteGroup"
              @exitGroup="exitGroup"
              @joinGroup="joinGroup"
              :stuIdAndGroupId="stuIdAndGroupId"
              :noGroupStudentNames="noGroupStudentNames"
            ></classList>
            <!-- :groupList="groupList"
              @saveGroup="saveGroup"
              @exitGroup="exitGroup"
              @deleteGroup="deleteGroup"
              @joinGroup="joinGroup"
              :stuIdAndGroupId="stuIdAndGroupId"
              :noGroupStudentNames="noGroupStudentNames" -->
          </span>
        </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 headClassList from '@/layout/class/headClassList.vue';
import classList from '@/layout/class/classList.vue';
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: mapGroup } = createNamespacedHelpers('group');
const { mapActions: mapStudent } = createNamespacedHelpers('student');
const { mapActions: mapclasses } = createNamespacedHelpers('classes');
export default {
  name: 'index',
  props: {},
  components: {
    NavBar, //头部导航
    headClassList, //班主任中管理的学生列表
    classList, //班级名单
    footInfo, //底部导航
  },
  data: () => ({
    // 班主任看班级名单
    headClassList: [],
    // 学生看学生名单
    stuNameList: [],
    // 班级分组
    groupList: [],
    createGroupDialog: false,
    groupForm: {},
    stuIdAndGroupId: {},
    noGroupStudentNames: [],
    title: '',
    isleftarrow: '',
    navShow: true,
  }),
  created() {
    this.searchInfo();
    this.searchstu();
    this.findGroup();
  },
  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;
    },
  },
  methods: {
    ...mapclasses({ classList: 'query', classFetch: 'fetch' }),
    ...mapStudent({ stuQery: 'query', add: 'create', fet: 'fetch', updates: 'update' }),
    ...mapGroup(['query', 'create', 'delete', 'insert', 'exit']),
    // 班主任查询管理班级列表
    async searchInfo() {
      const res = await this.classList(this.user.userid);
      if (this.$checkRes(res)) {
        this.$set(this, `headClassList`, res.data);
      }
    },
    // 班主任跳转到班级信息
    clickStu(id) {
      this.$router.push({ path: '/class/classStuList', query: { id: id } });
    },
    //学生
    async searchstu() {
      let classid = this.user.classid;
      const res = await this.stuQery({ classid });
      this.$set(this, `stuNameList`, res.data);
    },
    // 查询组
    async findGroup() {
      let stuid = this.user.userid;
      const result = await this.query();
      const groupList = result.data;
      this.$set(this, 'groupList', groupList);
      // 找出登陆者在哪个组
      // 找出组id
      let groupId = '';
      // 所有有组学生id
      let studentIds = [];
      var i = groupList.findIndex(value => {
        var v = value.students.findIndex(value => {
          studentIds.push(value.stuid);
          return stuid === value.stuid;
        });
        return v != -1;
      });
      if (i != -1) {
        groupId = groupList[i].id;
      }
      // 學生id+組id
      let stuIdAndGroupId = {};
      // 登陆者id
      stuIdAndGroupId.stuid = stuid;
      // 登陆者属于哪个组id
      stuIdAndGroupId.groupId = groupId;
      // 登陆者身份是否为班长
      // let job = this.user.job;
      // console.log(stuIdAndGroupId.job);
      //   stuIdAndGroupId.job = job;
      this.$set(this, 'stuIdAndGroupId', stuIdAndGroupId);
      let studentList = this.stuNameList;
      // 没有组的学生名字
      let noGroupStudentNames = [];
      // 循环所有学生id
      for (let i = 0; i < studentList.length; i++) {
        // 循环有组学生id
        for (let j = 0; j < studentIds.length; j++) {
          if (studentList[i].id != studentIds[j]) {
            noGroupStudentNames.push(studentList[i].name);
          }
        }
      }
      // 未分组学生id(studentIds(有组学生id))(studentList所有学生)(noGroupStudentNames没有组的学生名字)
      this.$set(this, 'noGroupStudentNames', noGroupStudentNames);
    },
    // 创建分组-打開dialog
    createGroup() {
      this.createGroupDialog = true;
    },
    // 提交创建分组-班长职责
    async saveGroup({ data }) {
      const result = await this.create(data);
      if (result.errcode == 0) {
        this.createGroupDialog = false;
        this.findGroup();
      }
    },
    // 删除分组-班长职责
    async deleteGroup({ groupId }) {
      const result = await this.delete(groupId);
      if (result.errcode == 0) {
        this.findGroup();
      }
    },
    // 退出小组
    async exitGroup({ groupId }) {
      let data = {};
      data.groupid = groupId;
      data.stuid = this.user.userid;
      const result = await this.exit(data);
      if (result.errcode == 0) {
        this.findGroup();
      }
    },
    // 加入小组
    async joinGroup({ groupId }) {
      let data = {};
      data.groupid = groupId;
      data.stuid = this.user.userid;
      data.stuname = this.user.name;
      const result = await this.insert(data);
      if (result.errcode == 0) {
        this.findGroup();
      }
    },
  },
};
</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;
}
.foot {
  height: 50px;
  overflow: hidden;
}
</style>