Calculation/app/public/js/material_file.js

'use strict';

/**
 * 材料调差 - 附件
 * @author LanJianRong
 * @date 2020/06/30
 * @version
 */

$(document).ready(function () {
    // 每页最多几个附件
    const pageCount = 15;
    // 全局fileData初始化
    let fileData = fileList || []
    handleFileList(fileData)
    getAllList()
    $('#upload-file-ok').click(function () {
        const files = Array.from($('#upload-fujian-file')[0].files)
        const valiData = files.map(v => {
            const ext = v.name.substring(v.name.lastIndexOf('.') + 1)
            return {
                size: v.size,
                ext
            }
        })
        if (validateFiles(valiData)) {
            if (files.length) {
                const formData = new FormData()
                files.forEach(file => {
                    formData.append('file', file)
                    formData.append('name', file.name)
                    formData.append('size', file.size)
                })
                postDataWithFile(window.location.pathname + '/upload', formData, function (result) {
                    handleFileList(result)
                    $('#addfujian').modal('hide');
                    if (!$('#file-list tr').length) {
                        getAllList();
                    } else {
                        const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text() || 1
                        getAllList(parseInt(curPageNo));
                    }
                });
            }
        }
    })
    // 选择/未选所有期列表
    $('#file-checkbox').click(function() {
        getAllList()
    })

    // 删除附件
    $('body').on('click', '.delete-file', function () {
        let attid = $(this).data('attid');
        const data = {id: attid};
        postData('/tender/measure/material/file/delete', data, function () {
            const idx = fileData.findIndex(file => file.id === parseInt(attid))
            idx !== -1 && fileData.splice(idx, 1)
            const curPageNo = parseInt($('#file-pagination > li[class="page-item active"] > a').text()) || 1
            if ($('#file-list tr').length === 1) {
                getAllList(curPageNo - 1);
            } else {

                getAllList(curPageNo);
            }
            // self.parents('tr').remove();
            // // 重新排序
            // let newsort = 1;
            // $('#file-list tr').each(function(){
            //     $(this).children('td').eq(0).text(newsort);
            //     newsort++;
            // });
        });
    });
    // 切换页数
    $('#file-pagination').on('click', '.page-item a', function () {
        // 找到当前的pageNo
        const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text() || 1
        const btnType = $(this).attr('aria-label')
        const total = calcCount();
        // btnType存在，说明点击的是前一个/后一个
        // btnType不存在，点击的是页数
        if (btnType) {
            if (btnType === 'Previous') {
                // 只有大于1时才处理
                if (parseInt(curPageNo) !== 1) {
                    getAllList(curPageNo - 1)
                }
            } else if(btnType === 'Next') {
                if (parseInt(curPageNo) !== Math.ceil(total/pageCount)) {
                    getAllList(parseInt(curPageNo) + 1)
                }
            } else if(btnType === 'Start') {
                getAllList(1)
            } else {
                getAllList(Math.ceil(total/pageCount))
            }
        } else {

            curPageNo !== $(this).text() && getAllList(parseInt($(this).text()))
        }
    })
    // 生成所有附件列表
    function getAllList(currPageNum = 1) {
         // 未选中checkbox，需要过滤出来当前期的数据
        const filterFileData = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid))
        const total = calcCount(filterFileData);
        // 总页数
        const pageNum = Math.ceil(total/pageCount);
        // 当前页附件内容
        const currPageAttData = fileData && $('#file-checkbox').is(':checked') ? fileData.slice((currPageNum-1)*pageCount, currPageNum*pageCount) : filterFileData.map((v, index) => {
            return {...v, index }
        }).slice((currPageNum-1)*pageCount, currPageNum*pageCount);

        renderHtml(currPageAttData)
        // 渲染分页器
        renderPagination(currPageNum, pageNum)
    }


    function renderPagination(pageNo, pageSize) {
        $('#file-pagination').empty()
        if (pageSize < 2) return
        const btnHtml = `
        <li class="page-item page-begin">
            <a class="page-link" href="#" aria-label="Start">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="page-item page-back">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&lsaquo;</span>
            </a>
        </li>
        <li class="page-item page-next">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&rsaquo;</span>
            </a>
        </li>
        <li class="page-item page-end">
            <a class="page-link" href="#" aria-label="End">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>`
        $('#file-pagination').append(btnHtml)
        let html = ''
        // 考虑极端情况
        if (pageNo - 2 <= 0 || pageNo + 2 >= pageSize)  {
            if (pageNo < 3) {
                const max = pageSize > 5 ? 5 : pageSize
                for (let i = 0; i < max; i++) {
                    html += pageNo === i + 1 ?
                        `<li class="page-item active"><a class="page-link" href="#">${i+1}</a></li>` :
                        `<li class="page-item"><a class="page-link" href="#">${i+1}</a></li>`
                }
            } else {
                for (let i = (pageSize-4 > 0 ? pageSize-4 : 1 ); i <= pageSize; i++) {
                    html += pageNo === i ?
                        `<li class="page-item active"><a class="page-link" href="#">${i}</a></li>` :
                        `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
                }
            }

        } else {
            for (let i = 0; i < pageSize; i++) {
                if (i + 1 === pageNo) {
                    // 当前
                    html+=`<li class="page-item active"><a class="page-link" href="#">${i + 1}</a></li>`
                } else if(i + 2 === pageNo && i + 2 <= pageSize) {
                    // 后一页
                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
                } else if (i + 3 === pageNo && i + 3 <= pageSize) {
                    // 后两页
                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
                } else if(i === pageNo) {
                    // 前一页
                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
                } else if (i -1  === pageNo && i -1 >= 0) {
                    // 前两页
                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
                }
            }

        }

        $('.page-next').before(html)
    }

    function renderHtml(list) {
        let html = '';
        list.forEach(fileInfo => {
            html += `<tr style="height: 31px;">
            <td>${fileInfo.index + 1}</td>
            <td><a href="/${fileInfo.filepath}" target="_blank">${fileInfo.file_name}</a></td>
            <td>${fileInfo.file_size}</td>
            <td>第${fileInfo.s_order}期</td>
            <td>${fileInfo.upload_time}</td>`
            if (fileInfo.canDel ) {
                html += `<td>
                <a class="btn btn-light btn-sm delete-file" data-attid="${fileInfo.id}" title="删除附件">
                <span class="fa fa-trash text-danger"></span>
                </a>
                </td></tr>`
            } else {
                html += `<td></td></tr>`
            }
        })
        $('#file-list').empty();
        $('#file-list').append(html);
    }

    function handleFileList(fileList) {
        fileData = fileList.map((file, index) => {
            let showDel = false
            // 只判断当前期，因为以往期都是只读的
            if (file.mid === parseInt(mid) && file.tid === parseInt(tid) && file.user_id === parseInt(cur_uid)) {
                if (!curAuditor) {
                    material.status === auditConst.status.uncheck && parseInt(cur_uid) === material.user_id && (showDel = true)
                    material.status === auditConst.status.checkNo && parseInt(cur_uid) === material.user_id && (showDel = true)
                } else {
                    curAuditor.aid === parseInt(cur_uid) && (showDel = true)
                }
            }
            return showDel ? {...file, canDel: true, index} : {...file, index}
        })
    }

    function calcCount() {
        // 附件总数
        let total = fileData && fileData.length;
        if(!$('#file-checkbox').is(':checked')) {
            total = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid)).length
        }
        return total
    }
});

/**
 * 校验文件大小、格式
 * @param {Array} files 文件数组
 */
function validateFiles(files) {
    if (files.length > 10) {
        toastr.error('至多同时上传10个文件');
        return false
    }
    return files.every(file => {
        if (file.size > 1024 * 1024 * 30) {
            toastr.error('文件大小限制为30MB');
            return false
        }
        if (whiteList.indexOf('.' + file.ext) === -1) {
            toastr.error('请上传正确的格式文件');
            return false
        }
        return true
    })
}