14 changed files with 446 additions and 62 deletions
@ -0,0 +1,268 @@ |
|||||
|
<!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> |
||||
|
<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 vue = new Vue({ |
||||
|
data() { |
||||
|
return { |
||||
|
isValid: undefined, |
||||
|
camera: 'auto', |
||||
|
result: '', |
||||
|
error: '', |
||||
|
materialList: [], |
||||
|
depository: null, |
||||
|
place: null |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
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) { |
||||
|
// 如果扫描的是仓库二维码 |
||||
|
vue.depository = parse;// 将扫描结果保存到vue中 |
||||
|
params.depository = vue.depository; |
||||
|
params.place = vue.place; |
||||
|
params.materialList = vue.materialList; |
||||
|
if (vue.materialList.length > 0) { |
||||
|
// 如果有物料 |
||||
|
vue.temporaryScanValue(params); // 将数据暂存至redis中 |
||||
|
vue.chooseIn(); // 弹出选择框 |
||||
|
} else { |
||||
|
// 如果没有 |
||||
|
layer.confirm("暂未选择物料，是否继续扫描", { |
||||
|
btn:["继续","取消"] |
||||
|
},function () { // 继续 |
||||
|
vue.turnCameraOn(); // 继续扫描 |
||||
|
layer.close(layer.index); // 关闭弹窗 |
||||
|
},function () { // 取消 |
||||
|
vue.temporaryScanValue(params); // 将数据暂存 |
||||
|
vue.chooseIn(); // 弹出选择框 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
else if (parse.pid !== undefined) { |
||||
|
// 如果扫描的是库位二维码 |
||||
|
vue.place = parse; // 将扫描结果保存到vue中 |
||||
|
params.depository = vue.depository; |
||||
|
params.place = vue.place; |
||||
|
params.materialList = vue.materialList; |
||||
|
if (vue.materialList.length > 0) { |
||||
|
// 如果有物料 |
||||
|
vue.temporaryScanValue(params); // 将数据暂存至redis中 |
||||
|
vue.chooseIn(); // 弹出选择框 |
||||
|
} else { |
||||
|
// 如果没有 |
||||
|
layer.confirm("当前并未扫描物料，是否继续扫描", |
||||
|
{btn:["继续","取消"]}, |
||||
|
function () { // 继续扫描 |
||||
|
vue.turnCameraOn(); // 继续扫描 |
||||
|
layer.close(layer.index); // 关闭弹窗 |
||||
|
}, |
||||
|
function () { |
||||
|
vue.temporaryScanValue(params); // 将数据暂存 |
||||
|
vue.chooseIn(); // 弹出选择框 |
||||
|
} |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
else if (parse.mid !== undefined) { |
||||
|
// 如果扫描的是物料二维码 |
||||
|
vue.materialList.push(parse); |
||||
|
layer.confirm("是否继续扫描", |
||||
|
{ |
||||
|
btn: ["继续", "取消"] |
||||
|
}, |
||||
|
function () { // 继续扫描物料 |
||||
|
vue.turnCameraOn(); // 继续扫描 |
||||
|
layer.close(layer.index); // 关闭弹窗 |
||||
|
}, |
||||
|
function () { |
||||
|
// 不扫描物料 |
||||
|
params.materialList = vue.materialList; |
||||
|
params.depository = vue.depository; |
||||
|
params.place = vue.place; |
||||
|
vue.temporaryScanValue(params); // 将物料暂存 |
||||
|
if ( vue.depository !== null || vue.place !== null) { |
||||
|
// 如果已经扫描了仓库或库位 |
||||
|
// 弹出选择框 |
||||
|
vue.chooseIn(); |
||||
|
} |
||||
|
else { |
||||
|
// 如果没有扫描仓库或库位 |
||||
|
layer.confirm("暂未扫描仓库，是否继续该操作", |
||||
|
{ |
||||
|
btn: ["继续", "取消"] |
||||
|
}, |
||||
|
function () {// 继续 |
||||
|
// 弹出选择框 |
||||
|
vue.chooseIn(); |
||||
|
}, |
||||
|
function () { // 取消当前操作 |
||||
|
vue.turnCameraOn(); // 继续扫描 |
||||
|
layer.close(layer.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) |
||||
|
}); |
||||
|
}, |
||||
|
// 弹出入库|出库选择框 |
||||
|
chooseIn(){ |
||||
|
layer.open({ |
||||
|
type: 2, |
||||
|
title: '入库', |
||||
|
skin: 'layui-layer-rim', |
||||
|
maxmin: true, |
||||
|
shadeClose: true, //点击遮罩关闭层 |
||||
|
area: ['100%', '100%'], |
||||
|
move: '.layui-layer-title', |
||||
|
fixed: false, |
||||
|
content: '/application_in_scanQrCode', |
||||
|
end:function () { |
||||
|
var index = parent.layer.getFrameIndex(window.name); |
||||
|
parent.layer.close(index); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}).$mount('#app') |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue