前言
项目登录方法已经实现了，布局已经规划好了，现在在准备员工管理页面的工作
提示：以下是本篇文章正文内容，下面案例可供参考
一、前端页面的编写
1.编写员工管理vue页面
项目目录结构
vue布局
/* 员工信息列表页面 */
<template>
<!-- 主体div -->
<div class="main">
<!-- 上半部分主体div -->
<div class="container">
<!-- 搜索表单区域 -->
<el-form
:inline="true"
:model="employeeList"
class="demo-form-inline"
ref="searchFormRef"
>
<!-- 表单项 prop的值要和input对象绑定的值一致 -->
<el-form-item label="员工名称：" prop="name">
<el-input
v-model="employeeList.name"
placeholder="请输入员工名称"
@clear="searchEmployee"
@keyup.enter.native="searchEmployee"
clearable
></el-input>
</el-form-item>
<el-form-item label="所属部门：" prop="department">
<!-- 选择菜单 -->
<el-select
v-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="value2">
<el-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions"
>
</el-date-picker>
</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-button
type="primary"
icon="el-icon-search"
size="mini"
@click="searchEmployee"
>搜索</el-button
>
</el-form-item>
<!-- 实现对表单输入的数据进行重置 -->
<el-form-item>
<el-button
type="info"
icon="el-icon-refresh-left"
size="mini"
plain
@click="resetserchForm"
>重置</el-button
>
</el-form-item>
<!-- 表单下方四个按钮控件，添加到div布局中，设置布局大小，边框 -->
<div class="btn_form">
<el-form-item class="btn">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
plain
@click="addDialogVisible = true"
>添加</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="success"
icon="el-icon-edit"
size="mini"
plain
disabled
>修改</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
plain
disabled
>删除</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>
<!-- 员工列表 ,border为边框，stripe隔行变色,显示员工信息 -->
<el-table
:data="employeeList"
style="width: 100%"
:header-cell-style="{ background: '#5ab7c4', color: '#fff' }"
><!-- 给table表头设置背景颜色 backgorud:背景颜色 color：字体颜色-->
<el-table-column type="selection" width="55"> </el-table-column
><!-- 在首列添加可选择的按钮 -->
<el-table-column type="index" label="工号"></el-table-column>
<el-table-column
label="员工"
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-column
label="生日"
prop="birthday"
min-width="10%"
align="center"
:formatter="dateFormat"
>
</el-table-column>
<el-table-column
label="部门"
prop="department"
min-width="10%"
align="center"
></el-table-column>
<el-table-column
label="员工状态"
prop="state"
min-width="5%"
align="center"
>
<!-- tag标签，采用嵌套三元表达式的方法，判断员工的状态，动态显示颜色 -->
<template slot-scope="scope">
<!-- 若状态为‘在职’，则显示success， 若不是则执行后面的嵌套层 -->
<el-tag
effect="light"
:type="
scope.row.state == '在职'
? 'success'
: scope.row.state == '实习'
? 'primary'
: 'danger'
"
>
{
{ scope.row.state }}</el-tag
>
</template>
</el-table-column>
<el-table-column
label="学历"
prop="degree"
min-width="10%"
align="center"
>
</el-table-column>
<el-table-column label="操作" min-width="20%" align="center">
<template slot-scope="scope">
<!-- 修改员工信息方法 参数为：row行数的id -->
<el-tooltip
effect="dark"
content="修改信息"
placement="top-start"
:enterable="false"
><!--文字提示 enterable 隐藏-->
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDialog(scope.row.id)"
></el-button>
</el-tooltip>
<!-- 后期需要修改一下，将按钮disabled，演示模式下不能进行删除操作 -->
<el-tooltip
effect="dark"
content="删除员工"
placement="top-start"
:enterable="false"
><!--文字提示 enterable 隐藏-->
<!-- 删除员工信息方法 参数为行数row行数id，row行数 -->
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="handleDel(scope.row.id, scope.row)"
></el-button>
</el-tooltip>
</template>
</el-table-column>
<!-- 索引列 -->
</el-table>
<!-- 分页组件 size-change:每页最大变化 current-change：当前页数变化 layout：功能组件
之前不能实现切换的bug改好~！-->
<div class="block" style="text-align: center; margin-top: 15px">
<div>
<el-pagination
background
@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"
>
<!-- @size-change：每页显示条数个数点击事件，当切换时动态的切换每页显示的条数
@current-change：当前页数点击事件
current-page:当前页码，默认为第一页
page-sizes：在页面可选择的页码数[1,10,20,50]
page-size：每页显示的条数，可以动态的修改
total：显示的是从后端获得数据的总数 -->
</el-pagination>
</div>
</div>
<!-- 新增员工区域 -->
<el-dialog
center
title="添加员工"
:visible.sync="addDialogVisible"
width="40%"
@close="addDialogClosed"
>
<!-- model:双向绑定模型， rules:绑定添加员工的规则 -->
<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-option
v-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-option
v-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-picker
v-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-dialog
center
title="修改员工信息"
: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样式
<style Lang="less" scoped>
/* 设置主体布局样式 */
.container {
font-size: 14px; /* 设置文字大小 */
color: #606266; /* 设置颜色样式 */
}
/* 设置全局文字格式 */
textarea {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
/* el-form表单三个按钮样式，缩小与表单之间的间隔 */
.btn_form {
height: 34px; /* 设置div的高度 */
padding: 5px 0px; /* 设置内边距 */
}
el-form {
border-radius: 50px;
}
</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-xx
dateFormat: 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.20
doModifyEmployee() {
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
@NoArgsConstructor
public class Employee {
private Integer id;//员工id
private 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 2021/4/16 15:46
* 员工管理服务控制层
*/
@RestController
@RequestMapping(value = "/sys/employee")//统一访问路径
public class EmployeeController {
@Resource
EmployeeService employeeService;
@Resource
private 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 2021/4/16 15:30
*/
@Service
public 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 2021/4/16 15:22
*/
@Mapper
@Repository
public 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>
<!--根据员工id删除信息-->
<delete id="deleteEmployee">
delete from employee_info where id=#{id}
</delete>
<!--根据员工id更改信息-->
<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>
6.页面实现
总结
功能基本上已经实现了，但是一些小的细节还需要优化，加油吧！
此外搜索功能还没实现，需要在完善这个细节。