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

<% layout('/layouts/default.html', {title: '探伤记录详情', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-note"></i> ${text('探伤记录详情')}
			</div>
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<div class="box-body">
			<div class="form-unit">${text('基本信息')}</div>
			<table class="table table-bordered">
				<tr>
					<th class="mpc-header">工件码</th>
					<td>${mesProductRecord.sn}</td>
				</tr>
				<tr>
					<th class="mpc-header">工艺号</th>
					<td>${mesProductRecord.craft}</td>
				</tr>
				<tr>
					<th class="mpc-header">工件类型</th>
					<td>${mesProductRecord.cateSn}</td>
				</tr>
				<tr>
					<th class="mpc-header">产线编号</th>
					<td>${mesProductRecord.lineSn}</td>
				</tr>
				<tr>
					<th class="mpc-header">绑定内容</th>
					<td>${mesProductRecord.materielSn}</td>
				</tr>
				<tr>
					<th class="mpc-header">结果</th>
					<td>${mesProductRecord.content}</td>
				</tr>
				<tr>
					<th class="mpc-header">备注</th>
					<td>${mesProductRecord.remark}</td>
				</tr>
				<tr>
					<th class="mpc-header">创建时间</th>
					<td>${@DateUtils.formatDateTime(mesProductRecord.createDate) }</td>
				</tr>
				<tr>
					<th class="mpc-header">更新时间</th>
					<td>${@DateUtils.formatDateTime(mesProductRecord.updateDate) }</td>
				</tr>
			</table>

			<div class="form-unit">${text('探伤图片')}</div>
			<div id="imageContainer" style="margin-top:10px;">
				<p id="noImageTip" class="text-muted" style="padding:10px;">暂无探伤图片</p>
			</div>
		</div>
		<div class="box-footer">
			<div class="row">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
				</div>
			</div>
		</div>
	</div>
</div>
<% } %>
<script>
$(function(){
	var sn = '${mesProductRecord.sn}';
	if(!sn){
		return;
	}
	var updateDate = '${@DateUtils.formatDateTime(mesProductRecord.updateDate)}';
	$.get('${ctx}/mes/mesFlawRecord/imageList', {sn: sn, updateDate: updateDate}, function(list){
		if(!list || list.length === 0){
			return;
		}
		$('#noImageTip').remove();
		var html = '<div style="display:flex;flex-wrap:wrap;gap:15px;padding:10px;">';
		for(var i = 0; i < list.length; i++){
			var imgUrl = '${ctx}/mes/mesFlawRecord/viewImage?sn=' + encodeURIComponent(sn)
				+ '&fileName=' + encodeURIComponent(list[i].name)
				+ '&dir=' + encodeURIComponent(list[i].dir);
			html += '<div style="text-align:center;">';
			html += '<a href="' + imgUrl + '" target="_blank" style="display:block;">';
			html += '<img src="' + imgUrl + '" style="max-width:300px;max-height:225px;border:1px solid #ddd;border-radius:4px;padding:3px;" />';
			html += '</a>';
			html += '<div style="margin-top:5px;font-size:12px;color:#666;word-break:break-all;max-width:300px;">' + list[i].name + '</div>';
			html += '</div>';
		}
		html += '</div>';
		$('#imageContainer').html(html);
	});
});
</script>