material_file.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. 'use strict';
  2. /**
  3. * 材料调差 - 附件
  4. * @author LanJianRong
  5. * @date 2020/06/30
  6. * @version
  7. */
  8. $(document).ready(function () {
  9. // 每页最多几个附件
  10. const pageCount = 15;
  11. // 全局fileData初始化
  12. let fileData = fileList || []
  13. handleFileList(fileData)
  14. getAllList()
  15. $('#upload-file-ok').click(function () {
  16. const files = Array.from($('#upload-fujian-file')[0].files)
  17. const valiData = files.map(v => {
  18. const ext = v.name.substring(v.name.lastIndexOf('.') + 1)
  19. return {
  20. size: v.size,
  21. ext
  22. }
  23. })
  24. if (validateFiles(valiData)) {
  25. if (files.length) {
  26. const formData = new FormData()
  27. files.forEach(file => {
  28. formData.append('file', file)
  29. formData.append('name', file.name)
  30. formData.append('size', file.size)
  31. })
  32. postDataWithFile(window.location.pathname + '/upload', formData, function (result) {
  33. handleFileList(result)
  34. $('#addfujian').modal('hide');
  35. if (!$('#file-list tr').length) {
  36. getAllList();
  37. } else {
  38. const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text()
  39. getAllList(parseInt(curPageNo));
  40. }
  41. });
  42. }
  43. }
  44. })
  45. // 选择/未选所有期列表
  46. $('#file-checkbox').click(function() {
  47. getAllList()
  48. })
  49. // 删除附件
  50. $('body').on('click', '.delete-file', function () {
  51. let attid = $(this).data('attid');
  52. const data = {id: attid};
  53. postData('/tender/measure/material/file/delete', data, function () {
  54. const idx = fileData.findIndex(file => file.id === parseInt(attid))
  55. idx !== -1 && fileData.splice(idx, 1)
  56. const curPageNo = parseInt($('#file-pagination > li[class="page-item active"] > a').text())
  57. if ($('#file-list tr').length === 1) {
  58. getAllList(curPageNo - 1);
  59. } else {
  60. getAllList(curPageNo);
  61. }
  62. // self.parents('tr').remove();
  63. // // 重新排序
  64. // let newsort = 1;
  65. // $('#file-list tr').each(function(){
  66. // $(this).children('td').eq(0).text(newsort);
  67. // newsort++;
  68. // });
  69. });
  70. });
  71. // 切换页数
  72. $('#file-pagination').on('click', '.page-item a', function () {
  73. // 找到当前的pageNo
  74. const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text()
  75. const btnType = $(this).attr('aria-label')
  76. const total = calcCount();
  77. // btnType存在,说明点击的是前一个/后一个
  78. // btnType不存在,点击的是页数
  79. if (btnType) {
  80. if (btnType === 'Previous') {
  81. // 只有大于1时才处理
  82. if (parseInt(curPageNo) !== 1) {
  83. getAllList(curPageNo - 1)
  84. }
  85. } else if(btnType === 'Next') {
  86. if (parseInt(curPageNo) !== Math.ceil(total/pageCount)) {
  87. getAllList(parseInt(curPageNo) + 1)
  88. }
  89. } else if(btnType === 'Start') {
  90. getAllList(1)
  91. } else {
  92. getAllList(Math.ceil(total/pageCount))
  93. }
  94. } else {
  95. curPageNo !== $(this).text() && getAllList(parseInt($(this).text()))
  96. }
  97. })
  98. // 生成所有附件列表
  99. function getAllList(currPageNum = 1) {
  100. // 未选中checkbox,需要过滤出来当前期的数据
  101. const filterFileData = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid))
  102. const total = calcCount(filterFileData);
  103. // 总页数
  104. const pageNum = Math.ceil(total/pageCount);
  105. // 当前页附件内容
  106. const currPageAttData = fileData && $('#file-checkbox').is(':checked') ? fileData.slice((currPageNum-1)*pageCount, currPageNum*pageCount) : filterFileData.slice((currPageNum-1)*pageCount, currPageNum*pageCount);
  107. renderHtml(currPageAttData)
  108. // 渲染分页器
  109. renderPagination(currPageNum, pageNum)
  110. }
  111. function renderPagination(pageNo, pageSize) {
  112. $('#file-pagination').empty()
  113. const btnHtml = `
  114. <li class="page-item page-begin">
  115. <a class="page-link" href="#" aria-label="Start">
  116. <span aria-hidden="true">&laquo;</span>
  117. </a>
  118. </li>
  119. <li class="page-item page-back">
  120. <a class="page-link" href="#" aria-label="Previous">
  121. <span aria-hidden="true">&lsaquo;</span>
  122. </a>
  123. </li>
  124. <li class="page-item page-next">
  125. <a class="page-link" href="#" aria-label="Next">
  126. <span aria-hidden="true">&rsaquo;</span>
  127. </a>
  128. </li>
  129. <li class="page-item page-end">
  130. <a class="page-link" href="#" aria-label="End">
  131. <span aria-hidden="true">&raquo;</span>
  132. </a>
  133. </li>`
  134. $('#file-pagination').append(btnHtml)
  135. let html = ''
  136. // 考虑极端情况
  137. // console.log('pageNo',pageNo, 'pageSize', pageSize)
  138. if (pageNo - 2 <= 0 || pageNo + 2 >= pageSize) {
  139. if (pageNo < 3) {
  140. for (let i = 0; i < 5; i++) {
  141. html += pageNo === i + 1 ?
  142. `<li class="page-item active"><a class="page-link" href="#">${i+1}</a></li>` :
  143. `<li class="page-item"><a class="page-link" href="#">${i+1}</a></li>`
  144. }
  145. } else {
  146. for (let i = pageSize-4; i <= pageSize; i++) {
  147. html += pageNo === i ?
  148. `<li class="page-item active"><a class="page-link" href="#">${i}</a></li>` :
  149. `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
  150. }
  151. }
  152. } else {
  153. for (let i = 0; i < pageSize; i++) {
  154. if (i + 1 === pageNo) {
  155. // 当前
  156. html+=`<li class="page-item active"><a class="page-link" href="#">${i + 1}</a></li>`
  157. } else if(i + 2 === pageNo) {
  158. // 后一页
  159. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  160. } else if (i + 3 === pageNo) {
  161. // 后两页
  162. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  163. } else if(i === pageNo) {
  164. // 前一页
  165. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  166. } else if (i -1 === pageNo) {
  167. // 前两页
  168. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  169. }
  170. }
  171. }
  172. $('.page-next').before(html)
  173. }
  174. function renderHtml(list) {
  175. let html = '';
  176. list.forEach(fileInfo => {
  177. html += `<tr style="height: 31px;">
  178. <td>${fileInfo.index + 1}</td>
  179. <td><a href="/${fileInfo.filepath}" target="_blank">${fileInfo.file_name}</a></td>
  180. <td>${fileInfo.file_size}</td>
  181. <td>第${fileInfo.s_order}期</td>
  182. <td>${fileInfo.upload_time}</td>`
  183. if (fileInfo.canDel ) {
  184. html += `<td>
  185. <a class="btn btn-light btn-sm delete-file" data-attid="${fileInfo.id}" title="删除附件">
  186. <span class="fa fa-trash text-danger"></span>
  187. </a>
  188. </td></tr>`
  189. } else {
  190. html += `<td></td></tr>`
  191. }
  192. })
  193. $('#file-list').empty();
  194. $('#file-list').append(html);
  195. }
  196. function handleFileList(fileList) {
  197. fileData = fileList.map((file, index) => {
  198. let showDel = false
  199. // 只判断当前期,因为以往期都是只读的
  200. if (file.mid === parseInt(mid) && file.tid === parseInt(tid) && file.user_id === parseInt(cur_uid)) {
  201. if (!curAuditor) {
  202. material.status === auditConst.status.uncheck && parseInt(cur_uid) === material.user_id && (showDel = true)
  203. material.status === auditConst.status.checkNo && parseInt(cur_uid) === material.user_id && (showDel = true)
  204. } else {
  205. curAuditor.aid === parseInt(cur_uid) && (showDel = true)
  206. }
  207. }
  208. return showDel ? {...file, canDel: true, index} : {...file, index}
  209. })
  210. }
  211. function calcCount() {
  212. // 附件总数
  213. let total = fileData && fileData.length;
  214. if(!$('#file-checkbox').is(':checked')) {
  215. total = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid)).length
  216. }
  217. return total
  218. }
  219. });
  220. /**
  221. * 校验文件大小、格式
  222. * @param {Array} files 文件数组
  223. */
  224. function validateFiles(files) {
  225. if (files.length > 10) {
  226. toastr.error('至多同时上传10个文件');
  227. return false
  228. }
  229. return files.every(file => {
  230. if (file.size > 1024 * 1024 * 30) {
  231. toastr.error('文件大小限制为30MB');
  232. return false
  233. }
  234. if (whiteList.indexOf('.' + file.ext) === -1) {
  235. toastr.error('请上传正确的格式文件');
  236. return false
  237. }
  238. return true
  239. })
  240. }