modal.ejs 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <!--弹出新建台账修订-->
  2. <div class="modal fade" id="add-bg" data-backdrop="static">
  3. <form class="modal-dialog" role="document" action="<%- preUrl + '/revise/add' %>" method="post" onsubmit="return dbClick();">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <h5 class="modal-title">新建修订</h5>
  7. </div>
  8. <div class="modal-body">
  9. <h5>创建修订后,本期计量将暂时锁定,锁定后本期计量无法计量和上报,需修订完成后,才能解锁。</h5>
  10. </div>
  11. <div class="modal-footer">
  12. <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
  13. <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
  14. <button id="add-ok" type="submit" class="btn btn-primary btn-sm">确定新建</button>
  15. </div>
  16. </div>
  17. </form>
  18. </div>
  19. <!--审批流程/结果-->
  20. <div class="modal fade" id="sp-list" data-backdrop="static">
  21. <div class="modal-dialog modal-lg" role="document">
  22. <div class="modal-content">
  23. <div class="modal-header">
  24. <h5 class="modal-title">审批流程</h5>
  25. </div>
  26. <div class="modal-body">
  27. <div class="row">
  28. <div class="col-4">
  29. <div class="card mt-3">
  30. <ul class="list-group list-group-flush" id="auditor-list">
  31. </ul>
  32. </div>
  33. </div>
  34. <div class="col-8 modal-height-500" style="overflow: auto" id="audit-list">
  35. </div>
  36. </div>
  37. </div>
  38. <div class="modal-footer">
  39. <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <% if (ledgerRevise.length > 0 && (ledgerRevise[0].status === auditConst.status.uncheck || ledgerRevise[0].status === auditConst.status.checkNo) && ctx.session.sessionUser.accountId === ledgerRevise[0].uid) { %>
  45. <!--弹出作废-->
  46. <div class="modal fade" id="remove" data-backdrop="static">
  47. <form class="modal-dialog" role="document" action="<%- preUrl + '/revise/cancel' %>" method="post" onsubmit="return $.trim($('#cancel-confirm').val()) === '修订作废';">
  48. <div class="modal-content">
  49. <div class="modal-header">
  50. <h5 class="modal-title">作废修订</h5>
  51. </div>
  52. <div class="modal-body">
  53. <div class="alert alert-danger">
  54. 修订 已有数据,请谨慎操作;
  55. <br>作废后,数据无法恢复,请谨慎操作;
  56. <br>确认作废,请在以下输入框输入"&nbsp;&nbsp;&nbsp;<b>修订作废</b>&nbsp;&nbsp;&nbsp;",再点击“确认作废”按钮。
  57. </div>
  58. <div class="form-group">
  59. <input class="form-control form-control-sm" placeholder="" type="text" id="cancel-confirm">
  60. </div>
  61. </div>
  62. <div class="modal-footer">
  63. <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
  64. <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" >取消</button>
  65. <button type="submit" class="btn btn-danger btn-sm">确认作废</button>
  66. </div>
  67. </div>
  68. </form>
  69. </div>
  70. <% } %>
  71. <script>
  72. let dbClickFlag = true;
  73. function dbClick() {
  74. if(dbClickFlag){
  75. dbClickFlag = false;
  76. return true;
  77. }
  78. return dbClickFlag;
  79. }
  80. const auditConst = JSON.parse('<%- auditConst2 %>');
  81. $(function () {
  82. // 获取审批流程
  83. $('a[data-target="#sp-list"]').on('click', function () {
  84. const data = {
  85. id: $(this).attr('lr-id'),
  86. };
  87. postData('<%- preUrl + "/revise/auditors" %>', data, function (result) {
  88. const { auditHistory, auditors, user } = result
  89. let auditorsHTML = ''
  90. let historyHTML = ''
  91. auditors.forEach((auditor, idx) => {
  92. if (idx === 0) {
  93. auditorsHTML += `<li class="list-group-item">
  94. <i class="fa fa fa-play-circle fa-rotate-90"></i> ${auditor.name}
  95. <small class="text-muted">${auditor.role}</small>
  96. <span class="pull-right">原报</span>
  97. </li>`
  98. } else if(idx === auditors.length -1 && idx !== 0) {
  99. auditorsHTML += `<li class="list-group-item">
  100. <i class="fa fa fa-stop-circle"></i> ${auditor.name}
  101. <small class="text-muted">${auditor.role}</small>
  102. <span class="pull-right">终审</span>
  103. </li>`
  104. } else {
  105. auditorsHTML += `<li class="list-group-item">
  106. <i class="fa fa-chevron-circle-down"></i> ${auditor.name}
  107. <small class="text-muted">${auditor.role}</small>
  108. <span class="pull-right">${transFormToChinese(idx)}审</span>
  109. </li>`
  110. }
  111. })
  112. $('#auditor-list').empty()
  113. $('#auditor-list').append(auditorsHTML)
  114. auditHistory.forEach((auditors, idx) => {
  115. if(idx === auditHistory.length - 1 && auditHistory.length !== 1) {
  116. historyHTML += `<div class="text-right"><a href="javascript: void(0);" id="fold-btn" data-target="show">展开历史审批流程</a></div>`
  117. }
  118. historyHTML += `<div class="${idx < auditHistory.length - 1 ? 'fold-card' : ''}">
  119. <div class="text-center text-muted">${idx + 1}#</div>
  120. <ul class="timeline-list list-unstyled mt-2">`
  121. auditors.forEach((auditor, index) => {
  122. if (index === 0) {
  123. historyHTML += `<li class="timeline-list-item pb-2">
  124. <div class="timeline-item-date">
  125. ${formatDate(auditor.begin_time)}
  126. </div>
  127. <div class="timeline-item-tail"></div>
  128. <div class="timeline-item-icon bg-success text-light">
  129. <i class="fa fa-caret-down"></i>
  130. </div>
  131. <div class="timeline-item-content">
  132. <div class="card">
  133. <div class="card-body p-3">
  134. <div class="card-text">
  135. <p class="mb-1"><span
  136. class="h5">${user.name}</span><span
  137. class="pull-right text-success">${idx !== 0 ? '重新' : ''}上报审批</span>
  138. </p>
  139. <p class="text-muted mb-0">${user.role}</p>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </li>
  145. <li class="timeline-list-item pb-2">
  146. <div class="timeline-item-date">
  147. ${formatDate(auditor.end_time)}
  148. </div>`
  149. if(index < auditors.length - 1) {
  150. historyHTML += `<div class="timeline-item-tail"></div>`
  151. }
  152. if(auditor.status === auditConst.status.checked) {
  153. historyHTML += `<div class="timeline-item-icon bg-success text-light">
  154. <i class="fa fa-check"></i>
  155. </div>`
  156. } else if(auditor.status === auditConst.status.checkNo || auditor.status === auditConst.status.checkNoPre) {
  157. historyHTML += `<div class="timeline-item-icon bg-warning text-light">
  158. <i class="fa fa-level-up"></i>
  159. </div>`
  160. } else if(auditor.status === auditConst.status.checking) {
  161. historyHTML += `<div class="timeline-item-icon bg-warning text-light">
  162. <i class="fa fa-ellipsis-h"></i>
  163. </div>`
  164. } else {
  165. historyHTML += `<div class="timeline-item-icon bg-secondary text-light"></div>`
  166. }
  167. historyHTML += `<div class="timeline-item-content">
  168. <div class="card">
  169. <div class="card-body p-3">
  170. <div class="card-text">
  171. <p class="mb-1"><span class="h5">${auditor.name}</span><span
  172. class="pull-right ${auditConst.statusClass[auditor.status]}">${auditConst.statusString[auditor.status]}</span>
  173. </p>
  174. <p class="text-muted mb-0">${auditor.role}</p>
  175. </div>
  176. </div>`
  177. if (auditor.opinion) {
  178. historyHTML += `<div class="card-body p-3 border-top">
  179. <p style="margin: 0;">${auditor.opinion}</p>
  180. </div>`
  181. }
  182. historyHTML += `</div></div></li>`
  183. } else {
  184. historyHTML += `<li class="timeline-list-item pb-2">
  185. <div class="timeline-item-date">
  186. ${formatDate(auditor.end_time)}
  187. </div>`
  188. if(index < auditors.length - 1) {
  189. historyHTML += `<div class="timeline-item-tail"></div>`
  190. }
  191. if(auditor.status === auditConst.status.checked) {
  192. historyHTML += `<div class="timeline-item-icon bg-success text-light">
  193. <i class="fa fa-check"></i>
  194. </div>`
  195. } else if(auditor.status === auditConst.status.checkNo || auditor.status === auditConst.status.checkNoPre) {
  196. historyHTML += `<div class="timeline-item-icon bg-warning text-light">
  197. <i class="fa fa-level-up"></i>
  198. </div>`
  199. } else if(auditor.status === auditConst.status.checking) {
  200. historyHTML += `<div class="timeline-item-icon bg-warning text-light">
  201. <i class="fa fa-ellipsis-h"></i>
  202. </div>`
  203. } else {
  204. historyHTML += `<div class="timeline-item-icon bg-secondary text-light"></div>`
  205. }
  206. historyHTML += `<div class="timeline-item-content">
  207. <div class="card">
  208. <div class="card-body p-3">
  209. <div class="card-text">
  210. <p class="mb-1"><span class="h5">${auditor.name}</span>
  211. <span
  212. class="pull-right
  213. ${auditConst.statusClass[auditor.status]}">${auditor.status !== auditConst.status.uncheck ? auditConst.statusString[auditor.status] : ''}
  214. ${auditor.status === auditConst.status.checkNo ? user.name : ''}
  215. ${auditor.status === auditConst.status.checkNoPre ? auditors[index-1].name : ''}
  216. </span>
  217. </p>
  218. <p class="text-muted mb-0">${auditor.role}</p>
  219. </div>
  220. </div>`
  221. if (auditor.opinion) {
  222. historyHTML += `<div class="card-body p-3 border-top">
  223. <p style="margin: 0;">${auditor.opinion} </p>
  224. </div>`
  225. }
  226. historyHTML += `</div></div></li>`
  227. }
  228. })
  229. historyHTML += '</ul></div>'
  230. })
  231. $('#audit-list').empty()
  232. $('#audit-list').append(historyHTML)
  233. })
  234. });
  235. });
  236. function formatDate(date) {
  237. if (!date) return '';
  238. date = new Date(date)
  239. const year = date.getFullYear();
  240. let mon = date.getMonth() + 1;
  241. let day = date.getDate();
  242. let hour = date.getHours();
  243. let minute = date.getMinutes();
  244. let scond = date.getSeconds();
  245. if (mon < 10) {
  246. mon = '0' + mon.toString();
  247. }
  248. if (day < 10) {
  249. day = '0' + day.toString();
  250. }
  251. if (hour < 10) {
  252. hour = '0' + hour.toString();
  253. }
  254. if (minute < 10) {
  255. minute = '0' + minute.toString();
  256. }
  257. if (scond < 10) {
  258. scond = '0' + scond.toString();
  259. }
  260. return `${year}<span>${mon}-${day}</span><span>${hour}:${minute}:${scond}</span>`;
  261. };
  262. $('#audit-list').on('click', 'a', function() {
  263. const type = $(this).data('target')
  264. const auditCard = $(this).parent().parent()
  265. console.log('auditCard', auditCard)
  266. if (type === 'show') {
  267. $(this).data('target', 'hide')
  268. auditCard.find('.fold-card').slideDown('swing', () => {
  269. auditCard.find('#fold-btn').text('收起历史审核记录')
  270. })
  271. } else {
  272. $(this).data('target', 'show')
  273. auditCard.find('.fold-card').slideUp('swing', () => {
  274. auditCard.find('#fold-btn').text('展开历史审核记录')
  275. })
  276. }
  277. });
  278. </script>