sign-view-signer_sign.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. <!DOCTYPE html>
  2. <html lang=zh-cn>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>纵横计量支付系统</title>
  6. <meta name=description content=计量支付>
  7. <meta name=copyright content=smartcost.com.cn>
  8. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  9. <link rel=stylesheet href="{{rootUrl}}global/css/bootstrap.css">
  10. <link rel="stylesheet" href="{{rootUrl}}global/css/jquery-ui.min.css">
  11. <link rel=stylesheet href={{rootUrl}}global/css/style.css>
  12. <script src={{rootUrl}}global/js/jquery-1.9.1.min.js></script>
  13. <script src={{rootUrl}}global/js/bootstrap.js></script>
  14. <script src={{rootUrl}}global/js/jl.js></script>
  15. <script src="{{rootUrl}}global/js/jquery-ui.min.js"></script>
  16. </head>
  17. <body>
  18. <!-- include "top" -->
  19. <div class="wrapContent">
  20. <!-- include "left" -->
  21. <div class="mainContainer" style="overflow-y:hidden">
  22. <!--内容-->
  23. <div class="mainContent signContent">
  24. <div class="title clearfix sign-title-height">
  25. <div class="fR sign-topbar">
  26. <a class="btn btn-primary" href="javascript:void(0);" onclick="addsgin()"><i class="icon-pencil icon-white"></i> 签名</a>
  27. <a id="delallsign" class="btn btn-danger" style="display: none" href="javascript:void(0);" onclick="delconfirm();"><i class="icon-remove icon-white"></i> 清除签名</a>
  28. <a class="btn btn-default" href="javascript:void(0);" onclick="printdiv('sign_msg')"><i class="icon-print "></i> 打印</a>
  29. </div>
  30. <div class="fR sign-page-num">
  31. <span id="picnum">1</span> / {{signmsg.pagenum}} 页
  32. </div>
  33. <h1><a href="/sign/needlist" title="返回"><span class="closePanel" aria-hidden="true" data-icon="Z"></span></a>&nbsp;{{signmsg.name}}</h1>
  34. </div>
  35. <div class="sign-view clearfix">
  36. <div class="sign-side fR">
  37. <div class="view-info">
  38. <ul class="list-unstyled">
  39. <li><div class="fL">所在项目</div>{{signmsg.project}}</li>
  40. <li><div class="fL">标段</div>{{signmsg.tender}}</li>
  41. <li><div class="fL">期数</div>第{{ToChinaseNum(signmsg.phaseno)}}期</li>
  42. </ul>
  43. </div>
  44. <div class="signed-list">
  45. <ul class="list-unstyled">
  46. <!-- if !empty({{auditlist}}) -->
  47. <!-- loop auditlist -->
  48. <li><div class="no fL">{{auditlist' value.index}}</div><div class="avatars fL"><img src="{{auditlist' value.avatar}}">{{auditlist' value.aname}}</div><div class="corl fR"><!-- if {{auditlist' value.status}} == 'checked' --><span class="colGreen">完成</span><!-- elseif {{auditlist' value.status}} == 'checking' --><span class="colOrange">签署中</span><!-- else --><span class=""></span><!-- endif --></div></li>
  49. <!-- endloop -->
  50. <!-- endif -->
  51. </ul>
  52. </div>
  53. <div class="btn-bar">
  54. <a href="javascript:void(0);" onclick="judagedonesign();" class="btn btn-success btn-large btn-block">完成签署</a>
  55. <div class="clearfix" style="margin-top:15px">
  56. <!-- if {{firstsign}} == 0 --><a href="#backsign" data-toggle="modal" class="btn btn-warning fL">退回签署</a><!-- endif -->
  57. <a href="#stopsign" data-toggle="modal" class="btn btn-danger<!-- if {{firstsign}} == 1 --> btn-large btn-block<!-- else --> fR<!-- endif -->">终止签署</a>
  58. </div>
  59. </div>
  60. </div>
  61. <input type="hidden" id="maxwidth" value="{{maxwidth}}">
  62. <input type="hidden" id="maxheight" value="{{maxheight}}">
  63. <div class="sign-content fL" id="sign_msg">
  64. <div class="warp-printer">
  65. <!-- if !empty({{attlist}}) -->
  66. <!-- loop attlist -->
  67. <div class="page" id="pageContainer{{attlist' value.curnum}}" style="background: url('{{rootUrl}}{{attlist' value.filepath}}') no-repeat 0 0;background-size:cover;padding:10px">
  68. <img src="{{rootUrl}}{{attlist' value.filepath}}" style="display: none">
  69. <!-- if !empty({{attlist' value.auditatt}}) -->
  70. <!-- loop attlist' value.auditatt -->
  71. <div class="user-sign" style="z-index:10;{{attlist' auditatt' value.position}}">
  72. <div class="">
  73. <img src="{{attlist' auditatt' value.picpath}}">
  74. </div>
  75. </div>
  76. <!-- endloop -->
  77. <!-- endif -->
  78. <div class="user-sign draggable" data-num="{{attlist' value.sid}}_{{attlist' value.said}}" style="position: absolute;top: 95%;left: 10%;z-index: 999;width: 88px;height: 44px;">
  79. <div class="img-bar">
  80. <a href="javascript:void(0);" onclick="setallqm({{attlist' value.curnum}})" title="批量签名" class="allqm" style="display: none"><span data-icon="v" aria-hidden="true" ></span></a>
  81. <a href="javascript:void(0);" onclick="setqm({{attlist' value.curnum}});" title="确定签署" class="sign_confirm"><span data-icon="T" aria-hidden="true" class="colGreen"></span></a>
  82. <a href="javascript:void(0);" onclick="delqm({{attlist' value.curnum}});" title="删除签名" class="sign_del"><span data-icon="U" aria-hidden="true" class="colRed"></span></a>
  83. </div>
  84. <div class="focus">
  85. <img src="{{picpath}}">
  86. </div>
  87. </div>
  88. </div>
  89. <!-- endloop -->
  90. <!-- endif -->
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <!--内容-->
  96. </div>
  97. </div>
  98. <!-- 完成签署人弹出 -->
  99. <div id="donesign" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  100. <div class="modal-dialog">
  101. <div class="modal-content">
  102. <div class="modal-body">
  103. <h4 id="signtips"></h4>
  104. <!--<h4>完成后不可更改,确认完成签署?</h4>-->
  105. </div>
  106. <div class="modal-footer">
  107. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  108. <button type="button" class="btn btn-success" onclick="donesign();">确认</button>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <!-- 退回签署人弹出 -->
  114. <!-- if {{firstsign}} == 0 -->
  115. <div id="backsign" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  116. <div class="modal-dialog">
  117. <div class="modal-content">
  118. <div class="modal-body">
  119. <h4>退回上一签署人重新签署?</h4>
  120. </div>
  121. <div class="modal-footer">
  122. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  123. <button type="button" onclick="backsign();" class="btn btn-warning">确认退回</button>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <!-- endif -->
  129. <!-- 终止签署人弹出 -->
  130. <div id="stopsign" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  131. <div class="modal-dialog">
  132. <div class="modal-content">
  133. <div class="modal-body">
  134. <h4>终止该报表签署?</h4>
  135. <h4>终止后,如需要重新发起签署,请在软件重新生成新一份签署报表。</h4>
  136. </div>
  137. <div class="modal-footer">
  138. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  139. <button type="button" onclick="stopsign();" class="btn btn-danger">确认终止</button>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <script type="text/javascript">autoFlashHeight();</script>
  145. <script>
  146. $( function() {
  147. $('.page').css('width',parseInt($('#maxwidth').val())-20+'px');
  148. $('.page').css('height',parseInt($('#maxheight').val())-20+'px');
  149. $('#sign_msg').scroll(function(){
  150. for(var i = 1; i <= $('.page').length; i++){
  151. var yheight=$('#sign_msg').scrollTop()+200;
  152. var obj = document.getElementById("pageContainer"+i);
  153. var tops = obj.offsetTop;//元素距离顶部高度
  154. var divheight = obj.offsetHeight;//元素高度
  155. var tops2 = tops+divheight;
  156. if(tops<=yheight && yheight<tops2) {
  157. document.getElementById("picnum").innerHTML = i;
  158. break;
  159. }
  160. }
  161. });
  162. $( ".draggable" ).draggable({ containment: "parent" },{stop: function( event, ui ) {
  163. }}).resizable({ maxWidth: 600 },{ maxHeight: 300 },{ aspectRatio: true },{
  164. stop: function( event, ui ) {
  165. // localStorage.setItem('sign_'+$(this).attr('data-num'),$(this).attr('style'));
  166. }
  167. });
  168. //把本地缓存的信息读出来
  169. $('.page .draggable').each(function(k,v){
  170. if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
  171. $(this).attr('style',localStorage.getItem('sign_'+$(this).attr('data-num')));
  172. $('#delallsign').show();
  173. }
  174. if(localStorage.getItem('status_'+$(this).attr('data-num'))){
  175. if(localStorage.getItem('status_'+$(this).attr('data-num')) == 'copyhide'){
  176. $(this).find(".sign_confirm").hide();
  177. $(this).find(".allqm").hide();
  178. }else if(localStorage.getItem('status_'+$(this).attr('data-num')) == 'copyshow'){
  179. $(this).find(".sign_confirm").hide();
  180. $(this).find(".allqm").show();
  181. }
  182. $(this).draggable( "option", "cancel", ".page" );
  183. $(this).resizable("option", "cancel", ".page");
  184. $(this).resizable( "option", "cancel", ".page" );
  185. }
  186. });
  187. } );
  188. </script>
  189. <script type="text/javascript">
  190. function addsgin() {
  191. if($('.focus img').attr('src') == '{{rootUrl}}'){
  192. alert('请先在个人信息中添加属于您的签名照');
  193. return false;
  194. }
  195. var curpage = $('#picnum').text();
  196. if(localStorage.getItem('sign_'+$( "#pageContainer"+curpage+" .draggable" ).attr('data-num'))){
  197. alert('第 '+curpage+' 张报表已存在您的签名,无法重复添加');
  198. return false;
  199. }
  200. $("#pageContainer"+curpage+" .draggable").show();
  201. $("#pageContainer"+curpage+" .draggable").css({'width':"88px","height":"44px","left":"10%","top":"95%","position":"absolute"});
  202. $( "#pageContainer"+curpage+" .draggable" ).draggable( "option", "cancel", "" );
  203. $( "#pageContainer"+curpage+" .draggable" ).resizable("option", "cancel", "");
  204. $( "#pageContainer"+curpage).find(".sign_confirm").show();
  205. $( "#pageContainer"+curpage).find(".allqm").hide();
  206. // localStorage.setItem('sign_'+$( "#pageContainer"+curpage+" .draggable" ).attr('data-num'),$( "#pageContainer"+curpage+" .draggable" ).attr('style'));
  207. }
  208. function delconfirm(){
  209. var delall = confirm('确定删除所有签名?');
  210. if(delall == true){
  211. $('.page .draggable').each(function(k,v){
  212. $(this).hide();
  213. localStorage.removeItem('sign_'+$(this).attr('data-num'));
  214. localStorage.removeItem('status_'+$(this).attr('data-num'));
  215. });
  216. $('#delallsign').hide();
  217. }else{
  218. return false;
  219. }
  220. }
  221. function setqm(id) {
  222. $( "#pageContainer"+id+" .draggable" ).resizable("option", "cancel", ".page").draggable( "option", "cancel", ".page" );
  223. $( "#pageContainer"+id).find(".sign_confirm").hide();
  224. $( "#pageContainer"+id).find(".allqm").show();
  225. $('#delallsign').show();
  226. localStorage.setItem('sign_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'),$( "#pageContainer"+id+" .draggable" ).attr('style'));
  227. localStorage.setItem('status_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'),'copyshow');
  228. }
  229. function delqm(id) {
  230. $( "#pageContainer"+id+" .draggable" ).hide();
  231. localStorage.removeItem('sign_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'));
  232. localStorage.removeItem('status_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'));
  233. var flag = false;
  234. $('.page .draggable').each(function(k,v){
  235. if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
  236. flag = true;
  237. return;
  238. }
  239. });
  240. if(!flag){
  241. $('#delallsign').hide();
  242. }
  243. }
  244. function setallqm(id) {
  245. var left = $( "#pageContainer"+id+" .draggable" ).css('left');
  246. var top = $( "#pageContainer"+id+" .draggable" ).css('top');
  247. var width = $( "#pageContainer"+id+" .draggable" ).css('width');
  248. var height = $( "#pageContainer"+id+" .draggable" ).css('height');
  249. for(var i = 1; i <= $('.page').length; i++){
  250. if(id != i){
  251. $( "#pageContainer"+i+" .draggable" ).css({'width':width,"height":height,"left":left,"top":top,"position":"absolute"});
  252. $( "#pageContainer"+i+" .draggable" ).show();
  253. $( "#pageContainer"+i+" .draggable" ).draggable( "option", "cancel", ".page" );
  254. $( "#pageContainer"+i+" .draggable" ).resizable("option", "cancel", ".page");
  255. $( "#pageContainer"+i+" .draggable" ).resizable( "option", "cancel", ".page" );
  256. $( "#pageContainer"+i).find(".sign_confirm").hide();
  257. $( "#pageContainer"+i).find(".allqm").hide();
  258. localStorage.setItem('sign_'+$( "#pageContainer"+i+" .draggable" ).attr('data-num'),$( "#pageContainer"+i+" .draggable" ).attr('style'));
  259. }else{
  260. $( "#pageContainer"+i).find(".allqm").hide();
  261. }
  262. localStorage.setItem('status_'+$( "#pageContainer"+i+" .draggable" ).attr('data-num'),'copyhide');
  263. }
  264. }
  265. </script>
  266. <script>
  267. function printdiv(printpage)
  268. {
  269. var maxwidth = $('#maxwidth').val();
  270. var maxheight = $('#maxheight').val();
  271. $('.warp-printer').css("max-width",maxwidth+"px");
  272. $('.page').css('width',parseInt(maxwidth)+'px');
  273. $('.page').css('height',parseInt(maxheight)+'px');
  274. $('.page img').show();
  275. $('.page').find('.img-bar').hide();
  276. $('.page').css('padding','0px');
  277. var headstr = '<html><head>' +
  278. '<title></title>' +
  279. '<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">' +
  280. '<style type="text/css" media="print">' +
  281. '@page {size: {{style}}; margin: 0mm; padding: 0mm; border:0mm; } ' +
  282. '@media print body {margin:0mm;padding:0mm;border: 0mm} ' +
  283. '.warp-printer .page{margin:0mm;padding:0mm;border: 0mm;widows:0 orphans:0} ' +
  284. '.sign-content .page{margin:0mm;padding:0mm;border: 0mm;widows:0 orphans:0}' +
  285. '</style></head><body>';
  286. var footstr = '</body>';
  287. var newstr = document.all.item(printpage).innerHTML;
  288. var oldstr = document.body.innerHTML;
  289. //把数据存到本地缓存中
  290. // $('.page .draggable').each(function(k,v){
  291. // if($(this).attr('style')){
  292. // localStorage.setItem('sign_'+$(this).attr('data-num'),$(this).attr('style'));
  293. // }
  294. // });
  295. document.body.innerHTML = headstr+newstr+footstr;
  296. window.print();
  297. document.body.innerHTML = oldstr;
  298. window.location.reload();
  299. return false;
  300. }
  301. function judagedonesign()
  302. {
  303. var flag = false;
  304. var num = 0;
  305. $('.page .draggable').each(function(k,v){
  306. if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
  307. flag = true;
  308. // return;
  309. num++;
  310. }
  311. // if($(this).attr('style') && $(this).css('display') == 'block'){
  312. // flag = true;
  313. // return;
  314. // }
  315. });
  316. if(flag){
  317. if(num < {{signmsg.pagenum}}){
  318. $('#signtips').html('<span class="text-danger">报表存在未签署或未点击确认的签名,确认提交吗?</span><img src="{{rootUrl}}global/images/signtipsimg.png">');
  319. }else{
  320. $('#signtips').text('完成后不可更改,确认完成签署?');
  321. }
  322. $('#donesign').modal('show');
  323. }else{
  324. alert('请至少签署一个报表');
  325. }
  326. }
  327. function donesign(){
  328. var saidarray = new Array();
  329. var positionarray = new Array();
  330. var i = 0;
  331. $('.page .draggable').each(function(k,v){
  332. if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
  333. saidarray[i] = $(this).attr('data-num').split('_')[1];
  334. positionarray[i] = $(this).attr('style');
  335. i++;
  336. }
  337. localStorage.removeItem('sign_'+$(this).attr('data-num'));
  338. localStorage.removeItem('status_'+$(this).attr('data-num'));
  339. });
  340. $.ajax({
  341. type: 'post',
  342. url: '/sign/donesign',
  343. data:{sid:'{{signsid}}',path:'{{picpath}}',said:saidarray,position:positionarray},
  344. dataType: 'json',
  345. success: function(result){
  346. if(result.code == 400){
  347. alert(result.msg);
  348. }else{
  349. window.location.href = result.url;
  350. }
  351. }
  352. })
  353. }
  354. function stopsign() {
  355. $.ajax({
  356. type:'post',
  357. url:'/sign/needview/{{signsid}}',
  358. data:{status:'stop'},
  359. dataType: 'json',
  360. success: function(result){
  361. if(result.code == 200){
  362. window.location.href = result.url;
  363. }else{
  364. alert(result.msg);
  365. }
  366. }
  367. })
  368. }
  369. function backsign() {
  370. $.ajax({
  371. type:'post',
  372. url:'/sign/needview/{{signsid}}',
  373. data:{status:'back'},
  374. dataType: 'json',
  375. success: function(result){
  376. if(result.code == 200){
  377. window.location.href = result.url;
  378. }else{
  379. alert(result.msg);
  380. }
  381. }
  382. })
  383. }
  384. </script>
  385. </body>