我有一个系统是根据Java代码写的通过扫描箱号外面的包装条码,扫描用钉钉的接口调用扫码组件,查询出对应的退仓单号。同时,我也能够手动添加多个退仓单号和箱号,并且将它们绑定起来。绑定完成后,能够查询出所有绑定了哪些退仓单号。根据这些帮我对应写出前端的页面js和html代码
时间: 2023-12-06 07:45:27 浏览: 29
好的,根据您提供的信息,我可以为您提供一个简单的前端页面示例代码,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>箱号退仓单绑定</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
</head>
<body>
<h2>箱号退仓单绑定</h2>
<hr>
<div>
<label>箱号:</label>
<input type="text" id="boxNo">
<button onclick="scanBoxNo()">扫描</button>
<button onclick="addBoxNo()">添加</button>
</div>
<div>
<label>退仓单号:</label>
<input type="text" id="returnNo">
<button onclick="addReturnNo()">添加</button>
</div>
<div>
<button onclick="bind()">绑定</button>
</div>
<hr>
<div>
<h3>绑定列表</h3>
<ul id="bindList"></ul>
</div>
<script>
var boxNoList = []; // 箱号列表
var returnNoList = []; // 退仓单号列表
var bindList = []; // 绑定列表
// 扫描箱号
function scanBoxNo() {
// 调用钉钉接口进行扫描
// ...
// 将扫描到的箱号添加到列表中
var boxNo = "扫描到的箱号";
if (boxNo) {
$("#boxNo").val(boxNo);
boxNoList.push(boxNo);
}
}
// 添加箱号
function addBoxNo() {
var boxNo = $("#boxNo").val().trim();
if (boxNo) {
boxNoList.push(boxNo);
$("#boxNo").val("");
}
}
// 添加退仓单号
function addReturnNo() {
var returnNo = $("#returnNo").val().trim();
if (returnNo) {
returnNoList.push(returnNo);
$("#returnNo").val("");
}
}
// 绑定箱号和退仓单号
function bind() {
var boxNo = boxNoList.pop(); // 取出最后一个箱号
var returnNo = returnNoList.pop(); // 取出最后一个退仓单号
if (boxNo && returnNo) {
bindList.push({
"boxNo": boxNo,
"returnNo": returnNo
});
} else {
layer.msg("请添加箱号和退仓单号");
}
renderBindList();
}
// 渲染绑定列表
function renderBindList() {
$("#bindList").empty();
for (var i = 0; i < bindList.length; i++) {
var item = bindList[i];
var html = "<li>" + item.boxNo + " - " + item.returnNo + "</li>";
$("#bindList").append(html);
}
}
</script>
</body>
</html>
```
这段代码实现了以下功能:
1. 扫描箱号或手动输入箱号,添加到箱号列表中;
2. 手动输入退仓单号,添加到退仓单号列表中;
3. 点击“绑定”按钮,将最后一个箱号和最后一个退仓单号绑定起来,并添加到绑定列表中;
4. 渲染绑定列表,显示当前已绑定的箱号和退仓单号。
您可以根据自己的需求对代码进行修改和优化。