编写

src/components/class/dialog.vue

@@ -9,8 +9,8 @@
           <el-option
             v-for="(data,index) in teacherList"
             :key="index"
-            :label="data.teacher_name"
-            :value="data.teacher_id">
+            :label="data.name"
+            :value="data.id">
           </el-option>
         </el-select>
       </el-form-item>
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-  import {getPeriodsTeacherApi,getClassDetailApi,editClassApi,addClassApi} from "../../service/api";
+  import {getTeacherListApi,getClassDetailApi,editClassApi,addClassApi} from "../../service/api";
   export default {
     props:[
       'dialogObj'
@@ -42,8 +42,8 @@
     },
     methods:{
       initPage(){
-        getPeriodsTeacherApi(this.dialogObj.periodsId).then(res=>{
-          this.teacherList = res
+        getTeacherListApi().then(res=>{
+          this.teacherList = res.list
         });
         switch (this.dialogObj.type) {
           case 0:

src/components/class/index.vue

@@ -22,12 +22,12 @@
           </el-select>
         </el-form-item>
         <el-form-item label="">
-          <el-button size="" @click="getClassList">
+          <el-button type="primary" @click="getClassList">
             搜索
           </el-button>
         </el-form-item>
         <el-form-item style="float: right">
-          <el-button @click="onAdd">+添加班级</el-button>
+          <el-button @click="onAdd" type="success">+添加班级</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -40,6 +40,11 @@
         <el-form-item label="已看课包数">{{title.has_watch_num }}</el-form-item>
       </el-form>
     </div>
+    <div v-if="!classList || classList.length === 0">
+      <el-form label-width="300px" inline>
+        <el-form-item label="暂无期数信息，请先选择期数"></el-form-item>
+      </el-form>
+    </div>
     <div>
       <el-table
         :data="classList"
@@ -61,24 +66,24 @@
           label="现有人数">
         </el-table-column>
         <el-table-column
-          width="200"
+          width="250"
           label="操作">
           <template slot-scope="scope">
-            <el-button @click="editClass(scope.row)">编辑</el-button>
-            <el-button @click="delClass(scope.row)">删除</el-button>
+            <el-button @click="showUser(scope.row)" size="mini" type="primary">班级成员</el-button>
+            <el-button @click="editClass(scope.row)" size="mini" type="warning">编辑</el-button>
+            <el-button @click="delClass(scope.row)" size="mini" type="danger">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-
     <class-dialog :dialogObj="dialogObj" @reflash="getClassList"></class-dialog>
-
-    <!--<page :total="total" v-model="nowPage"/>-->
+    <user-list :userObj="userObj" @reflash="getClassList"/>
   </div>
 </template>
 <script>
   import {getGoodsListApi,getPeriodsApi,getClassListApi,getPeriodsTeacherApi,delClassApi} from "../../service/api";
   import classDialog from './dialog'
+  import UserList from './userList'
   export default {
     data(){
       return {
@@ -88,6 +93,11 @@
         classList:[],
         title:'',
         teacherList:[],
+        userObj:{
+          classId:'',
+          title:'',
+          show:false,
+        },
         dialogObj:{
           show:false,
           title:'添加班级',
@@ -98,6 +108,7 @@
       }
     },
     components:{
+      UserList,
       classDialog
     },
     mounted(){
@@ -122,16 +133,27 @@
           }
         });
       },
+      showUser(data){
+        this.userObj={
+          classId:data.id,
+          show:true,
+          title:`${data.teacher_name}班级用户列表`
+        }
+      },
+      getTeacher(){
+        getPeriodsTeacherApi(this.periods.id).then(res=>{
+          this.teacherList = res
+        })
+      },
       changePeriods(data){
         if(data.length>1){
           let nowGoods = this.goodsList.find(i=>{return i.id === data[0]});
           this.periods = nowGoods.children.find(i=>{return i.id === data[1]});
-          getPeriodsTeacherApi(this.periods.id).then(res=>{
-            this.teacherList = res
-          })
+          this.getTeacher()
         }
       },
       getClassList(){
+        this.getTeacher();
         getClassListApi(this.periods.id,{teacher_id:this.teacher_id}).then(res=>{
           this.title = res.periods;
           this.classList = res.list;

src/components/class/userList.vue

+<template>
+  <el-dialog :title="userObj.title" :visible.sync="userObj.show">
+
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: "userList",
+    props:[
+      'userObj'
+    ],
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

src/components/noLesson/noLesson.vue

+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: "noLesson"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -27,6 +27,7 @@ import sysConfig from '@/components/system/sysConfig'
 import autoReply from '@/components/weChat/autoReply'
 import weChatResource from '@/components/weChat/weChatResource'
 import banner from '@/components/system/banner'
+import noLesson from '@/components/noLesson'
 
 Vue.use(Router);
 
@@ -54,6 +55,10 @@ const router =new Router({
           path: '/help',
           name:'help',
           component: help
+        },{
+          path: '/noLesson',
+          name:'noLesson',
+          component: noLesson
         },{
           path: '/banner',
           name:'banner',

src/service/api.js

@@ -392,6 +392,13 @@ const getClassDetailUrl = `${_baseUrl}api/admin/periods/class/info/`;
 export const getClassDetailApi = function (id, json) {
   return Vue.prototype.$fetch(`${getClassDetailUrl}${id}`,json)
 };
+// 获取班级用户列表
+const getClassUserUrl = `${_baseUrl}api/admin/class/user/list/`;
+export const getClassUserApi = function (id) {
+  return Vue.prototype.$fetch(`${getClassUserUrl}${id}`)
+};
+// 添加班级用户
+const addClassUserUrl = `${_baseUrl}`