mescloud/src/main/resources/views/modules/mes/mesQualityCheck.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>抽检</title>
	<link rel="stylesheet" href="${ctxStatic}/bootstrap/css/bootstrap.min.css">
	<style>
		.fxbox{
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(240,240,240,1);
		}
		.fxbox-sn{
			position: fixed;
			width: 530px;
			height: 70px;
			top: 40px;
			left: 150px;
			z-index: 100;
			font-size: 26px;
			text-align: center;
		}

		.fxbox-btn-scan{
			position: fixed;
			width: 150px;
			height: 70px;
			z-index: 100;
			top: 40px;
			left: 690px;
			font-size: 40px;
		}

		.fxbox-btn-ok{
			position: fixed;
			width: 240px;
			height: 70px;
			z-index: 100;
			bottom: 40px;
			left: 370px;
			font-size: 40px;
		}
		.fxbox-btn-ng{
			position: fixed;
			width: 240px;
			height: 70px;
			z-index: 100;
			bottom: 40px;
			left: 560px;
			font-size: 40px;
		}

		.fxbox-items{
			display: none;
			position: fixed;
			z-index: 20;
			top: 290px;
			left: 100px;
			width: 800px;
			bottom: 135px;
			/*background-color: red;*/
			overflow: auto;
		}
		.fxbox-items .panel-heading{
			font-size: 22px;
		}
		.fxbox-items .panel-body{
			font-size: 18px;
		}

		.fxbox-result{
			position: fixed;
			z-index: 21;
			top: 120px;
			left: 100px;
			width: 800px;
			height: 60px;
			line-height: 60px;
			font-size: 30px;
			text-align: center;
		}
		.fxbox-select{
			position: fixed;
			z-index: 21;
			top: 180px;
			left: 100px;
			width: 800px;
			height: 50px;
			line-height: 50px;
			font-size: 30px;
			text-align: left;
			padding-left: 135px;
		}

		.layui-layer-prompt .layui-layer-input:focus{
			outline: none!important;
		}

		.list-group-item{
			font-size: 20px;
		}
		.list-group-item .glyphicon{
			display: none;
		}
		.list-group-item.active .glyphicon{
			display: block;
		}
		.list-group {
			padding-left: 0;
			margin-bottom: 0;
		}

	</style>
</head>
<body>
<div class="fxbox">
	<input type="text" class="form-control fxbox-sn" readonly name="sn" id="sn" placeholder="请扫工件码" />
	<button type="button" class="btn btn-default fxbox-btn-scan" onclick="scanBarcode()">扫码</button>

	<div class="fxbox-result" style="display: none">
		当前工位结果 <label id="product_result"></label>
	</div>
	<div class="fxbox-select">
		<div>
			检查类型：
			<% for(var dict in types){ %>
			<label><input type="radio" name="type" value="${dict.dictValue}" onclick="selectType('${dict.dictValue}')">${dict.dictLabel}</label>&nbsp;&nbsp;&nbsp;
			<% } %>
		</div>
		<div>
			检查结果：
			<label><input type="radio" name="result" value="OK" onclick="selectResult(1)">OK</label>&nbsp;&nbsp;&nbsp;
			<label><input type="radio" name="result" value="NG" onclick="selectResult(2)">NG</label>
		</div>
	</div>

	<div class="fxbox-items">
		<div class="list-group">
			<% for(var dict in items){ %>
			<a href="javascript:;" class="list-group-item" data-id="${dict.id}" data-select="0" onclick="selectItems(this)">
				${dict.title}
				<i class="glyphicon glyphicon-ok pull-right"></i>
			</a>
			<% } %>
		</div>
	</div>
	<button type="button" class="btn btn-success fxbox-btn-ok" disabled id="btn-ok" onclick="submitData(this)">确 定</button>
<!--	<button type="button" class="btn btn-danger fxbox-btn-ng" disabled id="btn-ng" onclick="bc('3')">NG</button>-->
</div>

<script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
<script src="${ctxStatic}/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctxStatic}/layer/3.5/layer.js?${_version}"></script>
<script>
	var flag = 0;
	var oprno = "${oprno}";
	var lineSn = "${lineSn}";
	var type = "";
	var result = "";
	var items = [];
	var __sid = "${__sid}";

	function selectItems(_self) {
		let id = $(_self).attr("data-id");
		let sel = $(_self).attr("data-select");
		if(sel == 0){
			$(_self).addClass("active");
			$(_self).attr("data-select",1);
			items.push(id);
		}else{
			$(_self).removeClass("active");
			$(_self).attr("data-select",0);
			items = items.filter((item) => {
				return item != id;
			})
		}
	}

	function selectType(typeval) {
		type = typeval;
	}

	function selectResult(val) {
		if(val == 1){
			$(".fxbox-items").hide();
			$(".list-group-item").removeClass("active");
			result = "OK";
		}else{
			$(".fxbox-items").show();
			result = "NG";
		}
	}

	function scanBarcode(){
		// layer.prompt({title: '请扫工件码', formType: 0}, function(text, index){
		// 	layer.close(index);
		// 	// layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
		// 	$("#sn").value(text);
		// });


		layer.prompt({
			title: '请扫工件码', 　　　　　　　
			formType: 0,   //隐藏用户输入内容
			// 这个是确定按钮的事件
			success:function(){
				// 键盘事件，判断回车
				$("input.layui-layer-input").on('keydown',function(e){
					if (e.which == 13) {
						layer.closeAll();
						var pass =$(document.getElementsByClassName('layui-layer-input')[0]).val();
						barcodeData(pass);
					}
				});
			},
			// 点击确定按钮事件
			yes : function(){
				layer.closeAll();
				// 取输入框数据
				var pass =$(document.getElementsByClassName('layui-layer-input')[0]).val();
				barcodeData(pass);
			}
		});
	}

	function barcodeData(text){
		$("#product_result").html("");
		$(".fxbox-result").hide();
		// resetPage();
		$("#sn").val(text);
		$.post('${ctx}/mes/mesQuality/checkProduct',{sn:text,oprno:oprno,lineSn:lineSn,__sid:__sid,__ajax:"json"},function (res){
			if(res.result=='true'){
				flag = 1;
				$("#product_result").html(res.data);
				$(".fxbox-result").show();
				$('#btn-ok').attr('disabled',false);
			}else{
				// $("#info").css('display','none')
				layer.alert(res.message);
				return ;
			}
		},'json')
	}

	function submitData(_self){
		let ff = $(_self).attr("data-ff");
		if(ff == 1){
			return;
		}
		$(_self).attr("data-ff",1);

		if(flag == 0){
			layer.alert("请扫工件码");
			$(_self).attr("data-ff",0);
			return ;
		}
		let sn = $("#sn").val().trim();
		if(!sn){
			layer.alert("请扫工件码");
			$(_self).attr("data-ff",0);
			return ;
		}
		if(!type){
			layer.alert("请选择检查类型");
			$(_self).attr("data-ff",0);
			return ;
		}
		if(!result){
			layer.alert("请选择检查结果");
			$(_self).attr("data-ff",0);
			return ;
		}

		// let items = [];
		if(result == "NG"){
			// $(".list-group-item").each(() => {
			// 	let sel = $(this)[0].attr("data-select");
			// 	console.log('sel:'+sel,$(this));
			// 	if(Number(sel) == 1){
			// 		items.push($(this).attr("data-id"))
			// 	}
			// });
			console.log(items);
			if(items.length == 0){
				layer.alert("请选择错误类型");
				$(_self).attr("data-ff",0);
				return ;
			}
		}

		$.post('${ctx}/mes/mesQuality/checkSave',{sn:sn,oprno:oprno,lineSn:lineSn,type:type,result:result,items:items.join(","),__sid:__sid,__ajax:"json"},function (res){
			$(_self).attr("data-ff",0);
			if(res.result=='true'){
				layer.alert(res.message);
				resetPage();
			}else{
				// $("#info").css('display','none')
				layer.alert(res.message);
				return ;
			}
		},'json')
	}

	function resetPage() {
		// $("#sn").val('');
		// // $("#accordion").html('');
		// flag = 0;
		// $('#btn-ok').attr('disabled',true);
		// // $('#btn-ng').attr('disabled',true);
		//
		// $("#product_result").html("");
		// $(".fxbox-result").show();

		setTimeout(function () {
			window.location.reload();
		},1500);
	}
</script>

</body>
</html>