更新

src/layout/class/classGroup.vue

@@ -3,7 +3,6 @@
     <el-row>
       <el-col :span="24" class="button_class">
         <van-button type="info" icon="star-o" round v-if="this.user.job === '班长'" @click="createGroup()">创建小组</van-button>
-
         <van-button type="info" icon="star-o" round v-if="this.user.job === '班长'" @click="affirm()">确认小组</van-button>
       </el-col>
       <el-col :span="24">

src/layout/class/groupList.vue

@@ -32,7 +32,6 @@
                 </el-col>
                 <el-col :span="1"></el-col>
                 <el-col :span="6" v-if="user.job === '班长'">
-                  <!-- <el-button round type="danger" style="width:55px" plain size="mini" @click.native="save(item)">确认</el-button> -->
                 </el-col>
               </el-col>
             </template>
@@ -44,7 +43,6 @@
             <van-dialog v-model="show" title="选择组长" :showConfirmButton="false">
               <van-form @submit="onSubmit">
                 <van-field readonly clickable name="picker" :value="value" label="选择组长" placeholder="点击选择组长" @click="showPicker = true" />
-
                 <div style="margin:16px,16px,0,16px;text-align:center">
                   <van-button type="info">提交</van-button>
                 </div>

src/layout/newClass/classGroup.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="classGroup">
+    <el-row>
+      <el-col :span="24" class="classGroup">
+        <el-col :span="24" class="one">
+          <el-button type="primary" size="mini">创建分组</el-button>
+          <el-button type="primary" size="mini">确定小组</el-button>
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="24" class="list" v-for="(item, index) in groupList" :key="index">
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <el-col :span="2">{{ index + 1 }}.</el-col>
+                  <el-col :span="6"> {{ item.name }} {{ item.students.length }}人</el-col>
+                </template>
+                <el-col :span="8" v-for="(groupStu, groupStuIndex) in item.students" :key="groupStuIndex">
+                  <el-col :span="24">
+                    <span> {{ groupStu.stuname }}({{ groupStu.type == '1' ? ' 组长' : '组员' }})</span>
+                  </el-col>
+                </el-col>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="three">
+          未分组
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'classGroup',
+  props: {
+    groupList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      // groupList: [
+      //   {
+      //     name: '1组',
+      //     students: [
+      //       {
+      //         stuname: '顾红伟',
+      //         type: '1',
+      //       },
+      //     ],
+      //   },
+      // ],
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.classGroup {
+  .one {
+    text-align: center;
+    padding: 15px 0;
+  }
+}
+</style>

src/views/class/index copy.vue

@@ -0,0 +1,302 @@
+<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>
+            <classList
+              :stuNameList="stuNameList"
+              @newsubmit="newsubmit"
+              :groupList="groupList"
+              @createGroup="createGroup"
+              :createGroupDialog="createGroupDialog"
+              :groupForm="groupForm"
+              @saveGroup="saveGroup"
+              @deleteGroup="deleteGroup"
+              @exitGroup="exitGroup"
+              @joinGroup="joinGroup"
+              :stuIdAndGroupId="stuIdAndGroupId"
+              :noGroupStudentNames="noGroupStudentNames"
+              :classid="this.user.classid"
+              @onSubmit="onSubmit"
+              @openClick="openClick"
+              @opanSubmit="opanSubmit"
+              :form="form"
+              :show="show"
+              :columns="columns"
+              @onvalue="onvalue"
+              @affirm="affirm"
+            ></classList>
+          </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 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');
+const { mapActions: mapSethead } = createNamespacedHelpers('sethead');
+
+export default {
+  metaInfo: { title: '班级名单' },
+  name: 'index',
+  props: {},
+  components: {
+    NavBar, //头部导航
+
+    classList, //班级名单
+    footInfo, //底部导航
+  },
+  data: () => ({
+    form: {},
+    columns: [],
+
+    show: false,
+    // 班主任看班级名单
+
+    // 学生看学生名单
+    stuNameList: [],
+    // 班级分组
+
+    groupList: [],
+    createGroupDialog: false,
+    groupForm: {},
+    stuIdAndGroupId: {},
+    noGroupStudentNames: [],
+    title: '',
+    isleftarrow: '',
+    navShow: true,
+    //组中学生信息
+    gstuList: [],
+  }),
+  async created() {
+    await this.searchstu();
+    await 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', 'update']),
+    ...mapSethead({ Setheadupdates: 'update' }),
+
+    //学生
+    async searchstu() {
+      let classid = this.user.classid;
+      const res = await this.stuQery({ classid });
+
+      this.$set(this, `stuNameList`, res.data);
+    },
+    //班长分配班委会成员
+    async newsubmit({ data }) {
+      let res = await this.updates(data);
+
+      this.$checkRes(res, '分配成功', '分配失败');
+    },
+    // 查询组
+    async findGroup() {
+      let stuid = this.user.userid;
+      let classid = this.user.classid;
+      const result = await this.query({ classid });
+
+      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;
+
+      this.$set(this, 'stuIdAndGroupId', stuIdAndGroupId);
+      console.log(stuIdAndGroupId.stuid);
+
+      let studentList = this.stuNameList;
+      // // 没有组的学生名字
+      // let noGroupStudentNames = [];
+      // // 循环所有学生id
+      // for (let i = 0; i < studentList.length; i++) {
+      //   if (studentIds.length === 0) {
+      //     noGroupStudentNames.push(studentList[i].name);
+      //   } else {
+      //     // 循环有组学生id
+      //     for (let j = 0; j < studentIds.length; j++) {
+      //       if (studentList[i].id != studentIds[j]) {
+      //         noGroupStudentNames.push(studentList[i].name);
+      //       }
+      //     }
+      //   }
+      // }
+
+      // 所有有组学生id
+      var is = groupList.map(value => {
+        var v = value.students.map(value => {
+          studentIds.push(value.stuid);
+        });
+        return studentIds;
+      });
+      let havegroupstuid = is[0];
+      var data = studentList.map(item => item.id);
+      let stuidlist = _.xorWith(data, havegroupstuid, _.isEqual);
+      let arr = [];
+      let stus = [];
+      for (const stuid of stuidlist) {
+        arr = studentList.filter(item => item.id === stuid);
+        stus = [...arr, ...stus];
+      }
+      this.$set(this, 'noGroupStudentNames', stus);
+    },
+    // 创建分组-打開dialog
+    createGroup() {
+      this.createGroupDialog = true;
+    },
+    // 提交创建分组-班长职责
+    async saveGroup({ data }) {
+      data.termid = this.user.termid;
+      data.batchid = this.user.batchid;
+      data.classid = this.user.classid;
+
+      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();
+      }
+    },
+    async openClick() {},
+    async onSubmit({ data }) {
+      console.log(this.gstuList);
+      var stu = this.gstuList.filter(item => item.type == '1');
+      console.log(stu);
+      for (const val of stu) {
+        val.type = 0;
+        val.groupid = data.groupid;
+        let res = await this.Setheadupdates(val);
+      }
+
+      data.type = 1;
+      let res = await this.Setheadupdates(data);
+      this.findGroup();
+      this.show = false;
+    },
+    opanSubmit(item) {
+      console.log(item.students);
+      this.$set(this, 'gstuList', item.students);
+
+      this.form.groupid = item.id;
+      var stu = item.students.filter(item => item.job == '普通学生');
+      this.$set(this, 'columns', stu);
+      if (this.user.job === '班长') {
+        if (item.status != '1') {
+          this.show = true;
+        }
+      }
+    },
+    onvalue(value) {
+      this.form.stuid = value.value.stuid;
+    },
+    async queren(item) {
+      item.status = '1';
+      const res = await this.update(item);
+    },
+
+    //确认所有
+    async affirm() {
+      for (const val of this.groupList) {
+        val.status = '1';
+        const res = await this.update(val);
+      }
+    },
+  },
+};
+</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: 90px;
+  overflow: hidden;
+}
+</style>

src/views/class/index.vue

@@ -6,31 +6,19 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <span>
-            <classList
-              :stuNameList="stuNameList"
-              @newsubmit="newsubmit"
-              :groupList="groupList"
-              @createGroup="createGroup"
-              :createGroupDialog="createGroupDialog"
-              :groupForm="groupForm"
-              @saveGroup="saveGroup"
-              @deleteGroup="deleteGroup"
-              @exitGroup="exitGroup"
-              @joinGroup="joinGroup"
-              :stuIdAndGroupId="stuIdAndGroupId"
-              :noGroupStudentNames="noGroupStudentNames"
-              :classid="this.user.classid"
-              @onSubmit="onSubmit"
-              @openClick="openClick"
-              @opanSubmit="opanSubmit"
-              :form="form"
-              :show="show"
-              :columns="columns"
-              @onvalue="onvalue"
-              @affirm="affirm"
-            ></classList>
-          </span>
+          <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">
+                班级名单
+              </el-col>
+            </el-tab-pane>
+            <el-tab-pane label="班级分组" name="second">
+              <classGroup :groupList="groupList"></classGroup>
+            </el-tab-pane>
+          </el-tabs>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -43,49 +31,48 @@
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.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');
-const { mapActions: mapSethead } = createNamespacedHelpers('sethead');
-
+// 班级分组
+import classGroup from '@/layout/newClass/classGroup.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: group } = createNamespacedHelpers('group');
 export default {
   metaInfo: { title: '班级名单' },
   name: 'index',
   props: {},
   components: {
     NavBar, //头部导航
-
-    classList, //班级名单
     footInfo, //底部导航
-  },
-  data: () => ({
-    form: {},
-    columns: [],
-
-    show: false,
-    // 班主任看班级名单
-
-    // 学生看学生名单
-    stuNameList: [],
     // 班级分组
-
-    groupList: [],
-    createGroupDialog: false,
-    groupForm: {},
-    stuIdAndGroupId: {},
-    noGroupStudentNames: [],
-    title: '',
-    isleftarrow: '',
-    navShow: true,
-    //组中学生信息
-    gstuList: [],
-  }),
+    classGroup,
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      navShow: true,
+      // 班级信息
+      // 头部标签
+      activeName: 'second',
+      // 小组列表
+      groupList: [],
+    };
+  },
   async created() {
-    await this.searchstu();
+    // 查看班级小组
     await this.findGroup();
   },
+  methods: {
+    ...group({ groupQuery: 'query' }),
+    // 查询小组
+    async findGroup() {
+      let classid = this.user.classid;
+      const res = await this.groupQuery({ classid });
+      if (res.errcode === 0) {
+        console.log(res.data);
+        this.$set(this, 'groupList', res.data);
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -99,185 +86,6 @@ export default {
       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', 'update']),
-    ...mapSethead({ Setheadupdates: 'update' }),
-
-    //学生
-    async searchstu() {
-      let classid = this.user.classid;
-      const res = await this.stuQery({ classid });
-
-      this.$set(this, `stuNameList`, res.data);
-    },
-    //班长分配班委会成员
-    async newsubmit({ data }) {
-      let res = await this.updates(data);
-
-      this.$checkRes(res, '分配成功', '分配失败');
-    },
-    // 查询组
-    async findGroup() {
-      let stuid = this.user.userid;
-      let classid = this.user.classid;
-      const result = await this.query({ classid });
-
-      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;
-
-      this.$set(this, 'stuIdAndGroupId', stuIdAndGroupId);
-      console.log(stuIdAndGroupId.stuid);
-
-      let studentList = this.stuNameList;
-      // // 没有组的学生名字
-      // let noGroupStudentNames = [];
-      // // 循环所有学生id
-      // for (let i = 0; i < studentList.length; i++) {
-      //   if (studentIds.length === 0) {
-      //     noGroupStudentNames.push(studentList[i].name);
-      //   } else {
-      //     // 循环有组学生id
-      //     for (let j = 0; j < studentIds.length; j++) {
-      //       if (studentList[i].id != studentIds[j]) {
-      //         noGroupStudentNames.push(studentList[i].name);
-      //       }
-      //     }
-      //   }
-      // }
-
-      // 所有有组学生id
-      var is = groupList.map(value => {
-        var v = value.students.map(value => {
-          studentIds.push(value.stuid);
-        });
-        return studentIds;
-      });
-      let havegroupstuid = is[0];
-      var data = studentList.map(item => item.id);
-      let stuidlist = _.xorWith(data, havegroupstuid, _.isEqual);
-      let arr = [];
-      let stus = [];
-      for (const stuid of stuidlist) {
-        arr = studentList.filter(item => item.id === stuid);
-        stus = [...arr, ...stus];
-      }
-      this.$set(this, 'noGroupStudentNames', stus);
-    },
-    // 创建分组-打開dialog
-    createGroup() {
-      this.createGroupDialog = true;
-    },
-    // 提交创建分组-班长职责
-    async saveGroup({ data }) {
-      data.termid = this.user.termid;
-      data.batchid = this.user.batchid;
-      data.classid = this.user.classid;
-
-      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();
-      }
-    },
-    async openClick() {},
-    async onSubmit({ data }) {
-      console.log(this.gstuList);
-      var stu = this.gstuList.filter(item => item.type == '1');
-      console.log(stu);
-      for (const val of stu) {
-        val.type = 0;
-        val.groupid = data.groupid;
-        let res = await this.Setheadupdates(val);
-      }
-
-      data.type = 1;
-      let res = await this.Setheadupdates(data);
-      this.findGroup();
-      this.show = false;
-    },
-    opanSubmit(item) {
-      console.log(item.students);
-      this.$set(this, 'gstuList', item.students);
-
-      this.form.groupid = item.id;
-      var stu = item.students.filter(item => item.job == '普通学生');
-      this.$set(this, 'columns', stu);
-      if (this.user.job === '班长') {
-        if (item.status != '1') {
-          this.show = true;
-        }
-      }
-    },
-    onvalue(value) {
-      this.form.stuid = value.value.stuid;
-    },
-    async queren(item) {
-      item.status = '1';
-      const res = await this.update(item);
-    },
-
-    //确认所有
-    async affirm() {
-      for (const val of this.groupList) {
-        val.status = '1';
-        const res = await this.update(val);
-      }
-    },
-  },
 };
 </script>
 
@@ -295,6 +103,17 @@ export default {
 .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;