<apex:page doctype="html-5.0" showquickactionvfheader="false" controller="eSignFormAttachmentController" showHeader="false" sidebar="false" action="{!init}">
|
<!-- 隐藏原图 展示画布 旋转图片（4个90°）鼠标滚轮伸缩放大放小 （会失帧） -->
|
<head>
|
<apex:includescript value="{!URLFOR($Resource.jquery183minjs)}">
|
</apex:includescript>
|
<apex:includescript value="/soap/ajax/40.0/connection.js">
|
</apex:includescript>
|
<apex:includescript value="/soap/ajax/40.0/apex.js">
|
</apex:includescript>
|
|
<title>
|
查看附件
|
</title>
|
<script>
|
var widthJs = "500px";
|
</script>
|
<style>
|
* {
|
margin: 0px;
|
padding: 0px;
|
}
|
|
#pandiv {
|
width: 30%;
|
height: 88%;
|
}
|
|
#control {
|
/*background: #ccc;*/
|
opacity: 0.7;
|
width: 200px;
|
/*liying start*/
|
width: 80px;
|
/*liying end*/
|
height: 30px; display: none;
|
padding-top: 5px;
|
position: absolute;
|
/*liying start*/
|
align-content: center;
|
/*liying end*/
|
/*left: 550px;*/
|
top: 90%;
|
left: 23%;
|
}
|
|
#canvas {
|
border: 1px solid black;
|
}
|
|
#left {
|
float: left;
|
display: block;
|
}
|
|
#right {
|
float: right;
|
display: block;
|
}
|
body{
|
/* background-color: cyan; */
|
}
|
#popDiv{
|
display: none;
|
background-color: #0f218b;
|
z-index: 11;
|
width: 100%;
|
height: 100%;
|
position:fixed;
|
top:0;
|
right:0;
|
left:0;
|
bottom:0;
|
margin:auto;
|
}
|
/* 关闭按钮样式 */
|
#popDiv .close a {
|
text-decoration: none;
|
color: #2D2C3B;
|
}
|
/* 弹出界面的关闭按钮 */
|
#popDiv .close{
|
margin:0 auto;background:#0f218b;text-align:right;padding:10px 0 0 0;width: 97%;
|
}
|
#popDiv p{
|
text-align: center;
|
font-size: 25px;
|
font-weight: bold;
|
}
|
|
/**关闭区**/
|
.close_div{margin:0 auto;background:#fff;text-align:right;padding:10px 0 0 0;}
|
/**图片区**/
|
.content{background:#fff;margin:0 auto;position:relative;width: 95%;height: 95%;}
|
.content .img{position:absolute;top:0;left:0;z-index:105}
|
.content span{position:absolute;left:45%;top:40%;}
|
/**左右箭头**/
|
.content .left,.content .right{position:absolute;top:0;z-index:110;}
|
.content .left{left:0;cursor:url(/resource/curleft), auto; }
|
.content .right{right:0;cursor:url(/resource/curright), auto;}
|
/**底部区**/
|
.bottom{height:0px;background:#fff;margin:0 auto;overflow:hidden;line-height:30px;
|
}
|
|
.solution-list {
|
width: 20%;
|
float: left;
|
}
|
.blankCss{
|
text-align:center;
|
padding-top: 2%;
|
border: 5px solid rgb(161, 220, 243);
|
float: left;
|
width: 78%;
|
height: calc(100vh - 118px);
|
margin-left: 10px;
|
background:#fff;
|
}
|
.PdfCss{
|
text-align:center;
|
padding-top: 2%;
|
float: left;
|
width: 78%;
|
height: calc(90vh - 118px);
|
margin-left: 10px;
|
background:#fff;
|
}
|
|
.solution-item {
|
display: none;
|
padding-top: 2%;
|
float: left;
|
width: 73%;
|
height: 70%;
|
margin-left: 10px;
|
border: 40px solid #0f218b;
|
background:#fff;
|
}
|
</style>
|
</head>
|
<body>
|
<!-- 标题 -->
|
<div style="height: 40px;background-color:#0f218b;width: 100%;text-align: center;">
|
<h1 style="color: white;font-size: 24px;">
|
查看附件
|
</h1>
|
</div>
|
<div style="height: 30px; margin-top: 10px;">
|
<!-- 切换原图（用于用户另存为）初始化时判断显示1个 -->
|
<!-- 1、#popDiv 弹窗窗口
|
2、#content 左+画布+右 三部分
|
3、#pandiv 画布
|
4、#control 旋转图标
|
5、#OriginalDiv 切换原图和画布 -->
|
<div id="popLayer">
|
<!--左侧表格 展示所有的附件-->
|
<div class="solution-list">
|
<apex:pageBlock id="oppBlock" tabStyle="Report">
|
<apex:outputPanel >
|
<input type="hidden" value="{!identifier}" id="identifier"/>
|
<apex:variable value="identif" var="identif" rendered="{!IF(identifier == '经销商', true, false)}" >
|
<table class="list" style="border-bottom-width: 0px; width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_L">
|
<tr class="headerRow" height="30px" align="center">
|
<td><a href="#" onclick="return false;" >附件名称</a></td>
|
<td width="55px"><a href="#" onclick="return false;">附件类型</a></td>
|
</tr>
|
<apex:repeat value="{!acccData}" var="or" id="oppTable">
|
<apex:variable value="{!1}" var="cnt"/>
|
<apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '经销商', true, false)}">
|
<tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
|
<td align="center" id="" style="border-right-width:thin">
|
<a href="#"><apex:outputText value="{!or.accessory.Name}" /></a>
|
</td>
|
<td width="55px" align="center">
|
<apex:outputText value="{!or.accessory.ContentType}" />
|
</td>
|
<td style="display:none">
|
<apex:outputText value="{!or.accessory.Id}"/>
|
</td>
|
</tr>
|
</apex:variable>
|
<apex:variable value="{!cnt + 1}" var="cnt" />
|
</apex:repeat>
|
</table>
|
</apex:variable>
|
<!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start-->
|
<input type="hidden" value="{!identifier2}" id="identifier2"/>
|
<apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院', true, false)}" id="identifier2">
|
<table class="list" style="border-bottom-width: 0px; width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_M">
|
<apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier != '经销商' , true, false)}">
|
<tr class="headerRow" height="30px" align="center">
|
<td><a href="#" onclick="return false;" >附件名称</a></td>
|
<td width="55px"><a href="#" onclick="return false;">附件类型</a></td>
|
</tr>
|
</apex:variable>
|
<apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier == '经销商' , true, false)}">
|
<tr class="headerRow" height="30px" align="center">
|
<td colspan="2"></td>
|
</tr>
|
</apex:variable>
|
<apex:repeat value="{!acccData}" var="or" id="oppTable2">
|
<apex:variable value="{!1}" var="cnt"/>
|
<apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '医院', true, false)}">
|
<tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
|
<td align="center" id="" style="border-right-width:thin">
|
<a href="#"><apex:outputText value="{!or.accessory.Name}" /></a>
|
</td>
|
<td width="55px" align="center">
|
<apex:outputText value="{!or.accessory.ContentType}" />
|
</td>
|
<td style="display:none">
|
<apex:outputText value="{!or.accessory.Id}"/>
|
</td>
|
</tr>
|
</apex:variable>
|
<apex:variable value="{!cnt + 1}" var="cnt" />
|
</apex:repeat>
|
</table>
|
</apex:variable>
|
<!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end-->
|
</apex:outputPanel>
|
</apex:pageBlock>
|
|
</div>
|
<!--左侧canvas画布和图片 展示当前点击的图片和画布-->
|
<div class="blankCss" id="blankId">
|
<h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;">
|
<font face="verdana" style="font-size: 40px;">图片预览展示区！</font>
|
</h1>
|
</div>
|
<div class="solution-item" id="imgeDiv">
|
<div id="onCloseId" style="position: absolute;top:55px;padding-left:73%;cursor:pointer;display:none;"><a href="javascript:void(0)" onclick="closePop()" style="padding-rigth:13px;color:#fff;font-weight:bolder;font-size:15px;text-decoration: none;">关闭</a></div>
|
<!-- 增加pdf关闭按钮 精琢技术 thh 2021-09-27 start -->
|
<div class="PdfCss" id="fontpdf" style="display: none;">
|
<h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;">
|
<font face="verdana" style="font-size: 40px;">此页暂时只支持图片文件的预览</font>
|
</h1>
|
</div>
|
<!-- 增加pdf关闭按钮 精琢技术 thh 2021-09-27 end -->
|
<div class="content" id="contentId" style="">
|
<div class="left" id="onIeftId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:left;">
|
</div>
|
<div class="right" id="onRigthId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:right;">
|
</div>
|
<div id="pandiv" style="margin-left: 17%; text-align: center;padding-top: 1%;height:98%">
|
<!-- 原图 -->
|
<apex:image alt="此处的图像描述" id="testImg" style="display: none;" value="">
|
</apex:image>
|
<!-- 画布 -->
|
<canvas height="485" id="canvas" style="cursor: default;" width="620">
|
</canvas>
|
<!-- 旋转图片 -->
|
<!-- background-color: #fffdfd; -->
|
<div id="control" style="display: none;margin-top: -1%; margin-left: 24%; ">
|
<img id="left" onclick="rateImage(270)" src="/resource/esignimg06" style="heigh: 30px; width: 30px;cursor:pointer;" title="逆时针"/>
|
<img id="right" onclick="rateImage(90)" src="/resource/esignimg05" style="heigh: 30px; width: 30px;cursor:pointer;" title="顺时针"/>
|
<!-- <input id="left" onclick="rateImage(270)" type="button" value="←" />
|
<input id="right" onclick="rateImage(90)" type="button" value="→"/> -->
|
</div>
|
</div>
|
<a href="" id="ViewOriginal" onclick="ViewOriginalImage();" style="margin-left:75%; color: #0f218b ;cursor:pointer;">
|
查看原图
|
</a>
|
<!-- 用于切换 原图和画布 这里额外copy一个img标签（用于用户另存为） 不使用原图标签 因为会造成鼠标移入移出有问题 -->
|
<div align="center" id="OriginalDiv">
|
<apex:image alt="此处的图像描述" id="testImgOriginal" style="display: none;height: 490px;width:700;padding-top: 2%;" value="">
|
</apex:image>
|
<p id="Original" style="display: none;color: #0f218b;margin-left:57%;">
|
<a href="" id="ViewPreview" onclick="ViewPreview();" style="color: #0f218b;cursor:pointer;font-size: 13px;">
|
查看预览
|
</a>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--隐藏id,用于存放当前显示的图片id-->
|
<input type="hidden" value="" id="newId"/>
|
<!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start-->
|
<!--隐藏id,用于存放当前显示的图片类型-->
|
<input type="hidden" value="" id="newContentType"/>
|
<!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end-->
|
<script>
|
//分割线 旋转伸缩图片核心代码-------------------------------------------------------------------
|
//整个canvas 窗口的 伸缩 旋转 精琢技术
|
|
//定义全局变量
|
//图片后缀名
|
var picType = 'jpg,png,jpeg,PNG,JPG,JPEG,bmp,BMP';
|
//原始宽度
|
var OriginalWidth = document.body.clientWidth;
|
//原始高度
|
var OriginalHeight = document.body.clientHeight;
|
|
//画布对象
|
var canvas = document.getElementById("canvas");
|
var pandiv = document.getElementById("pandiv");
|
var cxt = canvas.getContext("2d");
|
var control = document.getElementById("control");
|
var imgScale = 1;
|
var img;
|
var imgX = 0;
|
var imgY = 0;
|
var currentRate = 0;
|
/**当前的旋转角度*/
|
var mouseDownLocation;
|
var isMouseDown = false;
|
//右边的图片隐藏
|
hiddenImge();
|
|
//下一张图片和上一张图片加点击事件
|
$(".right").click(function (){
|
rights();
|
});
|
$(".left").click(function (){
|
lefts();
|
});
|
|
//点击tr 右边视图展示图片
|
function onShowImge(accId,obj){
|
document.getElementById("blankId").style.display='none';
|
document.getElementById("imgeDiv").style.display='block';
|
|
fadeIn("imgeDiv",1000);
|
//获取点击的附件名称
|
var accName = obj.cells[0].innerText;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
//获取点击的附件类型
|
var accContentType = obj.cells[1].innerText;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
//截取后缀名
|
var accType = accName.substring(accName.lastIndexOf('.')+1);
|
if(picType.indexOf(accType) > -1){//判断是否是图片
|
//右边的画布显示
|
showImge();
|
//需要关闭原图
|
ViewPreview();
|
//图片加载和canvas 画图
|
imgShow(accId,accContentType);
|
//关闭按钮展示 onClose
|
document.getElementById("onCloseId").style.display='block';
|
}else{
|
//如果不是图片，那么下载文件
|
window.open('https://ocsm--stagefull--c.documentforce.com/servlet/servlet.FileDownload?file='+accId);
|
//这里上线的时候需要在线上修改
|
//window.open('https://ocsm--c.ap0.content.force.com/servlet/servlet.FileDownload?file='+accId);
|
debugger
|
//右边的画布显示
|
showPdf();
|
//需要关闭原图
|
ViewPreview();
|
//hiddenImge();
|
//关闭按钮展示 onClose
|
document.getElementById("onCloseId").style.display='block';
|
}
|
|
}
|
//下一张
|
function rights(){
|
var accId = document.getElementById("newId").value;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
var accContentType = document.getElementById("newContentType").value;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
//获取下一张图片的id
|
var newId = "";
|
var flag = false;//判断循环的数据是否已经到当前显示的图片位置
|
var fristId = "";//记录第一个图片id，防止当前图片是最后一张
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
var fristContentTyp = "";//记录第一个图片id，防止当前图片是最后一张
|
var trs=[];
|
if(accContentType=='经销商'){
|
trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');//获取所有经销商的tr
|
}else if(accContentType=='医院'){
|
trs = document.getElementById('tableHeader_M').getElementsByTagName('tr');//获取所有'医院'的tr
|
}
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
for(var i = 1;i<trs.length;i++){
|
var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id
|
var onName = trs[i].cells[0].innerText.trim();//当前图片名称
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
var onContentType = trs[i].cells[1].innerText.trim();//获取当前图片的类型
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名
|
if(picType.indexOf(onName) > -1){
|
if(fristId == ""){
|
fristId = onId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
fristContentType = onContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
}
|
if(flag || onId == accId){
|
if(!flag){
|
flag = true;
|
continue;
|
}else{
|
newId = onId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
newContentType = onContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
break;
|
}
|
}
|
}
|
}
|
if(newId == ""){
|
newId = fristId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
newContentType = fristContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
}
|
//点击的tr变色
|
changeColor(newId);
|
|
//初始化时，隐藏查看预览链接 与旋转图片无关
|
$("#ViewPreview").hide();
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
//图片加载和canvas 画图
|
imgShow(newId,newContentType);
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
};
|
|
//上一张
|
function lefts(){
|
var accId = document.getElementById("newId").value;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
var accContentType = document.getElementById("newContentType").value;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
//获取下一张图片的id
|
var newId = "";
|
var flag = false;//
|
var endId = "";//记录最后一个图片id，防止当前图片是第一张
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
var endContentTyp = "";//记录第一个图片id，防止当前图片是最后一张
|
var trs=[];
|
if(accContentType=='经销商'){
|
trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');//获取所有经销商的tr
|
}else if(accContentType=='医院'){
|
trs = document.getElementById('tableHeader_M').getElementsByTagName('tr');//获取所有'医院'的tr
|
}//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
for(var i = (trs.length-1);i >= 1;i--){
|
var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id
|
var onName = trs[i].cells[0].innerText.trim();//当前图片名称
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
var onContentType = trs[i].cells[1].innerText.trim();//获取当前图片的类型
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名
|
if(picType.indexOf(onName) > -1){
|
if(endId == ""){
|
endId = onId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
endContentType = onContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
}
|
if(flag || onId == accId){
|
if(!flag){
|
flag = true;
|
continue;
|
}else{
|
newId = onId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
newContentType = onContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
break;
|
}
|
}
|
}
|
}
|
if(newId == ""){
|
newId = endId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
newContentType = endContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
}
|
changeColor(newId);
|
//初始化时，隐藏查看预览链接 与旋转图片无关
|
$("#ViewPreview").hide();
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
//图片加载和canvas 画图
|
imgShow(newId,newContentType);
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
}
|
//图片加载和canvas 画图
|
function imgShow(accId,accContentType){
|
var imageUrl = "/servlet/servlet.FileDownload?file="+accId;
|
//js动态赋值
|
document.getElementById("j_id0:testImg").src = imageUrl;
|
//js动态赋值
|
document.getElementById("j_id0:testImgOriginal").src = imageUrl;
|
canvas = document.getElementById("canvas");
|
canvas.height=canvas.height; //清空canvas画布
|
pandiv = document.getElementById("pandiv");
|
cxt = canvas.getContext("2d");
|
control = document.getElementById("control");
|
//等待图片加载，然后canvas 画布
|
awaitImge(imageUrl);
|
//用一个隐藏的input标签存放当前页面展示的图片id
|
document.getElementById("newId").value=accId;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
|
//用一个隐藏的input标签存放当前页面展示的图片类型
|
document.getElementById("newContentType").value=accContentType;
|
//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
|
//等待图片加载，然后canvas画图
|
awaitImge(imageUrl);
|
}
|
|
|
//首先加载图片，再使用canvas画图
|
function awaitImge(imageUrl){
|
img = new Image();
|
img.src = imageUrl;
|
img.id = "pic";
|
//定义一个计数函数，用于停止setTimeout循环，防止程序变成死循环
|
var counter = 0;
|
//使用链式setTimeout()，如果没达到条件就会自动重新调用一个setTimeout
|
var boolImg = setTimeout(function fn(){
|
if(document.getElementById("j_id0:testImg").complete){//判断图片是否加载完成
|
loadImage();
|
cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
|
}else{
|
counter ++;
|
//如果5分钟之内图片还没有加载出来，就停止setTimeout
|
if(counter <= 30000){
|
setTimeout(fn,16);
|
}else{
|
clearTimeout(boolImg);//停止定时任务
|
}
|
}
|
},10);
|
}
|
//点击或下一行时，表格行变色
|
function changeColor(accId){
|
var trs=[];
|
var trs1=[];
|
var identifier=document.getElementById("identifier").value;
|
var identifier2=document.getElementById("identifier2").value;
|
|
if(identifier =='经销商'){
|
trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');
|
for(var i = 1;i<trs.length;i++){
|
var onId = trs[i].cells[2].innerText.trim();
|
if(onId == accId){
|
trs[i].style.backgroundColor = "#e3f3ff";
|
}else{
|
trs[i].style.backgroundColor = "#fff";
|
}
|
}
|
}
|
if(identifier2 =='医院'){
|
trs1 = document.getElementById('tableHeader_M').getElementsByTagName('tr');
|
for(var j = 1;j<trs1.length;j++){
|
var onId = trs1[j].cells[2].innerText.trim();
|
if(onId == accId){
|
trs1[j].style.backgroundColor = "#e3f3ff";
|
}else{
|
trs1[j].style.backgroundColor = "#fff";
|
}
|
}
|
}
|
}
|
//关闭按钮
|
function closePop(){
|
debugger
|
var eSignFormAutoSign = "{!eSignForm.agencyAutoSignUpStatus__c}";
|
var eSignFormHPSign = "{!eSignForm.HPSignUpStatus__c}";
|
if(eSignFormAutoSign!="申请中"&&eSignFormHPSign!="申请中"){
|
closePreview();
|
}else{
|
if(eSignFormAutoSign=="申请中"&&eSignFormHPSign=="申请中"){
|
// var accContentType = document.getElementById("newContentType").value;
|
// if(accContentType=="经销商"){
|
JinXiaoShang();
|
// }else if(accContentType=="医院"){
|
// YiYuan();
|
// }
|
}else if(eSignFormAutoSign=="申请中"&&eSignFormHPSign!="申请中"){
|
JinXiaoShang();
|
}else if(eSignFormAutoSign!="申请中"&&eSignFormHPSign=="申请中"){
|
YiYuan();
|
}
|
}
|
}
|
//经销商审核
|
function JinXiaoShang(){
|
//当前用户登录id
|
var userId = "{!CASESAFEID($User.Id)}";
|
//当前用户简档id
|
var ProfileId = "{!$Profile.Id}";
|
//先判断是否为集采课
|
var Group_purchase_PCL ;
|
var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}";
|
if(Group_purchase_PCLFlag=='true'){
|
Group_purchase_PCL = '集采课';
|
}else{
|
Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}";
|
}
|
//检索OCSM管理省 上的营业管理部担当
|
var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'";
|
sforce.connection.sessionId = '{!$Api.Session_ID}';
|
var ocsmResult = sforce.connection.query(sql);
|
var ocsm = ocsmResult.getArray("records");
|
//营业管理部担当id
|
var salesManage;
|
if (ocsm) {
|
salesManage = ocsm[0].SalesManage__c;
|
}
|
//电子签收单id
|
var id = "{!eSignForm.Id}";
|
//new 一个对象
|
var eSignForm;
|
//经销商状态
|
var status = "{!eSignForm.agencyAutoSignUpStatus__c}";
|
if(ProfileId!=undefined){
|
ProfileId=ProfileId.substring(0,15);
|
}
|
if (salesManage || ProfileId == '00e10000000Y3o5') {
|
if (salesManage != userId && ProfileId != '00e10000000Y3o5') {
|
// alert('您只能审批营业管理部担当是自己的签收单！');
|
closePreview();
|
return;
|
} else if (status != '申请中') {
|
// alert('您只能审批申请中的签收单！')
|
closePreview();
|
return;
|
} else if (!'{!eSignForm.agencySignUpDate__c}') {
|
// alert('经销商签收日为空时，不可以确认！');
|
closePreview();
|
return;
|
}else{
|
if(confirm("是否审核?")){
|
window.open ('/apex/AgencyConfirmPage?id='+"{!eSignForm.Id}", '经销商确认',
|
'height=440, width=750, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, location=no, status=no');
|
}else{
|
hiddenImge();
|
//关闭按钮展示 onClose
|
document.getElementById("onCloseId").style.display='none';
|
}
|
}
|
}
|
}
|
//医院审核
|
function YiYuan(){
|
//当前用户登录id
|
var userId = "{!CASESAFEID($User.Id)}";
|
//当前用户简档id
|
var ProfileId = "{!$Profile.Id}";
|
//先判断是否为集采课
|
var Group_purchase_PCL ;
|
var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}";
|
if(Group_purchase_PCLFlag=='true'){
|
Group_purchase_PCL = '集采课';
|
}else{
|
Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}";
|
}
|
//检索OCSM管理省 上的营业管理部担当
|
var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'";
|
sforce.connection.sessionId = '{!$Api.Session_ID}';
|
var ocsmResult = sforce.connection.query(sql);
|
var ocsm = ocsmResult.getArray("records");
|
//营业管理部担当id
|
var salesManage;
|
if (ocsm) {
|
salesManage = ocsm[0].SalesManage__c;
|
}
|
|
//电子签收单id
|
var id = "{!eSignForm.Id}";
|
//new 一个对象
|
var eSignForm;
|
//医院状态
|
var status = "{!eSignForm.HPSignUpStatus__c}";
|
//销售渠道
|
var sales_Root_Formula = "{!eSignForm.Sales_Root_Formula__c}";
|
if(ProfileId!=undefined){
|
ProfileId=ProfileId.substring(0,15);
|
}
|
if (salesManage || ProfileId == '00e10000000Y3o5') {
|
if (salesManage != userId && ProfileId != '00e10000000Y3o5') {
|
// alert('您只能审批营业管理部担当是自己的签收单！');
|
closePreview();
|
return;
|
} else if (status != '申请中') {
|
// alert('您只能审批申请中的签收单！')
|
closePreview();
|
return;
|
} else if (!'{!eSignForm.HPSignUpDate__c}') {
|
// alert('医院签收日为空时，不可以确认！');
|
closePreview();
|
return;
|
}else{
|
if(sales_Root_Formula == 'OCM直接販売'){
|
if(confirm("是否审核?")){
|
window.open ('/apex/HPDirectSalesConfirmPage?id='+"{!eSignForm.Id}", '医院确认',
|
'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no');
|
}else{
|
hiddenImge();
|
//关闭按钮展示 onClose
|
document.getElementById("onCloseId").style.display='none';
|
}
|
}else{
|
if(confirm("是否审核?")){
|
window.open ('/apex/HPConfirmPage?id='+"{!eSignForm.Id}", '医院确认',
|
'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no');
|
}else{
|
hiddenImge();
|
//关闭按钮展示 onClose
|
document.getElementById("onCloseId").style.display='none';
|
}
|
}
|
}
|
}
|
}
|
//关闭预览提示框
|
function closePreview(){
|
if(confirm("真的要关闭吗?")){
|
hiddenImge();
|
//关闭按钮展示 onClose
|
document.getElementById("onCloseId").style.display='none';
|
debugger
|
}
|
}
|
//点击关闭按钮，需要把右边的试图隐藏
|
function hiddenImge(){
|
canvas = document.getElementById("canvas");
|
canvas.height=canvas.height; //清空canvas画布
|
|
// 隐藏右边的图片展示
|
let popDiv = document.getElementById("pandiv");
|
popDiv.style.display = "none";
|
|
//上一张和下一张隐藏
|
$(".left").hide();
|
$(".right").hide();
|
|
document.getElementById("blankId").style.display='block';
|
document.getElementById("imgeDiv").style.display='none';
|
}
|
|
function showImge(){
|
document.getElementById("contentId").style.display = "block";
|
document.getElementById("canvas").style.display = "block";
|
canvas = document.getElementById("canvas");
|
// canvas.height=canvas.height; //清空canvas画布
|
canvas.height=screen.availHeight*0.65;
|
let popDiv = document.getElementById("pandiv");
|
popDiv.style.display = "block";
|
//上一张和下一张显示
|
$(".left").show();
|
$(".right").show();
|
//查看原图链接取消隐藏
|
$("#ViewOriginal").show();
|
//关闭“暂时只支持图片文件的预览”文字提示
|
document.getElementById("fontpdf").style.display = "none";
|
}
|
|
//增加pdf关闭按钮 精琢技术 thh 2021-09-27 start
|
function showPdf(){
|
document.getElementById("canvas").style.display = "none";
|
//显示“暂时只支持图片文件的预览”
|
let fontpdf = document.getElementById("fontpdf");
|
fontpdf.style.display = "block";
|
// 隐藏右边的图片展示
|
let popDiv = document.getElementById("pandiv");
|
popDiv.style.display = "none";
|
document.getElementById("contentId").style.display = "none";
|
//上一张和下一张隐藏
|
$(".left").hide();
|
$(".right").hide();
|
$("#ViewOriginal").hide();
|
}
|
//增加pdf关闭按钮 精琢技术 thh 2021-09-27 end
|
|
// windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标
|
function windowToCanvas(canvas, x, y) {
|
var bbox = canvas.getBoundingClientRect();
|
return {
|
x : x - bbox.left - (bbox.width - canvas.width) / 2,
|
y : y - bbox.top - (bbox.height - canvas.height) / 2
|
};
|
}
|
|
function isPointInImageArea(point) {
|
return true;
|
}
|
function isPointInCanvasArea(point) {
|
return true;
|
}
|
function isDivArea(point) {
|
return true;
|
}
|
|
canvas.onmousewheel = canvas.onwheel = function(event) {
|
var pos = windowToCanvas(canvas, event.clientX, event.clientY);
|
event.wheelDelta = event.wheelDelta ? event.wheelDelta
|
: (event.deltaY * (-40));
|
|
if (event.wheelDelta > 0) {
|
|
if (isPointInImageArea(pos)) {
|
imgScale *= 2;
|
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
} else {
|
imgScale *= 2;
|
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
}
|
} else {
|
|
if (isPointInImageArea(pos)) {
|
imgScale /= 2;
|
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
} else {
|
imgScale /= 2;
|
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
}
|
}
|
drawImage();
|
return false;
|
}
|
|
/**旋转angle度*/
|
function rateImage(angle) {
|
debugger
|
currentRate = (currentRate + angle) % 360;
|
|
cxt.clearRect(0, 0, canvas.width, canvas.height);
|
|
cxt.translate(canvas.width / 2, canvas.height / 2);
|
cxt.save();
|
cxt.rotate(angle * Math.PI / 180);
|
cxt.translate(-canvas.width / 2, -canvas.height / 2);
|
imgScale = 1;
|
reLoadImage();
|
drawImage();
|
}
|
|
function reLoadImage() {
|
loadImage();
|
}
|
|
/**鼠标按下*/
|
pandiv.onmousedown = function(event) {
|
mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
|
if (isPointInImageArea(mouseDownLocation)) {
|
isMouseDown = true;
|
document.title = '查看附件';
|
}
|
}
|
/**鼠标弹起*/
|
document.body.onmouseup = function() {
|
isMouseDown = false;
|
canvas.style.cursor = "default";
|
document.title = '查看附件';
|
}
|
/**鼠标移动*/
|
pandiv.onmousemove = function(event) {
|
if (isMouseDown) {
|
canvas.style.cursor = "move";
|
var newMouseLocation = windowToCanvas(canvas, event.clientX,
|
event.clientY);
|
if (isDivArea({
|
x : event.clientX,
|
y : event.clientY
|
})) {
|
var x = newMouseLocation.x - mouseDownLocation.x;
|
var y = newMouseLocation.y - mouseDownLocation.y;
|
mouseDownLocation = newMouseLocation;
|
/**根据角度，计算图片偏移*/
|
if (0 == currentRate) {
|
imgX += x;
|
imgY += y;
|
} else if (90 == currentRate) {
|
imgX += y;
|
imgY -= x;
|
} else if (180 == currentRate) {
|
imgX -= x;
|
imgY -= y;
|
} else if (270 == currentRate) {
|
imgX -= y;
|
imgY += x;
|
}
|
} else {
|
/** 鼠标移动至画布范围外，置鼠标弹起 */
|
isMouseDown = false;
|
canvas.style.cursor = "default";
|
document.title = 'mouse up';
|
}
|
drawImage();
|
}
|
}
|
pandiv.onmouseover = function() {
|
control.style.display = "block";
|
}
|
canvas.onmouseout = function() {
|
control.style.display = "none";
|
}
|
|
//加载图片
|
function loadImage() {
|
if (img.width <= canvas.width && img.height <= canvas.height) {
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2;
|
} else {
|
var ratio = img.width / img.height;
|
widthTime = img.width / canvas.width;
|
heightTime = img.height / canvas.height;
|
|
if (widthTime > heightTime) {
|
img.width = canvas.width;
|
|
img.height = canvas.width / ratio;
|
} else {
|
img.height = canvas.height;
|
img.width = canvas.height * ratio;
|
|
}
|
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
}
|
}
|
|
pandiv.onmouseover = function() {
|
control.style.display = "block";
|
}
|
canvas.onmouseout = function() {
|
control.style.display = "none";
|
}
|
|
//由于图片不能直接下载(只能预览) 用户需要保存原图 这里做简单切换 用户另存为保存图片
|
function ViewOriginalImage(){
|
//查看原图时，隐藏下一张和上一张的样式
|
$(".left").hide();
|
$(".right").hide();
|
|
//查看原图取消隐藏
|
document.getElementById("j_id0:testImgOriginal").style.display='block';
|
//查看预览框隐藏
|
document.getElementById("pandiv").style.display='none';
|
//查看原图链接隐藏
|
$("#ViewOriginal").hide();
|
$("#Original").show();
|
//查看预览链接取消隐藏
|
$("#ViewPreview").show();
|
//原始宽度
|
var nowWidth = document.body.clientWidth;
|
//原始高度
|
var nowHeight = document.body.clientHeight;
|
//如果现在图片的高度 大于屏幕高度 就给div赋值高度
|
//如果现在图片的宽度 大于屏幕宽度 就给div赋值宽度
|
if(nowHeight>OriginalHeight){
|
document.getElementById("j_id0:testImgOriginal").style.height = OriginalHeight*0.86+'px';
|
}else if(nowWidth>OriginalWidth){
|
document.getElementById("j_id0:testImgOriginal").style.width = OriginalWidth*0.86+'px'; //
|
}
|
}
|
|
function ViewPreview(){
|
//查看预览时，显示下一张和上一张的样式
|
$(".left").show();
|
$(".right").show();
|
//查看原图隐藏
|
document.getElementById("j_id0:testImgOriginal").style.display='none';
|
//查看预览框取消隐藏
|
document.getElementById("pandiv").style.display='block';
|
//查看原图链接取消隐藏
|
$("#ViewOriginal").show();
|
//查看预览链接隐藏
|
$("#ViewPreview").hide();
|
$("#Original").hide();
|
}
|
|
//画图
|
function drawImage() {
|
var bbox = canvas.getBoundingClientRect();
|
cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2);
|
cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
|
}
|
|
//js取url参数
|
//20201221 liying start
|
function GetQueryValue(queryName) {
|
var query = decodeURI(window.location.search.substring(1));
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
if (pair[0] == queryName) { return pair[1]; }
|
}
|
return null;
|
}
|
//20201221 liying end
|
|
function fadeIn(ele,speed){
|
var ele=document.getElementById(ele);
|
var opacitynum=ele.style.opacity||0;
|
var speed=(speed/100)||10;
|
function opacityAdd(){
|
if(opacitynum<1){
|
ele.style.opacity=opacitynum=(parseFloat(opacitynum)+0.01).toFixed(2);
|
}else{
|
clearInterval(opacityt);
|
}
|
}
|
var opacityt=setInterval(opacityAdd,speed);
|
}
|
|
</script>
|
</body>
|
</apex:page>
|
