1.29
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="centered-form">
<div class="bordered-form">
<h1>用户登录</h1>
<form id="login">
<label for="username">用户名:</label><input type="text" id="username">
<br>
<label for="password">密码:</label><input type="password" id="password">
<br>
<div class="centered-buttons">
<button type="submit" style="display: block; margin: 0 auto;">登录</button>
</div>
</form>
</div>
</div>
</body>
<script>
document.getElementById("login").addEventListener("submit", function (event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const url = `user/getByUser?username=${username}&password=${password}`;
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
let l=data.data.position;
if (l === '职员') {
window.location.href = "STAFF/staff.html?username=" + encodeURIComponent(username);
} else if (l === '部门经理') {
window.location.href = "MANAGE/manage.html?username=" + encodeURIComponent(username);
} else if (l === '总经理') {
window.location.href = "GENERAL/general.html?username=" + encodeURIComponent(username);
} else if (l === '财务人员') {
window.location.href = "FINANCIAL/financial.html?username=" + encodeURIComponent(username);
}
} else {
alert("登录失败");
console.log(data);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
</html>
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>审批</title>
</head>
<body>
<h1 style="text-align: center">查询</h1>
<!--边框居中-->
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<div id="container">
</div>
</div>
</div>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log("用户名为:" + username);
const requestU = `http://localhost:8080/user/getName/${username}`;
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data.data.userName);
g2(data.data.department);
} else {
alert("未查询到此教师信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function g2(data)
{
console.log(data);
const requestU = `http://localhost:8080/user/Select1/${data}`;
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
generate(data.data);
} else {
alert("未查询到此信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function generate(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>';
tableBody.appendChild(row);
// 查询方式是按姓名查询或多条查询
for (let i = 0; i < data.length; i++) {
let s;
row = document.createElement("tr");
row.innerHTML = `<td>${data[i].id}</td><td>${data[i].departureDate}</td><td>${data[i].reason}</td><td>${data[i].state}</td><td>${data[i].stateReason}</td><td><button class="approveButton">审批通过</button></td><td><button class="rejectButton">审批不通过</button></td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
</script>
<script>
function updateStateInDatabase(id,state)
{
const requestUrl = `http://localhost:8080/user/updateById/${id}/${state}`;
fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
alert("审核成功")
} else {
alert("审核失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
const tableContainer = document.getElementById("container");
tableContainer.addEventListener("click", function (event) {
// 获取到点击事件的目标元素
let target = event.target;
// 向上遍历DOM树，找到具有相应类名的祖先元素
while (target !== tableContainer && ![...target.classList].some(className => ["approveButton", "rejectButton"].includes(className))) {
target = target.parentNode;
}
if (target.classList.contains("approveButton")) {
// 点击了"审批通过"按钮
const row = target.closest("tr");
const stuId = row.querySelector("td:first-child").textContent;
updateStateInDatabase(stuId,"通过");
// display(); // 重新显示数据
} else if (target.classList.contains("rejectButton")) {
// 点击了"审批不通过"按钮
const row = target.closest("tr");
const stuId = row.querySelector("td:first-child").textContent;
updateStateInDatabase(stuId, "返回");
}
});
</script>
</html>
2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>审批</title>
</head>
<body>
<h1 style="text-align: center">查询</h1>
<!--边框居中-->
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<div id="container">
</div>
</div>
</div>
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log("用户名为:" + username);
const requestU = `http://localhost:8080/user/getName/${username}`;
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
console.log(data.data.userName);
g2(data.data.department);
} else {
alert("未查询到此教师信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function g2(data)
{
console.log(data);
const requestU = `http://localhost:8080/user/Select1/${data}`;
fetch(requestU,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
generate(data.data);
} else {
alert("未查询到此信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
function generate(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>';
tableBody.appendChild(row);
// 查询方式是按姓名查询或多条查询
for (let i = 0; i < data.length; i++) {
let s;
row = document.createElement("tr");
row.innerHTML = `<td>${data[i].id}</td><td>${data[i].departureDate}</td><td>${data[i].reason}</td><td>${data[i].schedule}</td><td>${data[i].scheduleReason}</td><td><button class="approveButton">审批通过</button></td><td><button class="rejectButton">审批不通过</button></td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
</script>
<script>
function updateStateInDatabase(id,state)
{
const requestUrl = `http://localhost:8080/user/updateById2/${id}/${state}`;
fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
alert("审核成功")
} else {
alert("审核失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<script>
const tableContainer = document.getElementById("container");
tableContainer.addEventListener("click", function (event) {
// 获取到点击事件的目标元素
let target = event.target;
// 向上遍历DOM树，找到具有相应类名的祖先元素
while (target !== tableContainer && ![...target.classList].some(className => ["approveButton", "rejectButton"].includes(className))) {
target = target.parentNode;
}
if (target.classList.contains("approveButton")) {
// 点击了"审批通过"按钮
const row = target.closest("tr");
const stuId = row.querySelector("td:first-child").textContent;
updateStateInDatabase(stuId,"通过");
// display(); // 重新显示数据
} else if (target.classList.contains("rejectButton")) {
// 点击了"审批不通过"按钮
const row = target.closest("tr");
const stuId = row.querySelector("td:first-child").textContent;
updateStateInDatabase(stuId, "返回");
}
});
</script>
</html>
manage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息管理系统</title>
<link rel="stylesheet" href="../Style.css">
</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="insert1">审批出差申请</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="update1">审批差旅费报销</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="delete">查询差旅费花费情况</button>
</td>
</tr>
<tr>
<td>4</td>
<td>
<button id="pay">出差申请</button>
</td>
</tr>
<tr>
<td>5</td>
<td>
<button id="update2">报销差旅费</button>
</td>
</tr>
<tr>
<td>6</td>
<td>
<button id="select1">查看出差申请</button>
</td>
</tr>
<tr>
<td>7</td>
<td>
<button id="select2">查看报销进度</button>
</td>
</tr>
</table>
</div>
</body>
<script>
document.getElementById("insert1").addEventListener("click", function () {
window.location.href = "1.html?username=" + encodeURIComponent(username);
});
document.getElementById('update1').addEventListener('click', function () {
window.location.href = "2.html?username=" + encodeURIComponent(username);
})
document.getElementById("delete").addEventListener("click", function () {
window.location.href = "delete.html?username=" + encodeURIComponent(username);
});
document.getElementById("pay").addEventListener("click", function () {
window.location.href = "../STAFF/1insert.html?username=" + encodeURIComponent(username);
});
document.getElementById('update2').addEventListener('click', function () {
window.location.href = "../STAFF/pay.html?username=" + encodeURIComponent(username);
})
document.getElementById("select1").addEventListener("click", function () {
window.location.href = "../STAFF/1select.html?username=" + encodeURIComponent(username);
});
document.getElementById("select2").addEventListener("click", function () {
window.location.href = "../STAFF/2select.html?username=" + encodeURIComponent(username);
});
</script>
</html>
