Calculation/app/public/js/payment_index.js

$(function () {
    autoFlashHeight();
    const EmptyTenderHtml = [
        '<div class="jumbotron">',
        '<h3 class="display-6">还没有标段及目录数据</h3>',
        '</div>'
    ];

    function initTenderTree(folderList, tenderList) {
        tenderTree = [];
        const folders = folderList;
        const tenders = tenderList;
        function makeTenderTree(parent) {
            if (parent.is_leaf) {
                parent.children = _.filter(tenders, { folder_id: parent.id });
                if (parent.children.length > 0) {
                    parent.is_tender = true;
                    parent.children.forEach((value, index) => {
                       value.level = parent.level + 1;
                    });
                }
            } else {
                const children = _.filter(folders, { parent_id: parent.id });
                parent.children = children;
                if (children.length > 0) {
                    for (const c of children) {
                        makeTenderTree(c);
                    }
                }
            }
        }
        const level0Folders = _.filter(folders, { level: 1 });
        for (const l of level0Folders) {
            makeTenderTree(l);
            tenderTree.push(l);
        }
        console.log(tenderTree);
    }

    function recursiveGetTenderNodeHtml (node, arr, pid) {
        const html = [];
        html.push('<tr fid="' + (node.parent_id !== undefined ? node.id: 0) + '" pid="' + pid + '">');
        // 名称
        html.push('<td style="width: 40%" class="in-' + node.level + '">');
        if (node.parent_id !== undefined) {
            // html.push('<span onselectstart="return false" style="{-moz-user-select:none}" class="fold-switch mr-1" title="收起" cid="'+ node.sort_id +'"><i class="fa fa-minus-square-o"></i></span> <i class="fa fa-folder-o"></i> ', node.name);
            html.push('<i class="fa fa-folder-o"></i> ', node.name);
        } else {
            html.push('<span class="text-muted mr-2">');
            html.push(arr.indexOf(node) === arr.length - 1 ? '└' : '├');
            html.push('</span>');
            //html.push('<a href="/tender/' + node.id + '">', node[c.field], '</a>');
            html.push('<a href="javascript: void(0)" id="' + node.id + '">', node.name, '</a>');
        }
        html.push('</td>');
        // 创建人
        html.push('<td style="width: 15%" class="text-center">', node.user_name ? node.user_name : '', '</td>');
        // 创建时间
        html.push('<td style="width: 15%">', node.in_time && node.parent_id === undefined ? moment(node.in_time).format('YYYY-MM-DD HH:mm:ss') : '', '</td>');
        // 审批流程
        html.push('<td style="width: 15%">');
        if (node.parent_id === undefined && auditPermission.process) {
            html.push('<a href="/payment/'+ node.id +'/process" target="_blank">设置</a>');
        }
        html.push('</td>');
        // 操作
        html.push('<td style="width: 15%">');
        if (uid === node.uid || (auditPermission.tender && node.is_leaf) || (auditPermission.folder && node.parent_id !== undefined && !node.is_tender)) {
            html.push('<div class="dropdown">\n' +
                '                        <a href="#" class="dropdown-toggle text-primary" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
                '                          <i class="fa fa-bars"></i>\n' +
                '                        </a>\n' +
                '                        <div class="dropdown-menu">\n');
            if (uid === node.uid) {
                html.push('<a class="dropdown-item edit_name_btn" data-type="'+ (node.parent_id === undefined ? 'tender' : 'folder') +'" data-id="'+ node.id +'" href="javascript:void(0);"><i class="fa fa-edit mr-2"></i>重命名</a>\n');
                if (!node.had_tender) {
                    html.push('<a class="dropdown-item show_del_btn" data-type="'+ (node.parent_id === undefined ? 'tender' : 'folder') +'" data-id="'+ node.id +'" href="javascript:void(0);"><i class="fa fa-remove mr-2"></i>删除</a>\n');
                }
            }
            if (uid === node.uid && ((auditPermission.tender && node.is_leaf) || (auditPermission.folder && node.parent_id !== undefined && !node.is_tender))) {
                html.push('<div class="dropdown-divider"></div>\n');
            }
            if (auditPermission.folder && node.parent_id !== undefined && !node.is_tender) {
                html.push('<a class="dropdown-item show_new_folder_btn" href="#add-folder" data-toggle="modal" data-target="#add-folder" data-parentName="'+ node.name +'" data-parentId="'+ node.id +'"><i class="fa fa-folder-o mr-2"></i>新建子目录</a>\n');
            }
            if (auditPermission.tender && node.is_leaf) {
                html.push('<a class="dropdown-item show_new_tender_btn" href="javascript:void(0);"><i class="fa fa-folder-o mr-2"></i>新建标段</a>\n');
            }
            html.push('                        </div>\n' +
                '                      </div>');
        }
        html.push('</td>');
        html.push('</tr>');
        if (node.children) {
            for (const c of node.children) {
                html.push(recursiveGetTenderNodeHtml(c, node.children, node.sort_id));
            }
        }
        return html.join('');
    }

    // 根据TenderTree数据获取Html代码
    function getTenderTreeHtml () {
        if (tenderTree.length > 0) {
            const html = [];
            html.push('<table class="table table-hover table-bordered">');
            html.push('<thead style="position: fixed;left:56px;top: 34px;">', '<tr>');
            html.push('<th class="text-center" style="width: 40%">', '名称', '</th>');
            html.push('<th class="text-center" style="width: 15%">', '创建人', '</th>');
            html.push('<th class="text-center" style="width: 15%">', '创建时间', '</th>');
            html.push('<th class="text-center" style="width: 15%">', '审批流程', '</th>');
            html.push('<th class="text-center" style="width: 15%">', '操作', '</th>');
            html.push('</tr>', '</thead>');
            parentId = 0;
            for (const t of tenderTree) {
                html.push(recursiveGetTenderNodeHtml(t, tenderTree, ''));
            }
            html.push('</table>');
            return html.join('');
        } else {
            return EmptyTenderHtml.join('');
        }
    }

    function makeList(folderList, tenderList) {
        initTenderTree(folderList, tenderList);
        $('.c-body').html(getTenderTreeHtml());
        setTopTr();
    }

    // 首次加载展示目录
    postData('/payment/list/load', {}, function (result) {
        allFolders = result.folderList;
        allTenders = result.tenderList;
        makeList(result.folderList, result.tenderList);
    });

    $('body').on('click', '.show_new_folder_btn', function () {
        if (parseInt($(this).attr('data-parentId')) === 0) {
            $('#parent_folder').hide();
            $('#parent_folder_name').val('');
            $('#add-folder').find('.modal-title').text('新建目录');
            $('#new_folder_name').siblings('label').text('目录名称');
            $('#parent_id').val(0);
        } else {
            $('#parent_folder').show();
            $('#parent_folder_name').val($(this).attr('data-parentName'));
            $('#add-folder').find('.modal-title').text('新建子目录');
            $('#new_folder_name').siblings('label').text('子目录名称');
            $('#parent_id').val($(this).attr('data-parentId'));
        }
    });

    function checkNameValid(_this) {
        const name = _.trim(_this.val());
        if(name === '') {
            _this.addClass('is-invalid');
            _this.siblings('.invalid-feedback').text('请输入名称');
            return false;
        }
        if(name.length > 100) {
            _this.addClass('is-invalid');
            _this.siblings('.invalid-feedback').text('名称超过100个字，请缩减名称');
            return false;
        }
        _this.removeClass('is-invalid');
        _this.siblings('.invalid-feedback').text('');
        return name;
    }

    $('#new_folder_btn').click(function () {
        const name = checkNameValid($('#new_folder_name'));
        if (name === false) {
            return;
        }
        postData('/payment/save', { type: 'add-folder', parentId: parseInt($('#parent_id').val()), name }, function (result) {
            allFolders = result.folderList;
            allTenders = result.tenderList;
            makeList(result.folderList, result.tenderList);
            $('#add-folder').modal('hide');
        })
    });

    $('body').on('click', '.edit_name_btn', function () {
        const type = $(this).attr('data-type');
        const id = parseInt($(this).attr('data-id'));
        const info = type === 'tender' ? _.find(allTenders, { id }) : _.find(allFolders, { id });
        if (!info) {
            toastr.error('目录或标段不存在');
            return;
        }
        $('#edit_name_input').val(info.name);
        $('#edit-name').find('.modal-title').text(type === 'tender' ? '修改标段' : '修改目录');
        $('#edit_name_id').val(info.id);
        $('#edit_name_type').val(type);
        $('#edit-name').modal('show');
    });

    $('#edit_name_btn').click(function () {
        const name = checkNameValid($('#edit_name_input'));
        if (name === false) {
            return;
        }
        const data = {
            type: $('#edit_name_type').val(),
            id: $('#edit_name_id').val(),
            name,
        };
        postData('/payment/save', { type: 'edit-name', postData: data }, function (result) {
            allFolders = result.folderList;
            allTenders = result.tenderList;
            makeList(result.folderList, result.tenderList);
            $('#edit-name').modal('hide');
        });
    });

    // 选中行并标记色
    $('body').on('click', '.c-body table tr', function () {
        $('.c-body table tr').removeClass('table-warning');
        $(this).addClass('table-warning');
        const fid = parseInt($(this).attr('fid'));
        const folderInfo = _.find(allFolders, { id: fid });
        if (auditPermission.tender && folderInfo && folderInfo.is_leaf) {
            $('#show_new_tender_btn').show();
            $('#add_tender_folder_id').val(fid);
            $('#add_tender_folder_name').val(folderInfo.name);
            $('#add_tender_name').removeClass('is-invalid');
            $('#add_tender_name').siblings('.invalid-feedback').text('');
        } else {
            $('#show_new_tender_btn').hide();
        }
    });

    $('body').on('click', '.show_new_tender_btn', function () {
        const fid = $('.c-body table').find('.table-warning').attr('fid');
        if (!fid) {
            toastr.error('请选中目录');
            return;
        }
        const folderInfo = _.find(allFolders, { id: parseInt(fid) });
        if (!folderInfo || folderInfo.is_leaf === 0) {
            toastr.error('目录不存在或存在子目录不能新建标段');
            return;
        }
        $('#add-tender').modal('show');
    });

    $('#new_tender_btn').click(function () {
        const name = checkNameValid($('#add_tender_name'));
        if (name === false) {
            return;
        }
        postData('/payment/save', { type: 'add-tender', folderId: parseInt($('#add_tender_folder_id').val()), name }, function (result) {
            allFolders = result.folderList;
            allTenders = result.tenderList;
            makeList(result.folderList, result.tenderList);
            $('#add-tender').modal('hide');
        });
    });

    $('body').on('click', '.show_del_btn', function () {
        const type = $(this).attr('data-type');
        const id = parseInt($(this).attr('data-id'));
        const info = type === 'tender' ? _.find(allTenders, { id }) : _.find(allFolders, { id });
        if (!info) {
            toastr.error('目录或标段不存在');
            return;
        }
        $('#edit_name_input').val(info.name);
        $('#del-project').find('.modal-title').text(type === 'tender' ? '删除标段' : '删除目录');
        $('#del-project').find('h6 span').text(info.name);
        $('#del_id').val(info.id);
        $('#del_type').val(type);
        $('#del-project').modal('show');
    });

    $('#del_btn').click(function () {
        const data = {
            type: $('#del_type').val(),
            id: $('#del_id').val(),
        };
        postData('/payment/save', { type: 'del', postData: data }, function (result) {
            allFolders = result.folderList;
            allTenders = result.tenderList;
            makeList(result.folderList, result.tenderList);
            $('#del-project').modal('hide');
        });
    });

    $(window).resize(setTopTr);
    // 设置表头固定并动态调整宽度高度
    function setTopTr() {
        for(let item = 0; item < $(".c-body table>thead>tr>th").length; item ++) {
            $(".c-body table>thead>tr>th").eq(item).outerWidth($(".c-body table>tbody>tr:first").children('td').eq(item).outerWidth());
        }
        $('.c-body table').css('margin-top', $(".c-body table>thead").height() - 4);
        // $('.c-body table').css('margin-top', -2);
    }
});