<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0" />
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=0.665, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" /> -->
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<title>Boxline PDA</title>
|
|
<link rel="stylesheet" href="/layui/css/layui.css" />
|
<link rel="stylesheet" href="/css/style.css" />
|
<script src="/js/adaptive.js"></script>
|
|
<link rel="stylesheet" href="/css/my.css" />
|
<style type="text/css">
|
.layout-bill-info {
|
height: auto;
|
/* background-color: #009E94; */
|
}
|
|
.layout-tbl-submit {
|
margin-top: 10px;
|
}
|
|
/* .out-scatter-num {
|
background-color: #009688;
|
|
} */
|
.out-scatter-num .local-input {
|
width: 40%;
|
height: 25px;
|
float: left;
|
}
|
|
.out-scatter-num .local-ok button {
|
height: 25px;
|
border: 0;
|
color: #FFFFFF;
|
background-color: #0a93e3;
|
border-radius: 3px;
|
padding: 2px;
|
margin-left: 10px;
|
width: 100%;
|
}
|
|
.out-scatter-num .layui-input-block {
|
width: 100%;
|
/* background-color: #009E94; */
|
margin-left: 0;
|
}
|
|
.out-scatter-num .local-ok {
|
width: 20%;
|
height: 25px;
|
float: left;
|
}
|
|
.btn-ok-blue {
|
border: none;
|
color: #FFFFFF;
|
background-color: #0a93e3;
|
width: 48%;
|
height: 36px;
|
border-radius: 5px;
|
}
|
|
.btn-ok-red {
|
border: none;
|
color: #FFFFFF;
|
background-color: #9f1707;
|
width: 48%;
|
height: 36px;
|
border-radius: 5px;
|
}
|
|
.btn-ok-blue:active {
|
opacity: 0.8;
|
}
|
|
.btn-ok-red:active {
|
opacity: 0.8;
|
}
|
|
.layout-tbl-paging {
|
margin-top: 20px;
|
}
|
|
.foot-container {
|
text-align: center;
|
}
|
|
.layout-tab-page {
|
height: auto;
|
}
|
|
.layui-form-checkbox {
|
margin: auto;
|
/* padding-left: 2px; */
|
/* padding-right: 2px; */
|
}
|
|
.div-tbl-title {
|
width: 98%;
|
margin: auto;
|
/* background-color: #4476A7; */
|
height: 30px;
|
}
|
|
.div-tbl-title table {
|
width: 100%;
|
height: 30px;
|
}
|
|
td {
|
word-break: break-all;
|
word-wrap: break-word;
|
}
|
|
.layui-input-block .layui-input,
|
.layui-input-block .layui-textarea {
|
padding-left: 0rem;
|
font-size: 13px;
|
}
|
|
.lableWidth {
|
width: 17%;
|
}
|
|
.layui-input-block {
|
width: 83%;
|
margin-left: 17%;
|
}
|
|
.layui-form-switch {
|
margin-top: 0;
|
}
|
|
ul {
|
list-style-type: none;
|
padding: 0;
|
}
|
|
li {
|
cursor: pointer;
|
background-color: lightgray;
|
padding: 10px;
|
margin-bottom: 5px;
|
}
|
</style>
|
<link rel="stylesheet" href="/css/adapter.css" />
|
</head>
|
|
<body>
|
<div id="" class="main-content">
|
<div id="" class="layout-title">
|
<table border="" cellspacing="" cellpadding="">
|
<tr>
|
<td class="img-back"><a href="../index.html"><img src="/assets/back.jpg"></a></td>
|
<td class="title-text">成品拣货</td>
|
<td class="title-menu-icon"><img id="menuImg" src="/assets/menu.jpg"></td>
|
</tr>
|
</table>
|
</div>
|
<div id="" class="layout-sub-content">
|
<div id="menuList" class="menu">
|
<ul class="" style="text-align: center;">
|
<li><a href="../index.html">主页</a></li>
|
<li><a href="../login.html">重新登录</a></li>
|
</ul>
|
</div>
|
|
|
<div id="" class="layout-bill-info">
|
<form class="layui-form" action="" style="height: auto;">
|
|
<div id="layout-bill" class="layui-form-item layout-dropdownlist">
|
<label class="layui-form-label lableWidth">出库单：</label>
|
<div class="layui-input-block" id="selectDiv">
|
<select id="bar" lay-filter="getbar" lay-search>
|
<option value=""></option>
|
</select>
|
<img src="/assets/down_arraw.png">
|
</div>
|
</div>
|
<div id="layout-skuLotNo" class="layui-form-item layout-dropdownlist">
|
<label class="layui-form-label lableWidth">物料 - 批次：</label>
|
<div class="layui-input-block">
|
<select id="skuLotNo" lay-filter="getSkuLotNo" lay-search>
|
<option value=""></option>
|
</select>
|
<img src="/assets/down_arraw.png">
|
</div>
|
</div>
|
<div id="" class="layout-tab-page">
|
<table class="tbl-box-sim-info" border="" cellspacing="" cellpadding="">
|
<tr>
|
<td colspan="3">
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="width: 17%;">SAP单号：</label>
|
<div class="layui-input-block" style="width: 83%;margin-left:17%;">
|
<input id="OrderCode" type="text" lay-verify="" disabled placeholder=""
|
class="layui-input">
|
</div>
|
</div>
|
</td>
|
|
</tr>
|
<tr>
|
<td>
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="width: 50%;">计划数量：</label>
|
<div class="layui-input-block" style="width: 50%;margin-left:50%;">
|
<input id="planQty" type="text" lay-verify="" disabled placeholder=""
|
class="layui-input">
|
</div>
|
</div>
|
</td>
|
<td>
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="width: 50%">完成数量：</label>
|
<div class="layui-input-block" style="width: 50%;margin-left:50%;">
|
<input id="finishQty" type="text" lay-verify="" disabled placeholder=""
|
class="layui-input">
|
</div>
|
</div>
|
|
</td>
|
<td>
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="width: 34%;">出库口：</label>
|
<div class="layui-input-block" style="width: 66%;margin-left:34%;">
|
<input id="outModel" type="text" lay-verify="" disabled placeholder=""
|
class="layui-input">
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="3">
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="width: 17%;">规格：</label>
|
<div class="layui-input-block" style="width: 83%;margin-left:17%;">
|
<input id="standard" type="text" lay-verify="" disabled placeholder=""
|
class="layui-input">
|
</div>
|
</div>
|
</td>
|
|
</tr>
|
</table>
|
</div>
|
|
<div id="layout-pallet" class="layui-form-item layout-input">
|
<label class="layui-form-label lableWidth">托盘条码：</label>
|
<div class="layui-input-block">
|
<input id="palletNo" type="text" lay-verify="stock" placeholder="请扫描托盘条码"
|
autocomplete="off" class="layui-input" style="height:24px">
|
</div>
|
</div>
|
<div id="" class="layui-form-item layout-input">
|
<label class="layui-form-label" lang>是否整托出库：</label>
|
<div class="layui-input-block">
|
<input type="checkbox" name="IsZhengTuo" id="IsZhengTuo" lay-skin="switch"
|
lay-text="是|否" lay-filter="IsZhengTuo">
|
</div>
|
</div>
|
<div id="BoxDIv" class="layout-tab-page">
|
<table class="layout-tab-content" border="" cellspacing="" cellpadding="">
|
<tr>
|
<td>
|
<div class="layui-form-item layout-input">
|
<label class="layui-form-label lableWidth">标签条码：</label>
|
<div class="layui-input-block">
|
<input id="boxNo" type="text" placeholder="请扫描标签条码" autocomplete="off"
|
class="layui-input">
|
</div>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div id="" class="layout-tab-page">
|
<table class="layout-tab-content" border="" cellspacing="" cellpadding="">
|
<tr>
|
<td>
|
<table class="tbl-box-sim-info" border="" cellspacing="" cellpadding="">
|
<tr>
|
<td>
|
<div class="layui-form-item">
|
<label class="layui-form-label lableWidth">待拣数量：</label>
|
<div class="layui-input-block">
|
<input id="pickQty" type="text" lay-verify="" disabled
|
placeholder="" class="layui-input">
|
</div>
|
</div>
|
</td>
|
<td>
|
<div class="layui-form-item">
|
<label class="layui-form-label lableWidth">已扫数量：</label>
|
<div class="layui-input-block">
|
<input id="scanQty" type="text" lay-verify="" disabled
|
placeholder="" class="layui-input">
|
</div>
|
</div>
|
</td>
|
|
</tr>
|
</table>
|
</td>
|
</tr>
|
</table>
|
<table class="layout-tab-content">
|
<tr>
|
<td style="width: 33%;"></td>
|
<td>
|
<button class="layout-btn layout-btn-red" lang type="button" lay-submit
|
lay-filter="formPickScatter">拣货</button>
|
</td>
|
<td style="width: 33%;"></td>
|
|
</tr>
|
</table>
|
<div id="" style="text-align: right;margin-top: 10px; display: none;">
|
<div id="" class="cut-line">
|
<img src="/assets/fengexian.png">
|
</div>
|
</div>
|
</div>
|
|
</form>
|
</div>
|
|
<div class="layout-tbl-paging" id="">
|
<table id="tableBoxList" class="tbl-box-list" border="" cellspacing="" cellpadding="">
|
<tr id="tableHead">
|
<th style="width: 54%;">标签条码</th>
|
<th style="width: 20%;">数量</th>
|
</tr>
|
<tr id="boxCell" style="display: none;">
|
<td name="boxNo">AG000001</td>
|
<td name="qty">30</td>
|
</tr>
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
<script src="/js/jquery-3.5.1.min.js"></script>
|
<script src="/layui/layui.js"></script>
|
<script src="/js/jquery.cookie.js"></script>
|
<script src="/js/public.js"></script>
|
|
<script>
|
layui.use(['form', 'jquery'], function () {
|
var form = layui.form;
|
|
/* 标签切换代码 */
|
|
var xianshiyemian = 0;
|
|
|
var boxes = [];
|
var scanQty=0;
|
//是否整托拣货
|
var isContinue = "0";
|
var tableData = null
|
var tableData2 = null
|
var canPickBox = true
|
$("#palletNo").focus();//光标默认选中
|
|
function clear1() {
|
$('#outModel').val("");//出库口
|
$('#standard').val("");//规格
|
|
$('#pickQty').val("");//待拣数量
|
}
|
function clear2() {
|
//物料批次
|
$("#skuLotNo").empty()
|
$("#skuLotNo").append('<option value =>' + '</option>');
|
form.render('select');
|
}
|
function clear3() {
|
$("#planQty").val(""); //计划数量
|
$("#finishQty").val("");//完成数量
|
}
|
function clear4() {
|
$('#boxNo').val("");//箱码
|
$('#boxQty').val("");//箱内数量
|
}
|
//当托盘条码输入框文本改变时,检查一下托盘状态
|
$("#palletNo").on('input', function () {
|
|
if ($("#palletNo").val() == "" || $("#palletNo").val().length < 8) {
|
return
|
}
|
if ($("#palletNo").val().length >= 8) {
|
$("#palletNo").val($("#palletNo").val().substr(-8))
|
}
|
checkPalletState()
|
})
|
|
form.on('switch(IsZhengTuo)', function (obj) {
|
if (obj.elem.checked) {
|
$('#BoxDIv').attr("style", "display:none")
|
isContinue = "1";
|
} else {
|
$('#BoxDIv').attr("style", "display:block")
|
isContinue = "0";
|
}
|
$('#boxNo').val("");
|
});
|
|
//箱码文本框回车事件
|
$("#boxNo").blur(function () {
|
|
});
|
//当箱码输入框文本改变时
|
$("#boxNo").on('input', function () {
|
if ($("#boxNo").val() == "" || $("#boxNo").val().length < 20) {
|
return
|
}
|
if ($("#palletNo").val() == "" || $("#palletNo").val().length < 8) {
|
layer.msg("请先扫描托盘条码", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
//回调
|
});
|
$("#boxNo").val('')
|
return;
|
}
|
var box;
|
if ($("#boxNo").val().length >= 20) {
|
var boxNum=0;
|
var param = {
|
"PalletNo": $("#palletNo").val(),
|
"BoxNo":$("#boxNo").val()
|
}
|
synData(IP + "/PdaSo/CheckBoxForPick", param, 'get', function (res) {
|
if (res.code == 0) { //成功
|
boxNum=res.data
|
box={BoxNo: $("#boxNo").val(), Qty:boxNum }
|
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
return;
|
}
|
});
|
|
var isExist = boxes.some(function(item) {
|
return item.BoxNo === box.BoxNo;
|
});
|
if (isExist) {
|
layer.msg("该条码已扫描！", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
//回调
|
});
|
$("#boxNo").val('')
|
return;
|
}
|
boxes.push(box);
|
tableData = deepCopy(boxes)
|
refreshTable(tableData)
|
$("#boxNo").val('')
|
|
scanQty=scanQty+boxNum
|
$('#scanQty').val(scanQty);
|
}
|
})
|
|
//检查托盘状态
|
function checkPalletState() {
|
|
var param = {
|
"PalletNo": $("#palletNo").val()
|
}
|
synData(IP + "/PdaSo/IsEnableOkPalletNo", param, 'post', function (res) {
|
|
if (res.code == 0) { //成功
|
updateBillList();
|
if ($('#bar').val() == "") {
|
clear1();
|
return;
|
} else {
|
updateSkuLotNoList();
|
updateQtyList();
|
getBar();
|
}
|
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
//下拉单据选中后事件
|
form.on('select(getbar)', function (data) {
|
if ($('#palletNo').val() == "") {
|
layer.msg("请输入托盘条码", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
//回调
|
});
|
return
|
}
|
if ($('#bar').val() == "") {
|
clear1();
|
clear2();
|
clear3();
|
return
|
}
|
updateSkuLotNoList();
|
updateQtyList();
|
getBar();
|
});
|
//下拉物料批次选中后事件
|
form.on('select(getSkuLotNo)', function (data) {
|
if ($('#palletNo').val() == "") {
|
layer.msg("请输入托盘条码", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
clear1();
|
clear3();
|
});
|
return
|
}
|
if ($('#skuLotNo').val() == "") {
|
clear1();
|
clear3();
|
return
|
}
|
updateQtyList();
|
getBar();
|
});
|
|
//初始化渲染 出库单
|
function updateBillList() {
|
|
$("#bar").empty()
|
$("#bar").append('<option value =>' + '</option>');
|
form.render('select');
|
|
var param = {
|
PalletNo: $("#palletNo").val(),
|
};
|
synData(IP + "/PdaSo/GetRunSoNoticeList", param, 'post', function (res) {
|
if (res.code == 0) { //成功
|
console.log(res.data);
|
for (var i = 0; i < res.data.length; i++) {
|
if (i == 0) {
|
$("#bar").append('<option value =' + res.data[i] + ' selected>' + res.data[i] + '</option>');
|
} else {
|
$("#bar").append('<option value =' + res.data[i] + '>' + res.data[i] + '</option>');
|
}
|
}
|
form.render('select');
|
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
});
|
}
|
});
|
}
|
|
//初始化渲染 物料-批次
|
function updateSkuLotNoList() {
|
clear2();
|
|
var param = {
|
PalletNo: $("#palletNo").val(),
|
SoNo: $("#bar").val(),
|
};
|
synData(IP + "/PdaSo/GetSoSkuLotNoListByPallet", param, 'post', function (res) {
|
if (res.code == 0) { //成功
|
for (var i = 0; i < res.data.length; i++) {
|
if (i == 0) {
|
$("#skuLotNo").append('<option value =' + res.data[i].SoDetailId + ' selected>' + res.data[i].SkuName + " - " + res.data[i].LotNo + '</option>');
|
|
} else {
|
$("#skuLotNo").append('<option value =' + res.data[i].SoDetailId + '>' + res.data[i].SkuName + " - " + res.data[i].LotNo + '</option>');
|
}
|
}
|
form.render('select');
|
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
|
//初始化渲单据的计划数量和完成数量
|
function updateQtyList() {
|
clear3();
|
var param = {
|
SoDetailId: $("#skuLotNo").val(),
|
};
|
synData(IP + "/PdaSo/GetPlanAndFinishQty", param, 'post', function (res) {
|
if (res.code == 0) { //成功
|
console.log(res.data);
|
$("#planQty").val(res.data.PlanQty)
|
$("#finishQty").val(res.data.FinishQty)
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
|
//根据单据获取出库口
|
function getBar() {
|
clear1();
|
|
var param = {
|
PalletNo: $("#palletNo").val(),
|
SoDetailId: $("#skuLotNo").val(),
|
}
|
synData(IP + "/PdaSo/GetOutlets", param, 'post', function (res) {
|
if (res.code == 0) { //成功
|
let data = res.data
|
console.log(res.data);
|
$('#outModel').val(res.data.OutModel);
|
$('#standard').val(res.data.Standard);
|
|
$('#pickQty').val(res.data.PickQty);
|
} else { //不成功
|
if ($("#planQty").val() == $("#finishQty").val()) {
|
return;
|
}
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
|
}
|
|
//渲染表格数据
|
function refreshTable(list) {
|
//先清空一下信息列表
|
let trs = $("#tableBoxList tr")
|
let len = trs.length
|
for (i = len - 1; i >= 2; i--) {
|
trs[i].remove();
|
}
|
|
if (list != null && list.length > 0) { //成功
|
|
var arrTrs = new Array()
|
let idx = 0
|
for (var i in list) {
|
// list[i].BoxCode
|
var tr = $("#boxCell").eq(0).clone();
|
tr.appendTo("#tableBoxList");
|
// tr.attr('id', list[i].BoxCode)
|
idx++;
|
tr.attr('index', idx)
|
tr.find("td[name='boxNo']").html(list[i].BoxNo);
|
tr.find("td[name='qty']").html(list[i].Qty);
|
|
tr.show();
|
arrTrs[i] = tr
|
}
|
canPickBox = true
|
|
} else { //不成功
|
layer.msg("无数据", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
// $("#boxNum").val(0)
|
}
|
}
|
//单拣货（确认按钮）
|
form.on('submit(formPickScatter)', function (data) {
|
|
if ($('#bar').val() == "") {
|
layer.msg("请选择出库单", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}); return;
|
}
|
if ($('#bar').val() == "") {
|
layer.msg("请选择物料-批次", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}); return;
|
}
|
if ($('#palletNo').val() == "") {
|
layer.msg("请输入托盘码", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}); return;
|
}
|
if (isContinue == "0") {
|
if ($('#boxNo').val() == "") {
|
layer.msg("请输入箱码", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}); return;
|
}
|
if ($('#boxQty').val() == "") {
|
layer.msg("箱内数量为空，不能拣货", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
});
|
return;
|
}
|
}
|
if (canPickBox == false) {
|
|
layer.msg("请求未完成，不要重复请求", {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
});
|
return;
|
}
|
|
reqPickScatter()
|
|
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
|
});
|
|
//确认拣货
|
function reqPickScatter() {
|
var param = {
|
"SoNo": $("#bar").val(),
|
"SoDetailId": $("#skuLotNo").val(),
|
"PalletNo": $('#palletNo').val(),
|
"BoxNo": $('#boxNo').val()
|
}
|
sendData(IP + "/PdaSo/SoSetPick", param, 'post', function (res) {
|
//console.log(res);
|
|
if (res.code == 0) { //成功
|
layer.msg(res.msg, {
|
icon: 1,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
canPickBox = true//回调
|
$("#boxNo").val('');
|
updateQtyList();
|
getBar();
|
});
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
canPickBox = true;//回调
|
});
|
}
|
});
|
}
|
|
//----------------------------------------------------------------------------------
|
//主页及重新登录
|
$("#menuImg").click(function (e) {
|
//console.log("menuImg")
|
e.stopPropagation()
|
|
if ($("#menuList").is(":hidden")) {
|
$("#menuList").show()
|
} else {
|
$("#menuList").hide()
|
}
|
})
|
$('body').click(function () {
|
// //console.log("body")
|
$("#menuList").hide()
|
})
|
|
})
|
</script>
|
</body>
|
|
</html>
|
