1.章节介绍

前一篇介绍了专业管理模块，这一篇编写班级管理模块，需要的朋友可以拿去自己定制。：）

2.获取源码

源码是捐赠方式获取，详细请QQ联系我：）！

3.实现效果

班级列表

修改班级

4.模块代码

页面布局

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item>班级管理</el-breadcrumb-item><el-breadcrumb-item>班级列表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 搜索 添加 --><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入班级名称"v-model="queryInfo.query"clearable@clear="getGradeList"><el-button slot="append"icon="el-icon-search"@click="getGradeList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary"@click="addDialogVisible = true">添加班级</el-button></el-col></el-row><!-- 班级列表区域 --><el-table :data="gradeList"borderstripe><!-- stripe: 斑马条纹border：边框--><el-table-column type="index"label="序号"></el-table-column><el-table-column prop="gradeNo"label="班级编号"></el-table-column><el-table-column prop="gradeName"label="班级名称"></el-table-column><el-table-column prop="deptName"label="所属院系"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="primary"icon="el-icon-edit"size="mini"circle@click="showEditDialog(scope.row.id)"></el-button><el-button type="danger"icon="el-icon-delete"size="mini"circle@click="removeById(scope.row.id)"></el-button></template></el-table-column></el-table><!-- 分页区域 --><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pageNo":page-size="queryInfo.pageSize"layout="total, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加班级的对话框 --><el-dialog title="添加班级":visible.sync="addDialogVisible"width="30%"@close="addDialogClosed"><!-- 内容主体 --><el-form :model="addForm"ref="addFormRef":rules="addFormRules"label-width="100px"><el-form-item label="班级编码"prop="gradeNo"><el-input v-model="addForm.gradeNo"></el-input></el-form-item><el-form-item label="班级名称"prop="gradeName"><el-input v-model="addForm.gradeName"></el-input></el-form-item><el-form-item label="所属院系"prop="deptId"><el-select v-model="addForm.deptId"placeholder="请选择"><el-option v-for="item in deptList":key="item.id":label="item.deptName":value="item.id"></el-option></el-select></el-form-item></el-form><span slot="footer"class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary"@click="add">确 定</el-button></span></el-dialog><!-- 修改班级的对话框 --><el-dialog title="修改班级信息":visible.sync="editDialogVisible"width="30%"@close="editDialogClosed"><!-- 内容主体 --><el-form :model="editForm"ref="editFormRef":rules="editFormRules"label-width="70px"><el-form-item label="班级编码"><el-input v-model="editForm.gradeNo"></el-input></el-form-item><el-form-item label="班级名称"><el-input v-model="editForm.gradeName"></el-input></el-form-item><!-- TODO  --><el-form-item label="所属院系"prop="deptId"><el-select v-model="editForm.deptId"placeholder="请选择"><el-option v-for="item in deptList":key="item.id":label="item.deptName":value="item.id"></el-option></el-select></el-form-item></el-form><span slot="footer"class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary"@click="editUser">确 定</el-button></span></el-dialog></div>
</template>

数据和事件

<script>
export default {data() {return {// 院系列表deptList: [],// 获取班级列表查询参数对象queryInfo: {query: "",// 当前页数pageNo: 1,// 每页显示多少数据pageSize: 5,},gradeList: [],total: 0,// 添加班级对话框addDialogVisible: false,// 班级添加addForm: {gradeNo: "",gradeName: "",deptId: "",},// 班级添加表单验证规则addFormRules: {gradeNo: [{ required: true, message: "请输入班级编号", trigger: "blur" },{min: 2,max: 10,message: "班级编号的长度在2～10个字",trigger: "blur",},],gradeName: [{ required: true, message: "请输入班级名称", trigger: "blur" },{min: 2,max: 50,message: "班级名称的长度在2～50个字",trigger: "blur",},],deptId: [{ required: true, message: "请输入所属院系", trigger: "blur" },],},// 修改班级editDialogVisible: false,editForm: {},// 编辑班级表单验证editFormRules: {gradeNo: [{ required: true, message: "请输入班级编号", trigger: "blur" },],gradeName: [{ required: true, message: "请输入班级名称", trigger: "blur" },],},};},created() {this.getGradeList();// 加载院系列表this.getDeptList();},methods: {async getGradeList() {const { data: res } = await this.$http.get("grade/list", {params: this.queryInfo,});if (res.code !== 200) {return this.$message.error("获取班级列表失败！");}this.gradeList = res.data.records;this.total = res.data.total;},async getDeptList() {const { data: res } = await this.$http.get("dept/listAll", {});if (res.code !== 200) {return this.$message.error("获取院系列表失败！");}this.deptList = res.data;},// 监听 pageSize改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pageSize = newSize;this.getGradeList();},// 监听 页码值 改变事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pageNo = newSize;this.getGradeList();},// 监听 添加班级对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields();},// 添加班级add() {// 提交请求前，表单预验证this.$refs.addFormRef.validate(async (valid) => {// console.log(valid)// 表单预校验失败if (!valid) return;const { data: res } = await this.$http.post("grade/modify",this.addForm);if (res.code !== 200) {this.$message.error("添加班级失败！");return;}this.$message.success("添加班级成功！");// 隐藏添加班级对话框this.addDialogVisible = false;this.getGradeList();});},// 编辑班级信息async showEditDialog(id) {const { data: res } = await this.$http.get("grade/" + id);if (res.code !== 200) {return this.$message.error("查询班级信息失败！");}this.editForm = res.data;this.editDialogVisible = true;},// 监听修改班级对话框的关闭事件editDialogClosed() {this.$refs.editFormRef.resetFields();},// 修改班级信息editUser() {// 提交请求前，表单预验证this.$refs.editFormRef.validate(async (valid) => {// console.log(valid)// 表单预校验失败if (!valid) return;const { data: res } = await this.$http.post("grade/modify", {id: this.editForm.id,gradeNo: this.editForm.gradeNo,gradeName: this.editForm.gradeName,deptId: this.editForm.deptId,});if (res.code !== 200) {this.$message.error("更新班级信息失败！");}// 隐藏添加班级对话框this.editDialogVisible = false;this.$message.success("更新班级信息成功！");this.getGradeList();});},// 删除班级async removeById(id) {const confirmResult = await this.$confirm("确定删除该班级?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).catch((err) => err);// 点击确定 返回值为：confirm// 点击取消 返回值为： cancelif (confirmResult !== "confirm") {return this.$message.info("已取消删除");}const { data: res } = await this.$http.post("grade/remove/" + id);if (res.code !== 200) return this.$message.error("删除班级失败！");this.$message.success("删除班级成功！");this.getGradeList();},},
};
</script>

Vue+SpringBoot+ElementUI实战学生管理系统-8.班级管理模块相关推荐

Vue+SpringBoot+ElementUI实战学生管理系统-9.教师管理模块
1.章节介绍前一篇介绍了班级管理模块,这一篇编写教师管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码源码是捐赠方式获取,详细请QQ联系我 :)! 3.实现效果教师列表修改教师 4.模块 ...
Vue+SpringBoot+ElementUI实战学生管理系统-10.学生管理模块
1.章节介绍前一篇介绍了教师管理模块,这一篇编写学生管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码源码是捐赠方式获取,详细请QQ联系我 :)! 3.实现效果学生列表修改学生 4.模块 ...
【学生管理系统】班级管理
目录 3. 班级管理 3.1 需求 3.1.1 添加班级 3.1.2 班级列表 3.2 搭建环境 3.2.1 前端实现 3.2.2 后端实现(9010) 3.3 添加班级 3.3.1 查询所有老师 3 ...
【024】Vue+Springboot+mysql员工考勤管理系统(多角色登录、请假、打卡)(含源码、数据库、运行教程、实验报告)
前排提示:项目源码已放在文末基于Vue+Springboot+mysql员工考勤管理系统(多角色登录.请假.打卡) 开发环境:Springboot+Mysql+Vue+Nodejs+Maven+JD ...
制作基于springboot的简易学生管理系统（详细）
制作基于springboot的简易学生管理系统(详细) 基于书本与百度创作,内容简易,请多多指教(￣▽￣)/ 设计一个简易学生管理系统所需环境创建一个springboot项目设计数据库配置Gr ...
Vue+SpringBoot进销存管理系统源码【源码免费分享】
淘源码-国内专业的免费源码下载平台 Vue+SpringBoot进销存管理系统源码源码免费分享,需要学习可私信我. 系统介绍: 这是一款面向中小企业的供销链管理系统,基于J2EE快速开发平台Jeec ...
vue后台管理系统之日志管理模块
前端的后台的日志管理模块功能的实现 (使用的是elementUI框架) 这是日志管理模块实现的效果图 <div class="log-header&q ...
java-ArrayList实现一个电商管理系统的商品库存管理模块
java-ArrayList实现一个电商管理系统的商品库存管理模块实现一个电商管理系统的商品库存管理模块商品(Goods)包含如下属性信息: 编号(int no) 商品名(String name ...
解剖档案管理系统平台的管理模块介绍
你们所熟悉的办公管理系统有什么管理模块呢?相信大家拿出手机进去就知道了.而档案管理系统平台又有什么管理模块呢?为什么那么多人使用?下面盘点以下: 1.文件管理 2.档案管理 3.综合知识管理 4.OA ...

Vue+SpringBoot+ElementUI实战学生管理系统-8.班级管理模块

1.章节介绍

2.获取源码

3.实现效果

班级列表

修改班级

4.模块代码

页面布局

数据和事件

Vue+SpringBoot+ElementUI实战学生管理系统-8.班级管理模块相关推荐

最新文章

热门文章