mescloud/src/main/resources/views/modules/mes/mesRepairoption.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: 200px;
			font-size: 40px;
		}
		.fxbox-btn-ng{
			position: fixed;
			width: 240px;
			height: 70px;
			z-index: 100;
			bottom: 40px;
			left: 560px;
			font-size: 40px;
		}

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

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

	</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-items">
		<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
			<!--<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingOne">
					<h4 class="panel-title">
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							Collapsible Group Item #1
						</a>
					</h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingTwo">
					<h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
							Collapsible Group Item #2
						</a>
					</h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingThree">
					<h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
							Collapsible Group Item #3
						</a>
					</h4>
				</div>
				<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>-->
		</div>
	</div>
	<button type="button" class="btn btn-success fxbox-btn-ok" disabled id="btn-ok" onclick="bc('2')">OK</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 __sid = "${__sid}";
	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){
		resetPage();
		$.post('${ctx}/mes/mesRepair/searchInfo',{sn:text,__sid:__sid,__ajax:"json"},function (res){
			if(res.result=='true'){
				flag = 0;
				if(res.data.state == '1'){
					$("#sn").val(text);
					var data = res.data;
					flag = 1;
					$('#btn-ok').attr('disabled',false);
					$('#btn-ng').attr('disabled',false);
					let lists = res.data.mesRepairItemsList;
					console.log(data);

					let str = "";
					for(let o in lists){
						str += '<div class="panel panel-default">';
						str += '<div class="panel-heading" role="tab" id="headingOne'+lists[o].id+'">';
						str += '<h4 class="panel-title">';

						if(o == 0){
							console.log('o1:'+o);
							str += '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne'+lists[o].id+'" aria-expanded="true" aria-controls="collapseOne'+lists[o].id+'">';
						}else{
							console.log('o2:'+o);
							str += '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne'+lists[o].id+'" aria-expanded="false" aria-controls="collapseOne'+lists[o].id+'">';
						}
						str += '['+lists[o].oprno+']'+lists[o].title;
						str += '</a>';
						str += '</h4>';
						str += '</div>';
						if(o == 0){
							console.log('o1:'+o);
							str += '<div id="collapseOne'+lists[o].id+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne'+lists[o].id+'">';
						}else{
							console.log('o2:'+o);
							str += '<div id="collapseOne'+lists[o].id+'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne'+lists[o].id+'">';
						}

						str += '<div class="panel-body">'+lists[o].content+'</div>';
						str += '</div>';
						str += '</div>';
					}
					$("#accordion").html(str);
				}else{
					layer.alert("该工件已处理");
					return ;
				}
			}else{
				// $("#info").css('display','none')
				layer.alert(res.message);
				return ;
			}
		},'json')
	}

	$("#st").click(function (){
		list();
	})
	$("#rt").click(function (){
		$("#sn").val('');
		$("#info").css('display','none')
	})
	function list(){
		var from = $("#searchForm");

		$.post('${ctx}/mes/mesRepair/searchInfo',{sn:$("#sn").val(),__sid:__sid,__ajax:"json"},function (res){
			if(res.result=='true'){
				var data = res.data;
				$("#info").css('display','block')
				$("#id").html(data.id);
				$("#gjh").html(data.sn);
				$("#oprno").html(data.oprno);
				$("#createBy").html(data.createBy);
				$("#createDate").html(data.createDate);
				if(data.state !='1'){
					$("#cz").css('display','none')
				}else {
					$("#cz").css('display','block')
				}
				var s = '';
				if(data.state=='1'){
					s = '待处理';
				}else if(data.state=='2'){
					s = 'OK';
				}else if(data.state=='3'){
					s = 'NG';
				}
				$("#state").html(s);

				var qd = '';
				var qdList = data.mesRepairItemsList;
				if(qdList.length >0){
					qd+= '<tr><td>标题</td><td>描述</td></tr>'
					for (var i in qdList){
						qd+='<tr><td>'+qdList[i].title+'</td><td>'+qdList[i].content+'</td></tr>'
					}
			     }
				$("#qd").html(qd);
			}else{
				$("#info").css('display','none')
				alert(res.message);
				return ;
			}
		},'json')
	}

	function bc(val){
		if(flag == 0){
			return;
		}
		var sn = $("#sn").val();
		if(!sn){
			// alert('工件码不能为空');
			return  ;
		}

		$.post('${ctx}/mes/mesRepair/saveState',{sn:$("#sn").val(),state:val,__sid:__sid,__ajax:"json"},function (res){
			if(res.result=='false'){
				layer.alert(res.message);
				return ;
			}else if(res.result=='true'){
				layer.alert('操作成功');
				$("#sn").val('');
				// $("#info").css('display','none')
				resetPage();
			}
		})
	}

	function resetPage() {
		$("#sn").val('');
		$("#accordion").html('');
		flag = 0;
		$('#btn-ok').attr('disabled',true);
		$('#btn-ng').attr('disabled',true);
	}
</script>

</body>
</html>