42 changed files with 4344 additions and 863 deletions
@ -1,135 +1,213 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>分步表单</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"> |
|||
<link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all"> |
|||
<meta charset="utf-8"> |
|||
<title>分步表单</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"> |
|||
<link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all"> |
|||
|
|||
<style> |
|||
.inputdiv { |
|||
display: flex; |
|||
background-color: #fff; |
|||
height: 38px; |
|||
line-height: 38px; |
|||
border: 1px solid rgb(238, 238, 238); |
|||
} |
|||
|
|||
.layui-form-label { |
|||
padding: 9px 0px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.layui-input-block { |
|||
margin-left: 80px; |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<form class="layui-form" action="" > |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">物料编号</label> |
|||
<div class="layui-input-block"> |
|||
<input type="text" th:value="${record.getId()}" name="id" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly"> |
|||
|
|||
<form class="layui-form" action=""> |
|||
<input type="text" id="barCodeList" style="display:none;"> |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">物料编号</label> |
|||
<div class="layui-input-block"> |
|||
<input type="text" th:value="${record.getId()}" name="id" required lay-verify="required" autocomplete="off" |
|||
class="layui-input" readonly="readonly"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料名称</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getMname()}" name="mname" required lay-verify="required" autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料名称</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getMname()}" name="mname" required lay-verify="required" |
|||
autocomplete="off" class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">存货编码</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getCode()}" name="code" required lay-verify="required" autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">存货编码</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getCode()}" name="code" required lay-verify="required" |
|||
autocomplete="off" class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">规格型号</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getVersion()}" name="version" required autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">规格型号</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getVersion()}" name="version" required autocomplete="off" |
|||
class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料类型</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" placeholder="请选择物料类型" class="layui-input" id="openSonByMateralType" readonly th:value="${record.getMaterialType().getTname()}" |
|||
lay-verify="required"/> |
|||
<input type="text" id="materialTypeId" th:value="${record.getTypeId()}" placeholder="请选择物料类型" name="materialTypeId" class="layui-input" style="display: none" lay-verify="required"/> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">材质</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getTexture()}" name="texture" required autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料类型</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" placeholder="请选择物料类型" class="layui-input" id="openSonByMateralType" readonly |
|||
th:value="${record.getMaterialType().getTname()}" |
|||
lay-verify="required"/> |
|||
<input type="text" id="materialTypeId" th:value="${record.getTypeId()}" placeholder="请选择物料类型" |
|||
name="materialTypeId" class="layui-input" style="display: none" lay-verify="required"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">计量单位</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getUnit()}" name="unit" required autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">材质</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getTexture()}" name="texture" required autocomplete="off" |
|||
class="layui-input"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">计量单位</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getUnit()}" name="unit" required autocomplete="off" |
|||
class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 二维码生成--> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">二维码</label> |
|||
<div class="layui-input-inline"> |
|||
<img src="" id="qrCode" th:src="${qrCode}"> |
|||
<!-- 二维码生成--> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">二维码</label> |
|||
<div class="layui-input-inline"> |
|||
<img src="" id="qrCode" th:src="${qrCode}"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">状态</label> |
|||
<div class="layui-input-block"> |
|||
<input type="checkbox" name="state" lay-skin="switch" lay-text="启用|禁用" th:checked="${record.getState() == 1}"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">条形码</label> |
|||
<div class="layui-input-inline"> |
|||
<div class="inputdiv"> |
|||
<select name="barCode" id="barCode"> |
|||
<OPTION VALUE="0">请选择要删除的条形码</OPTION> |
|||
<option th:each="barCode,iterStar:${barCodeList}" th:value="${barCode?.getId()}" |
|||
th:text="${barCode?.getBmcode()}"></option> |
|||
</select> |
|||
<img src="/static/images/search.ico" height="16" width="16" style="margin-top: 10px" |
|||
onclick="scanBarCode(this)"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<div class="layui-input-block"> |
|||
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> |
|||
<button type="reset" class="layui-btn layui-btn-primary">重置</button> |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">状态</label> |
|||
<div class="layui-input-block"> |
|||
<input type="checkbox" name="state" lay-skin="switch" lay-text="启用|禁用" |
|||
th:checked="${record.getState() == 1}"> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<div class="layui-input-block"> |
|||
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> |
|||
<button type="reset" class="layui-btn layui-btn-primary">重置</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script> |
|||
function changeQrCodeState(){}; |
|||
layui.use('form', function(){ |
|||
var form = layui.form, $ = layui.$; |
|||
$('#openSonByMateralType').on('click', function(){ |
|||
layer.open({ |
|||
type: 2, |
|||
title: '弹窗内容', |
|||
skin: 'layui-layer-rim', |
|||
maxmin: true, |
|||
shadeClose: true, //点击遮罩关闭层 |
|||
area: ['70%', '70%'], |
|||
move : '.layui-layer-title', |
|||
fixed:false, |
|||
content: '/selectType', |
|||
}); |
|||
}); |
|||
//提交 |
|||
form.on('submit(formDemo)', function(data){ |
|||
data = data.field |
|||
$.ajax({ |
|||
url: "/material/material_edit", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(data), |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (data) { |
|||
layer.close(this.layerIndex); |
|||
if (data.status >= 300) { |
|||
layer.msg(data.statusInfo.message);//失败的表情 |
|||
return; |
|||
} else { |
|||
layer.msg("修改成功", { |
|||
icon: 6,//成功的表情 |
|||
time: 500 //1秒关闭（如果不配置，默认是3秒） |
|||
},function(){ |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index);//关闭当前页 |
|||
window.location='/material_out' |
|||
function changeQrCodeState() { |
|||
}; |
|||
var barCode = []; |
|||
var flag = false; |
|||
layui.use('form', function () { |
|||
var form = layui.form, $ = layui.$; |
|||
$('#openSonByMateralType').on('click', function () { |
|||
layer.open({ |
|||
type: 2, |
|||
title: '弹窗内容', |
|||
skin: 'layui-layer-rim', |
|||
maxmin: true, |
|||
shadeClose: true, //点击遮罩关闭层 |
|||
area: ['70%', '70%'], |
|||
move: '.layui-layer-title', |
|||
fixed: false, |
|||
content: '/selectType', |
|||
}); |
|||
}); |
|||
//提交 |
|||
form.on('submit(formDemo)', function (data) { |
|||
data = data.field; |
|||
if(flag) { |
|||
data.barCodeList = barCode; |
|||
} |
|||
$.ajax({ |
|||
url: "/material/material_edit", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(data), |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (data) { |
|||
layer.close(this.layerIndex); |
|||
if (data.status >= 300) { |
|||
layer.msg(data.statusInfo.message);//失败的表情 |
|||
return; |
|||
} else { |
|||
layer.msg("修改成功", { |
|||
icon: 6,//成功的表情 |
|||
time: 500 //1秒关闭（如果不配置，默认是3秒） |
|||
}, function () { |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index);//关闭当前页 |
|||
window.location = '/material_out' |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
return false; |
|||
}); |
|||
scanBarCode = function () { |
|||
layer.open({ |
|||
type: 2, |
|||
title: '扫码', |
|||
skin: 'layui-layer-rim', |
|||
maxmin: true, |
|||
shadeClose: true, //点击遮罩关闭层 |
|||
area: ['100%', '100%'], |
|||
move: '.layui-layer-title', |
|||
fixed: false, |
|||
content: '/scanBarCodeByNew', |
|||
end: function () { |
|||
var barCodeList = $("#barCodeList").val(); |
|||
// 根据&符合分割字符串并删除空 |
|||
var strings = barCodeList.split(","); |
|||
strings = strings.filter(item => item && item.trim()); |
|||
barCode = strings; |
|||
// 用于将扫描结果输出 |
|||
$.each(strings, function (index, item) { |
|||
$("#barCode").append(new Option(item, index));//往下拉菜单里添加元素 |
|||
}); |
|||
flag = true; |
|||
form.render(); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
return false; |
|||
}); |
|||
}; |
|||
|
|||
|
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
</body> |
|||
|
|||
@ -0,0 +1,83 @@ |
|||
<!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> |
|||
// 用于判断是否包含字母 |
|||
var barCodeList = []; |
|||
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"))) { |
|||
// 发送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) { |
|||
// 如果没有查询到物料 |
|||
barCodeList.push(decodedText); |
|||
} |
|||
layer.confirm("是否继续扫描？", |
|||
{ |
|||
btn: ["继续", "取消"] |
|||
}, |
|||
function () {// 继续 |
|||
// 弹出选择框 |
|||
layer.close(layer.index); |
|||
html5QrCode.start({facingMode: {exact: "environment"}}, config, qrCodeSuccessCallback); |
|||
}, |
|||
function () { |
|||
// 关闭当前页 |
|||
layui.$("#barCodeList", window.parent.document).val(barCodeList); |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
); |
|||
|
|||
} |
|||
}) |
|||
} |
|||
|
|||
}).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,126 @@ |
|||
<!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> |
|||
// 用于判断是否包含字母 |
|||
var regString = /[a-zA-Z]+/; |
|||
let barCodeList = []; |
|||
var depository; |
|||
var place; |
|||
// 是否扫描二维码标志位 |
|||
var flag = false; |
|||
const html5QrCode = new Html5Qrcode("reader"); |
|||
const qrCodeSuccessCallback = (decodedText, decodedResult) => { |
|||
/* 扫描成功 */ |
|||
// console.log(regString.test(decodedText)); |
|||
var formatName = decodedResult.result.format.formatName; |
|||
if (formatName.includes("QR_CODE")||formatName.includes("AZTEC")) { |
|||
console.log("二维码",decodedText); |
|||
// 如果扫描的位本地二维码 |
|||
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; |
|||
} |
|||
if (parse.pid !== undefined) { |
|||
// 如果扫描的是库位二维码 |
|||
place = parse; |
|||
} |
|||
} |
|||
}) |
|||
}else{ |
|||
// console.log("条形码",decodedText); |
|||
// 如果是条形码 |
|||
barCodeList.push(decodedText); |
|||
} |
|||
html5QrCode.stop().then((ignore) => { |
|||
// 暂停扫描 |
|||
layer.confirm("是否继续扫描？", |
|||
{ |
|||
btn: ["继续", "取消"] |
|||
}, |
|||
function () {// 继续 |
|||
// 弹出选择框 |
|||
layer.close(layer.index); |
|||
html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback); |
|||
}, |
|||
function () { // 取消当前操作 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
// 将数据暂存到redis |
|||
var param = {}; |
|||
param.barCodeList = barCodeList; |
|||
param.flag = flag; |
|||
layui.$.ajax({ |
|||
url:"/material/temporaryBarCodeValueForMaterial", |
|||
type:"post", |
|||
datatype:"json", |
|||
data:JSON.stringify(param), |
|||
contentType: "application/json;charset=utf-8", |
|||
}); |
|||
if(flag){ |
|||
var params = {}; |
|||
params.depository = depository; |
|||
params.place = place; |
|||
params.materialList = []; |
|||
layui.$.ajax({ |
|||
url: "/material/temporaryValue", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(params) |
|||
}); |
|||
} |
|||
|
|||
// 关闭当前页 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
) |
|||
|
|||
|
|||
}).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,124 @@ |
|||
<!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 barCodeList = []; |
|||
var depository; |
|||
var place; |
|||
// 是否扫描二维码标志位 |
|||
var flag = false; |
|||
const html5QrCode = new Html5Qrcode("reader"); |
|||
const qrCodeSuccessCallback = (decodedText, decodedResult) => { |
|||
var formatName = decodedResult.result.format.formatName; |
|||
/* 扫描成功 */ |
|||
// console.log(decodedText,decodedResult); |
|||
if (formatName.includes("QR_CODE")||formatName.includes("AZTEC")) { |
|||
// console.log("二维码",decodedText); |
|||
// 如果扫描的位本地二维码 |
|||
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; |
|||
} |
|||
if (parse.pid !== undefined) { |
|||
// 如果扫描的是库位二维码 |
|||
place = parse; |
|||
} |
|||
} |
|||
}) |
|||
}else{ |
|||
console.log("条形码",decodedText); |
|||
// 如果是条形码 |
|||
barCodeList.push(decodedText); |
|||
} |
|||
html5QrCode.stop().then((ignore) => { |
|||
|
|||
// 暂停扫描 |
|||
layer.confirm("是否继续扫描？", |
|||
{ |
|||
btn: ["继续", "取消"] |
|||
}, |
|||
function () {// 继续 |
|||
// 弹出选择框 |
|||
layer.close(layer.index); |
|||
html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback); |
|||
}, |
|||
function () { // 取消当前操作 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
// 将数据暂存到redis |
|||
var param = {}; |
|||
param.barCodeList = barCodeList; |
|||
param.flag = flag; |
|||
layui.$.ajax({ |
|||
url:"/material/temporaryBarCodeValueForMaterial", |
|||
type:"post", |
|||
datatype:"json", |
|||
data:JSON.stringify(param), |
|||
contentType: "application/json;charset=utf-8", |
|||
}); |
|||
if(flag){ |
|||
var params = {}; |
|||
params.depository = depository; |
|||
params.place = place; |
|||
params.materialList = []; |
|||
layui.$.ajax({ |
|||
url: "/material/temporaryValue", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(params) |
|||
}); |
|||
} |
|||
// 关闭当前页 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
) |
|||
|
|||
}).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,341 @@ |
|||
<!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> |
|||
@ -0,0 +1,295 @@ |
|||
<!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中 |
|||
if (vue.materialList.length === 0) { |
|||
// 如果还没有扫描物料 |
|||
layer.confirm("请扫描物料", { |
|||
btn: ["扫描", "取消"] |
|||
}, function () { // 继续 |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
}, function () { // 取消 |
|||
// 将vue中暂存的数据置为空 |
|||
params.materialList = null; |
|||
params.place = null; |
|||
params.depository = vue.depository; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
// 如果已经扫描物料，关闭当前页面 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
}) |
|||
} else { |
|||
params.place = null; |
|||
params.depository = vue.depository; |
|||
params.materialList = vue.materialList; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
// 如果已经扫描物料，关闭当前页面 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
} else if (parse.pid !== undefined) { |
|||
// 如果扫描的为库位 |
|||
vue.place = parse;// 将扫描结果保存到vue中 |
|||
if (vue.materialList.length === 0) { |
|||
// 如果还没有扫描物料 |
|||
layer.confirm("请扫描物料", { |
|||
btn: ["扫描", "取消"] |
|||
}, function () { // 继续 |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
}, function () { // 取消 |
|||
params.materialList = null; |
|||
params.depository = null; |
|||
params.place = vue.place; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
// 如果已经扫描物料，关闭当前页面 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
}) |
|||
} else { |
|||
params.depository = null; |
|||
params.materialList = vue.materialList; |
|||
params.place = vue.place; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
// 如果已经扫描物料，关闭当前页面 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} |
|||
} else if (parse.mid !== undefined) { |
|||
// 如果扫描的为物料 |
|||
|
|||
// 判断该物料是否有库存 |
|||
var req = {}; |
|||
req.code = parse.code; |
|||
req.type = "out"; |
|||
layui.$.ajax({ |
|||
url: "/material/findMatrialByCode", |
|||
type: "get", |
|||
dataType: 'json', |
|||
data:(req), |
|||
contentType: "application/json;charset=utf-8", |
|||
success: function (d) { |
|||
var d = d.data; |
|||
if(d == null){ |
|||
layer.confirm("仓库中暂无该物料，是否继续扫描", { |
|||
btn: ["继续", "取消"] |
|||
}, function () { // 继续 |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
}, function () { // 取消 |
|||
// 将vue中暂存的库位置为空 |
|||
params.depository = null; |
|||
params.materialList = vue.materialList; |
|||
params.place = null; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
}) |
|||
}else{ |
|||
vue.materialList.push(parse);// 将扫描结果保存到vue中 |
|||
if (vue.depository !== null) { // 如果已经扫描仓库 |
|||
params.depository = vue.depository; |
|||
params.materialList = vue.materialList; |
|||
params.place = null; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
// 关闭当前页面 |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} else if (vue.place != null) { |
|||
params.depository = null; |
|||
params.materialList = vue.materialList; |
|||
params.place = vue.place; |
|||
// 将数据暂存到redis |
|||
vue.temporaryScanValue(params); |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index); |
|||
} else { |
|||
layer.confirm("暂未扫描要转入仓库或库位，是否扫描", { |
|||
btn: ["扫描", "取消"] |
|||
}, function () { // 继续 |
|||
vue.turnCameraOn(); // 继续扫描 |
|||
layer.close(layer.index); // 关闭弹窗 |
|||
}, function () { // 取消 |
|||
// 将vue中暂存的库位置为空 |
|||
params.depository = null; |
|||
params.materialList = vue.materialList; |
|||
params.place = null; |
|||
// 将数据暂存到redis |
|||
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> |
|||
@ -1,135 +1,213 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>分步表单</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"> |
|||
<link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all"> |
|||
<meta charset="utf-8"> |
|||
<title>分步表单</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"> |
|||
<link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all"> |
|||
|
|||
<style> |
|||
.inputdiv { |
|||
display: flex; |
|||
background-color: #fff; |
|||
height: 38px; |
|||
line-height: 38px; |
|||
border: 1px solid rgb(238, 238, 238); |
|||
} |
|||
|
|||
.layui-form-label { |
|||
padding: 9px 0px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.layui-input-block { |
|||
margin-left: 80px; |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<form class="layui-form" action="" > |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">物料编号</label> |
|||
<div class="layui-input-block"> |
|||
<input type="text" th:value="${record.getId()}" name="id" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly"> |
|||
|
|||
<form class="layui-form" action=""> |
|||
<input type="text" id="barCodeList" style="display:none;"> |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">物料编号</label> |
|||
<div class="layui-input-block"> |
|||
<input type="text" th:value="${record.getId()}" name="id" required lay-verify="required" autocomplete="off" |
|||
class="layui-input" readonly="readonly"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料名称</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getMname()}" name="mname" required lay-verify="required" autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料名称</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getMname()}" name="mname" required lay-verify="required" |
|||
autocomplete="off" class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">存货编码</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getCode()}" name="code" required lay-verify="required" autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">存货编码</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getCode()}" name="code" required lay-verify="required" |
|||
autocomplete="off" class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">规格型号</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getVersion()}" name="version" required autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">规格型号</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getVersion()}" name="version" required autocomplete="off" |
|||
class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料类型</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" placeholder="请选择物料类型" class="layui-input" id="openSonByMateralType" readonly th:value="${record.getMaterialType().getTname()}" |
|||
lay-verify="required"/> |
|||
<input type="text" id="materialTypeId" th:value="${record.getTypeId()}" placeholder="请选择物料类型" name="materialTypeId" class="layui-input" style="display: none" lay-verify="required"/> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">材质</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getTexture()}" name="texture" required autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">物料类型</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" placeholder="请选择物料类型" class="layui-input" id="openSonByMateralType" readonly |
|||
th:value="${record.getMaterialType().getTname()}" |
|||
lay-verify="required"/> |
|||
<input type="text" id="materialTypeId" th:value="${record.getTypeId()}" placeholder="请选择物料类型" |
|||
name="materialTypeId" class="layui-input" style="display: none" lay-verify="required"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">计量单位</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getUnit()}" name="unit" required autocomplete="off" class="layui-input"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">材质</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getTexture()}" name="texture" required autocomplete="off" |
|||
class="layui-input"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">计量单位</label> |
|||
<div class="layui-input-inline"> |
|||
<input type="text" th:value="${record.getUnit()}" name="unit" required autocomplete="off" |
|||
class="layui-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 二维码生成--> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">二维码</label> |
|||
<div class="layui-input-inline"> |
|||
<img src="" id="qrCode" th:src="${qrCode}"> |
|||
<!-- 二维码生成--> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">二维码</label> |
|||
<div class="layui-input-inline"> |
|||
<img src="" id="qrCode" th:src="${qrCode}"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">状态</label> |
|||
<div class="layui-input-block"> |
|||
<input type="checkbox" name="state" lay-skin="switch" lay-text="启用|禁用" th:checked="${record.getState() == 1}"> |
|||
<div class="layui-form-item"> |
|||
<label class="layui-form-label">条形码</label> |
|||
<div class="layui-input-inline"> |
|||
<div class="inputdiv"> |
|||
<select name="barCode" id="barCode"> |
|||
<OPTION VALUE="0">请选择要删除的条形码</OPTION> |
|||
<option th:each="barCode,iterStar:${barCodeList}" th:value="${barCode?.getId()}" |
|||
th:text="${barCode?.getBmcode()}"></option> |
|||
</select> |
|||
<img src="/static/images/search.ico" height="16" width="16" style="margin-top: 10px" |
|||
onclick="scanBarCode(this)"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<div class="layui-input-block"> |
|||
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> |
|||
<button type="reset" class="layui-btn layui-btn-primary">重置</button> |
|||
<div class="layui-form-item" style="display: none"> |
|||
<label class="layui-form-label">状态</label> |
|||
<div class="layui-input-block"> |
|||
<input type="checkbox" name="state" lay-skin="switch" lay-text="启用|禁用" |
|||
th:checked="${record.getState() == 1}"> |
|||
</div> |
|||
</div> |
|||
<div class="layui-form-item"> |
|||
<div class="layui-input-block"> |
|||
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> |
|||
<button type="reset" class="layui-btn layui-btn-primary">重置</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script> |
|||
function changeQrCodeState(){}; |
|||
layui.use('form', function(){ |
|||
var form = layui.form, $ = layui.$; |
|||
$('#openSonByMateralType').on('click', function(){ |
|||
layer.open({ |
|||
type: 2, |
|||
title: '弹窗内容', |
|||
skin: 'layui-layer-rim', |
|||
maxmin: true, |
|||
shadeClose: true, //点击遮罩关闭层 |
|||
area: ['70%', '70%'], |
|||
move : '.layui-layer-title', |
|||
fixed:false, |
|||
content: '/selectType', |
|||
}); |
|||
}); |
|||
//提交 |
|||
form.on('submit(formDemo)', function(data){ |
|||
data = data.field |
|||
$.ajax({ |
|||
url: "/material/material_edit", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(data), |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (data) { |
|||
layer.close(this.layerIndex); |
|||
if (data.status >= 300) { |
|||
layer.msg(data.statusInfo.message);//失败的表情 |
|||
return; |
|||
} else { |
|||
layer.msg("修改成功", { |
|||
icon: 6,//成功的表情 |
|||
time: 500 //1秒关闭（如果不配置，默认是3秒） |
|||
},function(){ |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index);//关闭当前页 |
|||
window.location='/material_out' |
|||
function changeQrCodeState() { |
|||
}; |
|||
var barCode = []; |
|||
var flag = false; |
|||
layui.use('form', function () { |
|||
var form = layui.form, $ = layui.$; |
|||
$('#openSonByMateralType').on('click', function () { |
|||
layer.open({ |
|||
type: 2, |
|||
title: '弹窗内容', |
|||
skin: 'layui-layer-rim', |
|||
maxmin: true, |
|||
shadeClose: true, //点击遮罩关闭层 |
|||
area: ['70%', '70%'], |
|||
move: '.layui-layer-title', |
|||
fixed: false, |
|||
content: '/selectType', |
|||
}); |
|||
}); |
|||
//提交 |
|||
form.on('submit(formDemo)', function (data) { |
|||
data = data.field; |
|||
if(flag) { |
|||
data.barCodeList = barCode; |
|||
} |
|||
$.ajax({ |
|||
url: "/material/material_edit", |
|||
type: 'post', |
|||
dataType: 'json', |
|||
contentType: "application/json;charset=utf-8", |
|||
data: JSON.stringify(data), |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (data) { |
|||
layer.close(this.layerIndex); |
|||
if (data.status >= 300) { |
|||
layer.msg(data.statusInfo.message);//失败的表情 |
|||
return; |
|||
} else { |
|||
layer.msg("修改成功", { |
|||
icon: 6,//成功的表情 |
|||
time: 500 //1秒关闭（如果不配置，默认是3秒） |
|||
}, function () { |
|||
var index = parent.layer.getFrameIndex(window.name); |
|||
parent.layer.close(index);//关闭当前页 |
|||
window.location = '/material_out' |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
return false; |
|||
}); |
|||
scanBarCode = function () { |
|||
layer.open({ |
|||
type: 2, |
|||
title: '扫码', |
|||
skin: 'layui-layer-rim', |
|||
maxmin: true, |
|||
shadeClose: true, //点击遮罩关闭层 |
|||
area: ['100%', '100%'], |
|||
move: '.layui-layer-title', |
|||
fixed: false, |
|||
content: '/scanBarCodeByNew', |
|||
end: function () { |
|||
var barCodeList = $("#barCodeList").val(); |
|||
// 根据&符合分割字符串并删除空 |
|||
var strings = barCodeList.split(","); |
|||
strings = strings.filter(item => item && item.trim()); |
|||
barCode = strings; |
|||
// 用于将扫描结果输出 |
|||
$.each(strings, function (index, item) { |
|||
$("#barCode").append(new Option(item, index));//往下拉菜单里添加元素 |
|||
}); |
|||
flag = true; |
|||
form.render(); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
return false; |
|||
}); |
|||
}; |
|||
|
|||
|
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
</body> |
|||
|
|||
Loading…
Reference in new issue