差旅报销管理系统前端页面
差旅报销管理系统前端页面、
登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
/* 提交按钮样式 */
input[type="submit"] {
padding: 12px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px; /* 提交按钮字体大小调小为14px */
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
color: #666;
}
select {
margin-bottom: 5px;
color: #666;
}
option {
margin-bottom: 5px;
color: #666;
}
input[type="text"],
input[type="password"] {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #4cae4c;
}
#message {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="login-container">
<h2>请登录</h2>
<form id="loginForm">
<label for="userId">职员工号：</label>
<input type="text" id="userId" name="userId" required>
<label for="password">密码:</label>
<input type="text" id="password" name="password" required>
<!-- <label for="identity">身份:</label>-->
<!-- <select id="identity" name="identity" required>-->
<!-- <option value="employee">职员</option>-->
<!-- <option value="personnel">部门经理</option>-->
<!-- <option value="general">总经理</option>-->
<!-- <option value="financial">财务人员</option>-->
<!-- </select>-->
<!-- <input type="submit" value="提交申请">-->
<button type="button" onclick="login()">登录</button>
</form>
<div id="message"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function login() {
const userId = document.getElementById('userId').value; // 获取用户名输入框的值
const password = document.getElementById('password').value; // 获取密码输入框的值
// const userData = {
// userId: userId,
// password: password
// };
$.ajax({
type:'POST',
url:'http://localhost:9090/login',
contentType:'application/json',
data: JSON.stringify({
userId: userId,
password: password
}),
success:function(response){
// 假设后端返回的数据中包含用户角色信息，比如 {role: "职员"} 这样的格式
const role = response.data.role;
let redirectUrl = '';
switch (role) {
case "普通职员":
redirectUrl = '../RoleFunction/employee.html';
break;
case "部门经理":
redirectUrl = '../RoleFunction/personnel.html';
break;
case "总经理":
redirectUrl = '../RoleFunction/general.html';
break;
case "财务人员":
redirectUrl = '../RoleFunction/financial.html';
break;
default:
alert('未知角色，登录异常');
return;
}
window.location.href = redirectUrl;
// window.location.href = '../BTA/personnelMenu.html';
},
error: function(error){
console.error(error);
alert('登录失败，请稍后再试')
}
})
}
</script>
</body>
</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>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
/* 表单容器样式 */
.form-container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
}
/* 标题样式 */
h1 {
color: #333;
margin-bottom: 30px;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
text-align: left;
}
/* 标签样式 */
label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: bold;
}
/* 输入框样式 */
input[type="text"],
input[type="password"] {
padding: 12px;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="password"]:focus {
border-color: #5cb85c;
}
/* 提交按钮样式 */
input[type="submit"] {
padding: 12px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
/* 返回按钮样式 */
.back-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ccc;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<div class="form-container">
<h1>注册</h1>
<form id="reportForm">
<div class="form-group">
<label for="userId">职工编号:</label>
<input type="text" id="userId" name="userId" required>
</div>
<div class="form-group">
<label for="userName">职工姓名:</label>
<input type="text" id="userName" name="userName" required>
</div>
<div class="form-group">
<label for="department">部门:</label>
<input type="text" id="department" name="department" required>
</div>
<div class="form-group">
<label for="role">职位:</label>
<input type="text" id="role" name="role" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="提交">
</form>
<div>
<a href="index.html">
<button class="back-button">返回主界面</button>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#reportForm').submit(function (e) {
e.preventDefault();
let userId = $('#userId').val();
let userName = $('#userName').val();
let department = $('#department').val();
let role = ($('#role').val());
let password = ($('#password').val());
$.ajax({
type: 'POST',
url: 'http://localhost:9090/add',
contentType: 'application/json',
data: JSON.stringify({
userId: userId,
userName: userName,
department: department,
role: role,
password: password
}),
success: function () {
alert('保存成功！');
window.location.href = '../login/index.html';
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
});
</script>
</body>
</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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.sidebar {
background-color: #333; /* 深色背景 */
color: white; /* 白色文字 */
width: 200px; /* 增加宽度 */
height: 98vh; /* 垂直填充整个视口 */
position: fixed; /* 固定位置 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
padding-top: 50px; /* 增加顶部内边距 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
z-index: 1000; /* 确保侧边栏在其他内容之上 */
}
.sidebar ul {
list-style: none; /* 移除列表样式 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
}
.sidebar ul li {
padding: 14px 26px; /* 增加内边距 */
cursor: pointer; /* 鼠标悬停时显示指针 */
border-bottom: 1px solid #444; /* 添加分隔线 */
}
.sidebar ul li:hover {
background-color: #555; /* 鼠标悬停时的背景颜色 */
color: #ddd; /* 鼠标悬停时的文字颜色 */
}
.sidebar ul li a {
color: white; /* 链接颜色 */
text-decoration: none; /* 移除下划线 */
display: block; /* 使链接填满整个列表项 */
}
.sidebar ul li a:hover {
color: #ddd; /* 鼠标悬停时的链接颜色 */
}
/* 可以添加一个选中状态样式 */
.sidebar ul li.active {
background-color: #555; /* 选中状态的背景颜色 */
}
/* 为第一个列表项添加不同的样式，因为它不是链接 */
.sidebar ul li:first-child {
font-size: 15px; /* 增大字体大小 */
font-weight: bold; /* 加粗字体 */
padding: 17px 26px; /* 增加内边距 */
cursor: default; /* 移除指针 */
}
/* 为最后一个列表项添加样式，确保没有底部边框 */
.sidebar ul li:last-child {
border-bottom: none;
}
.content {
margin-left: 200px;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.button {
background-color: green;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
/* 表单容器样式 */
.form-container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: left;
}
/* 标题样式 */
h1 {
color: #333;
margin-bottom: 30px;
font-size: 20px;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
text-align: left;
}
/* 标签样式 */
label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: bold;
font-size: 14px;
}
/* 输入框样式 */
input[type="text"],
input[type="date"] {
padding: 12px;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="date"]:focus {
border-color: #5cb85c;
}
/* 提交按钮样式 */
input[type="submit"] {
padding: 12px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
/* 返回按钮样式 */
.back-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ccc;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #aaa;
}
/* 使表单组两列布局 */
.form-group-two-columns {
display: flex;
justify-content: space-between;
}
/* 两列布局中每列的样式 */
.form-group-two-columns > div {
flex: 1;
margin-right: 10px;
}
/* 去除最后一列的右边距 */
.form-group-two-columns > div:last-child {
margin-right: 0;
}
/* 查询结果容器样式 */
.result-container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
margin-top: 20px;
}
/* 查询结果项样式 */
.result-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 查询结果项内容样式 */
.result-item-content {
flex: 1;
}
.modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4); /* 半透明背景，营造模态效果 */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 垂直居中显示 */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li>差旅费报销管理系统</li>
<li>员工信息管理</li>
<li><a href="/templates/BTA/menu.html">出差申请管理</a></li>
<li><a href="financialMenu.html">报销差旅费管理</a></li>
<li>综合管理</li>
</ul>
</div>
<div class="content">
<div class="header">
<h2>出差申请</h2>
</div>
<input type="text" placeholder="请输入申请编号查询">
<button id="queryButton" class="button">查询</button>
<button id="addButton" class="button">新增</button>
<button id="deleteApplyForm" class="button">删除</button>
<button id="updateButton" class="button">更新</button>
<!-- <button id="approvalButton" class="button">审核</button>-->
<!-- <ul><li><a href="personnelMenu.html">更新</a></li></ul>-->
<div id="formContainer" style="display:none;">
<form id="addApplyForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="applyId">申请编号:</label>
<input type="text" id="applyId" name="applyId" required>
</div>
<div class="form-group">
<label for="applyName">申请人姓名:</label>
<input type="text" id="applyName" name="applyName" required>
</div>
<div class="form-group">
<label for="department">所在部门:</label>
<input type="text" id="department" name="department" required>
</div>
</div>
<div>
<div class="form-group">
<label for="destination">目的地:</label>
<input type="text" id="destination" name="destination" required>
</div>
<div class="form-group">
<label for="departureDate">出发日期:</label>
<input type="date" id="departureDate" name="departureDate" required>
</div>
<div class="form-group">
<label for="returnDate">返回日期:</label>
<input type="date" id="returnDate" name="returnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="type">申请类型:</label>
<input type="text" id="type" name="type" required>
</div>
<div class="form-group">
<label for="typeContent">申请类型内容:</label>
<input type="text" id="typeContent" name="typeContent" required>
</div>
<div class="form-group">
<label for="reason">申请原因:</label>
<input type="text" id="reason" name="reason" required>
</div>
<div class="form-group">
<label for="state">申请状态:</label>
<input type="text" id="state" name="state" required>
</div>
<div class="form-group">
<label for="stateReason">状态原因:</label>
<input type="text" id="stateReason" name="stateReason" required>
</div>
<input type="submit" value="提交申请">
</form>
</div>
<div id="updateApplyFormContainer" style="display:none;">
<form id="updateApplyForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="updateApplyId">申请编号:</label>
<input type="text" id="updateApplyId" name="updateApplyId" readonly required>
</div>
<div class="form-group">
<label for="updateApplyName">申请人姓名:</label>
<input type="text" id="updateApplyName" name="updateApplyName" required>
</div>
<div class="form-group">
<label for="updateDepartment">所在部门:</label>
<input type="text" id="updateDepartment" name="updateDepartment" required>
</div>
</div>
<div>
<div class="form-group">
<label for="updateDestination">目的地:</label>
<input type="text" id="updateDestination" name="updateDestination" required>
</div>
<div class="form-group">
<label for="updateDepartureDate">出发日期:</label>
<input type="date" id="updateDepartureDate" name="updateDepartureDate" required>
</div>
<div class="form-group">
<label for="updateReturnDate">返回日期:</label>
<input type="date" id="updateReturnDate" name="updateReturnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="updateType">申请类型:</label>
<input type="text" id="updateType" name="updateType" required>
</div>
<div class="form-group">
<label for="updateTypeContent">申请类型内容:</label>
<input type="text" id="updateTypeContent" name="updateTypeContent" required>
</div>
<div class="form-group">
<label for="updateReason">申请原因:</label>
<input type="text" id="updateReason" name="updateReason" required>
</div>
<div class="form-group">
<label for="updateState">申请状态:</label>
<input type="text" id="updateState" name="updateState" required>
</div>
<div class="form-group">
<label for="updateStateReason">状态原因:</label>
<input type="text" id="updateStateReason" name="updateStateReason" required>
</div>
<input type="submit" value="更新申请">
</form>
</div>
<!-- 审核模态框 -->
<div id="approvalModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>审核申请</h2>
<form id="approvalForm">
<div class="form-group">
<label for="approvalState">申请状态:</label>
<input type="text" id="approvalState" name="approvalState" required>
</div>
<div class="form-group">
<label for="approvalStateReason">状态原因:</label>
<input type="text" id="approvalStateReason" name="approvalStateReason" required>
</div>
<input type="submit" value="提交审核">
</form>
</div>
</div>
<div id="resultContainer">
<!-- 查询结果将动态生成在此处 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// 点击查询按钮
$('#queryButton').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
// 成功获取到数据，展示详细信息
let resultHtml = '';
resultHtml += '<div class="result-item">' +
'<div class="result-item-content">' +
'<p>申请编号: ' + response.data.applyId + '</p>' +
'<p>申请人姓名: ' + response.data.applyName + '</p>' +
'<p>所在部门: ' + response.data.department + '</p>' +
'<p>目的地: ' + response.data.destination + '</p>' +
'<p>出发日期: ' + response.data.departureDate + '</p>' +
'<p>返回日期: ' + response.data.returnDate + '</p>' +
'<p>申请类型: ' + response.data.type + '</p>' +
'<p>申请类型内容: ' + response.data.typeContent + '</p>' +
'<p>申请原因: ' + response.data.reason + '</p>' +
'<p>申请状态: ' + response.data.state + '</p>' +
'<p>状态原因: ' + response.data.stateReason + '</p>' +
'</div>' +
'</div>';
$('#resultContainer').html(resultHtml);
} else {
console.log('查询失败');
alert('查询失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 点击新增按钮
$('#addButton').click(function () {
$('#formContainer').show();
});
// 提交新增申请
$('#addApplyForm').submit(function (e) {
e.preventDefault();
let applyId = $('#applyId').val();
let applyName = $('#applyName').val();
let department = $('#department').val();
let destination = $('#destination').val();
let departureDate = $('#departureDate').val();
let returnDate = $('#returnDate').val();
let type = $('#type').val();
let typeContent = $('#typeContent').val();
let reason = $('#reason').val();
let state = $('#state').val();
let stateReason = $('#stateReason').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/addApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId,
applyName: applyName,
department: department,
destination: destination,
departureDate: departureDate,
returnDate: returnDate,
type: type,
typeContent: typeContent,
reason: reason,
state: state,
stateReason: stateReason
}),
success: function () {
alert('添加成功！');
window.location.href = 'employeeMenu.html';
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 删除功能点击事件示例框架，同样需要根据实际情况修改
$('#deleteApplyForm').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
let states =response.data.state;
if(states !== "已通过" && states !== "未通过"){
alert('可以进行删除操作');
alert(response.data.state);
$.ajax({
type: 'DELETE',
url: 'http://localhost:9090/deleteApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function () {
alert('删除成功！');
// 可根据需要刷新页面或进行其他操作
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
}
} else {
console.log('删除失败');
alert('删除失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#updateButton').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function (response) {
console.log(response);
let states =response.data.state;
if (response && response.code === 1) {
if(states !== "通过" || states !== "未通过"){
console.log('可以进行更新操作');
window.location.href = '/templates/BTA/updateBTA.html';
}
} else {
console.log('更新失败');
alert('更新失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#approvalButton').click(function () {
$('#approvalModal').show();
});
$('.close').click(function () {
$('#approvalModal').hide();
});
$('#approvalForm').submit(function (e) {
e.preventDefault();
let approvalState = $('#approvalState').val();
let approvalStateReason = $('#approvalStateReason').val();
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/updateStates', // 根据实际后端接口调整这里的URL
contentType: 'application/json',
data: JSON.stringify({
state: approvalState,
stateReason: approvalStateReason,
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
console.log('审核成功');
alert('审核成功！');
$('#approvalModal').hide(); // 审核成功后隐藏模态框
$('#queryButton').click(); // 刷新查询结果，可根据实际情况调整刷新方式
} else {
console.log('审核失败');
alert('审核失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
});
</script>
</body>
</html>
财务人员页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>差旅费报销管理系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.sidebar {
background-color: #333; /* 深色背景 */
color: white; /* 白色文字 */
width: 200px; /* 增加宽度 */
height: 98vh; /* 垂直填充整个视口 */
position: fixed; /* 固定位置 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
padding-top: 50px; /* 增加顶部内边距 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
z-index: 1000; /* 确保侧边栏在其他内容之上 */
}
.sidebar ul {
list-style: none; /* 移除列表样式 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
}
.sidebar ul li {
padding: 14px 26px; /* 增加内边距 */
cursor: pointer; /* 鼠标悬停时显示指针 */
border-bottom: 1px solid #444; /* 添加分隔线 */
}
.sidebar ul li:hover {
background-color: #555; /* 鼠标悬停时的背景颜色 */
color: #ddd; /* 鼠标悬停时的文字颜色 */
}
.sidebar ul li a {
color: white; /* 链接颜色 */
text-decoration: none; /* 移除下划线 */
display: block; /* 使链接填满整个列表项 */
}
.sidebar ul li a:hover {
color: #ddd; /* 鼠标悬停时的链接颜色 */
}
/* 可以添加一个选中状态样式 */
.sidebar ul li.active {
background-color: #555; /* 选中状态的背景颜色 */
}
/* 为第一个列表项添加不同的样式，因为它不是链接 */
.sidebar ul li:first-child {
font-size: 15px; /* 增大字体大小 */
font-weight: bold; /* 加粗字体 */
padding: 17px 26px; /* 增加内边距 */
cursor: default; /* 移除指针 */
}
/* 为最后一个列表项添加样式，确保没有底部边框 */
.sidebar ul li:last-child {
border-bottom: none;
}
.content {
margin-left: 200px;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.button {
background-color: green;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
/* 表单容器样式 */
.form-container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: left;
}
/* 标题样式 */
h1 {
color: #333;
margin-bottom: 30px;
font-size: 20px;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
text-align: left;
}
/* 标签样式 */
label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: bold;
font-size: 14px;
}
/* 输入框样式 */
input[type="text"],
input[type="date"] {
padding: 12px;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="date"]:focus {
border-color: #5cb85c;
}
/* 提交按钮样式 */
input[type="submit"] {
padding: 12px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
/* 返回按钮样式 */
.back-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ccc;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #aaa;
}
/* 使表单组两列布局 */
.form-group-two-columns {
display: flex;
justify-content: space-between;
}
/* 两列布局中每列的样式 */
.form-group-two-columns > div {
flex: 1;
margin-right: 10px;
}
/* 去除最后一列的右边距 */
.form-group-two-columns > div:last-child {
margin-right: 0;
}
/* 查询结果容器样式 */
.result-container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
margin-top: 20px;
}
/* 查询结果项样式 */
.result-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 查询结果项内容样式 */
.result-item-content {
flex: 1;
}
.modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4); /* 半透明背景，营造模态效果 */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 垂直居中显示 */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li>差旅费报销管理系统</li>
<li><a href="../../login/index.html">员工信息管理</a></li>
<li><a href="/templates/BTA/menu.html">出差申请管理</a></li>
<li><a href="../../TravelExpenses/ADUG/TravelExpenses.html">报销差旅费管理</a></li>
<li>综合管理</li>
</ul>
</div>
<div class="content">
<div class="header">
<h2>报销差旅费</h2>
</div>
<input type="text" placeholder="请输入申请编号查询">
<button id="queryButton" class="button">查询</button>
<button id="addButton" class="button">新增</button>
<button id="deleteApplyForm" class="button">删除</button>
<button id="updateButton" class="button">更新</button>
<button id="approvalButton" class="button">审核</button>
<button id="viewSpendAllButton" class="button">查看全部报销申请</button>
<div id="formContainer" style="display:none;">
<form id="addSpendForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="spendId">申请编号:</label>
<input type="text" id="spendId" name="spendId" required>
</div>
<div class="form-group">
<label for="spendName">申请人姓名:</label>
<input type="text" id="spendName" name="spendName" required>
</div>
<div class="form-group">
<label for="department">所在部门:</label>
<input type="text" id="department" name="department" required>
</div>
</div>
<div>
<div class="form-group">
<label for="destination">目的地:</label>
<input type="text" id="destination" name="destination" required>
</div>
<div class="form-group">
<label for="departureDate">出发日期:</label>
<input type="date" id="departureDate" name="departureDate" required>
</div>
<div class="form-group">
<label for="returnDate">返回日期:</label>
<input type="date" id="returnDate" name="returnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="reason">申请原因:</label>
<input type="text" id="reason" name="reason" required>
</div>
<div class="form-group">
<label for="startFare">出发车费:</label>
<input type="text" id="startFare" name="startFare" required>
</div>
<div class="form-group">
<label for="returnFare">返回车费:</label>
<input type="text" id="returnFare" name="returnFare" required>
</div>
<div class="form-group">
<label for="foodAllowance">伙食补助:</label>
<input type="text" id="foodAllowance" name="foodAllowance" required>
</div>
<div class="form-group">
<label for="localTrans">公杂补助:</label>
<input type="text" id="localTrans" name="localTrans" required>
</div>
<div class="form-group">
<label for="accommodation">住宿费:</label>
<input type="text" id="accommodation" name="accommodation" required>
</div>
<div class="form-group">
<label for="totalAmount">总金额:</label>
<input type="text" id="totalAmount" name="totalAmount" required>
</div>
<div class="form-group">
<label for="schedule">报销状态:</label>
<input type="text" id="schedule" name="schedule" required>
</div>
<div class="form-group">
<label for="scheduleReason">审批理由:</label>
<input type="text" id="scheduleReason" name="scheduleReason" required>
</div>
<input type="submit" value="提交申请">
</form>
</div>
<!-- <div id="spendAll">-->
<!-- <br><br>-->
<!-- <table id="spendTable">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th>报销编号</th>-->
<!-- <th>出差人姓名</th>-->
<!-- <th>所在部门</th>-->
<!-- <th>目的地</th>-->
<!-- <th>出发日期</th>-->
<!-- <th>返回日期</th>-->
<!-- <th>出差事由</th>-->
<!-- <th>出发车费</th>-->
<!-- <th>返回车费</th>-->
<!-- <th>伙食补贴</th>-->
<!-- <th>公杂补贴</th>-->
<!-- <th>住宿费</th>-->
<!-- <th>总金额</th>-->
<!-- <th>报销状态</th>-->
<!-- <th>审批理由</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<div id="updateApplyFormContainer" style="display:none;">
<form id="updateSpendForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="updateSpendId">申请编号:</label>
<input type="text" id="updateSpendId" name="updateSpendId" required>
</div>
<div class="form-group">
<label for="updateSpendName">申请人姓名:</label>
<input type="text" id="updateSpendName" name="updateSpendName" required>
</div>
<div class="form-group">
<label for="updateDepartment">所在部门:</label>
<input type="text" id="updateDepartment" name="updateDepartment" required>
</div>
</div>
<div>
<div class="form-group">
<label for="updateDestination">目的地:</label>
<input type="text" id="updateDestination" name="updateDestination" required>
</div>
<div class="form-group">
<label for="updateDepartureDate">出发日期:</label>
<input type="date" id="updateDepartureDate" name="updateDepartureDate" required>
</div>
<div class="form-group">
<label for="updateReturnDate">返回日期:</label>
<input type="date" id="updateReturnDate" name="updateReturnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="updateReason">申请原因:</label>
<input type="text" id="updateReason" name="updateReason" required>
</div>
<div class="form-group">
<label for="updateStartFare">出发车费:</label>
<input type="text" id="updateStartFare" name="updateStartFare" required>
</div>
<div class="form-group">
<label for="updateReturnFare">返回车费:</label>
<input type="text" id="updateReturnFare" name="updateReturnFare" required>
</div>
<div class="form-group">
<label for="updateFoodAllowance">伙食补助:</label>
<input type="text" id="updateFoodAllowance" name="updateFoodAllowance" required>
</div>
<div class="form-group">
<label for="updateLocalTrans">公杂补助:</label>
<input type="text" id="updateLocalTrans" name="updateLocalTrans" required>
</div>
<div class="form-group">
<label for="updateAccommodation">住宿费:</label>
<input type="text" id="updateAccommodation" name="updateAccommodation" required>
</div>
<div class="form-group">
<label for="updateTotalAmount">总金额:</label>
<input type="text" id="updateTotalAmount" name="updateTotalAmount" required>
</div>
<div class="form-group">
<label for="updateSchedule">报销状态:</label>
<input type="text" id="updateSchedule" name="updateSchedule" required>
</div>
<div class="form-group">
<label for="updateScheduleReason">审批理由:</label>
<input type="text" id="updateScheduleReason" name="updateScheduleReason" required>
</div>
<input type="submit" value="更新申请">
</form>
</div>
<!-- 审核模态框 -->
<div id="approvalModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>审核申请</h2>
<form id="approvalForm">
<div class="form-group">
<label for="approvalSchedule">申请状态:</label>
<input type="text" id="approvalSchedule" name="approvalSchedule" required>
</div>
<div class="form-group">
<label for="approvalScheduleReason">状态原因:</label>
<input type="text" id="approvalScheduleReason" name="approvalScheduleReason" required>
</div>
<input type="submit" value="提交审核">
</form>
</div>
</div>
<div id="resultContainer">
<!-- 查询结果将动态生成在此处 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#querySpendForm').submit(function (e) {
e.preventDefault();
let spendId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getSpend',
contentType: 'application/json',
data: JSON.stringify({
spendId: spendId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
// 成功获取到数据，展示详细信息
let resultHtml = '';
resultHtml += '<div class="result-item">' +
'<div class="result-item-content">' +
'申请编号: ' + response.data.spendId +
'<p>申请人姓名: ' + response.data.spendName + '</p>' +
'<p>所在部门: ' + response.data.department + '</p>' +
'<p>目的地: ' + response.data.destination + '</p>' +
'<p>出发日期: ' + response.data.departureDate + '</p>' +
'<p>返回日期: ' + response.data.returnDate + '</p>' +
'<p>申请原因: ' + response.data.reason + '</p>' +
'<p>出发车费: ' + response.data.startFare + '</p>' +
'<p>返回车费: ' + response.data.returnFare + '</p>' +
'<p>伙食补助: ' + response.data.foodAllowance + '</p>' +
'<p>公杂补助: ' + response.data.localTrans + '</p>' +
'<p>住宿费: ' + response.data.accommodation + '</p>' +
'<p>总金额: ' + response.data.totalAmount + '</p>' +
'<p>报销状态: ' + response.data.schedule + '</p>' +
'<p>审批理由: ' + response.data.scheduleReason + '</p>' +
'</div>' +
'</div>';
$('#resultContainer').html(resultHtml);
alert('查询成功！');
window.location.href = '../../RoleFunction/employee.html';
// } else if (response && response.code === 0) {
// // 未查询到数据或查询失败，展示相应提示信息
// $('#resultContainer').html('<p>查询失败：' + response.message + '</p>');
} else {
console.log('查询失败');
alert('查询失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 点击新增按钮
$('#addButton').click(function () {
$('#formContainer').show();
});
$('#addSpendForm').submit(function (e) {
e.preventDefault();
let spendId = $('#spendId').val();
let spendName = $('#spendName').val();
let department = $('#department').val();
let destination = $('#destination').val();
let departureDate = $('#departureDate').val();
let returnDate = $('#returnDate').val();
let reason = $('#reason').val();
let startFare = $('#startFare').val();
let returnFare = $('#returnFare').val();
let foodAllowance = $('#foodAllowance').val();
let localTrans = $('#localTrans').val();
let accommodation = $('#accommodation').val();
let totalAmount = $('#totalAmount').val();
let schedule = $('#schedule').val();
let scheduleReason = $('#scheduleReason').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/addSpend',
contentType: 'application/json',
data: JSON.stringify({
spendId :spendId,
spendName :spendName,
department :department,
destination :destination,
departureDate :departureDate,
returnDate :returnDate,
// type :type,
// typeContent :typeContent,
reason :reason,
startFare :startFare,
returnFare :returnFare,
foodAllowance :foodAllowance,
localTrans :localTrans,
accommodation :accommodation,
totalAmount :totalAmount,
schedule :schedule,
scheduleReason :scheduleReason
}),
success: function () {
alert('添加成功！');
window.location.href = '../RoleFunction/employee.html';
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#updateButton').click(function () {
window.location.href = 'menu.html';
});
$('#approval').click(function () {
// 获取相关数据并发送审核请求到后端
let schedule = $('#schedule').val();
let scheduleReason = $('#scheduleReason').val();
$.ajax({
type: 'PUT',
url: 'http://localhost:9090/updateSchedule',
contentType: 'application/json',
data: JSON.stringify({
schedule: schedule,
scheduleReason: scheduleReason
}),
success: function (response) {
if (response && response.code === 1) {
console.log('审核成功');
alert('审核成功！');
// 可根据需要刷新页面或进行其他操作
} else {
console.log('审核失败');
alert('审核失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#viewSpendAllButton').click(function () {
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getSpendAll', // 对应后端的/getAll接口
contentType: 'application/json',
success: function (response) {
console.log(response);
if (response && response.length > 0) {
const spendTableBody = $('#spendTable tbody');
spendTableBody.empty(); // 先清空之前可能存在的数据
response.forEach(item => {
const rows = $('<tr></tr>');
// 根据后端返回的Apply对象的字段，依次添加表格单元格
rows.append($('<td></td>').text(item.spendId));
rows.append($('<td></td>').text(item.spendName));
rows.append($('<td></td>').text(item.department));
rows.append($('<td></td>').text(item.destination));
rows.append($('<td></td>').text(item.departureDate));
rows.append($('<td></td>').text(item.returnDate));
rows.append($('<td></td>').text(item.reason));
rows.append($('<td></td>').text(item.startFare));
rows.append($('<td></td>').text(item.returnFare));
rows.append($('<td></td>').text(item.foodAllowance));
rows.append($('<td></td>').text(item.localTrans));
rows.append($('<td></td>').text(item.accommodation));
rows.append($('<td></td>').text(item.totalAmount));
rows.append($('<td></td>').text(item.schedule));
rows.append($('<td></td>').text(item.scheduleReason));
// 根据实际更多的字段继续添加td元素
spendTableBody.append(rows);
});
} else {
console.log('暂无数据');
alert('暂无报销申请数据，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('获取数据发生错误，请稍后重试。');
}
});
});
});
</script>
</body>
</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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.sidebar {
background-color: #333; /* 深色背景 */
color: white; /* 白色文字 */
width: 200px; /* 增加宽度 */
height: 98vh; /* 垂直填充整个视口 */
position: fixed; /* 固定位置 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
padding-top: 50px; /* 增加顶部内边距 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
z-index: 1000; /* 确保侧边栏在其他内容之上 */
}
.sidebar ul {
list-style: none; /* 移除列表样式 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
}
.sidebar ul li {
padding: 14px 26px; /* 增加内边距 */
cursor: pointer; /* 鼠标悬停时显示指针 */
border-bottom: 1px solid #444; /* 添加分隔线 */
}
.sidebar ul li:hover {
background-color: #555; /* 鼠标悬停时的背景颜色 */
color: #ddd; /* 鼠标悬停时的文字颜色 */
}
.sidebar ul li a {
color: white; /* 链接颜色 */
text-decoration: none; /* 移除下划线 */
display: block; /* 使链接填满整个列表项 */
}
.sidebar ul li a:hover {
color: #ddd; /* 鼠标悬停时的链接颜色 */
}
/* 可以添加一个选中状态样式 */
.sidebar ul li.active {
background-color: #555; /* 选中状态的背景颜色 */
}
/* 为第一个列表项添加不同的样式，因为它不是链接 */
.sidebar ul li:first-child {
font-size: 15px; /* 增大字体大小 */
font-weight: bold; /* 加粗字体 */
padding: 17px 26px; /* 增加内边距 */
cursor: default; /* 移除指针 */
}
/* 为最后一个列表项添加样式，确保没有底部边框 */
.sidebar ul li:last-child {
border-bottom: none;
}
.content {
margin-left: 200px;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.button {
background-color: green;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
/* 表单容器样式 */
.form-container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: left;
}
/* 标题样式 */
h1 {
color: #333;
margin-bottom: 30px;
font-size: 20px;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
text-align: left;
}
/* 标签样式 */
label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: bold;
font-size: 14px;
}
/* 输入框样式 */
input[type="text"],
input[type="date"] {
padding: 12px;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="date"]:focus {
border-color: #5cb85c;
}
/* 提交按钮样式 */
input[type="submit"] {
padding: 12px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
/* 返回按钮样式 */
.back-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ccc;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #aaa;
}
/* 使表单组两列布局 */
.form-group-two-columns {
display: flex;
justify-content: space-between;
}
/* 两列布局中每列的样式 */
.form-group-two-columns > div {
flex: 1;
margin-right: 10px;
}
/* 去除最后一列的右边距 */
.form-group-two-columns > div:last-child {
margin-right: 0;
}
/* 查询结果容器样式 */
.result-container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
margin-top: 20px;
}
/* 查询结果项样式 */
.result-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 查询结果项内容样式 */
.result-item-content {
flex: 1;
}
.modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4); /* 半透明背景，营造模态效果 */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 垂直居中显示 */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
thead th {
background-color: #18680c;
color: white;
padding: 10px;
text-align: left;
}
tbody tr {
border-bottom: 1px solid #ccc;
}
tbody tr:last-child {
border-bottom: none;
}
tbody td {
padding: 8px 10px;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li>差旅费报销管理系统</li>
<li><a href="../login/index.html">员工信息管理</a></li>
<li><a href="/templates/BTA/menu.html">出差申请管理</a></li>
<li><a href="../TravelExpenses/ADUG/TravelExpenses.html">报销差旅费管理</a></li>
<li>综合管理</li>
</ul>
</div>
<div class="content">
<div class="header">
<h2>出差申请</h2>
</div>
<input type="text" placeholder="请输入申请编号查询">
<br><br>
<button id="queryButton" class="button">查询</button>
<button id="addButton" class="button">新增</button>
<button id="deleteApplyForm" class="button">删除</button>
<button id="updateButton" class="button">更新</button>
<button id="approvalButton" class="button">审核</button>
<button id="viewApplyAllButton" class="button">查看全部出差申请</button>
<button id="viewSpendAllButton" class="button">查看全部报销申请</button>
<!-- <ul><li><a href="personnelMenu.html">更新</a></li></ul>-->
<div id="formContainer" style="display:none;">
<form id="addApplyForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="applyId">申请编号:</label>
<input type="text" id="applyId" name="applyId" required>
</div>
<div class="form-group">
<label for="applyName">申请人姓名:</label>
<input type="text" id="applyName" name="applyName" required>
</div>
<div class="form-group">
<label for="department">所在部门:</label>
<input type="text" id="department" name="department" required>
</div>
</div>
<div>
<div class="form-group">
<label for="destination">目的地:</label>
<input type="text" id="destination" name="destination" required>
</div>
<div class="form-group">
<label for="departureDate">出发日期:</label>
<input type="date" id="departureDate" name="departureDate" required>
</div>
<div class="form-group">
<label for="returnDate">返回日期:</label>
<input type="date" id="returnDate" name="returnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="type">申请类型:</label>
<input type="text" id="type" name="type" required>
</div>
<div class="form-group">
<label for="typeContent">申请类型内容:</label>
<input type="text" id="typeContent" name="typeContent" required>
</div>
<div class="form-group">
<label for="reason">申请原因:</label>
<input type="text" id="reason" name="reason" required>
</div>
<div class="form-group">
<label for="state">申请状态:</label>
<input type="text" id="state" name="state" required>
</div>
<div class="form-group">
<label for="stateReason">状态原因:</label>
<input type="text" id="stateReason" name="stateReason" required>
</div>
<input type="submit" value="提交申请">
</form>
</div>
<div id="resultAll">
<table id="applyTable">
<thead>
<br>
<tr>
<th>申请编号</th>
<th>申请人姓名</th>
<th>所在部门</th>
<th>目的地</th>
<th>出发日期</th>
<th>返回日期</th>
<th>申请类型</th>
<th>申请类型内容</th>
<th>申请原因</th>
<th>申请状态</th>
<th>状态原因</th>
<!-- 根据实际后端返回的Apply对象包含的字段继续添加表头 -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="spendAll">
<br><br>
<table id="spendTable">
<thead>
<tr>
<th>报销编号</th>
<th>出差人姓名</th>
<th>所在部门</th>
<th>目的地</th>
<th>出发日期</th>
<th>返回日期</th>
<th>出差事由</th>
<th>出发车费</th>
<th>返回车费</th>
<th>伙食补贴</th>
<th>公杂补贴</th>
<th>住宿费</th>
<th>总金额</th>
<th>报销状态</th>
<th>审批理由</th>
<!-- 根据实际后端返回的Apply对象包含的字段继续添加表头 -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="updateApplyFormContainer" style="display:none;">
<form id="updateApplyForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="updateApplyId">申请编号:</label>
<input type="text" id="updateApplyId" name="updateApplyId" readonly required>
</div>
<div class="form-group">
<label for="updateApplyName">申请人姓名:</label>
<input type="text" id="updateApplyName" name="updateApplyName" required>
</div>
<div class="form-group">
<label for="updateDepartment">所在部门:</label>
<input type="text" id="updateDepartment" name="updateDepartment" required>
</div>
</div>
<div>
<div class="form-group">
<label for="updateDestination">目的地:</label>
<input type="text" id="updateDestination" name="updateDestination" required>
</div>
<div class="form-group">
<label for="updateDepartureDate">出发日期:</label>
<input type="date" id="updateDepartureDate" name="updateDepartureDate" required>
</div>
<div class="form-group">
<label for="updateReturnDate">返回日期:</label>
<input type="date" id="updateReturnDate" name="updateReturnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="updateType">申请类型:</label>
<input type="text" id="updateType" name="updateType" required>
</div>
<div class="form-group">
<label for="updateTypeContent">申请类型内容:</label>
<input type="text" id="updateTypeContent" name="updateTypeContent" required>
</div>
<div class="form-group">
<label for="updateReason">申请原因:</label>
<input type="text" id="updateReason" name="updateReason" required>
</div>
<div class="form-group">
<label for="updateState">申请状态:</label>
<input type="text" id="updateState" name="updateState" required>
</div>
<div class="form-group">
<label for="updateStateReason">状态原因:</label>
<input type="text" id="updateStateReason" name="updateStateReason" required>
</div>
<input type="submit" value="更新申请">
</form>
</div>
<!-- 审核模态框 -->
<div id="approvalModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>审核申请</h2>
<form id="approvalForm">
<div class="form-group">
<label for="approvalState">申请状态:</label>
<input type="text" id="approvalState" name="approvalState" required>
</div>
<div class="form-group">
<label for="approvalStateReason">状态原因:</label>
<input type="text" id="approvalStateReason" name="approvalStateReason" required>
</div>
<input type="submit" value="提交审核">
</form>
</div>
</div>
<div id="resultContainer">
<!-- 查询结果将动态生成在此处 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// 点击查询按钮
$('#queryButton').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
// 成功获取到数据，展示详细信息
let resultHtml = '';
resultHtml += '<div class="result-item">' +
'<div class="result-item-content">' +
'<p>申请编号: ' + response.data.applyId + '</p>' +
'<p>申请人姓名: ' + response.data.applyName + '</p>' +
'<p>所在部门: ' + response.data.department + '</p>' +
'<p>目的地: ' + response.data.destination + '</p>' +
'<p>出发日期: ' + response.data.departureDate + '</p>' +
'<p>返回日期: ' + response.data.returnDate + '</p>' +
'<p>申请类型: ' + response.data.type + '</p>' +
'<p>申请类型内容: ' + response.data.typeContent + '</p>' +
'<p>申请原因: ' + response.data.reason + '</p>' +
'<p>申请状态: ' + response.data.state + '</p>' +
'<p>状态原因: ' + response.data.stateReason + '</p>' +
'</div>' +
'</div>';
$('#resultContainer').html(resultHtml);
} else {
console.log('查询失败');
alert('查询失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 点击新增按钮
$('#addButton').click(function () {
$('#formContainer').show();
});
// 提交新增申请
$('#addApplyForm').submit(function (e) {
e.preventDefault();
let applyId = $('#applyId').val();
let applyName = $('#applyName').val();
let department = $('#department').val();
let destination = $('#destination').val();
let departureDate = $('#departureDate').val();
let returnDate = $('#returnDate').val();
let type = $('#type').val();
let typeContent = $('#typeContent').val();
let reason = $('#reason').val();
let state = $('#state').val();
let stateReason = $('#stateReason').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/addApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId,
applyName: applyName,
department: department,
destination: destination,
departureDate: departureDate,
returnDate: returnDate,
type: type,
typeContent: typeContent,
reason: reason,
state: state,
stateReason: stateReason
}),
success: function () {
alert('添加成功！');
window.location.href = 'menu.html';
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 删除功能点击事件示例框架，同样需要根据实际情况修改
$('#deleteApplyForm').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'DELETE',
url: 'http://localhost:9090/deleteApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function () {
alert('删除成功！');
// 可根据需要刷新页面或进行其他操作
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#updateButton').click(function () {
window.location.href = '/templates/BTA/updateBTA.html';
});
$('#approvalButton').click(function () {
$('#approvalModal').show();
});
$('.close').click(function () {
$('#approvalModal').hide();
});
$('#approvalForm').submit(function (e) {
e.preventDefault();
let approvalState = $('#approvalState').val();
let approvalStateReason = $('#approvalStateReason').val();
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/updateStates', // 根据实际后端接口调整这里的URL
contentType: 'application/json',
data: JSON.stringify({
state: approvalState,
stateReason: approvalStateReason,
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
console.log('审核成功');
alert('审核成功！');
$('#approvalModal').hide(); // 审核成功后隐藏模态框
$('#queryButton').click(); // 刷新查询结果，可根据实际情况调整刷新方式
} else {
console.log('审核失败');
alert('审核失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#viewApplyAllButton').click(function () {
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getAll', // 对应后端的/getAll接口
contentType: 'application/json',
success: function (response) {
console.log(response);
if (response && response.length > 0) {
const tableBody = $('#applyTable tbody');
tableBody.empty(); // 先清空之前可能存在的数据
response.forEach(item => {
const row = $('<tr></tr>');
// 根据后端返回的Apply对象的字段，依次添加表格单元格
row.append($('<td></td>').text(item.applyId));
row.append($('<td></td>').text(item.applyName));
row.append($('<td></td>').text(item.department));
row.append($('<td></td>').text(item.destination));
row.append($('<td></td>').text(item.departureDate));
row.append($('<td></td>').text(item.returnDate));
row.append($('<td></td>').text(item.type));
row.append($('<td></td>').text(item.typeContent));
row.append($('<td></td>').text(item.reason));
row.append($('<td></td>').text(item.state));
row.append($('<td></td>').text(item.stateReason),
// 根据实际更多的字段继续添加td元素
tableBody.append(row))
});
} else {
console.log('暂无数据');
alert('暂无出差申请数据，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('获取数据发生错误，请稍后重试。');
}
});
});
$('#viewSpendAllButton').click(function () {
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getSpendAll', // 对应后端的/getAll接口
contentType: 'application/json',
success: function (response) {
console.log(response);
if (response && response.length > 0) {
const spendTableBody = $('#spendTable tbody');
spendTableBody.empty(); // 先清空之前可能存在的数据
response.forEach(item => {
const rows = $('<tr></tr>');
rows.append($('<td></td>').text(item.spendId));
rows.append($('<td></td>').text(item.spendName));
rows.append($('<td></td>').text(item.department));
rows.append($('<td></td>').text(item.destination));
rows.append($('<td></td>').text(item.departureDate));
rows.append($('<td></td>').text(item.returnDate));
rows.append($('<td></td>').text(item.reason));
rows.append($('<td></td>').text(item.startFare));
rows.append($('<td></td>').text(item.returnFare));
rows.append($('<td></td>').text(item.foodAllowance));
rows.append($('<td></td>').text(item.localTrans));
rows.append($('<td></td>').text(item.accommodation));
rows.append($('<td></td>').text(item.totalAmount));
rows.append($('<td></td>').text(item.schedule));
rows.append($('<td></td>').text(item.scheduleReason));
// 根据实际更多的字段继续添加td元素
spendTableBody.append(rows);
});
} else {
console.log('暂无数据');
alert('暂无报销申请数据，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('获取数据发生错误，请稍后重试。');
}
});
});
});
</script>
</body>
</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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.sidebar {
background-color: #333; /* 深色背景 */
color: white; /* 白色文字 */
width: 200px; /* 增加宽度 */
height: 98vh; /* 垂直填充整个视口 */
position: fixed; /* 固定位置 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
padding-top: 50px; /* 增加顶部内边距 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
z-index: 1000; /* 确保侧边栏在其他内容之上 */
}
.sidebar ul {
list-style: none; /* 移除列表样式 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
}
.sidebar ul li {
padding: 14px 26px; /* 增加内边距 */
cursor: pointer; /* 鼠标悬停时显示指针 */
border-bottom: 1px solid #444; /* 添加分隔线 */
}
.sidebar ul li:hover {
background-color: #555; /* 鼠标悬停时的背景颜色 */
color: #ddd; /* 鼠标悬停时的文字颜色 */
}
.sidebar ul li a {
color: white; /* 链接颜色 */
text-decoration: none; /* 移除下划线 */
display: block; /* 使链接填满整个列表项 */
}
.sidebar ul li a:hover {
color: #ddd; /* 鼠标悬停时的链接颜色 */
}
/* 可以添加一个选中状态样式 */
.sidebar ul li.active {
background-color: #555; /* 选中状态的背景颜色 */
}
/* 为第一个列表项添加不同的样式，因为它不是链接 */
.sidebar ul li:first-child {
font-size: 15px; /* 增大字体大小 */
font-weight: bold; /* 加粗字体 */
padding: 17px 26px; /* 增加内边距 */
cursor: default; /* 移除指针 */
}
/* 为最后一个列表项添加样式，确保没有底部边框 */
.sidebar ul li:last-child {
border-bottom: none;
}
.content {
margin-left: 200px;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.button {
background-color: green;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
/* 表单容器样式 */
.form-container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: left;
}
/* 标题样式 */
h1 {
color: #333;
margin-bottom: 30px;
font-size: 20px;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
text-align: left;
}
/* 标签样式 */
label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: bold;
font-size: 14px;
}
/* 输入框样式 */
input[type="text"],
input[type="date"] {
padding: 12px;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="date"]:focus {
border-color: #5cb85c;
}
/* 提交按钮样式 */
input[type="submit"] {
padding: 12px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
/* 返回按钮样式 */
.back-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ccc;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #aaa;
}
/* 使表单组两列布局 */
.form-group-two-columns {
display: flex;
justify-content: space-between;
}
/* 两列布局中每列的样式 */
.form-group-two-columns > div {
flex: 1;
margin-right: 10px;
}
/* 去除最后一列的右边距 */
.form-group-two-columns > div:last-child {
margin-right: 0;
}
/* 查询结果容器样式 */
.result-container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
margin-top: 20px;
}
/* 查询结果项样式 */
.result-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 查询结果项内容样式 */
.result-item-content {
flex: 1;
}
.modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4); /* 半透明背景，营造模态效果 */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 垂直居中显示 */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li>差旅费报销管理系统</li>
<li><a href="../login/index.html">员工信息管理</a></li>
<li><a href="/templates/BTA/menu.html">出差申请管理</a></li>
<li><a href="../TravelExpenses/ADUG/TravelExpenses.html">报销差旅费管理</a></li>
<li>综合管理</li>
</ul>
</div>
<div class="content">
<div class="header">
<h2>出差申请</h2>
</div>
<input type="text" placeholder="请输入申请编号查询">
<button id="queryButton" class="button">查询</button>
<button id="addButton" class="button">新增</button>
<button id="deleteApplyForm" class="button">删除</button>
<button id="updateButton" class="button">更新</button>
<button id="approvalButton" class="button">审核</button>
<!-- <ul><li><a href="personnelMenu.html">更新</a></li></ul>-->
<div id="formContainer" style="display:none;">
<form id="addApplyForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="applyId">申请编号:</label>
<input type="text" id="applyId" name="applyId" required>
</div>
<div class="form-group">
<label for="applyName">申请人姓名:</label>
<input type="text" id="applyName" name="applyName" required>
</div>
<div class="form-group">
<label for="department">所在部门:</label>
<input type="text" id="department" name="department" required>
</div>
</div>
<div>
<div class="form-group">
<label for="destination">目的地:</label>
<input type="text" id="destination" name="destination" required>
</div>
<div class="form-group">
<label for="departureDate">出发日期:</label>
<input type="date" id="departureDate" name="departureDate" required>
</div>
<div class="form-group">
<label for="returnDate">返回日期:</label>
<input type="date" id="returnDate" name="returnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="type">申请类型:</label>
<input type="text" id="type" name="type" required>
</div>
<div class="form-group">
<label for="typeContent">申请类型内容:</label>
<input type="text" id="typeContent" name="typeContent" required>
</div>
<div class="form-group">
<label for="reason">申请原因:</label>
<input type="text" id="reason" name="reason" required>
</div>
<div class="form-group">
<label for="state">申请状态:</label>
<input type="text" id="state" name="state" required>
</div>
<div class="form-group">
<label for="stateReason">状态原因:</label>
<input type="text" id="stateReason" name="stateReason" required>
</div>
<input type="submit" value="提交申请">
</form>
</div>
<div id="updateApplyFormContainer" style="display:none;">
<form id="updateApplyForm">
<!-- 使用两列布局展示部分表单组 -->
<div class="form-group-two-columns">
<div>
<div class="form-group">
<label for="updateApplyId">申请编号:</label>
<input type="text" id="updateApplyId" name="updateApplyId" readonly required>
</div>
<div class="form-group">
<label for="updateApplyName">申请人姓名:</label>
<input type="text" id="updateApplyName" name="updateApplyName" required>
</div>
<div class="form-group">
<label for="updateDepartment">所在部门:</label>
<input type="text" id="updateDepartment" name="updateDepartment" required>
</div>
</div>
<div>
<div class="form-group">
<label for="updateDestination">目的地:</label>
<input type="text" id="updateDestination" name="updateDestination" required>
</div>
<div class="form-group">
<label for="updateDepartureDate">出发日期:</label>
<input type="date" id="updateDepartureDate" name="updateDepartureDate" required>
</div>
<div class="form-group">
<label for="updateReturnDate">返回日期:</label>
<input type="date" id="updateReturnDate" name="updateReturnDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="updateType">申请类型:</label>
<input type="text" id="updateType" name="updateType" required>
</div>
<div class="form-group">
<label for="updateTypeContent">申请类型内容:</label>
<input type="text" id="updateTypeContent" name="updateTypeContent" required>
</div>
<div class="form-group">
<label for="updateReason">申请原因:</label>
<input type="text" id="updateReason" name="updateReason" required>
</div>
<div class="form-group">
<label for="updateState">申请状态:</label>
<input type="text" id="updateState" name="updateState" required>
</div>
<div class="form-group">
<label for="updateStateReason">状态原因:</label>
<input type="text" id="updateStateReason" name="updateStateReason" required>
</div>
<input type="submit" value="更新申请">
</form>
</div>
<!-- 审核模态框 -->
<div id="approvalModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>审核申请</h2>
<form id="approvalForm">
<div class="form-group">
<label for="approvalState">申请状态:</label>
<input type="text" id="approvalState" name="approvalState" required>
</div>
<div class="form-group">
<label for="approvalStateReason">状态原因:</label>
<input type="text" id="approvalStateReason" name="approvalStateReason" required>
</div>
<input type="submit" value="提交审核">
</form>
</div>
</div>
<div id="resultContainer">
<!-- 查询结果将动态生成在此处 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// 点击查询按钮
$('#queryButton').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/getApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
// 成功获取到数据，展示详细信息
let resultHtml = '';
resultHtml += '<div class="result-item">' +
'<div class="result-item-content">' +
'<p>申请编号: ' + response.data.applyId + '</p>' +
'<p>申请人姓名: ' + response.data.applyName + '</p>' +
'<p>所在部门: ' + response.data.department + '</p>' +
'<p>目的地: ' + response.data.destination + '</p>' +
'<p>出发日期: ' + response.data.departureDate + '</p>' +
'<p>返回日期: ' + response.data.returnDate + '</p>' +
'<p>申请类型: ' + response.data.type + '</p>' +
'<p>申请类型内容: ' + response.data.typeContent + '</p>' +
'<p>申请原因: ' + response.data.reason + '</p>' +
'<p>申请状态: ' + response.data.state + '</p>' +
'<p>状态原因: ' + response.data.stateReason + '</p>' +
'</div>' +
'</div>';
$('#resultContainer').html(resultHtml);
} else {
console.log('查询失败');
alert('查询失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 点击新增按钮
$('#addButton').click(function () {
$('#formContainer').show();
});
// 提交新增申请
$('#addApplyForm').submit(function (e) {
e.preventDefault();
let applyId = $('#applyId').val();
let applyName = $('#applyName').val();
let department = $('#department').val();
let destination = $('#destination').val();
let departureDate = $('#departureDate').val();
let returnDate = $('#returnDate').val();
let type = $('#type').val();
let typeContent = $('#typeContent').val();
let reason = $('#reason').val();
let state = $('#state').val();
let stateReason = $('#stateReason').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/addApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId,
applyName: applyName,
department: department,
destination: destination,
departureDate: departureDate,
returnDate: returnDate,
type: type,
typeContent: typeContent,
reason: reason,
state: state,
stateReason: stateReason
}),
success: function () {
alert('添加成功！');
window.location.href = 'menu.html';
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
// 删除功能点击事件示例框架，同样需要根据实际情况修改
$('#deleteApplyForm').click(function () {
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'DELETE',
url: 'http://localhost:9090/deleteApply',
contentType: 'application/json',
data: JSON.stringify({
applyId: applyId
}),
success: function () {
alert('删除成功！');
// 可根据需要刷新页面或进行其他操作
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
$('#updateButton').click(function () {
window.location.href = '/templates/BTA/updateBTA.html';
});
$('#approvalButton').click(function () {
$('#approvalModal').show();
});
$('.close').click(function () {
$('#approvalModal').hide();
});
$('#approvalForm').submit(function (e) {
e.preventDefault();
let approvalState = $('#approvalState').val();
let approvalStateReason = $('#approvalStateReason').val();
let applyId = $('input[type="text"][placeholder="请输入申请编号查询"]').val();
$.ajax({
type: 'POST',
url: 'http://localhost:9090/updateStates', // 根据实际后端接口调整这里的URL
contentType: 'application/json',
data: JSON.stringify({
state: approvalState,
stateReason: approvalStateReason,
applyId: applyId
}),
success: function (response) {
console.log(response);
if (response && response.code === 1) {
console.log('审核成功');
alert('审核成功！');
$('#approvalModal').hide(); // 审核成功后隐藏模态框
$('#queryButton').click(); // 刷新查询结果，可根据实际情况调整刷新方式
} else {
console.log('审核失败');
alert('审核失败，请稍后重试。');
}
},
error: function (error) {
console.error(error);
alert('发生错误，请稍后重试。');
}
});
});
});
</script>
</body>
</html>
以上内容是部分差旅报销管理页面，整个差旅报销管理题目中描述的部分功能没有实现，还需要继续优化。
浙公网安备 33010602011771号