我需要一个前端页面用html和js来编写,页面包含输入框和四个按钮,添加,扫描添加,提交和查询。可以手动添加或者扫描添加,扫描添加会调用相机进行扫描,并将扫描到的值添加到输入框中,输入一个箱号,可以同时添加多次退仓单号,但箱号只能输入一次,当点击添加按钮,会将其展示在表格中,然后有一个提交按钮,只有这个箱号进行提交,才可以进行下一个箱号和退仓单号的添加,最后有一个查询按钮可以进行查询出全部的退仓单号和箱号的数据页面,页面包含数据表格,展示所有已经添加的退仓单号和箱号
时间: 2023-12-01 10:03:52 浏览: 77
好的,你需要一个前端页面,包含输入框和四个按钮,分别是添加、扫描添加、提交和查询按钮。下面是一个简单的HTML和JavaScript示例代码,可以实现你的需求:
```html
<!DOCTYPE html>
<html>
<head>
<title>退仓单号和箱号绑定提交页面</title>
</head>
<body>
<h1>退仓单号和箱号绑定提交页面</h1>
<label for="boxNumber">箱号:</label>
<input type="text" id="boxNumber"><br><br>
<label for="returnNumbers">退仓单号:</label>
<input type="text" id="returnNumbers"><br><br>
<button id="addButton">添加</button>
<button id="scanButton">扫描添加</button>
<button id="submitButton">提交</button>
<button id="queryButton">查询</button><br><br>
<table id="dataTable">
<thead>
<tr>
<th>箱号</th>
<th>退仓单号</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 获取页面元素
const boxNumberInput = document.getElementById('boxNumber');
const returnNumbersInput = document.getElementById('returnNumbers');
const addButton = document.getElementById('addButton');
const scanButton = document.getElementById('scanButton');
const submitButton = document.getElementById('submitButton');
const queryButton = document.getElementById('queryButton');
const dataTable = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
// 箱号和退仓单号的映射
const returnNumbersMap = new Map();
// 添加按钮的点击事件
addButton.addEventListener('click', function() {
const boxNumber = boxNumberInput.value;
const returnNumbers = returnNumbersInput.value;
if (!boxNumber || !returnNumbers) {
alert('请输入箱号和退仓单号!');
return;
}
if (returnNumbersMap.has(boxNumber)) {
alert('该箱号已经添加过退仓单号!');
return;
}
// 将退仓单号添加到映射中
returnNumbersMap.set(boxNumber, returnNumbers);
// 将数据添加到表格中
const newRow = dataTable.insertRow(-1);
const boxCell = newRow.insertCell(0);
const returnCell = newRow.insertCell(1);
boxCell.textContent = boxNumber;
returnCell.textContent = returnNumbers;
// 清空输入框
boxNumberInput.value = '';
returnNumbersInput.value = '';
});
// 扫描添加按钮的点击事件
scanButton.addEventListener('click', function() {
// 调用相机进行扫描
// 将扫描到的值添加到输入框中
// 代码省略
});
// 提交按钮的点击事件
submitButton.addEventListener('click', function() {
const boxNumber = boxNumberInput.value;
if (!boxNumber) {
alert('请输入箱号!');
return;
}
if (!returnNumbersMap.has(boxNumber)) {
alert('该箱号还未添加退仓单号!');
return;
}
// 提交数据到后台
// 代码省略
// 清空映射和表格
returnNumbersMap.clear();
dataTable.innerHTML = '';
// 清空输入框
boxNumberInput.value = '';
returnNumbersInput.value = '';
});
// 查询按钮的点击事件
queryButton.addEventListener('click', function() {
// 查询所有已经添加的退仓单号和箱号
// 将数据添加到表格中
dataTable.innerHTML = '';
for (const [boxNumber, returnNumbers] of returnNumbersMap) {
const newRow = dataTable.insertRow(-1);
const boxCell = newRow.insertCell(0);
const returnCell = newRow.insertCell(1);
boxCell.textContent = boxNumber;
returnCell.textContent = returnNumbers;
}
});
</script>
</body>
</html>
```
上面的代码中,我们使用了`Map`来保存箱号和退仓单号的映射关系,并在添加按钮的点击事件中进行了判断,确保每个箱号只能添加一次退仓单号。在提交按钮的点击事件中,我们首先检查该箱号是否已经添加了退仓单号,如果没有则弹出警告框;如果有,则将数据提交到后台,并清空映射和表格。在查询按钮的点击事件中,我们遍历映射中的所有数据,将其添加到表格中展示。