fast：完成查看当前班级的学生列表

school-in-out-admin/src/main/java/com/schoolinout/web/controller/system/StudentController.java

@@ -29,6 +29,11 @@ public class StudentController extends BaseController {
     @Autowired
     private IStudentService studentService;
 
+    @GetMapping("/list/all")
+    public AjaxResult getAll(Student student) {
+        return success(studentService.listAll(student));
+    }
+
     /**
      * 查询学生管理列表
      */

school-in-out-system/src/main/java/com/schoolinout/system/domain/vo/StudentListVo.java

@@ -0,0 +1,75 @@
+package com.schoolinout.system.domain.vo;
+
+/**
+ * @author sakura
+ * @date 2024/1/8 15:15:23 Mon
+ */
+public class StudentListVo {
+
+    private String className;
+    private String schoolName;
+    private String studentName;
+
+    /**
+     * 学生照片
+     */
+    private String studentPic;
+
+    /**
+     * 学生性别
+     */
+    private String studentGender;
+
+    /**
+     * 学号
+     */
+    private String studentNum;
+
+    public String getClassName() {
+        return className;
+    }
+
+    public void setClassName(String className) {
+        this.className = className;
+    }
+
+    public String getSchoolName() {
+        return schoolName;
+    }
+
+    public void setSchoolName(String schoolName) {
+        this.schoolName = schoolName;
+    }
+
+    public String getStudentName() {
+        return studentName;
+    }
+
+    public void setStudentName(String studentName) {
+        this.studentName = studentName;
+    }
+
+    public String getStudentPic() {
+        return studentPic;
+    }
+
+    public void setStudentPic(String studentPic) {
+        this.studentPic = studentPic;
+    }
+
+    public String getStudentGender() {
+        return studentGender;
+    }
+
+    public void setStudentGender(String studentGender) {
+        this.studentGender = studentGender;
+    }
+
+    public String getStudentNum() {
+        return studentNum;
+    }
+
+    public void setStudentNum(String studentNum) {
+        this.studentNum = studentNum;
+    }
+}

school-in-out-system/src/main/java/com/schoolinout/system/mapper/StudentMapper.java

@@ -2,6 +2,7 @@ package com.schoolinout.system.mapper;
 
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.schoolinout.system.domain.Student;
+import com.schoolinout.system.domain.vo.StudentListVo;
 import org.apache.ibatis.annotations.Mapper;
 
 import java.util.List;
@@ -61,4 +62,12 @@ public interface StudentMapper extends BaseMapper<Student> {
      * @return 结果
      */
     public int deleteStudentByIds(Long[] ids);
+
+    /**
+     * 查询全部学生列表
+     *
+     * @param student 查询条件
+     * @return 结果
+     */
+    List<StudentListVo> selectStudentListAll(Student student);
 }

school-in-out-system/src/main/java/com/schoolinout/system/service/IStudentService.java

@@ -1,6 +1,7 @@
 package com.schoolinout.system.service;
 
 import com.schoolinout.system.domain.Student;
+import com.schoolinout.system.domain.vo.StudentListVo;
 
 import java.util.List;
 
@@ -11,6 +12,15 @@ import java.util.List;
  * @date 2024-01-03
  */
 public interface IStudentService {
+
+    /**
+     * 查询全部的学生列表
+     *
+     * @param student
+     * @return
+     */
+    public List<StudentListVo> listAll(Student student);
+
     /**
      * 查询学生管理
      *

school-in-out-system/src/main/java/com/schoolinout/system/service/impl/StudentServiceImpl.java

@@ -2,6 +2,7 @@ package com.schoolinout.system.service.impl;
 
 import com.schoolinout.common.utils.DateUtils;
 import com.schoolinout.system.domain.Student;
+import com.schoolinout.system.domain.vo.StudentListVo;
 import com.schoolinout.system.mapper.StudentMapper;
 import com.schoolinout.system.service.IStudentService;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -20,6 +21,11 @@ public class StudentServiceImpl implements IStudentService {
     @Autowired
     private StudentMapper studentMapper;
 
+    @Override
+    public List<StudentListVo> listAll(Student student) {
+        return studentMapper.selectStudentListAll(student);
+    }
+
     /**
      * 查询学生管理
      *

school-in-out-system/src/main/resources/mapper/system/StudentMapper.xml

@@ -1,44 +1,79 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper
-PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
-"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.schoolinout.system.mapper.StudentMapper">
-    
+
     <resultMap type="Student" id="StudentResult">
-        <result property="id"    column="id"    />
-        <result property="schoolId"    column="school_id"    />
-        <result property="classId"    column="class_id"    />
-        <result property="studentName"    column="student_name"    />
-        <result property="studentPic"    column="student_pic"    />
-        <result property="studentGender"    column="student_gender"    />
-        <result property="studentNum"    column="student_num"    />
-        <result property="delFlag"    column="del_flag"    />
-        <result property="createBy"    column="create_by"    />
-        <result property="createTime"    column="create_time"    />
-        <result property="updateBy"    column="update_by"    />
-        <result property="updateTime"    column="update_time"    />
+        <result property="id" column="id"/>
+        <result property="schoolId" column="school_id"/>
+        <result property="classId" column="class_id"/>
+        <result property="studentName" column="student_name"/>
+        <result property="studentPic" column="student_pic"/>
+        <result property="studentGender" column="student_gender"/>
+        <result property="studentNum" column="student_num"/>
+        <result property="delFlag" column="del_flag"/>
+        <result property="createBy" column="create_by"/>
+        <result property="createTime" column="create_time"/>
+        <result property="updateBy" column="update_by"/>
+        <result property="updateTime" column="update_time"/>
     </resultMap>
 
     <sql id="selectStudentVo">
-        select id, school_id, class_id, student_name, student_pic, student_gender, student_num, del_flag, create_by, create_time, update_by, update_time from tb_school_student
+        select id,
+               school_id,
+               class_id,
+               student_name,
+               student_pic,
+               student_gender,
+               student_num,
+               del_flag,
+               create_by,
+               create_time,
+               update_by,
+               update_time
+        from tb_school_student
     </sql>
 
     <select id="selectStudentList" parameterType="Student" resultMap="StudentResult">
         <include refid="selectStudentVo"/>
-        <where>  
-            <if test="schoolId != null "> and school_id = #{schoolId}</if>
-            <if test="classId != null "> and class_id = #{classId}</if>
-            <if test="studentName != null  and studentName != ''"> and student_name like concat('%', #{studentName}, '%')</if>
-            <if test="studentGender != null  and studentGender != ''"> and student_gender = #{studentGender}</if>
-            <if test="studentNum != null  and studentNum != ''"> and student_num like concat('%', #{studentNum}, '%')</if>
+        <where>
+            <if test="schoolId != null ">and school_id = #{schoolId}</if>
+            <if test="classId != null ">and class_id = #{classId}</if>
+            <if test="studentName != null  and studentName != ''">and student_name like concat('%', #{studentName},
+                '%')
+            </if>
+            <if test="studentGender != null  and studentGender != ''">and student_gender = #{studentGender}</if>
+            <if test="studentNum != null  and studentNum != ''">and student_num like concat('%', #{studentNum}, '%')
+            </if>
         </where>
     </select>
-    
+
     <select id="selectStudentById" parameterType="Long" resultMap="StudentResult">
         <include refid="selectStudentVo"/>
         where id = #{id}
     </select>
-        
+    <select id="selectStudentListAll" resultType="com.schoolinout.system.domain.vo.StudentListVo">
+        SELECT
+        student.student_name,
+        student.student_pic,
+        student.student_gender,
+        student.student_num,
+        school.school_name,
+        clazz.class_name
+        FROM tb_school_student student
+        LEFT JOIN tb_school school ON student.school_id = school.id
+        LEFT JOIN tb_school_class clazz ON student.class_id = clazz.id
+        <where>
+            <if test="schoolId != null">
+                AND student.school_id = #{schoolId}
+            </if>
+            <if test="classId != null">
+                AND student.class_id = #{classId}
+            </if>
+        </where>
+    </select>
+
     <insert id="insertStudent" parameterType="Student" useGeneratedKeys="true" keyProperty="id">
         insert into tb_school_student
         <trim prefix="(" suffix=")" suffixOverrides=",">
@@ -53,7 +88,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="createTime != null">create_time,</if>
             <if test="updateBy != null">update_by,</if>
             <if test="updateTime != null">update_time,</if>
-         </trim>
+        </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="schoolId != null">#{schoolId},</if>
             <if test="classId != null">#{classId},</if>
@@ -66,7 +101,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="createTime != null">#{createTime},</if>
             <if test="updateBy != null">#{updateBy},</if>
             <if test="updateTime != null">#{updateTime},</if>
-         </trim>
+        </trim>
     </insert>
 
     <update id="updateStudent" parameterType="Student">
@@ -88,11 +123,13 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </update>
 
     <delete id="deleteStudentById" parameterType="Long">
-        delete from tb_school_student where id = #{id}
+        delete
+        from tb_school_student
+        where id = #{id}
     </delete>
 
     <delete id="deleteStudentByIds" parameterType="String">
-        delete from tb_school_student where id in 
+        delete from tb_school_student where id in
         <foreach item="id" collection="array" open="(" separator="," close=")">
             #{id}
         </foreach>

school-in-out-ui/src/api/system/student.js

@@ -1,6 +1,16 @@
 import request from '@/utils/request'
 
 // 查询学生管理列表
+export function listStudentAll(query) {
+  return request({
+    url: '/system/student/list/all',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询学生管理列表
 export function listStudent(query) {
   return request({
     url: '/system/student/list',

school-in-out-ui/src/assets/styles/ruoyi.scss

@@ -298,6 +298,11 @@
   width: 100%;
 }
 
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+
 // bind icon
 .el-icon-bind{
   background: url('../images/bind.png') center center no-repeat;

school-in-out-ui/src/views/system/clazz/index.vue

@@ -1,332 +1,451 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="所属学校" prop="schoolId">
-        <el-select v-model="queryParams.schoolId" placeholder="请选择学校" style="width: 100%;">
-            <el-option v-for="dict in dictTables.schoolDict" :key="dict.value" :label="dict.label"
-              :value="dict.value"></el-option>
-          </el-select>
-      </el-form-item>
-      <el-form-item label="班级名称" prop="className">
-        <el-input
-          v-model="queryParams.className"
-          placeholder="请输入班级名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="班级人数" prop="classCount">
-        <el-input
-          v-model="queryParams.classCount"
-          placeholder="请输入班级人数"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+	<div class="app-container">
+		<el-form
+			:model="queryParams"
+			ref="queryForm"
+			size="small"
+			:inline="true"
+			v-show="showSearch"
+			label-width="68px"
+		>
+			<el-form-item label="所属学校" prop="schoolId">
+				<el-select
+					v-model="queryParams.schoolId"
+					placeholder="请选择学校"
+					style="width: 100%"
+				>
+					<el-option
+						v-for="dict in dictTables.schoolDict"
+						:key="dict.value"
+						:label="dict.label"
+						:value="dict.value"
+					></el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item label="班级名称" prop="className">
+				<el-input
+					v-model="queryParams.className"
+					placeholder="请输入班级名称"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+			<el-form-item label="班级人数" prop="classCount">
+				<el-input
+					v-model="queryParams.classCount"
+					placeholder="请输入班级人数"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+			<el-form-item>
+				<el-button
+					type="primary"
+					icon="el-icon-search"
+					size="mini"
+					@click="handleQuery"
+					>搜索</el-button
+				>
+				<el-button
+					icon="el-icon-refresh"
+					size="mini"
+					@click="resetQuery"
+					>重置</el-button
+				>
+			</el-form-item>
+		</el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:clazz:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:clazz:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:clazz:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:clazz:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+		<el-row :gutter="10" class="mb8">
+			<el-col :span="1.5">
+				<el-button
+					type="primary"
+					plain
+					icon="el-icon-plus"
+					size="mini"
+					@click="handleAdd"
+					v-hasPermi="['system:clazz:add']"
+					>新增</el-button
+				>
+			</el-col>
+			<el-col :span="1.5">
+				<el-button
+					type="success"
+					plain
+					icon="el-icon-edit"
+					size="mini"
+					:disabled="single"
+					@click="handleUpdate"
+					v-hasPermi="['system:clazz:edit']"
+					>修改</el-button
+				>
+			</el-col>
+			<el-col :span="1.5">
+				<el-button
+					type="danger"
+					plain
+					icon="el-icon-delete"
+					size="mini"
+					:disabled="multiple"
+					@click="handleDelete"
+					v-hasPermi="['system:clazz:remove']"
+					>删除</el-button
+				>
+			</el-col>
+			<el-col :span="1.5">
+				<el-button
+					type="warning"
+					plain
+					icon="el-icon-download"
+					size="mini"
+					@click="handleExport"
+					v-hasPermi="['system:clazz:export']"
+					>导出</el-button
+				>
+			</el-col>
+			<right-toolbar
+				:showSearch.sync="showSearch"
+				@queryTable="getList"
+			></right-toolbar>
+		</el-row>
 
-    <el-table v-loading="loading" :data="clazzList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" type="index" align="center"/>
-       <!-- todo 显示 学校名称 -->
-       <el-table-column label="所属学校" align="center">
-        <template slot-scope="scope">
-          <dict-tag :options="dictTables.schoolDict" :value="scope.row.schoolId" />
-        </template>
-      </el-table-column>
-      <el-table-column label="班级名称" align="center" prop="className" />
-      <el-table-column label="班主任" align="center" prop="teacherName" />
-      <el-table-column label="班级人数" align="center" prop="classCount" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:clazz:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:clazz:remove']"
-          >删除</el-button>
-          <!-- 要弹出对话框 让其进行选择 -->
-          <el-button 
-            v-if="scope.row.teacherMain === 'N' || scope.row.teacherMain === null" 
-            size="mini" type="text"
-            @click="handleTeacherClassBind(scope.row)"
-          >
-            <i class="el-icon-bind"></i>
-            绑定班主任
-          </el-button>
-          <el-button 
-            v-if="scope.row.teacherMain === 'Y'" 
-            size="mini" type="text"
-            @click="unbindTeacherMain(scope.row)"
-          >
-            <i class="el-icon-bind"></i>
-            解绑班主任
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+		<el-table
+			v-loading="loading"
+			:data="clazzList"
+			@selection-change="handleSelectionChange"
+		>
+			<el-table-column type="selection" width="55" align="center" />
+			<el-table-column label="序号" type="index" align="center" />
+			<!-- todo 显示 学校名称 -->
+			<el-table-column label="所属学校" align="center">
+				<template slot-scope="scope">
+					<dict-tag
+						:options="dictTables.schoolDict"
+						:value="scope.row.schoolId"
+					/>
+				</template>
+			</el-table-column>
+			<el-table-column
+				label="班级名称"
+				align="center"
+				prop="className"
+			/>
+			<el-table-column
+				label="班主任"
+				align="center"
+				prop="teacherName"
+			/>
+			<el-table-column
+				label="班级人数"
+				align="center"
+				prop="classCount"
+			/>
+			<el-table-column
+				label="操作"
+				align="center"
+				class-name="small-padding fixed-width"
+			>
+				<template slot-scope="scope">
+					<el-button
+						size="mini"
+						type="text"
+						icon="el-icon-edit"
+						@click="handleUpdate(scope.row)"
+						v-hasPermi="['system:clazz:edit']"
+						>修改</el-button
+					>
+					<!-- 更多操作按钮 -->
+					<el-dropdown trigger="click">
+						<span class="el-dropdown-link">
+							更多<i class="el-icon-arrow-down el-icon--right"></i>
+						</span>
+						<el-dropdown-menu slot="dropdown">
+							<el-dropdown-item>
+								<el-button
+									size="mini"
+									type="text"
+									icon="el-icon-delete"
+									@click="handleDelete(scope.row)"
+									v-hasPermi="['system:clazz:remove',]"
+									>删除</el-button>
+							</el-dropdown-item>
+							<el-dropdown-item>
+								<!-- 要弹出对话框 让其进行选择 -->
+								<el-button
+									v-if="scope.row.teacherMain ==='N' || scope.row.teacherMain === null"
+									size="mini"
+									type="text"
+									@click="handleTeacherClassBind(scope.row)"
+								>
+									<i class="el-icon-bind"></i>
+									绑定班主任
+								</el-button>
+								<el-button
+									v-if="scope.row.teacherMain ==='Y'"
+									size="mini"
+									type="text"
+									@click="unbindTeacherMain(scope.row)"
+								>
+									<i class="el-icon-bind"></i>
+									解绑班主任
+								</el-button>
+							</el-dropdown-item>
+              <el-dropdown-item>
+								<el-button
+									size="mini"
+									type="text"
+									icon="el-icon-view"
+									@click="handlerStudentList(scope.row)"
+									>查看学生列表</el-button>
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					</el-dropdown>
+				</template>
+			</el-table-column>
+		</el-table>
 
-    <!-- 新增 修改 班级信息 组件-->
-    <clazz-form
-      ref="clazzForm"
-      @submit="submitForm"
-      @cancel="cancel"
-    ></clazz-form>
-    <!-- 绑定班主任对话框 -->
-    <bind-teacher-class ref="bindTeacherClass" @resetTable="getList"/>
-  </div>
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNum"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList"
+		/>
+
+		<!-- 新增 修改 班级信息 组件-->
+		<clazz-form
+			ref="clazzForm"
+			@submit="submitForm"
+			@cancel="cancel"
+		></clazz-form>
+		<!-- 绑定班主任对话框 -->
+		<bind-teacher-class ref="bindTeacherClass" @resetTable="getList" />
+
+		<!-- 班级学生列表 -->
+		<class-student-list ref="classStudentList" />
+	</div>
 </template>
 
 <script>
-import { listClazz, getClazz, delClazz, addClazz, updateClazz } from "@/api/system/clazz";
-import {updateTeacherClassRelation} from '@/api/system/teacher_class_relation'
-import ClazzForm from "./module/ClazzForm";
-import BindTeacherClass from "./module/BindTeacherClass";
-import Textyixia from "@/mixin/Textyixia"
+import {
+	listClazz,
+	getClazz,
+	delClazz,
+	addClazz,
+	updateClazz,
+} from '@/api/system/clazz';
+import { updateTeacherClassRelation } from '@/api/system/teacher_class_relation';
+import ClazzForm from './module/ClazzForm';
+import ClassStudentList from './module/ClassStudentList';
+import BindTeacherClass from './module/BindTeacherClass';
+import Textyixia from '@/mixin/Textyixia';
 
 import { Loading } from 'element-ui';
 
 export default {
-  name: "Clazz",
-  mixins: [Textyixia],
-  dicts: ['sys_yes_no'],
-  components: {
-    ClazzForm,
-    BindTeacherClass,
-  },
-  data() {
-    return {
-      dictTables: {
-        schoolDict: []
-      },
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 班级管理表格数据
-      clazzList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        schoolId: null,
-        className: null,
-        classCount: null,
-        phone: null,
-      },
-      // 表单参数
-      form: {},
-     
-    };
-  },
-  created() {
-    this.getList();
-    this.dictTableData("tb_school,school_name,id").then(data => {
-      this.dictTables.schoolDict = data
-    })
-  },
-  methods: {
-    /** 查询班级管理列表 */
-    getList() {
-      this.loading = true;
-      listClazz(this.queryParams).then(response => {
-        this.clazzList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.$refs.clazzForm.open = false
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.$refs.clazzForm.reset()
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.$refs.clazzForm.open = true
-      this.$refs.clazzForm.title = "添加班级";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getClazz(id).then(response => {
-        this.$refs.clazzForm.form = response.data;
-        this.$refs.clazzForm.open = true
-        this.$refs.clazzForm.title = "修改班级信息";
-        this.$refs.clazzForm.searchTeacherOption(true);
-        this.$refs.clazzForm.schoolOptions = this.dictTables.schoolDict
-      });
-    },
-    /** 提交按钮 */
-    submitForm(data) {
-      if (data.id != null) {
-          updateClazz(data).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.$refs.clazzForm.open = false
-            this.getList();
-          }).finally(() =>  this.$refs.clazzForm.loading = false)
-        } else {
-          addClazz(data).then(response => {
-            this.$modal.msgSuccess("新增成功");
-            this.$refs.clazzForm.open = false
-            this.getList();
-          }).finally(() =>  this.$refs.clazzForm.loading = false);
-        }
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除班级管理编号为"' + ids + '"的数据项？').then(function() {
-        return delClazz(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/clazz/export', {
-        ...this.queryParams
-      }, `clazz_${new Date().getTime()}.xlsx`)
-    },
-    /** 绑定班主任 */
-    handleTeacherClassBind(row) {
-      // 弹出对话框，并让用户设置对应的教师
-      this.$refs.bindTeacherClass.form.schoolId = row.schoolId;
-      this.$refs.bindTeacherClass.form.classId = row.id;
-      this.$refs.bindTeacherClass.openDialog();
-
-    },
-    /** 解绑班主任 */
-    unbindTeacherMain(row) {
-        this.form = {
-            schoolId: row.schoolId,
-            classId: row.id,
-            teacherMain: 'N',
-        }
-        // 解绑班主任关系
-        this.$confirm('确定解绑班主任？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          const loadingInstance =  Loading.service({fullscreen: true, text: '正在解绑班主任...', background: 'rgba(0, 0, 0, 0.8)'})
-          updateTeacherClassRelation(this.form).then(res => {
-            console.log(res);
-            this.$message({
-              type:'success',
-              message: '解绑成功!'
-            });
-           
-          }).finally(() => {
-            setTimeout(() => {
-              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
-                loadingInstance.close();
-              });
-            }, 500)
-            this.getList();
-          })
-        })
+	name: 'Clazz',
+	mixins: [Textyixia],
+	dicts: ['sys_yes_no'],
+	components: {
+		ClazzForm,
+		BindTeacherClass,
+		ClassStudentList,
+	},
+	data() {
+		return {
+			dictTables: {
+				schoolDict: [],
+			},
+			// 遮罩层
+			loading: true,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 班级管理表格数据
+			clazzList: [],
+			// 弹出层标题
+			title: '',
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNum: 1,
+				pageSize: 10,
+				schoolId: null,
+				className: null,
+				classCount: null,
+				phone: null,
+			},
+			// 表单参数
+			form: {},
+		};
+	},
+	created() {
+		this.getList();
+		this.dictTableData('tb_school,school_name,id').then(data => {
+			this.dictTables.schoolDict = data;
+		});
+	},
+	methods: {
+		/** 查询班级管理列表 */
+		getList() {
+			this.loading = true;
+			listClazz(this.queryParams).then(response => {
+				this.clazzList = response.rows;
+				this.total = response.total;
+				this.loading = false;
+			});
+		},
+		// 取消按钮
+		cancel() {
+			this.$refs.clazzForm.open = false;
+			this.reset();
+		},
+		// 表单重置
+		reset() {
+			this.$refs.clazzForm.reset();
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNum = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		// 多选框选中数据
+		handleSelectionChange(selection) {
+			this.ids = selection.map(item => item.id);
+			this.single = selection.length !== 1;
+			this.multiple = !selection.length;
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.$refs.clazzForm.open = true;
+			this.$refs.clazzForm.title = '添加班级';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id || this.ids;
+			getClazz(id).then(response => {
+				this.$refs.clazzForm.form = response.data;
+				this.$refs.clazzForm.open = true;
+				this.$refs.clazzForm.title = '修改班级信息';
+				this.$refs.clazzForm.searchTeacherOption(true);
+				this.$refs.clazzForm.schoolOptions =
+					this.dictTables.schoolDict;
+			});
+		},
+		/** 提交按钮 */
+		submitForm(data) {
+			if (data.id != null) {
+				updateClazz(data)
+					.then(response => {
+						this.$modal.msgSuccess('修改成功');
+						this.$refs.clazzForm.open = false;
+						this.getList();
+					})
+					.finally(
+						() => (this.$refs.clazzForm.loading = false)
+					);
+			} else {
+				addClazz(data)
+					.then(response => {
+						this.$modal.msgSuccess('新增成功');
+						this.$refs.clazzForm.open = false;
+						this.getList();
+					})
+					.finally(
+						() => (this.$refs.clazzForm.loading = false)
+					);
+			}
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const ids = row.id || this.ids;
+			this.$modal
+				.confirm(
+					'是否确认删除班级管理编号为"' +
+						ids +
+						'"的数据项？'
+				)
+				.then(function () {
+					return delClazz(ids);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			this.download(
+				'system/clazz/export',
+				{
+					...this.queryParams,
+				},
+				`clazz_${new Date().getTime()}.xlsx`
+			);
+		},
+		/** 绑定班主任 */
+		handleTeacherClassBind(row) {
+			// 弹出对话框，并让用户设置对应的教师
+			this.$refs.bindTeacherClass.form.schoolId = row.schoolId;
+			this.$refs.bindTeacherClass.form.classId = row.id;
+			this.$refs.bindTeacherClass.openDialog();
+		},
+		/** 解绑班主任 */
+		unbindTeacherMain(row) {
+			this.form = {
+				schoolId: row.schoolId,
+				classId: row.id,
+				teacherMain: 'N',
+			};
+			// 解绑班主任关系
+			this.$confirm('确定解绑班主任？', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			}).then(() => {
+				const loadingInstance = Loading.service({
+					fullscreen: true,
+					text: '正在解绑班主任...',
+					background: 'rgba(0, 0, 0, 0.8)',
+				});
+				updateTeacherClassRelation(this.form)
+					.then(res => {
+						console.log(res);
+						this.$message({
+							type: 'success',
+							message: '解绑成功!',
+						});
+					})
+					.finally(() => {
+						setTimeout(() => {
+							this.$nextTick(() => {
+								// 以服务的方式调用的 Loading 需要异步关闭
+								loadingInstance.close();
+							});
+						}, 500);
+						this.getList();
+					});
+			});
+		},
+    /** 查看当前班级的学生列表 */
+    handlerStudentList(row) {
+      this.$refs.classStudentList.openDialog(row)
     }
-  }
+	},
 };
 </script>

school-in-out-ui/src/views/system/clazz/module/ClassStudentList.vue

@@ -0,0 +1,92 @@
+<template>
+	<el-dialog
+		title="学生列表"
+		width="840px"
+		:visible.sync="open"
+		@close="closeDialog"
+
+	>
+		<el-table 
+			v-loading="load"
+			:data="tableData" 
+			height="380" border 
+			style="width: 100%">
+			<el-table-column prop="schoolName" label="学校">
+			</el-table-column>
+			<el-table-column prop="className" label="班级">
+			</el-table-column>
+			<el-table-column prop="studentName" label="姓名">
+			</el-table-column>
+			<el-table-column prop="className" label="班级">
+			</el-table-column>
+			<el-table-column
+				label="学生照片"
+				align="center"
+				prop="studentPic"
+				width="100"
+			>
+				<template slot-scope="scope">
+					<image-preview
+						:src="scope.row.studentPic"
+						:width="50"
+						:height="50"
+					/>
+				</template>
+			</el-table-column>
+			<el-table-column prop="studentGender" label="性别">
+				<template slot-scope="scope">
+					<dict-tag
+						:options="dict.type.sys_user_sex"
+						:value="scope.row.studentGender"
+					/>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-dialog>
+</template>
+
+<script>
+import {
+	listStudentAll,
+} from '@/api/system/student';
+export default {
+	name: 'ClassStudentList',
+	dicts: ['sys_user_sex'],
+	data() {
+		return {
+			open: false,
+			load: false,
+			tableData: [],
+			form: {
+				schoolId: null,
+				classId: null,
+			}
+		};
+	},
+	methods: {
+		closeDialog() {
+			this.open = false;
+		},
+		openDialog(data) {
+			this.open = true;
+			this.form.schoolId = data.schoolId;
+			console.log(data);
+			this.form.classId = data.id;
+			this.getList();
+		},
+		getList() {
+			this.load = true;
+			listStudentAll(this.form).then(res => {
+				this.tableData = res.data;
+			}).finally(() => {
+				this.load = false;
+			})
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+// .el-dialog__body{height: 30vh;}
+
+</style>