失眠网 > Vue + Spring Boot 项目实战:人事管理系统——(2)员工管理页面及方法实现

Vue + Spring Boot 项目实战:人事管理系统——(2)员工管理页面及方法实现

时间：2023-12-10 06:21:47

员工信息管理目录

前言一、前端页面的编写1.编写员工管理vue页面二、后端接口的方法实现1.编写实体类2.控制层3.服务层4.Dao层5.xml编写6.页面实现总结

前言

项目登录方法已经实现了，布局已经规划好了，现在在准备员工管理页面的工作

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端页面的编写

1.编写员工管理vue页面

项目目录结构

vue布局

/* 员工信息列表页面 */<template><div class="main"><div class="container"><el-form:inline="true":model="employeeList"class="demo-form-inline"ref="searchFormRef"><el-form-item label="员工名称：" prop="name"><el-inputv-model="employeeList.name"placeholder="请输入员工名称"@clear="searchEmployee"@keyup.enter.native="searchEmployee"clearable></el-input></el-form-item><el-form-item label="所属部门：" prop="department"><el-selectv-model="employeeList.department"placeholder="请选择部门信息"><el-option label="运营部" value="运营部"></el-option><el-option label="技术部" value="技术部"></el-option></el-select></el-form-item><el-form-item label="学历：" prop="degree"><el-select v-model="employeeList.degree" placeholder="请选择学历"><el-option label="本科" value="本科"></el-option><el-option label="研究生" value="研究生"></el-option><el-option label="博士" value="博士"></el-option></el-select></el-form-item><el-form-item><el-buttontype="primary"icon="el-icon-search"size="mini"@click="searchEmployee">搜索</el-button></el-form-item><el-form-item><el-buttontype="info"icon="el-icon-refresh-left"size="mini"plain@click="resetserchForm">重置</el-button></el-form-item><div class="btn_form"><el-form-item class="btn"><el-buttontype="primary"icon="el-icon-plus"size="mini"plain@click="addDialogVisible = true">添加</el-button></el-form-item><el-form-item><el-buttontype="success"icon="el-icon-edit"size="mini"plaindisabled>修改</el-button></el-form-item><el-form-item><el-buttontype="danger"icon="el-icon-delete"size="mini"plaindisabled>删除</el-button></el-form-item><el-form-item><el-button type="warning" icon="el-icon-download" size="mini" plain>导出</el-button></el-form-item></div></el-form></div><el-table:data="employeeList"style="width: 100%":header-cell-style="{ background: '#5ab7c4', color: '#fff' }"><el-table-column type="selection" width="55"> </el-table-column><el-table-column type="index" label="工号"></el-table-column><el-table-columnlabel="员工"prop="name"min-width="10%"align="center"></el-table-column><el-table-column label="性别" prop="sex" min-width="5%"></el-table-column><el-table-column label="年龄" prop="age" min-width="5%"></el-table-column><el-table-columnlabel="生日"prop="birthday"min-width="10%"align="center":formatter="dateFormat"></el-table-column><el-table-columnlabel="部门"prop="department"min-width="10%"align="center"></el-table-column><el-table-columnlabel="员工状态"prop="state"min-width="5%"align="center"><template slot-scope="scope"><el-tageffect="light":type="scope.row.state == '在职'? 'success': scope.row.state == '实习'? 'primary': 'danger'">{{ scope.row.state }}</el-tag></template></el-table-column><el-table-columnlabel="学历"prop="degree"min-width="10%"align="center"></el-table-column><el-table-column label="操作" min-width="20%" align="center"><template slot-scope="scope"><el-tooltipeffect="dark"content="修改信息"placement="top-start":enterable="false"><el-buttontype="primary"icon="el-icon-edit"size="mini"@click="showEditDialog(scope.row.id)"></el-button></el-tooltip><el-tooltipeffect="dark"content="删除员工"placement="top-start":enterable="false"><el-buttontype="danger"icon="el-icon-delete"size="mini"@click="handleDel(scope.row.id, scope.row)"></el-button></el-tooltip></template></el-table-column></el-table><div class="block" style="text-align: center; margin-top: 15px"><div><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="fromData.pageIndex":page-sizes="pageInfo.pageSizes":page-size="fromData.pageSize"layout="total, sizes, prev, pager, next, jumper":total="pageInfo.total"></el-pagination></div></div><el-dialogcentertitle="添加员工":visible.sync="addDialogVisible"width="40%"@close="addDialogClosed"><el-form:model="addEmployeeInfo":rules="AddFormRules"ref="addFormRef"label-width="80px"><el-form-item label="员工名" prop="name"><el-input v-model="addEmployeeInfo.name"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="addEmployeeInfo.age"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-select v-model="addEmployeeInfo.sex"><el-optionv-for="item in addEmployeeSexOptions":label="item.sex":key="item.gender":value="item.sex"></el-option></el-select></el-form-item><el-form-item label="身份" prop="state"><el-select v-model="addEmployeeInfo.state"><el-optionv-for="item in addEmployeeStateOptions":label="item.state":key="item.stateName":value="item.state"></el-option></el-select></el-form-item><el-form-item label="生日" prop="birthday"><el-date-pickerv-model="addEmployeeInfo.birthday"type="date"placeholder="选择日期"value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></el-form-item><el-form-item label="部门" prop="department"><el-select v-model="addEmployeeInfo.department"><el-option:label="item.dept"v-for="item in addEmployeeDepartOptions":key="item.deptName":value="item.dept"></el-option></el-select></el-form-item><el-form-item label="学历" prop="degree"><el-select v-model="addEmployeeInfo.degree"><el-option:label="item.degree"v-for="item in addEmployeeDegreeOptions":key="item.degreeName":value="item.degree"></el-option></el-select></el-form-item><el-form-item label="薪水" prop="degree"><el-input v-model="addEmployeeInfo.salary"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="doAddEmployee">确定</el-button></span></el-dialog><el-dialogcentertitle="修改员工信息":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><el-form:model="editForm":rules="editFormRules"ref="editFormRef"label-width="70px"><el-form-item label="员工" prop="name"><el-input v-model="editForm.name" disabled></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="editForm.age"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-input v-model="editForm.sex"></el-input></el-form-item><el-form-item label="身份" prop="state"><el-input v-model="editForm.state"></el-input></el-form-item><el-form-item label="生日" prop="birthday"><el-input v-model="editForm.birthday"></el-input></el-form-item><el-form-item label="部门" prop="department"><el-input v-model="editForm.department" disabled></el-input></el-form-item><el-form-item label="学历" prop="degree"><el-input v-model="editForm.degree"></el-input></el-form-item><el-form-item label="薪水" prop="salary" disabled><el-input v-model="editForm.salary" disabled></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取消</el-button><el-button type="primary" @click="doModifyEmployee">确定</el-button></span></el-dialog></div></template>

style样式

方法实现

methods: {//获取所有员工信息，显示在列表中async getEmployeeList() {const { data: res } = await this.$http.get("http://localhost:9005/sys/employee/list", //调用后端的接口方法{params: this.fromData,});// const { data: res } = await this.$http.get(// "http://localhost:9005/sys/employee/list"用9005端口放问//添加 params: this.fromData后，解决了切换数据失败// );if (res.code != 200) {this.$message.error("获取信息失败");}this.employeeList = res.data.list; //获取所有员工信息this.pageInfo.total = res.data.total; //获得统计后的员工总数},/* 重置表单信息，将数据置空 */resetserchForm() {this.$message.success("重置表单信息成功"); //显示重置成功的信息this.$refs.searchFormRef.resetFields(); //重置对话框数据},//时间进行格式化输出，格式化为xx-xx-xx-xx-xx-xxdateFormat: function (row) {const dateStr = row.birthday; //获得当前row的值if (dateStr != null) {let date = new Date(row.birthday); //实例化一个date对象let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? "0" + MM : MM;let d = date.getDate();d = d < 10 ? "0" + d : d;let h = date.getHours();h = h < 10 ? "0" + h : h;let m = date.getMinutes();m = m < 10 ? "0" + m : m;let s = date.getSeconds();s = s < 10 ? "0" + s : s;return y + "-" + MM + "-" + d + " " + h + ":" + m;}},//修改员工信息显示对话框，根据员工id的值获得修改信息async showEditDialog(id) {const { data: res } = await this.$http.get("http://localhost:9005/sys/employee/getInfo?id=" + id);this.editForm = res.data; //查询到的员工信息存放在editform中this.editDialogVisible = true; //将对话框设为true},//修改员工信息方法,已实现--04.20doModifyEmployee() {this.$refs.editFormRef.validate(async (valid) => {if (!valid) return;const { data: res } = await this.$http.put("http://localhost:9005/sys/employee/update",this.editForm);if (res.code != 200 && res.success != "success") {return this.$message.error("修改失败！！！");}this.$message.success("修改员工信息成功");this.editDialogVisible = false;this.getEmployeeList(); //重新获得员工列表信息});},//对数据修改后关闭对话框editDialogClosed() {this.$refs.editFormRef.resetFields(); //重置对框框区域信息},//模糊查询方法searchEmployee() {this.getEmployeeList(); //调用获得所有员工信息方法this.$message.success("查询成功");},//添加用户的方法 --04.21，bug改好！doAddEmployee() {var $that = this;this.$refs.addFormRef.validate(async (valid) => {if (!valid) return;const { data: res } = await this.$http.post("http://localhost:9005/sys/employee/add", //调用后端api接口this.addEmployeeInfo);if (res.code != 200 && res.success != "success") {//通过post请求调用后台addUser的api接口，并把参数存放在addForm里面return this.$message.error("添加员工失败"); //如果失败，则返回错误信息}this.$message.success("添加员工成功");this.addDialogVisible = false; //将对话框消失this.getEmployeeList(); //需要多次调用获取员工列表方法，显示数据});},//监听添加用户的操作，添加完成后退出对话框addDialogClosed() {this.$refs.addFormRef.resetFields(); //对新增员工对话框进行重置},//删除员工的方法，根据index索引进行删除 --04.20有个小bug，已改好！async handleDel(id, row) {//定义一个对话款信息，确认是否删除信息const confirmResult = await this.$confirm("此操作将会删除员工 : " + row.name + " 是否继续", //获得row.name的值 */"提示",{confirmButtonText: "确定", // 确认则执行删除的方法 */confirmButtonText: "取消", // 取消则显示取消删除type: "warning",center: true, //将位置设置在中心}).catch((err) => err);if (confirmResult != "confirm") {return this.$message.info("已取消删除的操作"); //若点击取消删除的按钮，则显示message的提示信息}const { data: res } = await this.$http.delete("http://localhost:9005/sys/employee/del?id=" + id //调用后端删除员工方法的api，idnex的值当前选择删除的行数，为并获得一个返回码);/* 如果后端返回的数据码不等于200或者状态为失败，则显示删除失败 */if (res.code != 200 && res.success != "success") {return this.$message.error("删除员工 : " + row.name + "操作失败");}this.$message.success("删除员工 : " + row.name + "操作成功");this.getEmployeeList(); //重新刷新数据},//每页显示的条目个数的1改变handleSizeChange(val) {this.fromData.pageSize = val; //重新对每页显示条数进行更改this.getEmployeeList(); //重新获得列表的值},//当前页数的改变handleCurrentChange(val) {this.fromData.pageIndex = val; //对当前页数进行更改this.getEmployeeList(); //重新获得员工列表的值},},};

二、后端接口的方法实现

1.编写实体类

@Data@ToString@AllArgsConstructor@NoArgsConstructorpublic class Employee {private Integer id;//员工idprivate String name;//员工姓名private String sex;//性别private Date birthday;//员工生日private String department;//员工部门private Integer age;//员工年龄private String state;//员工工作状态private Integer salary;//员工薪水private String degree;//员工学历private String status;//考勤状态private Date worktime;//考勤时间}

2.控制层

/*** @author kk* @version 1.0* @date /4/16 15:46* 员工管理服务控制层*/@RestController@RequestMapping(value = "/sys/employee")//统一访问路径public class EmployeeController {@ResourceEmployeeService employeeService;@Resourceprivate RedisManager redisManager;//获取所有的员工信息@RequestMapping(value = "/list")public ObjectResult <PageInfo<Employee>> getAllEmployee(@RequestParam(value = "name",required = false)String name,@RequestParam(value = "pageIndex",required = false,defaultValue = "1")Integer pageIndex,@RequestParam(value = "pageSize",required = false,defaultValue = "10") Integer pageSize){PageInfo<Employee> pageInfo = employeeService.list(name,pageIndex,pageSize);return ResultUtil.okObjectResult(pageInfo);}//在前端通过发送员工id查询到员工消息，并将查询到的数据返回给前端@RequestMapping(value = "/getInfo")public ObjectResult<Employee> getById(@RequestParam("id")Integer id) {Employee employee = employeeService.findById(id);return ResultUtil.okObjectResult(employee);}//添加员工方法，调用服务层的方法，使用工具类返回json格式，接口为/sys/employee/add@RequestMapping(value = "/add")public ObjectResult addEmployee(@RequestBody Employee employee,@RequestHeader(value = "token") String accessToken){if (redisManager.hasKey(accessToken)){//当前登录的人User user = (User) redisManager.get(accessToken);int count = employeeService.addEmployee(employee);return ResultUtil.okObjectResult(count);}//未认证return ResultUtil.unauthorizedResult();}//更新员工信息方法，接口为/sys/employee/update@RequestMapping(value = "/update")public ObjectResult updateEmployee(@RequestBody Employee employee,@RequestHeader(value = "token") String accessToken){if (redisManager.hasKey(accessToken)){//当前登录的人User user = (User) redisManager.get(accessToken);int count = employeeService.updateEmployee(employee);return ResultUtil.okObjectResult(count);}//未认证return ResultUtil.unauthorizedResult();}//删除员工方法，根据id号来执行删除,接口为/sys/employee/del@RequestMapping(value = "/del")public ObjectResult deleteEmployee(@RequestParam(value = "id") Integer id) {System.out.println("删除员工"+id+"成功");return ResultUtil.okObjectResult(employeeService.deleteEmployee(id));}//}

3.服务层

/*** @author kk* @version 1.0* @date /4/16 15:30*/@Servicepublic interface EmployeeService {/*** 条件查询* @param name* @param pageIndex 页码* @param pageSize 每页条数* @return*/PageInfo<Employee> list(String name, Integer pageIndex, Integer pageSize);int addEmployee(Employee employee);int updateEmployee(Employee employee);int deleteEmployee(Integer id);Employee findById(Integer id);}

4.Dao层

/*** @author kk* @version 1.0* @date /4/16 15:22*/@Mapper@Repositorypublic interface EmployeeMapper {List<Employee> getAllEmployee(@Param("name") String name);//获得所有员工信息int updateEmployee(Employee employee);//修改员工信息方法int addEmployee(Employee employee);//添加员工信息方法int deleteEmployee(@Param("id") Integer id);//根据员工id删除Employee getById(@Param("id")Integer id);//根据员工id查询信息，并将数据返回给前端}

5.xml编写

各个方法对应的id值是mapper层的方法名，一对一进行映射

<mapper namespace="com.jk4.employeeserver.dao.EmployeeMapper"><select id="getAllEmployee" resultType="Employee">SELECT * FROM employee_info<trim prefix="WHERE" prefixOverrides="and|or"><if test="name!=null and name!=''">where name LIKE #{name}</if></trim></select><insert id="addEmployee" parameterType="Employee">INSERT INTO `employee_info`(`name`, `sex`,`birthday`,`age`,`department`,`state`,`salary`,`degree`)VALUES (#{name},#{sex},#{birthday},#{age},#{department},#{state},#{salary},#{degree})</insert><delete id="deleteEmployee">delete from employee_info where id=#{id}</delete><update id="updateEmployee" parameterType="Employee">UPDATE`employee_info`<trim prefix="SET" suffixOverrides=","><if test="name!=null and name!=''">`name` = #{name},</if><if test="sex!=null and sex!=''">`sex` = #{sex},</if><if test="birthday!=null">`birthday` = #{birthday},</if><if test="age!=null and age!=''">`age` = #{age},</if><if test="department!=null and department!=''">`department` = #{department},</if><if test="state!=null and state!=''">`state` = #{state},</if><if test="salary!=null and salary!=''">`salary` = #{salary},</if><if test="degree!=null and degree!=''">`degree` = #{degree},</if></trim>WHERE id = #{id}</update><select id="getById" resultType="Employee">SELECT * FROM employee_info WHERE id=#{id}</select></mapper>