material_file.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  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('name', file.name)
  29. formData.append('size', file.size)
  30. formData.append('file', file)
  31. })
  32. postDataWithFile(window.location.pathname + '/upload', formData, function (result) {
  33. $('#upload-fujian-file').val('');
  34. handleFileList(result)
  35. $('#addfujian').modal('hide');
  36. if (!$('#file-list tr').length) {
  37. getAllList();
  38. } else {
  39. const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text() || 1
  40. getAllList(parseInt(curPageNo));
  41. }
  42. });
  43. }
  44. }
  45. })
  46. // 选择/未选所有期列表
  47. // $('#file-checkbox').click(function() {
  48. // getAllList()
  49. // })
  50. // 删除附件
  51. $('body').on('click', '.delete-file', function () {
  52. let attid = $(this).data('attid');
  53. const data = {id: attid};
  54. postData('/tender/measure/material/file/delete', data, function () {
  55. const idx = fileData.findIndex(file => file.id === parseInt(attid))
  56. idx !== -1 && fileData.splice(idx, 1)
  57. const curPageNo = parseInt($('#file-pagination > li[class="page-item active"] > a').text()) || 1
  58. if ($('#file-list tr').length === 1) {
  59. getAllList(curPageNo - 1);
  60. } else {
  61. getAllList(curPageNo);
  62. }
  63. // self.parents('tr').remove();
  64. // // 重新排序
  65. // let newsort = 1;
  66. // $('#file-list tr').each(function(){
  67. // $(this).children('td').eq(0).text(newsort);
  68. // newsort++;
  69. // });
  70. });
  71. });
  72. // 切换页数
  73. $('#file-pagination').on('click', '.page-item a', function () {
  74. // 找到当前的pageNo
  75. const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text() || 1
  76. const btnType = $(this).attr('aria-label')
  77. const total = calcCount();
  78. // btnType存在,说明点击的是前一个/后一个
  79. // btnType不存在,点击的是页数
  80. if (btnType) {
  81. if (btnType === 'Previous') {
  82. // 只有大于1时才处理
  83. if (parseInt(curPageNo) !== 1) {
  84. getAllList(curPageNo - 1)
  85. }
  86. } else if(btnType === 'Next') {
  87. if (parseInt(curPageNo) !== Math.ceil(total/pageCount)) {
  88. getAllList(parseInt(curPageNo) + 1)
  89. }
  90. } else if(btnType === 'Start') {
  91. getAllList(1)
  92. } else {
  93. getAllList(Math.ceil(total/pageCount))
  94. }
  95. } else {
  96. curPageNo !== $(this).text() && getAllList(parseInt($(this).text()))
  97. }
  98. });
  99. $('.dropdown-item').click(function() {
  100. const type = $('#dropdownMenuButton').attr('btn-type')
  101. if (type === 'curr') {
  102. $(this).text('当前期')
  103. $('#dropdownMenuButton').text('所有期')
  104. $('#dropdownMenuButton').attr('btn-type', 'all')
  105. } else {
  106. $(this).text('所有期')
  107. $('#dropdownMenuButton').text('当前期')
  108. $('#dropdownMenuButton').attr('btn-type', 'curr')
  109. }
  110. getAllList()
  111. })
  112. // 生成所有附件列表
  113. function getAllList(currPageNum = 1) {
  114. const isCheckAll = $('#dropdownMenuButton').attr('btn-type') === 'all'
  115. // 未选中checkbox,需要过滤出来当前期的数据
  116. const filterFileData = fileData && isCheckAll ? fileData : fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid))
  117. const total = calcCount();
  118. // 总页数
  119. const pageNum = Math.ceil(total/pageCount);
  120. // 当前页附件内容
  121. const currPageAttData = fileData && isCheckAll ? fileData.slice((currPageNum-1)*pageCount, currPageNum*pageCount) : filterFileData.map((v, index) => {
  122. return {...v, index }
  123. }).slice((currPageNum-1)*pageCount, currPageNum*pageCount);
  124. console.log(currPageAttData)
  125. renderHtml(currPageAttData)
  126. // 渲染分页器
  127. renderPagination(currPageNum, pageNum)
  128. };
  129. function renderPagination(pageNo, pageSize) {
  130. $('#file-pagination').empty()
  131. if (pageSize < 2) return
  132. const btnHtml = `
  133. <li class="page-item page-begin">
  134. <a class="page-link" href="#" aria-label="Start">
  135. <span aria-hidden="true">&laquo;</span>
  136. </a>
  137. </li>
  138. <li class="page-item page-back">
  139. <a class="page-link" href="#" aria-label="Previous">
  140. <span aria-hidden="true">&lsaquo;</span>
  141. </a>
  142. </li>
  143. <li class="page-item page-next">
  144. <a class="page-link" href="#" aria-label="Next">
  145. <span aria-hidden="true">&rsaquo;</span>
  146. </a>
  147. </li>
  148. <li class="page-item page-end">
  149. <a class="page-link" href="#" aria-label="End">
  150. <span aria-hidden="true">&raquo;</span>
  151. </a>
  152. </li>`
  153. $('#file-pagination').append(btnHtml)
  154. let html = ''
  155. // 考虑极端情况
  156. if (pageNo - 2 <= 0 || pageNo + 2 >= pageSize) {
  157. if (pageNo < 3) {
  158. const max = pageSize > 5 ? 5 : pageSize
  159. for (let i = 0; i < max; i++) {
  160. html += pageNo === i + 1 ?
  161. `<li class="page-item active"><a class="page-link" href="#">${i+1}</a></li>` :
  162. `<li class="page-item"><a class="page-link" href="#">${i+1}</a></li>`
  163. }
  164. } else {
  165. for (let i = (pageSize-4 > 0 ? pageSize-4 : 1 ); i <= pageSize; i++) {
  166. html += pageNo === i ?
  167. `<li class="page-item active"><a class="page-link" href="#">${i}</a></li>` :
  168. `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
  169. }
  170. }
  171. } else {
  172. for (let i = 0; i < pageSize; i++) {
  173. if (i + 1 === pageNo) {
  174. // 当前
  175. html+=`<li class="page-item active"><a class="page-link" href="#">${i + 1}</a></li>`
  176. } else if(i + 2 === pageNo && i + 2 <= pageSize) {
  177. // 后一页
  178. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  179. } else if (i + 3 === pageNo && i + 3 <= pageSize) {
  180. // 后两页
  181. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  182. } else if(i === pageNo) {
  183. // 前一页
  184. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  185. } else if (i -1 === pageNo && i -1 >= 0) {
  186. // 前两页
  187. html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
  188. }
  189. }
  190. }
  191. $('.page-next').before(html)
  192. };
  193. function renderHtml(list) {
  194. let html = '';
  195. $('#check-all-file').prop("checked", false)
  196. list.forEach(fileInfo => {
  197. html += `<tr style="height: 31px;">
  198. <td width="25"><input type="checkbox" class="check-file" file-id=${fileInfo.id}></td>
  199. <td>${fileInfo.index + 1}</td>
  200. <td><a href="/${fileInfo.filepath}" target="_blank">${fileInfo.file_name}</a></td>
  201. <td>${fileInfo.file_size}</td>
  202. <td>第${fileInfo.s_order}期</td>
  203. <td>${fileInfo.upload_time}</td>`
  204. if (fileInfo.showDel ) {
  205. html += `<td>
  206. <a href="/${fileInfo.filepath}" class="btn btn-light btn-sm" title="下载"><span class="fa fa-download text-primary"></span></a>
  207. <a href="javascript:void(0);" class="btn btn-light btn-sm delete-file" data-attid="${fileInfo.id}" title="删除附件">
  208. <span class="fa fa-trash text-danger"></span>
  209. </a>
  210. </td></tr>`
  211. } else {
  212. html += `<td><a href="/${fileInfo.filepath}" class="btn btn-light btn-sm" title="下载"><span class="fa fa-download text-primary"></span></a></td></tr>`
  213. }
  214. })
  215. $('#file-list').empty();
  216. $('#file-list').append(html);
  217. };
  218. $('#file-list').on('click', '.check-file', function() {
  219. const checkedList = $('#file-list').find('input:checked')
  220. const childs = $('#file-list').children().length
  221. const checkBox = $('#check-all-file')
  222. if (checkedList.length === childs) {
  223. checkBox.prop("checked", true)
  224. } else {
  225. checkBox.prop("checked", false)
  226. }
  227. })
  228. $('#check-all-file').click(function() {
  229. const isCheck = $(this).is(':checked')
  230. $('#file-list').children().each(function() {
  231. $(this).find('input:checkbox').prop("checked", isCheck)
  232. })
  233. });
  234. $('#bach-download').click(function() {
  235. const fileIds = []
  236. $( '#file-list .check-file:checked').each(function() {
  237. const fileId = $(this).attr('file-id')
  238. fileId && fileIds.push(fileId)
  239. })
  240. // console.log('fileIds', fileIds)
  241. if (fileIds.length) {
  242. // postData( `/tender/${tid}/measure/material/${order}/file/download/compresse-file`, { fileIds })
  243. $('#downloadZip').attr('href', `/tender/${tid}/measure/material/${order}/file/download/compresse-file?fileIds=${JSON.stringify(fileIds)}`);
  244. $('#downloadZip')[0].click();
  245. }
  246. });
  247. function handleFileList(fileList) {
  248. fileData = fileList.map((file, index) => {
  249. let showDel = false
  250. // 只判断当前期,因为以往期都是只读的
  251. if (file.mid === parseInt(mid) && file.tid === parseInt(tid) && file.user_id === parseInt(cur_uid)) {
  252. if (materialStatus === auditConst.status.checked) {
  253. showDel = Boolean(file.extra_upload )
  254. } else {
  255. showDel = true
  256. }
  257. // if (!curAuditor) {
  258. // materialStatus === auditConst.status.uncheck && parseInt(cur_uid) === materialUid && (showDel = true)
  259. // materialStatus === auditConst.status.checkNo && parseInt(cur_uid) === materialUid && (showDel = true)
  260. // } else {
  261. // curAuditor.aid === parseInt(cur_uid) && (showDel = true)
  262. // }
  263. }
  264. return {...file, index, showDel}
  265. })
  266. };
  267. function calcCount() {
  268. // 附件总数
  269. let total = fileData && fileData.length;
  270. if(!$('#dropdownMenuButton').attr('btn-type') === 'all') {
  271. total = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid)).length
  272. }
  273. return total
  274. };
  275. $.subMenu({
  276. menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
  277. toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
  278. key: 'menu.1.0.0',
  279. miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
  280. callback: function (info) {
  281. if (info.mini) {
  282. $('.panel-title').addClass('fluid');
  283. $('#sub-menu').removeClass('panel-sidebar');
  284. } else {
  285. $('.panel-title').removeClass('fluid');
  286. $('#sub-menu').addClass('panel-sidebar');
  287. }
  288. autoFlashHeight();
  289. }
  290. });
  291. });
  292. /**
  293. * 校验文件大小、格式
  294. * @param {Array} files 文件数组
  295. */
  296. function validateFiles(files) {
  297. if (files.length > 10) {
  298. toastr.error('至多同时上传10个文件');
  299. return false
  300. }
  301. return files.every(file => {
  302. if (file.size > 1024 * 1024 * 30) {
  303. toastr.error('文件大小限制为30MB');
  304. return false
  305. }
  306. if (whiteList.indexOf('.' + file.ext) === -1) {
  307. toastr.error('请上传正确的格式文件');
  308. return false
  309. }
  310. return true
  311. })
  312. };