You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
19 KiB
341 lines
19 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html xmlns:th="http://www.w3.org/1999/xhtml">
|
||
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>扫码</title>
|
||
|
|
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
|
||
|
|
<link rel="stylesheet" href="/static/css/layuimini.css?v=2.0.4.2" media="all">
|
||
|
|
<link rel="stylesheet" href="/static/css/themes/default.css" media="all">
|
||
|
|
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="/static/js/html5.min.js"></script>
|
||
|
|
<script src="/static/js/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<!-- vue相关-->
|
||
|
|
<script src="../static/js/vue/vue.js"></script>
|
||
|
|
<script src="../static/js/vue/vue-router.js"></script>
|
||
|
|
<script src="../static/lib/http-vue-loader/src/httpVueLoader.js"></script>
|
||
|
|
<script src="../static/js/VueQrcodeReader.umd.min.js"></script>
|
||
|
|
<script src="/static/js/scanBarCode/html5-qrcode.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<input id="id" style="display: none" th:value="${record.getId()}">
|
||
|
|
<input id="mcode" style="display: none" th:value="${materialById.getCode()}">
|
||
|
|
<input id="depositoryId" style="display: none" th:value="${record.getDepositoryId()}">
|
||
|
|
<input id="quantity" style="display: none" th:value="${record.getQuantity()}">
|
||
|
|
<div style="width: 500px" id="reader">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
|
|
<script>
|
||
|
|
// 获取待处理订单的参数
|
||
|
|
let id = layui.$("#id").val();
|
||
|
|
let mcode = layui.$("#mcode").val();
|
||
|
|
let depositoryId = layui.$("#depositoryId").val();
|
||
|
|
let quantity = layui.$("#quantity").val();
|
||
|
|
|
||
|
|
// 先定义，用于弹出确定框
|
||
|
|
function isOutTrue() {
|
||
|
|
}
|
||
|
|
|
||
|
|
// 用于判断是否包含字母
|
||
|
|
var depository = null;
|
||
|
|
var place = null;
|
||
|
|
var material = null;
|
||
|
|
const html5QrCode = new Html5Qrcode("reader");
|
||
|
|
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
|
||
|
|
/* 扫描成功 */
|
||
|
|
// 获取当前扫码的类型
|
||
|
|
var formatName = decodedResult.result.format.formatName;
|
||
|
|
html5QrCode.stop().then((ignore) => {
|
||
|
|
// 暂停扫描
|
||
|
|
// 判断当前扫描的二维码是条码还是二维码
|
||
|
|
if (formatName.includes("QR_CODE")||formatName.includes("AZTEC")) {
|
||
|
|
// 如果是二维码
|
||
|
|
let params = {}; // 用于暂存扫描结果
|
||
|
|
let jmResult = {};
|
||
|
|
jmResult.result = decodedText;
|
||
|
|
// 解密当前二维码
|
||
|
|
layui.$.ajax({
|
||
|
|
url: "/material/decode3Des",
|
||
|
|
type: 'post',
|
||
|
|
dataType: 'json',
|
||
|
|
contentType: "application/json;charset=utf-8",
|
||
|
|
data: JSON.stringify(jmResult),
|
||
|
|
success: function (d) {
|
||
|
|
let parse = JSON.parse(d.data);
|
||
|
|
console.log(parse);
|
||
|
|
if (parse.did !== undefined) {
|
||
|
|
//如果扫描的为仓库
|
||
|
|
depository = parse;// 将扫描结果保存到vue中
|
||
|
|
if (material == null) {
|
||
|
|
// 如果还没有扫描物料
|
||
|
|
layer.confirm("请扫描物料", {
|
||
|
|
btn: ["扫描", "取消"]
|
||
|
|
}, function () { // 继续
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
layer.close(layer.index); // 关闭弹窗
|
||
|
|
}, function () { // 取消
|
||
|
|
// 关闭当前页
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// 如果已经扫描物料
|
||
|
|
if (depositoryId !== parse.did && Number(depositoryId) !== parse.did && depositoryId !== parse.did.toString()) {
|
||
|
|
// 如果当前仓库不是订单对应仓库
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库仓库不正确，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
// 如果正确
|
||
|
|
var req = {};
|
||
|
|
req.id = id;
|
||
|
|
isOutTrue(req);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else if (parse.pid !== undefined) {
|
||
|
|
// 如果扫描的为库位
|
||
|
|
place = parse;// 将扫描结果保存到vue中
|
||
|
|
if ( material == null) {
|
||
|
|
// 如果还没有扫描物料
|
||
|
|
layer.confirm("请扫描物料", {
|
||
|
|
btn: ["扫描", "取消"]
|
||
|
|
}, function () { // 继续
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
layer.close(layer.index); // 关闭弹窗
|
||
|
|
}, function () { // 取消
|
||
|
|
// 关闭当前页
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
if (depositoryId !== parse.depositoryId && Number(depositoryId) !== parse.depositoryId && depositoryId !== parse.depositoryId.toString()) {
|
||
|
|
// 如果当前仓库不是订单对应仓库
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库库位所在仓库不正确，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else if (parse.mcodeList.indexOf(mcode) === -1) {
|
||
|
|
// 如果当前库位不存在该物料
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库库位不含该物料，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
var req = {};
|
||
|
|
req.placeId = place.pid;
|
||
|
|
req.id = id;
|
||
|
|
isOutTrue(req);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
} else if (parse.mid !== undefined) {
|
||
|
|
// 如果扫描的为物料
|
||
|
|
material = parse;// 将扫描结果保存到vue中
|
||
|
|
if (mcode !== material.code && Number(mcode) !== material.code && mcode !== material.code.toString()) {
|
||
|
|
material = null;
|
||
|
|
layer.msg("出库物料不正确，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
if (depository !== null) { // 如果已经扫描仓库
|
||
|
|
if (depositoryId !== depository.did && Number(depositoryId) !== depository.did && depositoryId !== depository.did.toString()) {
|
||
|
|
// 如果扫描的仓库不是订单要求的仓库
|
||
|
|
layer.confirm("当前仓库不符合要求，请移步至正确仓库", {
|
||
|
|
btn: ["确定"]
|
||
|
|
}, function () {
|
||
|
|
// 关闭当前页
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// 如果是出库位置为默认库位
|
||
|
|
var req = {};
|
||
|
|
req.id = id;
|
||
|
|
// 弹出确定框
|
||
|
|
isOutTrue(req);
|
||
|
|
}
|
||
|
|
} else if ( place != null) {
|
||
|
|
// 如果已经扫描库位
|
||
|
|
if (depositoryId !== place.depositoryId && Number(depositoryId) !== place.depositoryId && depositoryId !== place.depositoryId.toString()) {
|
||
|
|
// 如果当前仓库不是订单对应仓库
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库库位所在仓库不正确，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else if ( place.mcodeList.indexOf(mcode) === -1) {
|
||
|
|
// 如果当前库位不存在该物料
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库库位不含该物料，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
var req = {};
|
||
|
|
req.id = id;
|
||
|
|
req.placeId = place.pid;
|
||
|
|
// 弹出确定框
|
||
|
|
isOutTrue(req);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
layer.confirm("请扫描仓库或库位", {
|
||
|
|
btn: ["扫描", "取消"]
|
||
|
|
}, function () { // 继续
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
layer.close(layer.index); // 关闭弹窗
|
||
|
|
}, function () { // 取消
|
||
|
|
// 关闭当前页
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// 如果是条码
|
||
|
|
// 发送ajax请求去获取当前条码的数据
|
||
|
|
layui.$.ajax({
|
||
|
|
url: "/material/findMaterialByBarCode?barCode=" + decodedText,
|
||
|
|
type: "get",
|
||
|
|
dataType: 'json',
|
||
|
|
contentType: "application/json;charset=utf-8",
|
||
|
|
success: function (d) {
|
||
|
|
var data = d.data;
|
||
|
|
// 将扫描结果赋值给父页面
|
||
|
|
if (data === null || data === undefined) {
|
||
|
|
// 如果没有查询到物料
|
||
|
|
layer.msg("未查询到对应物料，请重新扫描");
|
||
|
|
// 继续扫描
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
material =data;
|
||
|
|
// 查询到物料
|
||
|
|
if (mcode !== data.code && Number(mcode) !== data.code && mcode !== data.code.toString()) {
|
||
|
|
material = null;
|
||
|
|
layer.msg("出库物料不正确，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
if (depository !== null) { // 如果已经扫描仓库
|
||
|
|
if (depositoryId !== depository.did && Number(depositoryId) !== depository.did && depositoryId !== depository.did.toString()) {
|
||
|
|
// 如果扫描的仓库不是订单要求的仓库
|
||
|
|
layer.confirm("当前仓库不符合要求，请移步至正确仓库", {
|
||
|
|
btn: ["确定"]
|
||
|
|
}, function () {
|
||
|
|
//关闭当前页
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// 如果是出库位置为默认库位
|
||
|
|
var req = {};
|
||
|
|
req.id = id;
|
||
|
|
// 弹出确定框
|
||
|
|
isOutTrue(req);
|
||
|
|
}
|
||
|
|
} else if (place != null) {
|
||
|
|
// 如果已经扫描库位
|
||
|
|
if (depositoryId !== place.depositoryId && Number(depositoryId) !== place.depositoryId && depositoryId !== place.depositoryId.toString()) {
|
||
|
|
// 如果当前仓库不是订单对应仓库
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库库位所在仓库不正确，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else if (place.mcodeList.indexOf(mcode) === -1) {
|
||
|
|
// 如果当前库位不存在该物料
|
||
|
|
depository = null;
|
||
|
|
place = null;
|
||
|
|
layer.msg("出库库位不含该物料，请重新扫描");
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
} else {
|
||
|
|
var req = {};
|
||
|
|
req.id = id;
|
||
|
|
req.placeId = place.pid;
|
||
|
|
// 弹出确定框
|
||
|
|
isOutTrue(req);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
layer.confirm("请扫描仓库或库位", {
|
||
|
|
btn: ["扫描", "取消"]
|
||
|
|
}, function () { // 继续
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
layer.close(layer.index); // 关闭弹窗
|
||
|
|
}, function () { // 取消
|
||
|
|
// 将vue中暂存的库位置为空
|
||
|
|
material = null;
|
||
|
|
//关闭当前页
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}).catch((err) => {
|
||
|
|
console.log(err)
|
||
|
|
// 停止失败，处理它。
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// 弹出出库确定弹出框
|
||
|
|
isOutTrue = function (req) {
|
||
|
|
var confirmIndex = layer.confirm("确定出库？", {
|
||
|
|
btn: ["确定", "取消"]
|
||
|
|
}, function () { // 如果确定出库
|
||
|
|
|
||
|
|
layui.$.ajax({
|
||
|
|
url: "/depositoryRecord/isCheckOut",
|
||
|
|
type: "post",
|
||
|
|
dataType: 'json',
|
||
|
|
data: JSON.stringify(req),
|
||
|
|
contentType: "application/json;charset=utf-8",
|
||
|
|
success: function (res) {
|
||
|
|
if (res.status === 200) {
|
||
|
|
// 如果出库成功
|
||
|
|
layer.msg("出库成功",
|
||
|
|
{
|
||
|
|
icon: 6,
|
||
|
|
time: 500
|
||
|
|
}
|
||
|
|
, function () {
|
||
|
|
layer.close(layer.index);
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// 如果出库失败
|
||
|
|
|
||
|
|
layer.msg(res.statusInfo.detail + ",请重试");
|
||
|
|
depository = null;
|
||
|
|
material = null;
|
||
|
|
place = null;
|
||
|
|
// 继续扫描
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); // 继续扫描
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, function () {
|
||
|
|
// 如果取消
|
||
|
|
depository = null;
|
||
|
|
material = null;
|
||
|
|
place = null;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const config = {fps: 10, qrbox: {width: 250, height: 250}};
|
||
|
|
|
||
|
|
// Select back camera or fail with `OverconstrainedError`.
|
||
|
|
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|