更新

src/layout/common/topInfo.vue

@@ -34,6 +34,7 @@ export default {
 // }
 /deep/.van-nav-bar {
   background: #2c69fe;
+  z-index: 999;
 }
 /deep/.van-nav-bar__title {
   color: #fff;

src/views/class/index.vue

@@ -16,7 +16,17 @@
               </el-col>
             </el-tab-pane>
             <el-tab-pane label="班级分组" name="second">
-              <classGroup :groupList="groupList" :stuIdAndGroupId="stuIdAndGroupId"></classGroup>
+              <classGroup
+                :groupList="groupList"
+                :stuIdAndGroupId="stuIdAndGroupId"
+                :noGroupStu="noGroupStu"
+                :groupForm="groupForm"
+                @saveGroup="saveGroup"
+                @joinGroup="joinGroup"
+                @exitGroup="exitGroup"
+                @affirm="affirm"
+                @deleteGroup="deleteGroup"
+              ></classGroup>
             </el-tab-pane>
           </el-tabs>
         </el-col>
@@ -56,10 +66,15 @@ export default {
       navShow: true,
       // 班级信息
       // 头部标签
-      activeName: 'first',
+      activeName: 'second',
       // 小组列表
       groupList: [],
+      // 登陆者所在组，id
       stuIdAndGroupId: {},
+      // 未分组成员
+      noGroupStu: [],
+      // 创建小组form
+      groupForm: {},
       //学生列表
       studentList: [],
     };
@@ -71,7 +86,7 @@ export default {
   },
   methods: {
     ...student({ getStudentList: 'query' }),
-    ...group({ groupQuery: 'query' }),
+    ...group({ groupQuery: 'query', groupDelete: 'delete', groupCreate: 'create', groupUpdate: 'update', groupInsert: 'insert', groupExit: 'exit' }),
     // 查学生
     async toGetStudentList() {
       const res = await this.getStudentList({ classid: this.user.classid });
@@ -107,6 +122,70 @@ export default {
           groupId: groupId,
         };
         this.$set(this, 'stuIdAndGroupId', stuIdAndGroupId);
+        // 未分组成员
+        var is = this.groupList.map(value => {
+          var v = value.students.map(value => {
+            studentIds.push(value.stuid);
+          });
+          return studentIds;
+        });
+        let havegroupstuid = is[0];
+        var data = this.studentList.map(item => item.id);
+        let stuidlist = _.xorWith(data, havegroupstuid, _.isEqual);
+        let arr = [];
+        let stus = [];
+        for (const stuid of stuidlist) {
+          arr = this.studentList.filter(item => item.id === stuid);
+          stus = [...arr, ...stus];
+        }
+        this.$set(this, 'noGroupStu', stus);
+      }
+    },
+    // 创建小组
+    async saveGroup({ data }) {
+      data.termid = this.user.termid;
+      data.batchid = this.user.batchid;
+      data.classid = this.user.classid;
+      const result = await this.groupCreate(data);
+      if (result.errcode == 0) {
+        this.findGroup();
+      }
+    },
+    // 确定小组
+    async affirm() {
+      for (const val of this.groupList) {
+        val.status = '1';
+        const res = await this.groupUpdate(val);
+      }
+    },
+    // 加入小组
+    async joinGroup({ groupId }) {
+      let data = {
+        groupid: groupId,
+        stuid: this.user.userid,
+        stuname: this.user.name,
+      };
+      const result = await this.groupInsert(data);
+      if (result.errcode == 0) {
+        this.findGroup();
+      }
+    },
+    // 退出小组
+    async exitGroup({ groupId }) {
+      let data = {
+        groupid: groupId,
+        stuid: this.user.userid,
+      };
+      const result = await this.groupExit(data);
+      if (result.errcode == 0) {
+        this.findGroup();
+      }
+    },
+    // 删除小组
+    async deleteGroup({ groupId }) {
+      const result = await this.groupDelete(groupId);
+      if (result.errcode == 0) {
+        this.findGroup();
       }
     },
   },

src/views/class/newClass/classGroup.vue

@@ -3,8 +3,8 @@
     <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-button type="primary" size="mini" v-if="this.user.job === '班长'" @click="createGroupDialog = true">创建分组</el-button>
+          <el-button type="primary" size="mini" v-if="this.user.job === '班长'" @click="affirm()">确定小组</el-button>
         </el-col>
         <el-col :span="24" class="two">
           <el-col :span="24" class="list" v-for="(item, index) in groupList" :key="index">
@@ -17,46 +17,110 @@
                     <el-col :span="2">
                       <el-button v-if="item.students.length >= 10" type="danger" size="mini" disabled>已满员</el-button>
                     </el-col>
-                    <el-col :span="6">
-                      <el-button type="danger" size="mini">删除</el-button>
+                    <el-col :span="6" v-if="user.job === '班长'">
+                      <el-button type="danger" size="mini" @click="deleteGroup(item.id)">删除</el-button>
                     </el-col>
                     <el-col :span="6">
-                      <el-button type="success" size="mini" v-if="stuIdAndGroupId.groupId === '' && item.students.length <= 10">加入</el-button>
-                      <el-button type="danger" size="mini" v-if="stuIdAndGroupId.groupId === item.id">退出</el-button>
+                      <el-button type="success" size="mini" v-if="stuIdAndGroupId.groupId === '' && item.students.length <= 10" @click="joinGroup(item.id)"
+                        >加入</el-button
+                      >
+                      <el-button type="danger" size="mini" v-if="stuIdAndGroupId.groupId === item.id" @click="exitGroup(item.id)">退出</el-button>
                     </el-col>
                   </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 :span="6" class="groupStuList" v-for="(groupStu, groupStuIndex) in item.students" :key="groupStuIndex">
+                  <p>{{ groupStu.stuname }}({{ groupStu.type == '1' ? ' 组长' : '组员' }})</p>
                 </el-col>
               </el-collapse-item>
             </el-collapse>
           </el-col>
         </el-col>
         <el-col :span="24" class="three">
-          未分组
+          <h3>未分组成员</h3>
+          <el-col :span="6" class="list" v-for="(item, index) in noGroupStu" :key="index">
+            <p>{{ item.name }}</p>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="创建小组" :visible.sync="createGroupDialog" width="90%">
+      <el-form :model="groupForm">
+        <el-form-item label="小组名称" label-width="100px">
+          <el-input v-model="groupForm.name" placeholder="请输入小组名称"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="saveGroup()" type="primary">提 交</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+import Vue from 'vue';
+import { Dialog } from 'vant';
+// 全局注册
+Vue.use(Dialog);
 export default {
   name: 'classGroup',
   props: {
     groupList: { type: Array },
     stuIdAndGroupId: { type: Object },
+    noGroupStu: { type: Array },
+    groupForm: { type: Object },
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      createGroupDialog: false,
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    // 创建小组提交
+    saveGroup() {
+      this.$emit('saveGroup', { data: this.groupForm });
+      this.createGroupDialog = false;
+    },
+    // 确定小组
+    affirm() {
+      this.$emit('affirm');
+    },
+    // 加入
+    joinGroup(groupId) {
+      Dialog.confirm({
+        title: '进组',
+        message: '确认要加入此组？',
+      })
+        .then(() => {
+          this.$emit('joinGroup', { groupId });
+        })
+        .catch(() => {});
+    },
+    // 退出
+    exitGroup(groupId) {
+      Dialog.confirm({
+        title: '退组',
+        message: '确认要退出此组？',
+      })
+        .then(() => {
+          this.$emit('exitGroup', { groupId });
+        })
+        .catch(() => {});
+    },
+    // 删除分组
+    deleteGroup(groupId) {
+      Dialog.confirm({
+        title: '删除',
+        message: '确认删除此组？',
+      })
+        .then(() => {
+          this.$emit('deleteGroup', { groupId });
+        })
+        .catch(() => {});
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -70,10 +134,38 @@ export default {
 </script>
 
 <style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
 .classGroup {
   .one {
     text-align: center;
     padding: 15px 0;
   }
+  .two {
+    .groupStuList {
+      text-align: center;
+      p {
+        padding: 0 5px;
+      }
+    }
+  }
+  .three {
+    h3 {
+      margin: 0;
+      padding: 10px 15px;
+      color: #2c69fe;
+    }
+    .list {
+      text-align: center;
+      p {
+        padding: 5px 0;
+      }
+    }
+  }
+}
+/deep/.el-dialog__footer {
+  text-align: center;
 }
 </style>