mMessage-user-preview.jsp 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@include file="/context/mytags.jsp"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta charset="UTF-8">
  8. <meta name="viewport"
  9. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12. <link href="${webBasePath}/plug-in/weui/weui.css" rel="stylesheet">
  13. <link href="${webBasePath}/plug-in/weui/jquery-weui.css" rel="stylesheet">
  14. <c:if test="${!back_view}">
  15. <link href="${webBasePath}/h5/css/common.css" rel="stylesheet">
  16. <script type="text/javascript" src="${webBasePath}/plug-in/jquery/jquery-2.1.1.min.js"></script>
  17. <script type="text/javascript" src="${webBasePath}/plug-in/weui/jquery-weui.js"></script>
  18. <script type="text/javascript" src="${webBasePath}/plug-in/vue/vue2.min.js"></script>
  19. <script type="text/javascript" src="${webBasePath}/h5/js/common.js"></script>
  20. <script type="text/javascript" src="${webBasePath}/webpage/cn/com/lzt/message/file_preview.js?v=2"></script>
  21. </c:if>
  22. <title>查看消息</title>
  23. <script>
  24. $(function(){
  25. /*var width = $(document.body).width();
  26. if(width<800){
  27. $('#con').width(width);
  28. }*/
  29. })
  30. </script>
  31. <style>
  32. *{
  33. margin: 0;
  34. padding: 0;
  35. }
  36. #con{
  37. width:100%;
  38. margin:0 auto;
  39. word-break:break-all;
  40. }
  41. .title{
  42. width:100%;
  43. text-align: center;
  44. }
  45. .content{
  46. padding:10px 10px;
  47. }
  48. .flex_item{
  49. flex:1;
  50. text-align: center;
  51. padding: 8px 0px;
  52. box-sizing: border-box;
  53. /*font-weight: 700;*/
  54. font-size: 17px;
  55. text-align: center;
  56. border-radius: 4px;
  57. }
  58. p{
  59. color:#000000;
  60. }
  61. .canjia{
  62. background-color: #C54B3B ;
  63. color:#ffffff;
  64. }
  65. .bucanjia{
  66. background-color: #F2F2F2;
  67. }
  68. <c:if test="${empty message.status or message.status!=1}">
  69. body {
  70. background-color: #ffffff;
  71. color:#000000;
  72. }
  73. </c:if>
  74. <c:if test="${message.status==1}">
  75. body {
  76. background-color: #ECECEC;
  77. font-family: 'Open Sans', sans-serif;
  78. font-size: 14px;
  79. color: #3c3c3c;
  80. }
  81. .demo p:first-child {
  82. text-align: center;
  83. font-family: cursive;
  84. font-size: 40px;
  85. font-weight: bold;
  86. line-height: 80px;
  87. letter-spacing: 5px;
  88. color: #fff;
  89. }
  90. .demo p:first-child span {
  91. color:red;
  92. cursor: pointer;
  93. text-shadow: 0px 0px 2px #686868,
  94. 0px 1px 1px #ddd,
  95. 0px 2px 1px #d6d6d6,
  96. 0px 3px 1px #ccc,
  97. 0px 4px 1px #c5c5c5,
  98. 0px 5px 1px #c1c1c1,
  99. 0px 6px 1px #bbb,
  100. 0px 7px 1px #777,
  101. 0px 8px 3px rgba(100, 100, 100, 0.4),
  102. 0px 9px 5px rgba(100, 100, 100, 0.1),
  103. 0px 10px 7px rgba(100, 100, 100, 0.15),
  104. 0px 11px 9px rgba(100, 100, 100, 0.2),
  105. 0px 12px 11px rgba(100, 100, 100, 0.25),
  106. 0px 13px 15px rgba(100, 100, 100, 0.3);
  107. -webkit-transition: all .1s linear;
  108. transition: all .1s linear;
  109. }
  110. .demo p:first-child span:hover {
  111. text-shadow: 0px 0px 2px #686868,
  112. 0px 1px 1px #fff,
  113. 0px 2px 1px #fff,
  114. 0px 3px 1px #fff,
  115. 0px 4px 1px #fff,
  116. 0px 5px 1px #fff,
  117. 0px 6px 1px #fff,
  118. 0px 7px 1px #777,
  119. 0px 8px 3px #fff,
  120. 0px 9px 5px #fff,
  121. 0px 10px 7px #fff,
  122. 0px 11px 9px #fff,
  123. 0px 12px 11px #fff,
  124. 0px 13px 15px #fff;
  125. -webkit-transition: all .1s linear;
  126. transition: all .1s linear;
  127. }
  128. .demo p:not(:first-child) {
  129. text-align: center;
  130. color: #666;
  131. font-family: cursive;
  132. font-size: 16px;
  133. text-shadow: 0 1px 0 #fff;
  134. letter-spacing: 1px;
  135. line-height: 2em;
  136. margin-top: -50px;
  137. }
  138. </c:if>
  139. .mui-popup-button-bold{
  140. background-color: #C54B3B !important;
  141. color:#ffffff;
  142. }
  143. </style>
  144. </head>
  145. <body >
  146. <c:choose><%--撤回choose start--%>
  147. <c:when test="${message.status==1}"><%--撤回显示--%>
  148. <div class="demo">
  149. <p><span>消</span><span> 息</span><span> 已</span><span> 撤</span><span> 回</span></p>
  150. <%--<p> <br><br>无此审批任务<br></p>--%>
  151. </div>
  152. </c:when>
  153. <c:otherwise><%--撤回otherwise start--%>
  154. <div id="con">
  155. <%--<div class="title">
  156. ${message.title}
  157. </div>--%>
  158. <div class="content">
  159. ${message.sendText}
  160. <c:if test="${fn:length(fileRows)>0}">
  161. <hr/>
  162. <div>
  163. <c:forEach items="${fileRows}" var="file" varStatus="i">
  164. <div>
  165. <%--<a href="javascript:void(0)" onclick="openFile('${file.fileUrl}')">附件${i.count}:${file.fileName}</a>--%>
  166. <a href="javascript:void(0)" onclick="showFile('${file.id}','${file.fileName}','${file.fileUrl}')">附件${i.count}:${file.fileName}</a>
  167. </div>
  168. </c:forEach>
  169. </div>
  170. </c:if>
  171. </div>
  172. <div style="height: 20px">&nbsp; </div>
  173. <c:choose><%--预览start--%>
  174. <c:when test="${back_view==true}"><%--后台预览--%>
  175. <div style="position: fixed;bottom: 20px;width:100%;text-align: center">
  176. 以实际发送消息内容为准
  177. </div>
  178. </c:when>
  179. <c:when test="${empty user}"><%--审批预览--%>
  180. <div class="bottom-bar" id="txtBottom" >
  181. <div class="bottom-bar-item" style="border: none">
  182. <a href="javascript:;" class="close-popup btn" style="background: #C54B3B;" onclick="history.go(-1)">
  183. <span class="item-label">返回</span>
  184. </a>
  185. </div>
  186. </div>
  187. <script>
  188. $(function(){
  189. $('body').css('margin-bottom',$('#txtBottom').height());
  190. })
  191. </script>
  192. </c:when>
  193. <c:when test="${not empty user}"><%--用户预览start--%>
  194. <%--<div style="display:flex;position: fixed;bottom: 20px;width:100%;">
  195. <div class="flex_item canjia" id="canjia">
  196. 回复
  197. </div>
  198. <div class="flex_item bucanjia" id="myReply">
  199. 我的回复
  200. </div>
  201. </div>--%>
  202. <%--new--%>
  203. <div class="page page-nav-bottom" id="task-operate">
  204. <div class="bottom-bar" style="bottom:20px;">
  205. <a href="javascript:;" class="bottom-bar-item work-type" @click="toreply()">
  206. <%--<i class="item-icon icon-work" alt=""></i>--%>
  207. <span class="item-label">回复</span>
  208. </a>
  209. <a href="javascript:;" class="bottom-bar-item work-type" @click="myreply()">
  210. <%--<i class="item-icon icon-work" alt=""></i>--%>
  211. <span class="item-label">我的回复</span>
  212. </a>
  213. </div>
  214. <div class="bottom-bar" style="height:20px;border-top:0px;">&nbsp;</div>
  215. <div class="weui-popup__container" id="dialog-audit">
  216. <div class="weui-popup__overlay"></div>
  217. <div class="weui-popup__modal">
  218. <div class="weui-cells weui-cells_form">
  219. <div class="weui-cell" style="margin-top: 8px;">
  220. <div class="weui-cell__bd">
  221. <textarea class="weui-textarea" id="dealOption" placeholder="请输入回复内容"
  222. rows="15"></textarea>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="bottom-bar">
  227. <div class="bottom-bar-item" style="border: none">
  228. <a href="javascript:;" class="close-popup btn" style="background: #ccc;">
  229. <span class="item-label">取消</span>
  230. </a>
  231. </div>
  232. <div class="bottom-bar-item" style="text-align: center;">
  233. <a href="javascript:;" @click="doreply()" class="btn flex-grow-1"
  234. style="margin: 0 0 0 0px;">提交</a>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <div class="weui-popup__container" id="myreplyDiv">
  240. <div class="weui-popup__overlay"></div>
  241. <div class="weui-popup__modal">
  242. <div class="weui-cells weui-cells_form">
  243. <div class="weui-cell" style="margin-top: 8px;">
  244. <div class="weui-cell__bd" id="myreplytxt">
  245. </div>
  246. </div>
  247. </div>
  248. <div class="bottom-bar">
  249. <div class="bottom-bar-item" style="border: none">
  250. <a href="javascript:;" class="close-popup btn" style="background: #ccc;">
  251. <span class="item-label">返回</span>
  252. </a>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <%--new--%>
  259. <script>
  260. function scrollBody(){
  261. $(document.body).scrollTop(0);
  262. }
  263. $(function(){
  264. var taskOperateVm = new Vue({
  265. el: '#task-operate',
  266. data: {
  267. loading: false,
  268. taskData: {}
  269. },
  270. methods: {
  271. toreply: function () {
  272. $('#dealOption').val('');
  273. $('#dialog-audit').popup();
  274. },
  275. doreply: function () {
  276. var dealOption = $('#dealOption').val()
  277. if(!dealOption || dealOption == '') {
  278. $.alert('请输入回复内容');
  279. return
  280. }
  281. var url = 'mMessageReplyController.do?doAdd';
  282. var pdata={userId:'${user.id}',messageId:'${message.id}',reply:dealOption};
  283. apiPost(url,pdata,function(d){
  284. $.closePopup();
  285. $.alert('回复成功');
  286. },1,true,false);
  287. }
  288. ,myreply:function(){
  289. var url = 'mMessageReplyController.do?datagrid&field=id,createDate,reply';
  290. var pdata={messageId:'${message.id}',userId:'${user.id}'}
  291. apiPost(url,pdata,function(d){
  292. var msg = '';
  293. for(var i =0;i<d.rows.length;i++){
  294. var one =d.rows[i];
  295. if(!one.reply) continue;
  296. var cdate = one.createDate;
  297. if(cdate) {
  298. cdate = cdate.substring(5,cdate.length-5);
  299. }
  300. msg+=one.reply+"( "+cdate+" )";
  301. if(i!=d.rows.length-1){
  302. msg+='<br>';
  303. }
  304. }
  305. if(!msg){
  306. msg='无';
  307. }
  308. $('#myreplytxt').html(msg);
  309. $('#myreplyDiv').popup();
  310. },1,true,false);
  311. }
  312. },
  313. })
  314. })
  315. </script>
  316. </c:when><%--用户预览end--%>
  317. </c:choose><%--预览end--%>
  318. </div>
  319. </c:otherwise><%--撤回otherwise end--%>
  320. </c:choose><%--撤回choose end--%>
  321. <script>
  322. var webBasePath='${webBasePath}';
  323. function showFile(id,filename,fileUrl){
  324. <%--var url = 'http://test.shenqin.work/hgl/${showAndDownUrl}' + fileUrl;--%>
  325. var url = '${host}/${showAndDownUrl}'+fileUrl;
  326. filePreviewForMobile(id,filename,url);
  327. }
  328. var u =window.navigator.userAgent;
  329. var ua =u.toLowerCase();
  330. function isWeiXin(){
  331. if(ua.match(/MicroMessenger/i) == 'micromessenger'){
  332. return true;
  333. }else{
  334. return false;
  335. }
  336. }
  337. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  338. $(function(){
  339. var windowWidth = $(document.body).width();
  340. $('img').each(function(){
  341. var $t = $(this);
  342. var thisWidth= $t.width();
  343. var p = (thisWidth/800)*100;
  344. if(p>100) p=100;
  345. $t.removeAttr('height');
  346. $t.removeAttr('style');
  347. $t.width(p+'%');
  348. });
  349. })
  350. </script>
  351. </body>
  352. </html>