13 changed files with 1002 additions and 110 deletions
@ -0,0 +1,75 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>layui</title> |
|||
<meta name="renderer" content="webkit"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|||
</head> |
|||
<body> |
|||
<input id="mname" name="mname" th:value="${mname}" style="display: none"> |
|||
<input id="type" name="type" th:value="${type}" style="display: none"> |
|||
<input id="clickObj" name="clickObj" th:value="${clickObj}" style="display: none"> |
|||
<input id="placeId" name="clickObj" th:value="${placeId}" style="display: none"> |
|||
<input id="depositoryId" name="clickObj" th:value="${depositoryId}" style="display: none"> |
|||
<div id="test2" class="demo-tree"></div> |
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script> |
|||
var data; |
|||
layui.use(['form', 'layer', 'dropdown', 'tree'], function () { |
|||
var $ = layui.jquery, |
|||
tree = layui.tree; |
|||
var mname = $("#mname").val(); |
|||
var type = $("#type").val(); |
|||
var clickObj = $("#clickObj").val(); |
|||
var depositoryId = $("#depositoryId").val(); |
|||
var placeId = $("#placeId").val(); |
|||
var req = {}; |
|||
req.mname = mname; |
|||
req.type = type; |
|||
req.depositoryId = depositoryId; |
|||
req.placeId = placeId; |
|||
test = tree.render({ |
|||
elem: '#test2' |
|||
, data: [] |
|||
, click: function (obj) { |
|||
if (obj.data.children !== undefined) { |
|||
return false |
|||
} |
|||
var windowParent = $("#"+clickObj,window.parent.document)[0]; |
|||
console.log(windowParent) |
|||
var children = windowParent.childNodes[5]; |
|||
var materialItem = children.childNodes[3].childNodes[1].childNodes; |
|||
var materialName = materialItem[1]; |
|||
var materialId = materialName.parentNode.parentNode.childNodes[3]; |
|||
materialName.value = obj.data.title; |
|||
materialId.value = obj.data.id; |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
}); |
|||
|
|||
$.ajax({ |
|||
url: "/material/treeMenus", |
|||
data: JSON.stringify(req), |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
beforeSend:function () { |
|||
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] }); |
|||
}, |
|||
success: function (d) { |
|||
layer.close(this.layerIndex); |
|||
var data2 = d.data; |
|||
test.reload({ |
|||
data: data2 |
|||
}); |
|||
} |
|||
}); |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,100 @@ |
|||
<!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> |
|||
<div style="width: 500px" id="reader"> |
|||
|
|||
</div> |
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script> |
|||
// 条形码 |
|||
let barCode; |
|||
var depository; |
|||
var place; |
|||
// 是否扫描二维码标志位 |
|||
var flag = false; |
|||
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")) { |
|||
// 如果扫描的位本地二维码 |
|||
flag = true; |
|||
// 先解密 |
|||
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); |
|||
if (parse.did !== undefined) { |
|||
// 如果扫描的是仓库二维码 |
|||
depository = parse; |
|||
layui.$("#openSonByDepository",window.parent.document).val(depository.dname); |
|||
layui.$("#depositoryId",window.parent.document).val(depository.did); |
|||
layui.$("#placeId",window.parent.document).val(0); |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
else if (parse.pid !== undefined) { |
|||
// 如果扫描的是库位二维码 |
|||
place = parse; |
|||
layui.$("#openSonByDepository",window.parent.document).val(place.dname +"-"+ place.code); |
|||
layui.$("#depositoryId",window.parent.document).val(place.depositoryId); |
|||
layui.$("#placeId",window.parent.document).val(place.pid); |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
else{ |
|||
layer.msg("请扫描正确的二维码",{ |
|||
icon:0, |
|||
time:500 |
|||
},function () { |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
}); |
|||
|
|||
} |
|||
} |
|||
}) |
|||
}else{ |
|||
console.log("条形码",decodedText); |
|||
// 如果是条形码 |
|||
} |
|||
|
|||
}).catch((err) => { |
|||
console.log(err) |
|||
// 停止失败，处理它。 |
|||
}); |
|||
}; |
|||
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> |
|||
@ -0,0 +1,202 @@ |
|||
<!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> |
|||
<style> |
|||
.validation-success, |
|||
.validation-failure, |
|||
.validation-pending { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
background-color: rgba(255, 255, 255, .8); |
|||
text-align: center; |
|||
font-weight: bold; |
|||
font-size: 1.4rem; |
|||
padding: 10px; |
|||
|
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.validation-success { |
|||
color: green; |
|||
} |
|||
|
|||
.validation-failure { |
|||
color: red; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<input type="text" id="depositoryId" th:value="${depositoryId}" style="display: none"> |
|||
<input type="text" id="placeId" th:value="${placeId}" style="display: none"> |
|||
<div id="app"> |
|||
<qrcode-stream :camera="camera" @decode="onDecode" @init="onInit" :track="paintBoundingBox"> |
|||
<div v-if="validationPending" class="validation-pending"> |
|||
Long validation in progress... |
|||
</div> |
|||
</qrcode-stream> |
|||
</div> |
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script> |
|||
Vue.use(httpVueLoader); |
|||
var depositoryId = layui.$("#depositoryId").val(); |
|||
var placeId = layui.$("#placeId").val(); |
|||
var vue = new Vue({ |
|||
data() { |
|||
return { |
|||
isValid: undefined, |
|||
camera: 'auto', |
|||
result: '', |
|||
error: '', |
|||
materialList: [] |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
validationPending() { |
|||
return this.isValid === undefined |
|||
&& this.camera === 'off' |
|||
}, |
|||
}, |
|||
methods: { |
|||
onDecode(result) { |
|||
let params = {}; // 用于暂存扫描结果 |
|||
this.result = result; |
|||
let jmResult = {}; |
|||
jmResult.result = result; |
|||
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); |
|||
vue.turnCameraOff(); // 暂停扫描 |
|||
if (parse.did !== undefined) { |
|||
// 如果扫描的是仓库二维码 |
|||
layer.msg("请扫描物料！",{ |
|||
icon:0, |
|||
time:500 |
|||
},function () { |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
}) |
|||
} |
|||
else if (parse.pid !== undefined) { |
|||
// 如果扫描的是库位二维码 |
|||
layer.msg("请扫描物料！",{ |
|||
icon:0, |
|||
time:500 |
|||
},function () { |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
}) |
|||
} |
|||
else if (parse.mid !== undefined) { |
|||
// 如果扫描的是物料二维码 |
|||
vue.materialList.push(parse); |
|||
layer.confirm("是否继续扫描", |
|||
{ |
|||
btn: ["继续", "取消"] |
|||
}, |
|||
function () { // 继续扫描物料 |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
}, |
|||
function () { |
|||
// 不扫描物料 |
|||
params.materialList = vue.materialList; |
|||
vue.temporaryScanValue(params); // 将物料暂存 |
|||
// 关闭当前页 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
|
|||
} |
|||
) |
|||
} |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
async onInit(promise) { |
|||
try { |
|||
await promise.then(this.resetValidationState) |
|||
} catch (error) { |
|||
if (error.name === 'NotAllowedError') { |
|||
this.error = "ERROR: you need to grant camera access permission" |
|||
} else if (error.name === 'NotFoundError') { |
|||
this.error = "ERROR: no camera on this device" |
|||
} else if (error.name === 'NotSupportedError') { |
|||
this.error = "ERROR: secure context required (HTTPS, localhost)" |
|||
} else if (error.name === 'NotReadableError') { |
|||
this.error = "ERROR: is the camera already in use?" |
|||
} else if (error.name === 'OverconstrainedError') { |
|||
this.error = "ERROR: installed cameras are not suitable" |
|||
} else if (error.name === 'StreamApiNotSupportedError') { |
|||
this.error = "ERROR: Stream API is not supported in this browser" |
|||
} else if (error.name === 'InsecureContextError') { |
|||
this.error = 'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'; |
|||
} else { |
|||
this.error = `ERROR: Camera error (${error.name})` |
|||
} |
|||
console.log(this.error) |
|||
} |
|||
} |
|||
, |
|||
resetValidationState() { |
|||
this.isValid = undefined |
|||
} |
|||
, |
|||
// 绘制二维码跟踪框 |
|||
paintBoundingBox(detectedCodes, ctx) { |
|||
for (const detectedCode of detectedCodes) { |
|||
const {boundingBox: {x, y, width, height}} = detectedCode; |
|||
ctx.lineWidth = 2; |
|||
ctx.strokeStyle = '#007bff'; |
|||
ctx.strokeRect(x, y, width, height) |
|||
} |
|||
} |
|||
, |
|||
// 打开相机 |
|||
turnCameraOn() { |
|||
this.camera = 'auto' |
|||
} |
|||
, |
|||
// 关闭相机 |
|||
turnCameraOff() { |
|||
this.camera = 'off' |
|||
}, |
|||
// 将扫描到的数据暂存到redis |
|||
temporaryScanValue(params) { |
|||
layui.$.ajax({ |
|||
url: "/material/temporaryValue", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(params) |
|||
}); |
|||
} |
|||
|
|||
} |
|||
}).$mount('#app') |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue