11.28
今天实现职员的功能。
staff.html
<!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>
