SpringBoot 微人事 职称管理模块(十三)

职称管理前端页面设计

在职称管理页面添加输入框

在这里插入图片描述

  export default {name: "JobLevelMarna",data(){return{Jl:{name:""}}}}

效果图
在这里插入图片描述

添加一个下拉框

在这里插入图片描述
v-model的值为当前被选中的el-option的 value 属性值
在这里插入图片描述

  <el-select v-model="Jl.titlelevel" placeholder="职称等级...." size="small" style="margin-left: 10px;margin-right: 10px"><el-optionv-for="item in titlelevels":key="item":label="item":value="item"></el-option></el-select>

在这里插入图片描述

  data(){return{Jl:{name:"",titlelevel:"",},titlelevels:['正高级','副高级','中级','初级','员级',]}}

效果图
在这里插入图片描述

添加按钮

在这里插入图片描述

            <el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>

效果图
在这里插入图片描述

增加数据表格

在这里插入图片描述
在这里插入图片描述

            </el-option></el-select><el-button icon="el-icon-plus" size="small" type="primary">添加</el-button></div><div><el-table:data="jls"stripestyle="width: 80%"><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="name"label="职称名称"width="180"></el-table-column><el-table-columnprop="titlelevel"label="职称级别"></el-table-column><el-table-columnprop="createData"label="创建时间"></el-table-column><el-table-columnlabel="操作"><template solt="scope"-><el-button >编辑</el-button><el-button type="deng">修改</el-button></template></el-table-column></el-table>

添加一个删除,修改按钮

在这里插入图片描述

职位管理后端接口设计

创建一个JobLevelConroller类

JobLevelConroller

在这里插入图片描述

@RestController
@RequestMapping("/system/basic/joblevel")
public class JobLevelController {@AutowiredJobLevelService jobLevelService;@GetMapping("/")public List<JObLevel> getAllJobLevels(){return jobLevelService.getAllJobLevels();}@PostMapping("/")public RespBean addJobLevels(@RequestBody JObLevel jObLevel){if(jobLevelService.addJobLevels(jObLevel)==1){return RespBean.ok("添加成功") ;}return RespBean.err("添加失败");}@PutMapping("/")public RespBean updateJobLevels(@RequestBody JObLevel jObLevel){if(jobLevelService.updateJobLevels(jObLevel)==1){return RespBean.ok("更新成功") ;}return RespBean.err("更新失败");}@DeleteMapping("/{id}")public RespBean deleteJobLevelById(@PathVariable Integer id){if(jobLevelService.deleteJobLevelById(id)==1){return RespBean.ok("删除成功") ;}return RespBean.err("删除失败");}}

JobLevelService

在这里插入图片描述

@Service
public class JobLevelService {@AutowiredJObLevelMapper jObLevelMapper;public List<JObLevel> getAllJobLevels() {return jObLevelMapper.getAllJobLevels();}public int addJobLevels(JObLevel jObLevel) {jObLevel.setCreatedate(new Date());jObLevel.setEnabled(true);return jObLevelMapper.insert(jObLevel);}public int updateJobLevels(JObLevel jObLevel) {return jObLevelMapper.updateByPrimaryKeySelective(jObLevel);}public int deleteJobLevelById(Integer id) {return jObLevelMapper.deleteByPrimaryKey(id);}}

JoblevelMapper.xml

添加个查询所有Joblevel,其它接口用自动生成的mapper
在这里插入图片描述

  <select id="getAllJobLevels" resultMap="BaseResultMap">select * from  joblevel;</select>

用PostMan测试看看接口是否用问题

前后端接口对接

展示数据库数据

在这里插入图片描述
查询所有数据连接后端接口
在这里插入图片描述

  methods:{JobLevelAll(){this.getRequest("/system/basic/joblevel/").then(resp=>{this.jls=resp;})}},mounted(){this.JobLevelAll()}}

在这里插入图片描述
在这里插入图片描述

添加操作数据连接后端

添加按钮事件
在这里插入图片描述
输入需要添加的数据
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

添加事件函数进行
在这里插入图片描述

  addLevel(){this.postRequest("/system/basic/joblevel/",this.Jl).then(resp=>{if (resp){this.JobLevelAll();this.Jl.name="";this.Jl.titlelevel=""}})},

删除操作

在这里插入图片描述

                <el-table-columnlabel="操作"><template slot-scope="scope"><el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column>

在这里插入图片描述

   handleDelete(index,data){this.deleteRequest("/system/basic/joblevel/"+data.id).then(resp=>{if (resp){this.JobLevelAll();}})},

修改操作

添加对话框
在这里插入图片描述
对话框添加输入框和选择框
在这里插入图片描述

  <el-dialogtitle="修改职称":visible.sync="dialogVisible"width="30%":before-close="handleClose"><div><div><el-tag>职称名字</el-tag><el-input v-model="toUpdateJobLevel.name" style="width: 201px; margin-left: 8px" size="small"></el-input></div><div style="margin-top: 15px"><el-tag>职称等级</el-tag><el-select size="small" style="margin-left: 8px" v-model="toUpdateJobLevel.titlelevel" placeholder="请选择"><el-optionv-for="item in titlelevels":key="item":label="item":value="item"></el-option></el-select></div></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click=updateJobLevel>确 定</el-button></span></el-dialog>

添加点击事件
在这里插入图片描述

                <template slot-scope="scope"><el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template>

当点击编辑的时候应该弹出对话框 ,添加这个dialogVisible 变量,默认是关闭的
在这里插入图片描述
点击编辑弹框,给编辑点击事件的函数里dialogVisible 变量
赋值true 弹框 在这里插入图片描述
定义toUpdateJobLevel保存 Jl 原数据
在这里插入图片描述
点击编辑拷贝原来数据到toUpdateJobLevel
在这里插入图片描述
输入框和选择框输入数据,确认触发点击事件
在这里插入图片描述
在这里插入图片描述

 updateJobLevel(){this.putRequest("/system/basic/joblevel/",this.toUpdateJobLevel).then(resp=>{if(resp){this.JobLevelAll();this.dialogVisible=false}})},

这样做的原因是因为要是直接用那个Jl数据会出现一些问题:会出现表格和弹框数据输入,表格也会变,然后就是弹框数据,取消的时候数据还是弹框之前输入取消的数据,导致表格的数据需要刷新才能恢复之前的数据。

具体执行流程:    
用户点击编辑弹修出改框
把原来数据拷贝到toUpdateJobLevel
如果用户点击确认,把数据传给服务器,重新查询数据展示到页面
否则用户点击了取消,展示还是原来的数据

启用标签和按钮

在这里插入图片描述
在这里插入图片描述
在表格里进行添加是否启用的标签
在这里插入图片描述

       <el-table-columnlabel="是否启用"><template slot-scope="scope"><el-tag type="success" v-if="scope.row.enabled">已启用</el-tag><el-tag type="danger" v-else>未启用</el-tag></template></el-table-column>

在变量对象里进行添加字段
在这里插入图片描述
对话框里进行添加
在这里插入图片描述

 <div style="margin-top: 8px"><el-tag>是否启用</el-tag><el-switchstyle="margin-left: 8px"v-model="toUpdateJobLevel.enabled"active-text="启用"inactive-text="禁用"></el-switch></div>

职称批量删除实现

后端代码实现

JobLevelController

在这里插入图片描述

 @DeleteMapping("/")public RespBean deleteJobLevels(Integer[] ids){if(jobLevelService.deleteJobLevels(ids)==ids.length){return RespBean.ok("删除成功") ;}return RespBean.err("删除失败");}
JobLevelService
    public int deleteJobLevels(Integer[] ids) {return jObLevelMapper.deleteJobLevels(ids);}
JObLevelMapper
    int deleteJobLevels( @Param("ids") Integer[] ids);

JobLevelMapper,xml

  <delete id="deleteJobLevels" >delete from joblevelwhere id in<foreach collection="ids" item="id" separator="," open="(" close=")">#{id}</foreach>;</delete>

批量删除前后端对接

添加一个批量删除按钮

添加一个点击事件
在这里插入图片描述

添加多选框

selection-change 当选择项发生变化时会触发该事件
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ViewBinding的基本使用

在app目录下的build.gradle文件中开启viewBinding&#xff0c;开启方式跟DataBinding类似&#xff0c;其中apply plugin: kotlin-android-extensions 是启用绑定机制&#xff0c;跟 ViewBinding 功能类似&#xff0c;都是kotlin自动的 build.gradle apply plugin: com.androi…

Android 9.0 kenel和frameworks中修改ram运行内存的功能实现

1.前言 在9.0的系统rom产品开发定制中,在对一些产品开发中的配置需求方面,在产品后续订单中,在某些机型中需要升级下系统内核配置,项目时间比较仓促,所以 来不及对硬件重新定制,就需要软件方面在ram运行内存的容量大小方面作假,修改ram真实的大小容量,所以就需要在ken…

2023华为杯研赛数学建模A题B题C题D题E题F题资料 华为杯

本次比赛我们将会全程更新华为杯研赛赛题思路模型及代码&#xff0c;大家查看文末名片获取 之前华为杯相关的资料和助攻可以查看 2022华为杯数学建模研赛选题建议和思路分析_方形件组批优化问题_UST数模社_的博客-CSDN博客 我们华为杯更新的流程如下&#xff1a; A题思路&a…

Spring cache整合Redis使用介绍

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…

【网络教程】如何创建/添加钉钉机器人以及如何获取机器人的Token/Secret

文章目录 创建钉钉机器人添加钉钉机器人获取机器人的Token/Secret相关网站创建钉钉机器人 这里以PC端的操作为例,按照如下操作进行 访问 钉钉开放平台选择机器人选项卡,点击右上角的创建应用,这里会有一个弹窗,我这里选择的是继续使用旧版,如图按照要求填写相关信息创建自…

Linux 系统 diff 文件比较命令详解

diff 命令用于比较两个文件或目录之间的差异。它会逐行比较文件的内容&#xff0c;并且在不同的行上显示不同之处。下面是 diff 命令的使用方法和选项&#xff1a; 基本语法&#xff1a; diff [选项] 文件1 文件2常见选项&#xff1a; -c 或 --context&#xff1a;显示上下文…

第六次作业 运维高级 docker容器

1.安装docker服务&#xff0c;配置镜像加速器 卸载旧版本 yum remove docker docker-common docker-selinux docker-engine使用yum源安装 &#xff08;1&#xff09;安装Docker所需要的一些工具包 yum install -y yum-utils&#xff08;2&#xff09; 建立Docker仓库 (映射…

数据结构——顺序表

数据结构是什么 数据机构是计算机存储、组织数据的一种方式&#xff0c;他是将逻辑关系和物理关系它们的相互关系结合在一起&#xff0c;并利用这种关系实现在计算机上来对数据的存储和组织&#xff0c;并对他们做出适当的计算和做出一些优秀的算法&#xff0c;但最终不会改变数…

Java——它要求用户输入一个整数(实际上是一个字符串),然后计算该整数的平方值,并将结果输出。

这是一个Java程序&#xff0c;它要求用户输入一个整数&#xff08;实际上是一个字符串&#xff09;&#xff0c;然后计算该整数的平方值&#xff0c;并将结果输出。程序的基本流程如下&#xff1a; 首先&#xff0c;声明并初始化变量data和result&#xff0c;它们的初始值都为…

扁线电机定子转子工艺及自动化装备

售&#xff1a;扁线电机 电驱对标样件 需要请联&#xff1a;shbinzer &#xff08;拆车邦&#xff09; 新能源车电机路线大趋势&#xff0c;自动化装配产线需求迫切永磁同步电机是新能源车驱动电机的主要技术路线。目前新能源车上最广泛应用的类型为永磁同步电机&#xff0c…

W5500-EVB-PICO进行UDP组播数据回环测试(九)

前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试&#xff0c;那么本章我们进行UDP组播数据回环测试。 什么是UDP组播&#xff1f; 组播是主机间一对多的通讯模式&#xff0c; 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…

如何搭建智能问答FAQ的底层数据基础呢?

搭建智能问答FAQ的底层数据基础是构建一个高效和准确的问答系统的关键。在这篇文章中&#xff0c;我们将探讨如何搭建智能问答FAQ的底层数据基础&#xff0c;并介绍需要注意的几个方面。 一、了解智能问答FAQ的概念和优势 智能问答FAQ是一种基于人工智能技术的问答系统&#…

Android进阶之路 - EditText输入字体自适应

遇到这么一个需求&#xff1a;“控件宽度有限&#xff0c;随着输入内容&#xff0c;动态修改字体大小”&#xff0c;如果是你&#xff0c;只如何来实现&#xff1f;又有几种方式&#xff1f; 嗯&#xff0c;就是这么一个简单的需求&#xff0c;让我记录了俩篇blog Android进阶…

二、Oracle 数据库安装集

一、CentOS 安装 OCI下载地址 1. 启动 # 1. 登录服务器&#xff0c;切换到oracle用户&#xff0c;或者以oracle用户登录 su - oracle# 2. 打开监听服务 lsnrctl start# 3. 查看Oracle监听器运行状况 lsnrctl status# 4. 以sys用户身份登录 sqlplus /nolog# 5. 切换用户conn 用…

Git笔记--Git常用命令

目录 1--git init 2--git status 3--git add 4--git rm --cached 5--git commit 6--git reflog 7--git log 8--git reset --hard 1--git init git init git init 用于初始化本地库 2--git status git status git status 用于查看本地库状态 3--git add git add file…

防关联指纹浏览器:高效地管理你的Facebook账户

Facebook&#xff0c;作为全球最受欢迎社交平台的第一名已经成为我们日常和工作中不可或缺的一部分了。不管是用于日常分享、媒体营销、还是店铺运营&#xff0c;Facebook都占据着重要的位置。多个Facebook账户的优势非常明显&#xff0c;然而&#xff0c;当你需要同时管理他们…

如何快速从逆境脱身

近期发生的新闻热点再度引发公众对稳定情绪和心理健康的关注。有时候我们遇到的最大的敌人&#xff0c;不是运气也不是能力&#xff0c;而是失控的情绪和口无遮拦的自己。如何在工作中保持稳定的情绪&#xff1f;谈谈你的看法。 方向一&#xff1a;分享工作中让你有强烈情绪波…

ChatGPT提示与技巧分享:如何作出更好的提示2023年8月

​对ChatGPT的一些酷炫技巧感兴趣吗?这里提供了一些可以帮助你充分利用ChatGPT&#xff0c;成为AI工具专家的技巧。 毫无疑问&#xff0c;ChatGPT是目前最广泛使用的人工智能工具之一。它不仅毫不留情地取代了一些特定领域常用的软件小工具&#xff08;如智能对联、经典语录生…

【从零学习python 】80.线程访问全局变量与线程安全问题

文章目录 线程访问全局变量与线程安全问题摘要技术标签同步互斥锁使用互斥锁解决卖票问题 上锁过程总结 进阶案例 线程访问全局变量与线程安全问题 摘要 本篇文章探讨了线程访问全局变量及其可能引发的安全问题。在多线程编程中&#xff0c;全局变量可以方便地在不同线程之间共…

ESP32应用教程(1)— VL53L3CX距离传感器

文章目录 前言 1 产品概述 1.1 技术规格 1.2 系统框图 1.3 设备引脚分布 2 工作流程 2.1 系统功能描述 2.2 状态机描述 2.3 测距模式说明 3 控制接口 3.1 设备地址 3.2 IC写1个字节数据 3.3 IC读1个字节数据 3.4 IC写多个字节数据 3.5 IC读多个字节数据 3.6 IC…