人事管理系统项目（二）
登录界面写好后，跳转到主页面，主页面显示一张员工信息表，所有员工信息都会显示出来，并且附带添加员工、离职员工、批量离职以及编辑员工信息等功能，这些功能后面会在后端实现，先来看前端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-table.min.css">
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
<style>
.empStatus {
display: inline-block;
width: 60px;
height: 30px;
border-radius: 2px;
text-align: center;
line-height: 30px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="my-2" style="display: flex;flex-direction: row">
<button class="btn btn-primary" id="btnAddEmp">添加新员工</button>
<button class="btn btn-danger" id="btnLeave">批量离职</button>
<div style="position:absolute;right: 30px;">
欢迎您:<span id="curAccount" class="ml-1" style="color: #8fd19e;font-weight: bold"></span>
<a href='#' id="exit" class='btn btn-outline-danger ml-2'><i class='fa fa-sign-out'></i> 退出</a>
</div>
</div>
<div class="empInfo">
<table id="empTable" class="text-center"></table>
</div>
<!--添加(编辑)员工DIV开始-->
<div id="win-add-emp" class="px-2 py-2" style="display: none">
<form id="empForm">
<div class="form-group">
<label>员工姓名</label>
<input type="text" class="form-control" name="emp_name">
</div>
<div class="form-group">
<label>性别</label>
<div class="form-control border-0">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="male" name="emp_sex" class="custom-control-input" value="1">
<label class="custom-control-label" for="male">男</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="emp_sex" id="female" class="custom-control-input" value="0">
<label class="custom-control-label" for="female">女</label>
</div>
</div>
</div>
<div class="form-group">
<label>联系电话</label>
<input type="text" class="form-control" name="emp_phone">
</div>
<div class="form-group">
<label>出生日期</label>
<input type="date" class="form-control" name="emp_birthday">
</div>
<div class="form-group">
<label>入职时间</label>
<input type="date" class="form-control" name="emp_entry_date">
</div>
<div class="form-group custom-control-inline">
<div class="custom-control custom-control-inline">
<label style="width: 80px">部门</label>
<select class="custom-select mx-2" id="dept" name="dept">
<option value="" >请选择部门</option>
</select>
</div>
<div class="custom-control custom-control-inline">
<label style="width: 80px">职位</label>
<select class="custom-select mx-2" id="post" name="post_id">
<option value="">请选择职位</option>
</select>
</div>
</div>
<div class="form-group text-center">
<button type="button" id="doAddEmp" class="btn btn-primary btn-lg btn-block" style="display: none">添加</button>
<button type="button" id="doUpdateEmp" class="btn btn-primary btn-lg btn-block" style="display: none">编辑</button>
</div>
</form>
</div>
<!--添加(编辑)员工DIV结束-->
<!--添加离职员工开始-->
<div id="win-add-leave" class="mx-3 mt-2" style="display: none">
<h2 align="center">添加离职员工信息</h2>
<form id="leaveForm">
<div class="form-group">
<label>员工姓名:</label>
<span id="emp_name"></span>
<input type="hidden" name="emp_id" id="emp_id" />
</div>
<div class="form-group">
<label>离职原因</label>
<textarea class="form-control" name="leave_reasons" rows="3"></textarea>
</div>
<div class="form-group text-center">
<button type="button" id="doAddLeave" class="btn btn-primary btn-lg btn-block">提交</button>
</div>
</form>
</div>
<!--添加离职员工结束-->
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../layer-v3.1.1/layer/layer.js"></script>
<script>
/***
* 退出按钮单击事件
*/
$("#exit").click(function(){
$.ajax({
url:'emp.do',
data:"operate=exit",
type:'get',
dataType:'JSON'
}).done(result => {
if(result.success){//成功退出
//检测cookie中是否存在账户信息，如果存在则删除
//1.从浏览器中读取Cookie信息,并解析每个cookie的name和value属性值
let cookieStr = document.cookie;
//通过";"号拆分cookie字符串获得一个字符串数组，每个元素中存放的为一个key=value的cookie字符串
let cookieArr = cookieStr.split(";");
//声明账户信息的变量
let account_name=null;
let account_password=null;
//自动登录标记，false表示不进行自动登录，true表示进行自动登录
//遍历数组
for(let cookie of cookieArr){
//使用"="号分割cookie字符串，获得cookie的name和value属性
let cookieAttrArr = cookie.trim().split("=");
//判断当前cookie的name是否为"account_name",如果是则获取该cookie的value属性值并赋值给account_name变量
if(cookieAttrArr[0] == "account_name"){
account_name = cookieAttrArr[1];
}
//判断当前cookie的name是否为"account_password",如果是则获取该cookie的value属性值并赋值给account_password变量
if(cookieAttrArr[0] == "account_password"){
account_password = cookieAttrArr[1];
}
//判断是否获得账户信息
if(account_name!=null && account_password!=null){
let time = new Date(new Date().getTime()*-1);
document.cookie="account_name="+account_name+";expires="+time+";path=/";
document.cookie="account_password="+account_password+";expires="+time+";path=/";
break;//循环退出
}
}
layer.msg(result.message, {
icon: 6,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){//此函数在弹出层关闭后自动执行
//跳转到登录页
location.href="/";
});
}else{
layer.msg(result.message, {
icon: 5,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
});
}
}).fail(error => {
});
});
getCurAccount();
/**
* 获得当前登录者的账户信息并在界面上显示
*/
function getCurAccount() {
$.ajax({
url: 'emp.do',
data: "operate=getCurAccount",
type: 'get',
dataType: 'JSON'
}).done(curAccount => {
$("#curAccount").html(curAccount.account_name);
}).fail(error => {
alert(error);
});
}
getDeptInfo();
let winLeaveIndex;//离职框
let updateWinIndex;
/********bootStrapTable数据生成开始*******/
$('#empTable').bootstrapTable({
url: 'emp.do?operate=getEmpInfo',//返回JSON数组的服务器地址,JSON数组中的数据就是表格中显示的列数据
theadClasses: 'thead-dark ',
/**
* columns中设置每列的数据
* 列标题:title属性设置
* 列数据绑定:field属性绑定列数据,field的值为json数组中对象的属性名
*/
columns: [
{
checkbox: true,
// checkboxEnabled:false
formatter: function (value, row) {
if (row.emp_status == 1) {
return {
disabled: true//设置样式为禁用状态
}
}
}
// formatter:function(value, row){
// if(row.emp_status==0){
// return "<input type='checkbox' value='"+row.emp_id+"'/>";
// }
// return "<input type='checkbox' disabled value='"+row.emp_id+"' style='cursor: no-drop;'/>";
// }
},
{
field: 'emp_id',
title: '编号'
}, {
field: 'emp_name',
title: '姓名'
}, {
field: 'emp_sex',
title: '性别',
//格式化列,参数为单元格的值
formatter: function (value) {
console.log(value);
return value == 0 ? "女" : "男";//return结果为界面显示的内容
}
}, {
field: 'emp_phone',
title: '联系电话'
}, {
field: 'emp_birthday',
title: '出生日期'
}, {
field: 'emp_entry_time',
title: '入职时间'
}, {
field: 'dept_name',
title: '部门'
}, {
field: 'post_name',
title: '职位'
}, {
field: 'emp_status',
title: '状态',
formatter: function (value) {
if (value == 0) {
return "<span class='btn-primary empStatus' >在职</span>"
} else {
return "<span class='btn-secondary empStatus'>离职</span>"
}
//return为界面上显示的内容
// return value==0?"在职":"离职";
}
}, {
title: '操作',
formatter: function (value, row, index, field) {
/* let operateStr = "<a href='' class='btn btn-outline-primary mx-2'><i class=\"fa fa-pencil\"></i> 编辑</a>";
if (row.emp_status == 0) {
operateStr += "<a href='' class='btn btn-outline-danger'><i class='fa fa-times-circle'></i> 离职</a>";
} else {
operateStr += "<a href='' id='emp_status' class='btn btn-outline-danger disabled'><i class='fa fa-times-circle'></i> 离职</a>";
}
return operateStr;*/
let link_status = "<a href='#' id='emp_status' class='btn btn-outline-danger'><i class='fa fa-times-circle'></i> 离职</a>";
if (row.emp_status == 1) {
link_status = "<a href='#' id='emp_status' class='btn btn-outline-danger disabled' ><i class='fa fa-times-circle'></i> 离职</a>";
}
return [//设置界面实现的内容
"<a href='#' class='btn btn-outline-primary mx-2' id='linkEditEmp'><i class=\"fa fa-pencil\"></i> 编辑</a>",
link_status
].join("")
},
events: {//为界面中的超链接设置单击事件
//设置员工状态的单击事件
"click #emp_status": function (e, value, row, index) {
//在界面上设置,设置要离职的员工的员工姓名
$("#emp_name").html(row.emp_name);
//为界面中的隐藏域赋值
$("#emp_id").val(row.emp_id);
winLeaveIndex = layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['550px', '350px'], //宽高
content: $("#win-add-leave")
});
// //使用ajax将员工编号传给服务端，由服务端重置员工状态
// $.ajax({
// url:'emp.do?operate=leave',
// data:'emp_id='+row.emp_id,
// type:'get',
// dataType:'json',
// }).done(result => {
// if(result.success){
// $('#empTable').bootstrapTable('refresh');
// layer.msg(result.message, {
// icon: 1,
// time: 2000 //2秒关闭（如果不配置，默认是3秒）
// });
// }
// }).fail(error=>{
// alert(error);
// });
// alert(row.emp_id);
},
/*********编辑员工连接单击事件*******/
"click #linkEditEmp":function(e, value, row, index){
//row表示当前数据行中的数据
//为员工表单中的姓名赋值
$("#empForm [name='emp_name']").val(row.emp_name);
//获得性别
let sex = row.emp_sex;
//设置性别
sex==0?$("#female").attr("checked","true"):$("#male").attr("checked","true");
//设置联系电话
$("#empForm [name='emp_phone']").val(row.emp_phone);
//设置出生日期
$("#empForm [name='emp_birthday']").val(row.emp_birthday);
//设置入职时间
$("#empForm [name='emp_entry_date']").val(row.emp_entry_time);
let empIdEle = $("#emp_id");
if(empIdEle.val().length==0){
empIdEle = $("<input type='hidden' id='emp_id' name='emp_id'/>");
//动态向表单中添加一个元素(隐藏域)
$("#empForm").append(empIdEle);
}
empIdEle.val(row.emp_id);
/***设置部门**/
//row.dept_name
//获得部门列表中的所有列表项集合
let deptOptions = $("#dept")[0].options;
let flag = false;
//遍历部门列表项集合
for(deptOption of deptOptions){
//判断当前员工的部门
if(row.dept_name==deptOption.innerHTML){
//设置当前员工所在部门为选中部门
deptOption.selected=true;
let dept_id = deptOption.value;
setPost(dept_id);//获得职位信息，使用ajax访问服务器
break;
}
}
/**设置职位**/
let postOptions = $("#post")[0].options;
for(postOption of postOptions){
console.log(row.post_name+" "+postOption.innerHTML);
if(row.post_name==postOption.innerHTML){
postOption.selected=true;
break;
}
}
/*动态生成修改按钮*/
//设置按钮的id为doUpdateEmp
/*$("#empForm button").attr("id","doUpdateEmp");
//设置按钮的显示文本
$("#empForm button").html("修改");
$("#empForm button").click(null);*/
$("#doAddEmp").css("display","none");
$("#doUpdateEmp").css("display","block");
updateWinIndex=layer.open({
type: 1,
title: '编辑员工',
skin: 'layui-layer-rim', //加上边框
area: ['500px', '650px'], //宽高
content: $("#win-add-emp")
});
}
}
}],
/******分页设置开始*********/
//当开启分页后，bootstrap会自动向服务端传递分页参数
pagination:true,//启用bootstraptable分页,设置为true在表格下方显示一个分页栏
pageSize:5,//设置每页显示的记录数，默认值为10
pageList:[5,8,10],//设置每页显示记录数的可选列表
pageNumber:1,//设置初始化页码，默认值为1
sidePagination:'server',//设置分页的方向(客户端分页,服务端分页),默认为客户端分页(client)
//当值为limit时向服务端传递的分页参数的参数名为offset,limit这两个参数来表示要查询的页码和每页的记录数
//但是我们更多的使用pageNumber和pageSize这两个参数名做为查询页码和查询记录数的名字，所以我们要把查询参数的类型
//这是为不是limit的值(可以为任意值),只要不是limit那么参数名就为pageNumber和pageSize
queryParamsType:'myParams',//查询参数类型的默认值为limit
/******分页设置结束*********/
});
/********bootStrapTable数据生成开始*******/
let addWinIndex;
/**添加员工按钮单击事件*/
$("#btnAddEmp").click(function () {
$("#empForm")[0].reset();
/*动态生成修改按钮*/
//设置按钮的id为doUpdateEmp
// $("#empForm button").attr("id","doAddEmp");
// //设置按钮的显示文本
// $("#empForm button").html("添加");
// $("#empForm button").click(null);
$("#doAddEmp").css("display","block");
$("#doUpdateEmp").css("display","none");
//获得部门信息
// getDeptInfo();
addWinIndex = layer.open({
type: 1,
title: '添加员工',
skin: 'layui-layer-rim', //加上边框
area: ['500px', '650px'], //宽高
content: $("#win-add-emp")
});
});
/**
* 获得部门信息
*/
function getDeptInfo() {
$.ajax({
url: 'dept.do',
data: 'operate=queryDeptInfo',
type: 'get',
dataType: 'json'
}).done(deptArr => {
$("#dept")[0].options.length=0;
for (dept of deptArr) {
$("#dept").append($("<option value='" + dept.dept_id + "'>" + dept.dept_name + "</option>"))
}
return true;
}).fail(error => {
alert(error);
});
}
/***
* 添加员工按钮单击事件
*/
$("#doAddEmp").click(function () {
let loadIndex = layer.load();
$.ajax({
url: 'emp.do?operate=addEmp',
data: $("#empForm").serialize(),//将表单数据以formData的格式进行封装
type: 'post',
dataType: 'json'
}).done(result => {
layer.close(loadIndex);
$('#empTable').bootstrapTable('refresh');
if (result.success) {
layer.msg(result.message, {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function () {
$("form")[0].reset();//reset()函数属于DOM中方法
layer.close(addWinIndex);
});
}
}).fail(error => {
layer.close(loadIndex);
console.log(error);
});
});
/***
* 修改员工信息
*/
$("#doUpdateEmp").click(function(){
//弹出加载条
let loadIndex = layer.load();
//向服务端发送ajax请求
$.ajax({
url:'emp.do?operate=updateEmp',//服务端地址
data:$("#empForm").serialize(),//向服务端发送的参数
type:'POST',//向服务端发送请求的方式
dataType:'JSON',//服务端返回的结果类型
}).done(result=>{
layer.close(loadIndex);
$('#empTable').bootstrapTable('refresh');
if (result.success) {
layer.msg(result.message, {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function () {
$("#empForm")[0].reset();//reset()函数属于DOM中方法
layer.close(updateWinIndex);
});
}
}).fail(error=>{
});
});
/**
* 部门列表的改变事件
*/
$("#dept").change(function(){
let dept_id = $(this).val();
setPost(dept_id);
});
function setPost(dept_id) {
$("#post").html("");
if (dept_id == "") {
$("#post").append($("<option value=''>请选择职位</option>"))
return;
}
$.ajax({
async: false,//设置当前请求为同步请求,这样服务端没有返回结果前其后的代码不执行
url: 'post.do?operate=queryPostByDept',
data: 'dept_id=' + dept_id,
type: 'get',
dataType: 'json'
}).done(postArr => {
for (post of postArr) {
$("#post").append($("<option value='" + post.post_id + "'>" + post.post_name + "</option>"));
}
}).fail(error => {
alert(error);
});
}
/**添加离职信息单击事件*/
$("#doAddLeave").click(function () {
$.ajax({
url: 'emp.do?operate=addLeave',
data: $("#leaveForm").serialize(),//将表单数据以formData的格式进行封装
type: 'post',
dataType: 'json'
}).done(result => {
if (result.success) {
//关闭离职框
layer.close(winLeaveIndex);
layer.msg(result.message, {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function () {
$("#leaveForm")[0].reset();//reset()函数属于DOM中方法
$("#emp_name").html("");//清空员工名
$('#empTable').bootstrapTable('refresh');
});
}
}).fail(error => {
alert(error);
});
});
/*批量离职按钮单击事件*/
$("#btnLeave").click(function () {
//获得选择的员工的编号
let emps = $('#empTable').bootstrapTable('getSelections');
let ids="";//该变量用于存储选中的所有id
//获得当前选中的员工对象
for (emp of emps) {
//遍历已选择的员工信息，设置界面上的员工姓名
$("#emp_name").html($("#emp_name").html() + " " + emp.emp_name)
//使用一下代码为ids赋值，可以去掉前缀"_"
if(ids.length==0){//第一次为ids赋值
ids=emp.emp_id;
}else{//第二次以后为ids赋值
ids=ids+"_"+emp.emp_id;
}
}
//将ids赋值为隐藏域emp_id组件
$("#emp_id").val(ids);
winLeaveIndex = layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['550px', '350px'], //宽高
content: $("#win-add-leave")
});
});
</script>
</body>
</html>
附加样式图片如下：
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
