今天实现前端职员的功能页面
1insert.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>申请出差</title>
<link rel="stylesheet" href="../Style.css">
</head>
<script>
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
console.log("用户名为:" + username);
const requestUrl = `http://localhost:8080/user/getName/${username}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data.msg === 'success') {
document.getElementById('name').value = data.data.userName;
document.getElementById('depart').value = data.data.department;
} else {
alert("查询失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generatePaperNumber() {
var currentDate = new Date();
var year = currentDate.getFullYear();
let id = year;
let count;
const requestUrl = `http://localhost:8080/user/count/${id}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if (data!=null) {
console.log(data);
count = data;
count = count + 1;
count = count.toString().padStart(4, '0');
id = id + count;
document.getElementById('paperNumber').value = id;
} else {
alert("查询失败");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
</script>
<body>
<h1 style="text-align: center">出差申请</h1>
<!--边框居中-->
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<form id="addForm">
<label for="paperNumber">出差编号:</label>
<input type="text" id="paperNumber" name="paperNumber" readonly>
<br>
<br>
<button type="button" style="display: block; margin: 0 auto;" onclick="generatePaperNumber()">生成编号
</button>
<br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="depart">部门:</label>
<input type="text" id="depart" name="depart">
<br>
<label for="dest">目的地:</label>
<input type="text" id="dest" name="dest">
<br>
<label for="begin">出发日期:</label>
<input type="datetime-local" id="begin" name="begin">
<br>
<label for="re">返回日期:</label>
<input type="datetime-local" id="re" name="re">
<br>
出差类别:
<div id="type">
<label><input type="radio" name="type" value="业务洽谈">业务洽谈</label>
<label><input type="radio" name="type" value="培训">培训</label>
<label><input type="radio" name="type" value="会议">会议</label>
<label>
<input type="radio" name="type" value="其他">其他
<input type="text" id="other" name="other">
</label>
</div>
<label for="reason">出差事由:</label>
<br>
<input type="text" id="reason" name="reason" style="width: 300px; height:300px"
required>
<button type="submit" style="display: block; margin: 0 auto;">添加信息</button>
</form>
</div>
</div>
</div>
</body>
<script>
document.getElementById('addForm').addEventListener('submit', function (event) {
event.preventDefault();
const paperNumber = document.getElementById('paperNumber').value;
const name = document.getElementById('name').value;
const depart = document.getElementById('depart').value;
const dest = document.getElementById('dest').value;
const begin = document.getElementById('begin').value;
const re = document.getElementById('re').value;
const reason = document.getElementById('reason').value;
const type = document.querySelectorAll('input[name="type"]');
let t;
type.forEach(radio => {
if (radio.checked) {
t = radio.value;
console.log(t);
}
});
let other1;
let t1;
if (t === "其他") {
other1 = document.getElementById('other');
t1 = "其他，" + other1.value;
console.log(other1.value);
}
const requestUrl = `http://localhost:8080/user/add1`;
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: paperNumber,
name: name,
department: depart,
destination: dest,
departureDate: begin,
returnDate: re,
type: t,
typeContent: t1,
reason: reason,
state: "待审批"
})
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
alert("出差信息添加成功！请等待审批");
console.log(data);
} else {
alert("添加失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
</html>
1select.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);
g1(data.data.userName);
} else {
alert("未查询到此教师信息");
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function g1(data) {
console.log(data);
const requestU = `http://localhost:8080/user/SelectApp/${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>';
tableBody.appendChild(row);
// 查询方式是按姓名查询或多条查询
for (let i = 0; i < data.length; i++) {
let s;
row = document.createElement("tr");
row.innerHTML = `<td>${data[i].departureDate}</td><td>${data[i].reason}</td><td>${data[i].state}</td><td>${data[i].stateReason}</td>`;
tableBody.appendChild(row);
table.appendChild(tableBody);
tableContainer.appendChild(table);
}
}
</script>
</html>
标签：const,getElementById,error,console,document,data,1.25 From： https://www.cnblogs.com/zzqq1314/p/17990422