<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工页面</title>
<style>
.form {
width: 600px;
margin: 0 auto;
/*border: 1px solid red;*/
}
.form table {
margin: 0 auto;
}
.form table tr td {
width: 100px;
height: 30px;
border: 1px solid #000;
text-align: center;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="text-align: center">员工系统</h1>
<script>
// 获取URL中的用户名参数
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log(username);
</script>
<div class="form">
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>编号</th>
<th>功能</th>
</tr>
<tr>
<td>1</td>
<td>
<button id="select">查看个人信息</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="update">修改信息</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="update2">修改个人密码</button>
</td>
</tr>
<tr>
<td>4</td>
<td>
<button id="daily">日常考勤</button>
</td>
</tr>
<tr>
<td>5</td>
<td>
<button id="low">员工请假记录</button>
</td>
</tr>
</table>
</div>
</body>
<script>
document.getElementById("select").addEventListener("click", function () {
window.location.href = "select.html?username=" + encodeURIComponent(username);
});
document.getElementById('update').addEventListener('click', function () {
window.location.href = "../ROOT/update2.html?username=" + encodeURIComponent(username);
});
document.getElementById("update2").addEventListener("click", function () {
window.location.href = "update1.html?username=" + encodeURIComponent(username);
});
document.getElementById('daily').addEventListener('click', function () {
window.location.href = "daily.html?username=" + encodeURIComponent(username);
});
document.getElementById("low").addEventListener("click", function () {
window.location.href = "low.html?username=" + encodeURIComponent(username);
});
</script>
</html>
daily.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>考勤管理</title>
<style>
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.centered-form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bordered-form {
border: 2px solid #000; /* 边框样式 */
padding: 20px; /* 可选的内边距 */
background-color: #f0f0f0; /* 可选的背景颜色 */
}
</style>
</head>
<body>
<script>
function getShanghaiTime() {
var options = {timeZone: 'Asia/Shanghai'};
return new Date().toLocaleString('en-US', options);
}
function formatDate(dateString) {
var date = new Date(dateString);
var hours = date.getHours();
var minutes = date.getMinutes();
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +
hours + ":" + minutes;
}
function checkIn() {
var attendanceTime = getShanghaiTime();
var currentTime = new Date(attendanceTime);
var hours = currentTime.getHours();
if (hours >= 8 && hours < 9) {
alert("打卡成功，已上班");
document.getElementById("status").innerHTML = "已上班";
document.getElementById("attendanceTime").innerHTML = "考勤时间：" + formatDate(attendanceTime);
deal1(0, attendanceTime);
} else {
alert("已过上班打卡时间点，打卡无效");
}
}
function checkOut() {
var attendanceTime = getShanghaiTime();
var currentTime = new Date(attendanceTime);
var hours = currentTime.getHours();
if (hours >= 17) {
alert("打卡成功，已下班");
document.getElementById("status").innerHTML = "已下班";
document.getElementById("attendanceTime").innerHTML = "考勤时间：" + formatDate(attendanceTime);
deal1(1, formatDate(attendanceTime));
console.log(formatDate(attendanceTime));
} else {
alert("未到下班打卡时间点，打卡无效");
}
}
function deal1(type,attendanceTime)
{
const requestUrl = `http://localhost:8080/staff/count`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
deal(data+1,type,attendanceTime);
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
function deal(count,type, attendanceTime) {
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('username');
console.log(id);
const requestUrl = `http://localhost:8080/user/selectById/${id}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
add(count,data.data, type, attendanceTime);
} else {
alert("查询失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
function add(count,data, type, attendanceTime) {
const requestUrl = `http://localhost:8080/staff/add`;
fetch(requestUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id:count,
attendanceTime: attendanceTime,
jobID: data.jobID,
name: data.name,
sex: data.sex,
department: data.department,
attendanceType: type
})
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
alert("打卡信息已添加");
console.log(data);
} else {
alert("修改失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<div class="centered-form">
<div class="bordered-form">
<h2>日常考勤管理</h2>
<br>
<br>
<p id="attendanceTime"></p>
<button onclick="checkIn()" style="display: block; margin: 0 auto;">上班</button>
<br>
<br>
<button onclick="checkOut()" style="display: block; margin: 0 auto;">下班</button>
<p id="status">考勤状态未知</p>
</div>
</div>
</body>
</html>
low.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请假申请</title>
<style>
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.centered-form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bordered-form {
border: 2px solid #000; /* 边框样式 */
padding: 20px; /* 可选的内边距 */
background-color: #f0f0f0; /* 可选的背景颜色 */
}
</style>
</head>
<body>
<div class="centered-form">
<div class="bordered-form">
<h1>请假申请</h1>
<form id="leaveForm">
<label for="startDate">开始时间:</label>
<input type="date" id="startDate" required><br>
<label for="endDate">结束时间:</label>
<input type="date" id="endDate" required><br>
<label for="leaveType">请假类型:</label>
<select id="leaveType" required>
<option value="病假">病假</option>
<option value="事假">事假</option>
</select><br>
<label for="reason">请假原因:</label>
<textarea id="reason" required></textarea><br>
<button type="button" onclick="submitLeave()" style="display: block; margin: 0 auto;">提交</button>
</form>
</div>
</div>
<script>
function submitLeave() {
// Get form data
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
var leaveType = document.getElementById('leaveType').value;
var reason = document.getElementById('reason').value;
const requestUrl = `http://localhost:8080/staff/count`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
deal(data + 1, startDate, endDate, leaveType, reason);
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function deal(count, startDate, endDate, leaveType, reason) {
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('username');
console.log(id);
const requestUrl = `http://localhost:8080/user/selectById/${id}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
add(count, data.data, startDate, endDate, leaveType, reason);
} else {
alert("查询失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function add(count, data, startDate, endDate, leaveType, reason) {
let s;
if (leaveType === "事假") {
s = 2;
} else if (leaveType === "病假") {
s = 3;
}
// Convert start and end dates to JavaScript Date objects
const start = new Date(startDate);
const end = new Date(endDate);
// Iterate through the date range
while (start <= end) {
var leaveRequest = {
id: count++,
jobID: data.jobID,
name: data.name,
sex: data.sex,
attendanceTime: start.toISOString().split('T')[0], // Format date as YYYY-MM-DD
department: data.department,
attendanceType: s,
notes: reason,
approvedType: 0,
};
// Send a separate request for each day
const requestUrl = `http://localhost:8080/staff/add`;
fetch(requestUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(leaveRequest),
})
.then(response => response.json())
.then(data => {
console.log(`Leave record for ${start.toISOString().split('T')[0]} created`);
})
.catch(error => {
console.error('Error:', error);
});
// Move to the next day
start.setDate(start.getDate() + 1);
}
alert("请假成功，请等待审批");
}
</script>
</body>
</html>
select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询个人信息</title>
</head>
<body>
<div id="container">
</div>
</body>
<script>
// 获取URL中的用户名参数
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('username');
console.log(id);
const requestUrl = `http://localhost:8080/user/selectById/${id}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
generateTable(data.data);
} else {
alert("查询失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generateTable(data) {
const tableContainer = document.getElementById("container");
// 清空 tableContainer 中的所有子节点
while (tableContainer.hasChildNodes()) {
tableContainer.removeChild(tableContainer.firstChild);
}
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
let row = document.createElement("tr");
row.innerHTML = '<td>工号</td><td>姓名</td><td>性别</td><td>出生日期</td><td>部门</td><td>角色</td><td>密码</td>';
tableBody.appendChild(row);
row = document.createElement("tr");
row.innerHTML = `<td>${data.jobID}</td><td>${data.name}</td><td>${data.sex}</td><td>${data.birthday}</td><td>${data.department}</td><td>${data.role}</td><td>${data.password}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
</script>
</html>
update1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改密码</title>
<style>
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.centered-form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bordered-form {
border: 2px solid #000; /* 边框样式 */
padding: 20px; /* 可选的内边距 */
background-color: #f0f0f0; /* 可选的背景颜色 */
}
</style>
</head>
<body>
<h1 style="text-align: center">修改密码</h1>
<div class="centered-form">
<div class="bordered-form">
<label for="old">旧密码</label>
<input type="text" id="old" required>
<br>
<label for="new1">新密码</label>
<input type="text" id="new1" required>
<br>
<label for="new2">确认新密码</label>
<input type="text" id="new2" required>
<div id="match"></div>
<br>
<button id="update" style="display: block; margin: 0 auto;">更改密码</button>
</div>
</div>
</body>
<script>
const newPassword1 = document.getElementById("new1");
const newPassword2 = document.getElementById("new2");
const passwordMatchMessage = document.getElementById("match");
function checkPasswordMatch() {
const password1 = newPassword1.value;
const password2 = newPassword2.value;
if (password1 === password2) {
passwordMatchMessage.textContent = "两次密码一致";
passwordMatchMessage.style.color = "green";
} else {
passwordMatchMessage.textContent = "两次密码不一致";
passwordMatchMessage.style.color = "red";
}
}
newPassword1.addEventListener("input", checkPasswordMatch);
newPassword2.addEventListener("input", checkPasswordMatch);
</script>
<script>
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('username');
console.log("用户名为:" + id);
document.getElementById('update').addEventListener('click', function () {
const requestUrl = `http://localhost:8080/user/selectById/${id}`;
fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
deal(data.data);
} else {
alert("此结果不存在");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
})
</script>
<script>
function deal(data) {
const old = document.getElementById('old').value;
const new1 = document.getElementById('new1').value;
const new2 = document.getElementById('new2').value;
const password = data.password;
console.log("密码为 " + password);
if (old !== password) {
alert("您输入的旧密码有误");
} else if (old !== password && new1 !== new2) {
alert("输入的两次密码不一致");
} else if (old === password && new1 === new2) {
const requestUrl = `http://localhost:8080/user/update/${id}/${new1}`;
fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
alert("修改成功,请您重新登陆");
window.location.href = "http://localhost:8080/index.html";
} else {
alert("修改失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
}
</script>
</html>
浙公网安备 33010602011771号