班级名单

src/views/class/classStuList.vue

@@ -8,6 +8,8 @@
         <el-col :span="24" class="main">
           <headStuList
             :headStuList="headStuList"
+            :groupStuList="groupStuList"
+            :noGroupStuList="noGroupStuList"
             :assignShow="assignShow"
             :assignForm="assignForm"
             :job_list="job_list"
@@ -39,6 +41,8 @@ export default {
   },
   data: () => ({
     headStuList: [],
+    noGroupStuList: [],
+    groupStuList: [],
     assignShow: false,
     assignForm: {},
     job_list: [],
@@ -115,14 +119,11 @@ export default {
       const groups = await this.groupQuery({ classid });
       //班级所有进组的学生id
       let groupstuids = _.map(_.flattenDeep(_.map(groups.data, 'students')), 'stuid');
-      const a = _.differenceBy(res.data, groupstuids, function(x, y) {
-        console.log(x.id != y);
-        return x.id != y;
-      });
-      console.log(a);
-
+      let noGroupStuList = res.data.filter(f => !groupstuids.includes(f.id));
       if (this.$checkRes(res)) {
+        this.$set(this, `groupStuList`, groups.data);
         this.$set(this, `headStuList`, res.data);
+        this.$set(this, `noGroupStuList`, noGroupStuList);
       }
     },
     //点击派遣
@@ -161,7 +162,6 @@ export default {
       }
       this.assignShow = true;
       const res = await this.fet(id);
-      console.log(res.data);
       this.$set(this, `assignForm`, res.data);
     },
     //指派职务

src/views/class/info/headStuList.vue

@@ -9,9 +9,21 @@
     </el-row> -->
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="6" class="list" v-for="(item, index) in headStuList" :key="index" @click.native="clickAssign(item)">
-          <p class="name" :style="`font-size:${changeNum(item.name)}px`">{{ item.name }}</p>
-          <p class="job" v-if="item.job">{{ item.job }}<i class="el-icon-circle-check"></i></p>
+        <el-col v-for="item in groupStuList" :key="item.id">
+          <el-col v-if="item.students.length > 0">
+            <van-divider content-position="left">{{ item.name }}</van-divider>
+            <el-col :span="6" class="list" v-for="i in item.students" :key="i.stuid" @click.native="clickAssign({ id: i.stuid })">
+              <p class="name" :style="`font-size:${changeNum(i.stuname)}px`">{{ i.stuname }}</p>
+              <p class="job" v-if="i.job">{{ i.job }}<i class="el-icon-circle-check"></i></p>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col>
+          <van-divider content-position="left">未分组学生</van-divider>
+          <el-col :span="6" class="list" v-for="(item, index) in noGroupStuList" :key="index" @click.native="clickAssign(item)">
+            <p class="name" :style="`font-size:${changeNum(item.name)}px`">{{ item.name }}</p>
+            <p class="job" v-if="item.job">{{ item.job }}<i class="el-icon-circle-check"></i></p>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -51,6 +63,8 @@ export default {
   name: 'headStuList',
   props: {
     headStuList: null,
+    groupStuList: null,
+    noGroupStuList: null,
     assignForm: null,
     assignShow: null,
     job_list: null,
@@ -100,6 +114,7 @@ p {
   margin: 0 11px 10px 12px;
   padding: 5px 0px;
   border-radius: 10px;
+  height: 50px;
 }
 .list .job {
   font-size: 10px;