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('name', file.name)
                    formData.append('size', file.size)
                    formData.append('file', file)
                })
                postDataWithFile(window.location.pathname + '/upload', formData, function (result) {
                    $('#upload-fujian-file').val('');
                    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(window.location.pathname + '/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()))
        }
    });

    $('.dropdown-item').click(function() {
        const type = $('#dropdownMenuButton').attr('btn-type')
        if (type === 'curr') {
            $(this).text('当前期')
            $('#dropdownMenuButton').text('所有期')
            $('#dropdownMenuButton').attr('btn-type', 'all')
        } else {
            $(this).text('所有期')
            $('#dropdownMenuButton').text('当前期')
            $('#dropdownMenuButton').attr('btn-type', 'curr')
        }
        getAllList()
    })
    // 生成所有附件列表
    function getAllList(currPageNum = 1) {
        const isCheckAll = $('#dropdownMenuButton').attr('btn-type') === 'all'
         // 未选中checkbox，需要过滤出来当前期的数据
        const filterFileData = fileData && isCheckAll ? fileData : fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid))
        const total = calcCount();
        // 总页数
        const pageNum = Math.ceil(total/pageCount);
        // 当前页附件内容
        const currPageAttData = fileData && isCheckAll ? 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 = '';
        $('#check-all-file').prop("checked", false)
        list.forEach(fileInfo => {
            html += `<tr style="height: 31px;">
            <td width="25"><input type="checkbox" class="check-file" file-id=${fileInfo.id}></td>
            <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.showDel ) {
                html += `<td>
                <a href="/${fileInfo.filepath}" class="btn btn-light btn-sm" title="下载"><span class="fa fa-download text-primary"></span></a>
                <a href="javascript:void(0);" 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><a href="/${fileInfo.filepath}" class="btn btn-light btn-sm" title="下载"><span class="fa fa-download text-primary"></span></a></td></tr>`
            }
        })
        $('#file-list').empty();
        $('#file-list').append(html);
    };

    $('#file-list').on('click', '.check-file', function() {
        const checkedList = $('#file-list').find('input:checked')
        const childs = $('#file-list').children().length
        const checkBox = $('#check-all-file')
        if (checkedList.length === childs) {
            checkBox.prop("checked", true)
        } else {
            checkBox.prop("checked", false)
        }
    })
    $('#check-all-file').click(function() {
        const isCheck = $(this).is(':checked')
        $('#file-list').children().each(function() {
            $(this).find('input:checkbox').prop("checked", isCheck)
        })
    });

    $('#bach-download').click(function() {
        const fileIds = []
        $( '#file-list .check-file:checked').each(function() {
            const fileId = $(this).attr('file-id')
            fileId && fileIds.push(fileId)
        })
        // console.log('fileIds', fileIds)

        if (fileIds.length) {
            // postData( `/tender/${tid}/measure/material/${order}/file/download/compresse-file`, { fileIds })
            $('#downloadZip').attr('href', `/tender/${tid}/measure/material/${order}/file/download/compresse-file?fileIds=${JSON.stringify(fileIds)}`);
            $('#downloadZip')[0].click();
        }
    });
    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 (materialStatus === auditConst.status.checked) {
                    showDel = Boolean(file.extra_upload )
                } else {
                    showDel = true
                }
                // if (!curAuditor) {
                //     materialStatus === auditConst.status.uncheck && parseInt(cur_uid) === materialUid && (showDel = true)
                //     materialStatus === auditConst.status.checkNo && parseInt(cur_uid) === materialUid && (showDel = true)
                // } else {
                //     curAuditor.aid === parseInt(cur_uid) && (showDel = true)
                // }
            }
            return {...file, index, showDel}
        })
    };

    function calcCount() {
        // 附件总数
        let total = fileData && fileData.length;
        if(!$('#dropdownMenuButton').attr('btn-type') === 'all') {
            total = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid)).length
        }
        return total
    };

    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
        }
    });
});

/**
 * 校验文件大小、格式
 * @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
    })
};