11.3
本次实现前端代码
add.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新增生产计划</title> <style> body { font-family: Arial, sans-serif; } #root { margin: 20px; } h2 { font-size: 18px; margin-bottom: 10px; } label { display: block; margin-bottom: 5px; } input, select { width: 300px; padding: 5px; font-size: 16px; } 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> <div id="root" style="border: 1px solid black"> <h2>增加生产计划</h2> <form id="addForm"> <label for="planId">计划编号:</label> <input type="text" id="planId" name="planId" required oninput="limitInput(this)" maxlength="10"> <label for="planName">计划名称:</label> <input type="text" id="planName" name="planName" required> <label for="planOverview">计划概述:</label> <input type="number" id="planOverview" name="planOverview"> <label>排产方式:</label> <div id="way"> <label><input type="radio" name="way" value="串行排产">串行排产</label> <label><input type="radio" name="way" value="并行排产">并行排产</label> <label><input type="radio" name="way" value="串并行排产">串并行排产</label> </div> <label for="beginTime">开始时间:</label> <input type="datetime-local" id="beginTime" name="beginTime"> <label for="endTime">结束时间:</label> <input type="datetime-local" id="endTime" name="endTime"> <label>包含工艺:</label> <div id="technology"> <label><input type="checkbox" name="technology" value="锯">锯</label> <label><input type="checkbox" name="technology" value="热">热</label> <label><input type="checkbox" name="technology" value="车">车</label> <label><input type="checkbox" name="technology" value="铣">铣</label> <label><input type="checkbox" name="technology" value="钳">钳</label> <label><input type="checkbox" name="technology" value="去">去</label> <label><input type="checkbox" name="technology" value="珩">珩</label> <label><input type="checkbox" name="technology" value="表镀铬">表镀铬</label> <label><input type="checkbox" name="technology" value="表喷砂">表喷砂</label> <label><input type="checkbox" name="technology" value="综检">综检</label> <label><input type="checkbox" name="technology" value="洗">洗</label> <label><input type="checkbox" name="technology" value="包">包</label> <label><input type="checkbox" name="technology" value="入">入</label> <label><input type="checkbox" name="technology" value="装">装</label> </div> <button type="submit">添加生产计划</button> </form> <div> <a href="index.html"> <button>返回主界面</button> </a> </div> </div> </body> <script> document.getElementById("addForm").addEventListener("submit", function (event) { event.preventDefault(); const planId = document.getElementById("planId"); const planName = document.getElementById("planName"); const planOverview = document.getElementById("planOverview"); const way = document.querySelectorAll('input[name="way"]'); let w; way.forEach(radio => { if (radio.checked) { w = radio.value; alert(w); } }); const begin = document.getElementById("beginTime"); const end = document.getElementById("endTime"); const technologies = document.querySelectorAll('input[name="technology"]:checked'); const teList = []; for (const t of technologies) { teList.push(t.value); } fetch('plan/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: planId.value, name: planName.value, overview: planOverview.value, productway: w, begin: begin.value, end: end.value, technology: teList, }) }) .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> <script> function limitInput(input) { const value = input.value; if (value.length > 10) { input.value = value.slice(0, 10); } if (value.length < 10) { input.setCustomValidity('计划编号前八位必须为年月份后两位为编号'); } else { input.setCustomValidity(''); } } </script> </html>
2、delete.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>删除生产计划</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { text-align: center; border: 1px solid #ccc; padding: 500px; } button { margin-top: 10px; padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <div class="tablecontainer"> <h1 style="text-align: center">删除生产计划</h1> <form id="deleteform"> <label>计划编号</label> <input type="text" id="studentid" required oninput="limitInput(this)" maxlength=10"> <br> <div id="container"> </div> <button type="submit" name="查询">查询</button> </form> <form id="delete"> <input type="text" id="id" required oninput="limitInput(this)" maxlength=10"> <br> <button type="submit" name="删除">删除</button> </form> <div> <a href="index.html"> <button>返回主界面</button> </a> </div> </div> </body> <script> document.getElementById("deleteform").addEventListener('submit', function (event) { event.preventDefault() const id = document.getElementById("studentid"); fetch('plan/getById/' + id.value, { method: 'GET', headers: { 'Content-Type': 'application.json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { generateTable(data.data); } else { alert("此结果不存在"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); }); </script> <script> function generateTable(data) { const tableContainer = document.getElementById("tablecontainer"); // 清空 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); row = document.createElement("tr"); row.innerHTML = `<td>${data.id}</td><td>${data.name}</td><td>${data.begin}</td><td>${data.end}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } </script> <script> document.getElementById("delete").addEventListener('submit', function (event) { event.preventDefault(); const studentid = document.getElementById("id"); fetch('plan/delete/' + studentid.value, { method: 'DELETE', headers: { 'Content-type': 'application.json' }, body: JSON.stringify( { id: studentid.value } ) }) .then(response => response.json()) .then(data => { if (data.msg == 'success') { alert("删除成功"); } else { alert("删除失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }) }); </script> <script> function limitInput(input) { const value = input.value; if (value.length > 10) { input.value = value.slice(0, 10); } if (value.length < 10) { input.setCustomValidity('计划编号前八位必须为年月份后两位为编号'); } else { input.setCustomValidity(''); } } </script> </html>
3、index.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> .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> <!-- 其余代码不变 --> <div class="form"> <table border="1px" cellspacing="0" width="600px"> <tr> <th>编号</th> <th>功能</th> </tr> <tr> <td>1</td> <td> <a href="add.html" target="_blank"> <button>新增生产计划计划</button> </a> </td> </tr> <tr> <td>2</td> <td><a href="update.html" target="_blank"> <button>修改生产计划</button> </a> </td> </tr> <tr> <td>3</td> <td> <a href="delete.html" target="_blank"> <button>删除生产计划</button> </a> </td> </tr> <tr> <td>4</td> <td> <a href="selectByCondition.html" target="_blank"> <button>查询生产计划</button> </a> </td> </tr> <tr> <td>5</td> <td> <a href="select.html" target="_blank"> <button>生产计划浏览</button> </a> </td> </tr> </table> </div> </body> </html>
4、select.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生产计划浏览</title> </head> <body> <div id="tablecontainer"> </div> <div> <a href="index.html"> <button>返回主界面</button> </a> </div> </body> <script> display(); function display() { fetch('plan/getAll', { method: 'GET', headers: { 'Content-Type': 'application.json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { generateTable(data.data,); } else { alert("此结果不存在"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function generateTable(data) { const tableContainer = document.getElementById("tablecontainer"); // 清空 tableContainer 中的所有子节点 while (tableContainer.hasChildNodes()) { tableContainer.removeChild(tableContainer.firstChild); } // if (data.length>1) { 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 = data.length - 1; i >= 0; i--) { row = document.createElement("tr"); row.innerHTML = `<td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].begin}</td><td>${data[i].end}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } } </script> </html>
4、select.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>删除生产计划</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { text-align: center; border: 1px solid #ccc; padding: 500px; } button { margin-top: 10px; padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <div class="tablecontainer"> <h1 style="text-align: center">删除生产计划</h1> <form id="deleteform"> <label>计划编号</label> <input type="text" id="studentid" required oninput="limitInput(this)" maxlength=10"> <br> <div id="container"> </div> <button type="submit" name="查询">查询</button> </form> <form id="delete"> <input type="text" id="id" required oninput="limitInput(this)" maxlength=10"> <br> <button type="submit" name="删除">删除</button> </form> <div> <a href="index.html"> <button>返回主界面</button> </a> </div> </div> </body> <script> document.getElementById("deleteform").addEventListener('submit', function (event) { event.preventDefault() const id = document.getElementById("studentid").value; fetch(`plan/getById/${id}`, { method: 'GET', headers: { 'Content-Type': 'application.json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { generateTable(data.data); } else { alert("此结果不存在"); } }) .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>'; tableBody.appendChild(row); row = document.createElement("tr"); row.innerHTML = `<td>${data.id}</td><td>${data.name}</td><td>${data.begin}</td><td>${data.end}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } </script> <script> document.getElementById("delete").addEventListener('submit', function (event) { event.preventDefault(); const studentid = document.getElementById("id"); fetch('plan/delete/' + studentid.value, { method: 'DELETE', headers: { 'Content-type': 'application.json' }, body: JSON.stringify( { id: studentid.value } ) }) .then(response => response.json()) .then(data => { if (data.msg == 'success') { alert("删除成功"); } else { alert("删除失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }) }); </script> <script> function limitInput(input) { const value = input.value; if (value.length > 10) { input.value = value.slice(0, 10); } if (value.length < 10) { input.setCustomValidity('计划编号前八位必须为年月份后两位为编号'); } else { input.setCustomValidity(''); } } </script> </html>
