zjrs
/
yctb-SpringBoot


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
							<!DOCTYPE HTML>
<%@ page language="java" pageEncoding="UTF-8" import="java.util.*" contentType="text/html; charset=UTF-8"%>
<%@include file="/jsp/framework/head.jsp"%>
<%@ taglib uri="/WEB-INF/hnisi.tld" prefix="hnisi"%>

<%
	String sdjlid = (DTOUtil.getValue("sdjlid") == ""? "" : DTOUtil.getValue("sdjlid"));
	String sdzlid = (DTOUtil.getValue("sdzlid") == ""? "" : DTOUtil.getValue("sdzlid"));
	String isview = (DTOUtil.getValue("isview") == ""? "0" : DTOUtil.getValue("isview"));
	Map dataMap = new HashMap();
    dataMap = (Map) DTOUtil.getData().get("dataMap") == null?null:(Map) DTOUtil.getData().get("dataMap");
%>

<html>
<link rel="stylesheet" href="/web/jsp/shoudan/web/mainview/css/viewer.min.css">
<style>
	html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.div-default:active, .div-default:hover {
		background-color:#FFFACD;
	}
	.zllb-div1{
		padding: 10px 5px 10px 5px;
		background: #fbfbfb;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
	}
	.zllb-div2{
		padding: 10px 5px 10px 5px;
		background: #fff;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.div-on {
		background-color:#FFFACD;
		border-color: #8c8c8c;
		color: #8c8c8c;
	}
	#dowebok { width: 98%; margin: 0 auto; font-size: 0;}
	#dowebok li { display: inline-block; width: 23%;height: 240px; margin-left: 1%; padding-top: 1%;}
	#dowebok li img { width: 100%; height: 100%;}
	#dowebok li div { text-align: center; }
</style>

<head lang="zh-cn">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>收单页面</title>
</head>

<body>
<div id="root" style="width: 100%;height: 100%;padding:0 0 5px 0;">
	<div class="row" style="height:100%;margin:10px 0">
		<!-- 第一块资料类别 -->
		<div class="col col-2">
			<div class="section" style="width: 100%;height: 100%;">
				<div class="section-title">
		      		<img class="title-icon" src="${ctx}/themes/zjrs/images/title-icon.png" />
					<span class="section-title-text">资料类别</span>
					<%
					//查看方式显示
					if(!"0".equals(isview)){
					%>
						<a class="btn btn-ghost" onclick="downloadFilesAll()">下载全部附件</a>
					<%} %>
			    </div>
			    <div id="zllb" class="bg_set" style="overflow:auto;">
					<%if(dataMap != null){ 
						List<Map<String, Object>> sdzlList = (List) dataMap.get("sdzlList");
						if(sdzlList != null){
							for(int i=0;i<sdzlList.size();i++){	
					%>
						<div id="zllbdiv<%=sdzlList.get(i).get("SDZLID") %>" <%if(i%2 == 0){ %> class="zllb-div1 div-default" <%}else{ %> class="zllb-div2 div-default" <%} %> onclick="getSdzlmx('<%=sdzlList.get(i).get("SDZLID")%>','0','<%=i+1%>')">
			    	<%
			    			if("1".equals(sdzlList.get(i).get("SFBSBZ"))){
			    	%>
			    			<a style="color:red;">*</a>
			    	<%
			    			}
			    	%>
			    			<%=(String) sdzlList.get(i).get("ZLLBMC")%>(<a id="zllb<%=sdzlList.get(i).get("SDZLID") %>" style="color:blue;"><%=sdzlList.get(i).get("CNT")%></a>)
			    		</div>
					<%	
							}
						}
					} %>
			    </div>
			</div>
		</div>
		<div class="col col-10">
			<div class="section" style="width: 100%;height: 100%;overflow:auto;">
				<div class="section-title">
					<img class="title-icon" src="${ctx}/themes/zjrs/images/title-icon.png" />
					<span class="section-title-text">缩略图</span>
					<span class="section-title-extra-btn">
					<%
					//查看方式不显示
					if("0".equals(isview)){
					%>
						<a class="btn btn-primary" style="margin-right:20px" onclick="doFounder()">高拍仪</a>
						<a class="btn btn-primary" style="margin-right:20px" onclick="doFujitsu()">扫描仪</a>
						<a class="btn btn-primary" style="margin-right:50px" onclick="doUpload()">本地上传</a>
						<a class="btn btn-ghost" style="margin-right:20px" id="previouPage" onclick="previouPage()">上一页</a>
						<a class="btn btn-ghost" style="margin-right:20px" id="nextPage" onclick="nextPage()">下一页</a>
						<a class="btn btn-ghost" style="margin-right:20px" onclick="setAllChecked()">全选</a>
						<a class="btn btn-ghost" style="margin-right:20px" onclick="setAllUnchecked()">全不选</a>
				      	<a class="btn btn-ghost" onclick="doDelete()">删除</a>
			      	<%
					}else{
					%>
						<a class="btn btn-ghost" style="margin-right:20px" id="downloadFiles" onclick="downloadFiles()">批量下载附件</a>
						<a class="btn btn-ghost" style="margin-right:20px" id="previouPage" onclick="previouPage()">上一页</a>
						<a class="btn btn-ghost" style="margin-right:20px" id="nextPage" onclick="nextPage()">下一页</a>
					<%		
					}
					%>
					</span>
			    </div>
			    <div id=image_list_div class="bg_set" style="overflow:auto;">
					<ul id="dowebok">
					
					</ul>
			    </div>
			</div>
		</div>
	</div>
</div>

</body>
<script src="/web/jsp/shoudan/web/mainview/js/viewer.min.js"></script>
<script src="/web/jsp/shoudan/web/mainview/js/jszip.min.js"></script>
<script src="/web/jsp/shoudan/web/mainview/js/FileSaver.js"></script>
<script src="/web/jsp/shoudan/web/mainview/js/axios.min.js"></script>

<script type="text/javascript">
var GVAR_VIEW= {
	"sdjlid":"<%=sdjlid%>",
	"sdzlid":"<%=sdzlid%>",
	"isview":"<%=isview%>",
	"xh":"1",
	"lbxh":"1"
};
//如果GVAR已经定义了则追加
if(GVAR){
    GVAR = $.extend(GVAR, GVAR_VIEW);
}else{
    var GVAR = GVAR_VIEW;
}

//初始化界面
$(function(){
	//计算高度
	var distance = document.documentElement.clientHeight;
	var divHeight = distance-62;
	document.getElementById("zllb").style.height= divHeight + "px";//左侧div
	document.getElementById("image_list_div").style.height= divHeight + "px";//右侧div
	
	var sdzlid = "<%=sdzlid%>";
	if(sdzlid.length > 0){
		//默认打开收单明细资料预览图
		getSdzlmx(sdzlid,"1");
	}
});

//获取收单资料明细
function getSdzlmx(sdzlid,isrefresh,lbxh){
	//未切换资料类别
	if(GVAR.sdzlid == sdzlid && isrefresh == "0"){
		return;
	}else if(GVAR.sdzlid != sdzlid && isrefresh == "0"){//切换资料类别
		GVAR.xh = "1";//还原序号
	}
	if(!CFW.oValid.fnIsNull(lbxh) ){
		GVAR.lbxh=lbxh;
	}

	var mParams={
		sdzlid:sdzlid,
		xh:GVAR.xh
	};
	CFW.oAJax.doService("mainviewService.getSdzlmx", mParams, '获取资料明细信息...',
		function(mData) {
			console.log("获取收单资料明细...");
			var images = mData[0].sdzlList;
			var url = mData[0].URL;
			//alert("images="+JSON.stringify(images));
			var strImageList = "";
			for(var i = 0; i < images.length; i++){
				console.log('picurl:'+url+images[i].ML );
				var filename=images[i].YWJM+"."+images[i].WJLX;
				//界面显示
 				if(images[i].WJLX == "jpeg" || images[i].WJLX == "jpg" || images[i].WJLX == "png" || images[i].WJLX == "bmp"){
 					strImageList += "<li id=\"li"+images[i].SDZLMXID+"\"><img src=\"" + url+images[i].ML + "\" alt=\"img"+(i+1)+"\" onclick=\"viewPic()\">";
					if(GVAR.isview == "0"){
						strImageList += "<div><input type=\"checkbox\" name=\"zlmximgs\" value=\""+images[i].SDZLMXID+"\"/>勾选删除</div>";
					}else{
						strImageList += "<div>"+filename+"</div>";
					}
					strImageList += "</li>";
				}else{					
					strImageList += "<li id=\"li"+images[i].SDZLMXID+"\"><img src='${ctx}/jsp/shoudan/img/pdf.png' onclick=\"downloadPdf('"+url+images[i].ML+"','"+filename+"')\">";
					strImageList += "<div>"+filename+"</div>";
					strImageList += "</li>";
					
				} 

			}
			document.getElementById("dowebok").innerHTML = strImageList;
			
			//div增加选中样式
			if(GVAR.xh == "1"){
				var div = document.getElementById("zllbdiv"+sdzlid); 
				div.className += ' div-on';
			}
			//资料类别切换去掉选中样式
			if(GVAR.sdzlid != sdzlid && GVAR.sdzlid != "" && isrefresh == "0"){
				var divdel = document.getElementById("zllbdiv"+GVAR.sdzlid);
				var classVal = divdel.getAttribute("class");
				classVal = classVal.replace(" div-on","");
				divdel.setAttribute("class",classVal);
			}
			GVAR.sdzlid = sdzlid;
		}
	);
}

//上一页
function previouPage(){
	if(GVAR.xh == "1"){
		alert("当前为第一页！");
	}else{
		GVAR.xh = (parseInt(GVAR.xh) - 40) + "";
		getSdzlmx(GVAR.sdzlid,"1");
	}
}

//下一页
function nextPage(){
	var cnt = document.getElementById("zllb"+GVAR.sdzlid).innerHTML;
	var xh = (parseInt(GVAR.xh) + 40);
	if(parseInt(cnt) >= xh){
		GVAR.xh = xh + "";
		getSdzlmx(GVAR.sdzlid,"1");
	}else{
		alert("当前为最后一页！");
	}
}

//全选
function setAllChecked(){
	var zlmximgs = document.getElementsByName("zlmximgs");
	for (var i = 0; i < zlmximgs.length; i++) {
		if (zlmximgs[i].checked == false){
			zlmximgs[i].checked = true;
		}
	}
}

//全不选
function setAllUnchecked(){
	var zlmximgs = document.getElementsByName("zlmximgs");
	for (var i = 0; i < zlmximgs.length; i++) {
		if (zlmximgs[i].checked == true){
			zlmximgs[i].checked = false;
		}
	}
}

//删除图片
function doDelete(){
	var zlmximgs = document.getElementsByName("zlmximgs");
	var delStr = "";//删除图片ID
	for (var i = 0; i < zlmximgs.length; i++) {
		if (zlmximgs[i].checked == true){
			//校验是否隐藏，若隐藏则为已删除图片，不再处理
			var liDisplay = document.getElementById("li"+zlmximgs[i].value).style.display;
			if(liDisplay != "none"){
				delStr += zlmximgs[i].value + ",";
			}
		}
	}
	if(delStr.length > 0){
		var mParams={
				sdzlid:GVAR.sdzlid,
				sdzlmxids:delStr
		};
		CFW.oAJax.doService("mainviewService.delSdzlmx", mParams, '删除资料明细信息...',
			function(mData) {
				if(mData[0].FLAG=="1"){
					alert("删除成功！");
					//更新资料类别总数
					var cnt = document.getElementById("zllb"+GVAR.sdzlid).innerHTML;
					var reg = new RegExp(",", "g");
					var delCnt = delStr.match(reg).length;
					var zlmxCnt = parseInt(cnt)-parseInt(delCnt);
					document.getElementById("zllb"+GVAR.sdzlid).innerHTML = zlmxCnt;
					//刷新缩略图片
					var sdzlmxids = delStr.split(",");
					for(var i=0;i<sdzlmxids.length-1;i++){
						document.getElementById("li"+sdzlmxids[i]).style.display = "none";
					}
				}else{
				    alert("删除失败！");
				}
			}
	    );
	}else{
		alert("请勾选需要删除的图片");
	}
}

//显示图片
function viewPic(){
	var viewer = new Viewer(document.getElementById('dowebok'), {});
	viewer.show();
}

//跳转方正高拍仪
function doFounder(){
	var title=encodeURIComponent('高拍仪页面');
	window.location.href = "${ctx}/shoudan/web/mainview/mainview!founder.do?title="+title+"&sdzlid="+ GVAR.sdzlid +"&sdjlid="+GVAR.sdjlid;
}

//跳转富士通扫描仪
function doFujitsu(){
	var title=encodeURIComponent('扫描仪页面');
	window.location.href = "${ctx}/shoudan/web/mainview/mainview!fujitsu.do?title="+title+"&sdzlid="+ GVAR.sdzlid +"&sdjlid="+GVAR.sdjlid;
}

//跳转本地上传
function doUpload(){
	var title=encodeURIComponent('本地上传页面');
	window.location.href = "${ctx}/shoudan/web/mainview/mainview!localfile.do?title="+title+"&sdzlid="+ GVAR.sdzlid +"&sdjlid="+GVAR.sdjlid;
}
//非图片文件格式下载
function downloadPdf(url, filename){
	getBlob(url, function (blob) {
		saveAs(blob, filename);
	});
}

function getBlob(url, cb) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.responseType = 'blob';
	xhr.onload = function () {
		if (xhr.status === 200) {	
			cb(xhr.response);	
		}
	};
	xhr.send();
}

function saveAs(blob, filename) {
	if (window.navigator.msSaveOrOpenBlob) {
		navigator.msSaveBlob(blob, filename);
	} else {
		var link = document.createElement('a');	
		var body = document.querySelector('body');	
		link.href = window.URL.createObjectURL(blob);	
		link.download = filename;	
		// fix Firefox	
		link.style.display = 'none';	
		body.appendChild(link);	
		link.click();	
		body.removeChild(link);	
		window.URL.revokeObjectURL(link.href);
	};
}
//批量下载附件
function downloadFiles(){
	var zip = new JSZip();	
	var mParams={
			SDZLID:GVAR.sdzlid,
			SDJLID:GVAR.sdjlid
		};
	CFW.oAJax.doService("mainviewService.getSdzlmxDownloadBatch", mParams, '获取资料明细信息...',
		function(mData) {
			console.log("批量下载附件,获取收单资料明细...");
			var images = mData[0].sdzlList;
			var url = mData[0].URL;
			var foldername="images"; 
			if(images.length>0){
				foldername = images[0].ZLLBMC;
			}else{
				alert("附件为空！");
				return;
			}
			console.log(foldername +'，批量下载，文件数:'+images.length );
			
			var zipname=mData[0].SLBH+mData[0].ZTMC+'材料('+GVAR.lbxh+').zip';
			
			var img = zip.folder(foldername);
			
 			for(var i = 0; i < images.length; i++){
				console.log('picurl:'+url+images[i].ML );
				var picurl = url+images[i].ML;
				var filename=images[i].FILENAME;				
				img.file(filename, getOneFile(picurl), {base64: true});
			} 

 			zip.generateAsync({type:"blob"})
				.then(function(content) {
				    saveAs(content, zipname);
				
				});

		}
	);

}
//根据URL取文件
function getOneFile(url) {
	return new Promise((resolve, reject) => {
	  axios({
	     method: 'get',
	     url,
	     responseType: 'arraybuffer'
	  }).then(res => {
	     resolve(res.data)
	  }).catch(error => {
	     reject(error.toString())
	  })
	})
}
//下载全部附件
function downloadFilesAll(){
	var zip = new JSZip();
	
	var mParams={
			SDJLID:GVAR.sdjlid
		};
	CFW.oAJax.doService("mainviewService.getSdzlmxDownloadAll", mParams, '获取资料明细信息...',
		function(mData) {
 			console.log("下载全部附件,获取收单资料明细...");
			var url = mData[0].URL;
			var zipname=mData[0].SLBH+mData[0].ZTMC;
			var allList = mData[0].allList;
			if(allList.length == 0){
				alert("附件为空！");
				return;
			}
			
			for(var i = 0; i < allList.length; i++){
				var mxlist=allList[i];
				
				var foldername="images"; 
				if(mxlist.length > 0){
					foldername = mxlist[0].ZLLBMC;
				}else{
					continue;
				}
				console.log(foldername +'，文件数:'+mxlist.length );
				var img = zip.folder(foldername);
				for(var j = 0; j < mxlist.length; j++){
					var picurl = url+mxlist[j].ML;
					var filename=mxlist[j].FILENAME;				
					img.file(filename, getOneFile(picurl), {base64: true});
				}
				
			}

 			zip.generateAsync({type:"blob"})
				.then(function(content) {
				    saveAs(content, zipname);
				
				}); 

		}
	);

}

</script>
</html>