食材供应链配送实时监管系统：交货确认与验收功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交货确认与验收</title>
<link rel="stylesheet" href="./semantic.min.css">
</head>
<body>
<div class="ui container">
<h1 class="ui dividing header">交货确认与验收</h1>
<pre><code><form class="ui form">
<div class="field">
<label>配送单号</label>
<input type="text" placeholder="请输入配送单号">
</div>
<div class="field">
<label>交货日期</label>
<input type="date" placeholder="请选择交货日期">
</div>
<div class="field">
<label>接收人</label>
<input type="text" placeholder="请输入接收人姓名">
</div>
<div class="field">
<label>验收结果</label>
<select class="ui dropdown">
<option value="">请选择验收结果</option>
<option value="pass">合格</option>
<option value="fail">不合格</option>
</select>
</div>
<div class="field">
<label>备注</label>
<textarea rows="3" placeholder="请输入备注"></textarea>
</div>
<button class="ui primary button" type="submit">确认验收</button>
</form>
<div id="deliveryTasks" style="margin-top: 2rem;">
<h2 class="ui dividing header">待确认验收任务</h2>
<table class="ui celled table">
<thead>
<tr>
<th>配送单号</th>
<th>交货日期</th>
<th>接收人</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>2022-01-01</td>
<td>张三</td>
<td><button class="ui primary button">验收</button></td>
</tr>
<tr>
<td>002</td>
<td>2022-01-02</td>
<td>李四</td>
<td><button class="ui primary button">验收</button></td>
</tr>
<!-- 其他待确认验收的配送任务行 -->
</tbody>
</table>
</div>
<div id="acceptedTasks" style="display: none; margin-top: 2rem;">
<h2 class="ui dividing header">已验收任务</h2>
<table class="ui celled table" id="acceptedTasksTable">
<thead>
<tr>
<th>配送单号</th>
<th>交货日期</th>
<th>接收人</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<!-- 已验收任务行 -->
</tbody>
</table>
</div>
</code></pre>
</div>
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
<script>
$(document).ready(function() {
$('.ui.dropdown').dropdown();
const form = document.querySelector('.ui.form');
const confirmBtn = form.querySelector('.ui.primary.button');
const deliveryTasksTable = document.querySelector('#deliveryTasks table');
confirmBtn.addEventListener('click', function(event) {
event.preventDefault();
const deliveryNo = form.querySelector('input[type="text"]').value;
if (!deliveryNo) {
return;
}
// 执行验收操作，根据配送单号进行相应的处理
// 示例：将待确认验收的配送任务移动到已验收的配送任务列表中
const taskRow = deliveryTasksTable.querySelector(`tbody tr td:first-child:contains('${deliveryNo}')`).parentNode;
const acceptedTasksTable = document.getElementById('acceptedTasksTable');
acceptedTasksTable.querySelector('tbody').appendChild(taskRow.cloneNode(true));
taskRow.parentNode.removeChild(taskRow);
form.reset();
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/PjN 著作权归作者所有。请勿转载和采集!