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="getMajorList">
<el-button slot="append"
icon="el-icon-search"
@click="getMajorList"></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="majorList"
border
stripe>
<!-- stripe: 斑马条纹
border:边框-->
<el-table-column type="index"
label="序号"></el-table-column>
<el-table-column prop="majorNo"
label="专业编号"></el-table-column>
<el-table-column prop="majorName"
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="majorNo">
<el-input v-model="addForm.majorNo"></el-input>
</el-form-item>
<el-form-item label="专业名称"
prop="majorName">
<el-input v-model="addForm.majorName"></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.majorNo"></el-input>
</el-form-item>
<el-form-item label="专业名称">
<el-input v-model="editForm.majorName"></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,
},
majorList: [],
total: 0,
// 添加专业对话框
addDialogVisible: false,
// 专业添加
addForm: {
majorNo: "",
majorName: "",
deptId: "",
},
// 专业添加表单验证规则
addFormRules: {
majorNo: [
{ required: true, message: "请输入专业编号", trigger: "blur" },
{
min: 2,
max: 10,
message: "专业名的长度在2~10个字",
trigger: "blur",
},
],
majorName: [
{ required: true, message: "请输入专业名称", trigger: "blur" },
{
min: 2,
max: 50,
message: "专业名称的长度在2~50个字",
trigger: "blur",
},
],
deptId: [
{ required: true, message: "请输入所属院系", trigger: "blur" },
],
},
// 修改专业
editDialogVisible: false,
editForm: {},
// 编辑专业表单验证
editFormRules: {
majorNo: [
{ required: true, message: "请输入专业编号", trigger: "blur" },
],
majorName: [
{ required: true, message: "请输入专业名称", trigger: "blur" },
],
},
};
},
created() {
this.getMajorList();
// 加载院系列表
this.getDeptList();
},
methods: {
async getMajorList() {
const { data: res } = await this.$http.get("major/list", {
params: this.queryInfo,
});
if (res.code !== 200) {
return this.$message.error("获取专业列表失败!");
}
this.majorList = 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.getMajorList();
},
// 监听 页码值 改变事件
handleCurrentChange(newSize) {
// console.log(newSize)
this.queryInfo.pageNo = newSize;
this.getMajorList();
},
// 监听 添加专业对话框的关闭事件
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(
"major/modify",
this.addForm
);
if (res.code !== 200) {
this.$message.error("添加专业失败!");
return;
}
this.$message.success("添加专业成功!");
// 隐藏添加专业对话框
this.addDialogVisible = false;
this.getMajorList();
});
},
// 编辑专业信息
async showEditDialog(id) {
const { data: res } = await this.$http.get("major/" + 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("major/modify", {
id: this.editForm.id,
majorNo: this.editForm.majorNo,
majorName: this.editForm.majorName,
deptId: this.editForm.deptId,
});
if (res.code !== 200) {
this.$message.error("更新专业信息失败!");
}
// 隐藏添加专业对话框
this.editDialogVisible = false;
this.$message.success("更新专业信息成功!");
this.getMajorList();
});
},
// 删除专业
async removeById(id) {
const confirmResult = await this.$confirm("确定删除该专业?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).catch((err) => err);
// 点击确定 返回值为:confirm
// 点击取消 返回值为: cancel
if (confirmResult !== "confirm") {
return this.$message.info("已取消删除");
}
const { data: res } = await this.$http.post("major/remove/" + id);
if (res.code !== 200) return this.$message.error("删除专业失败!");
this.$message.success("删除专业成功!");
this.getMajorList();
},
},
};
</script>

Vue+SpringBoot+ElementUI实战学生管理系统-7.专业管理模块的更多相关文章

  1. admin端的专业管理模块功能测试

    1.概述 1.1 测试范围 本次所测试的内容是admin端的专业管理模块. 1.2 测试方法 本次测试采用黑盒子方法进行集成测试. 1.3 测试环境 操作系统:Windows 2012 Server ...

  2. 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  3. Vue+SpringBoot项目实战(一) 搭建环境

    GitHub 地址: https://github.com/dongfanger/sprint-backend https://github.com/dongfanger/sprint-fronten ...

  4. vue.js+element-ui

    git地址:https://github.com/jerry9022/LitAdmin vue.js+element-ui 做后台管理系统 太方便了

  5. Django_学生管理系统

    一. Django简易学生管理系统 1.在pycharm中创建工程student_manage_system,添加app:student_manage 2.配置静态文件:在工程项目目录下新建目录sta ...

  6. 循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理>中介绍了用户管理模块的内容,包括用户列表的展示,各种查看.编辑.新增对话框的界面处理和后台数据处 ...

  7. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑

    (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...

  8. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作

    相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...

  9. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  10. Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路

    封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...

随机推荐

  1. Laravel - 改为国内镜像

    composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/    (阿里云) 或 composer ...

  2. vscode插件 - 浏览器中自动刷新 Live Server

  3. Redis内存问题的学习之一

    Redis内存问题的学习之一 背景 前几天帮同事看redis的问题 发现info memory 显示 60GB 但是实际上 save出来的dump文件只有 800M 然后导入到其他的redis之后, ...

  4. 鲲鹏920上面 Docker 部署 clickhouse 的方式方法

    鲲鹏920上面 Docker 部署 clickhouse 的方式方法 背景 最近有一套鲲鹏920的测试环境, 研发同事想纯Dcoker部署一套环境. 其中就包括了 Clickhouse 之前发现Cli ...

  5. [转帖]谁动了我的 CPU 频率 —— CPU 性能之迷 Part 2

    https://blog.mygraphql.com/zh/notes/low-tec/kernel/cpu-frequency/ 目录: 为何有本文 什么是动态 CPU 频率 什么是 p-state ...

  6. [转帖]容器化 TCP Socket 缓存、接收窗口参数

    https://blog.mygraphql.com/zh/notes/low-tec/network/tcp-mem/#rmem_default 最近需要支持一个单 POD 的 TCP 连接数上 1 ...

  7. nexus的简单安装与使用

    nexus的简单安装与使用 文件下载 官网上面下载文件比较麻烦, 得科学一些 https://www.sonatype.com/download-oss-sonatype 选择oss 开源版进行下载 ...

  8. [转帖]VLAN与三层交换机

    目录 一.VLAN概述与优势 二.Trunk的作用 三.IEEE 802.1q 四.VLAN转发 五.Trunk的配置 六.单臂路由概述 七.三层交换机实现VLAN之间通信的原理 八.实验一 九.实验 ...

  9. echarts使用transform缩放后导致图标模糊

    echarts使用transform缩放后导致图标模糊 --的解决办法 当使用了transform: scale(x,y)缩放后致使echarts图表模糊.怎么解决这个问题呢? 第一种解决办法:将ca ...

  10. GitHubDesktop汉化和下载

    GitHubDesktop下载 这玩意官网下载速度特别慢 如果不想等待的可以戳下面链接进行下载 会实时同步更新的 下载地址:GitHubDesktop下载