Calculation/app/public/js/sub_project.js

const NameChange = function (obj) {
    if (obj.value.length > 100) {
        obj.classList.add('is-invalid');
    } else {
        obj.classList.remove('is-invalid');
    }
};

$(document).ready(function() {
    const projectTreeObj = (function(setting){
        const ProjectTree = createDragTree(setting.treeSetting);
        ProjectTree.loadDatas(setting.source);
        const TableObj = $(setting.table);
        let tenderTreeShowLevel;

        const Utils = {
            getRowTdHtml: function (node, tree) {
                const html = [];
                // 名称
                html.push('<td width="20%" class="in-' + node.tree_level + '">');
                if (node.is_folder) {
                    if (node.children.length > 0) {
                        html.push('<span onselectstart="return false" style="{-moz-user-select:none}" class="fold-switch mr-1" title="收起" id="'+ node.id +'"><i class="fa fa-minus-square-o"></i></span> <i class="fa fa-folder-o"></i> ', node.name);
                    } else {
                        html.push('<i class="fa fa-folder-o"></i> ', node.name);
                    }
                } else {
                    html.push(`<span class="text-muted mr-2">${tree.isLastSibling(node) ? '└' : '├'}</span>`);
                    html.push(`<a href="sp/${node.id}/dashboard" name="name" id="${node.id}">`, node.name, '</a>');
                }
                html.push('</td>');
                // 概预算标准
                if (node.is_folder) {
                    html.push(`<td class="text-center"></td>`);
                } else {
                    if (node.std_name) {
                        html.push(`<td class="text-center">${node.std_name}</td>`);
                    } else if (canEdit) {
                        html.push(`<td class="text-center"><button class="btn btn-outline-primary btn-sm ml-1" name="set-std">选择</button></td>`);
                    } else {
                        html.push(`<td class="text-center"></td>`);
                    }
                }
                // 创建时间
                if (node.is_folder) {
                    html.push(`<td class="text-center"></td>`);
                    html.push(`<td class="text-center"></td>`);
                } else {
                    html.push(`<td class="text-center">${moment(node.create_time).format('YYYY-MM-DD')}</td>`);
                    if (canEdit) {
                        html.push(`<td class="text-center">${node.management || ''}<a class="ml-2" href="javascript: void(0)" name="set-management"><i class="fa fa-pencil-square-o "></i></a>${node.management ? '<a class="ml-2" href="javascript: void(0)" name="refresh-management"><i class="fa fa-refresh "></i></a>': ''}</td>`);
                    } else {
                        html.push(`<td class="text-center">${node.management || ''}</td>`);
                    }
                }
                // 操作
                html.push(`<td>`);
                if (canEdit) {
                    html.push('<button class="btn btn-outline-primary btn-sm ml-1" name="edit">编辑</button>');
                    html.push('<button class="btn btn-outline-danger btn-sm ml-1" name="del">删除</button>');
                    html.push('<button class="btn btn-outline-primary btn-sm ml-1" name="up"><i class="fa fa-arrow-up"></i></button>');
                    html.push('<button class="btn btn-outline-primary btn-sm ml-1" name="down"><i class="fa fa-arrow-down"></i></button>');
                    html.push('<button class="btn btn-outline-primary btn-sm ml-1" name="top">顶层</button>');
                }
                html.push('</td>');
                return html.join('');
            },
            getNodeTrHtml: function (node, tree) {
                const html = [];
                html.push(`<tr tree_id="${node.id}" draggable="true">`);
                html.push(Utils.getRowTdHtml(node, tree));
                html.push(`</tr>`);
                return html.join('');
            },
            reloadTable: function () {
                const html = [];
                for (const node of ProjectTree.nodes) {
                    html.push(Utils.getNodeTrHtml(node, ProjectTree));
                }
                TableObj.html(html.join(''));
            },
            getSelectNode: function() {
                const selectId = $('tr.table-active').attr('tree_id');
                return selectId ? ProjectTree.getItems(selectId) : null;
            },
            getSelectNodeId: function() {
                const selectId = $('tr.table-active').attr('tree_id');
                return selectId || setting.treeSetting.rootId;
            },
            refreshAddButton: function() {
                const select = this.getSelectNode();
                // $('[href="#add-folder"]').attr("disabled", select && (select.tree_level >= 4 || !select.is_folder));
                if (select && (select.tree_level >= 4 || !select.is_folder)) {
                    $('[href="#add-folder"]').hide();
                } else {
                    $('[href="#add-folder"]').show();
                }
                if (select && !select.is_folder) {
                    $('[href="#add-project"]').hide();
                } else {
                    $('[href="#add-project"]').show();
                }
            },
            refreshTreeTable: function(result) {
                ProjectTree.loadDatas(result);
                if (ProjectTree.nodes.length > 0 && $('#no-project').length > 0) window.location.reload();
                Utils.reloadTable();
            },
            refreshRow: function(result) {
                const refreshData = ProjectTree.loadPostData(result);
                if (!refreshData.update) return;
                for (const u of refreshData.update) {
                    $(`tr[tree_id=${u.id}]`).html(Utils.getRowTdHtml(u, ProjectTree));
                }
            },
            dropTo: function() {
                if (!Utils.dropNode.is_folder) {
                    toastr.warning('请将文件夹或者项目拖动到目标文件夹下');
                    return;
                }
                const parents = ProjectTree.getAllParents(Utils.dropNode);
                const existParent = parents.find(x => { return x.id === Utils.dragNode.id; });
                if (existParent) {
                    toastr.error('请勿将文件夹移动到子文件夹下');
                    return;
                }
                const posterity = ProjectTree.getPosterity(Utils.dragNode);
                const maxLevelFolder = posterity.reduce((prev, cur) => { return cur.is_folder ? Math.max(cur.tree_level, prev) : prev; }, Utils.dragNode.tree_level);
                const resultMaxLevelFolder = Utils.dropNode.tree_level + maxLevelFolder - Utils.dragNode.tree_level + 1;
                if (resultMaxLevelFolder > 4) {
                    toastr.warning('文件夹不可超过4层');
                    return;
                }
                postData('/subproj/dragTo', { drag_id: Utils.dragNode.id, drop_id: Utils.dropNode.id }, function (result){
                    Utils.refreshTreeTable(result);
                });
                delete Utils.dragNode;
                delete Utils.dropNode;
            },
            move: function(node, type) {
                postData('/subproj/move', { id: node.id, type }, function (result) {
                    Utils.refreshTreeTable(result);
                });
            },
            expandByLevel: function(level){
                ProjectTree.expandByLevel(level);
                for (const node of ProjectTree.nodes) {
                    const tr = $(`tr[tree_id=${node.id}]`);
                    if (node.expanded) {
                        $('.fold-switch', tr).html(`<i class="fa fa-minus-square-o"></i>`);
                    } else {
                        $('.fold-switch', tr).html(`<i class="fa fa-plus-square-o"></i>`);
                    }
                    if (node.visible) {
                        tr.show();
                    } else {
                        tr.hide();
                    }
                }
            }
        };

        Utils.reloadTable();
        $('body').on('click', 'tr[tree_id]', function() {
            if ($(this).hasClass('table-active')) {
                $(this).removeClass('table-active');
            } else {
                $('tr[tree_id].table-active').removeClass('table-active');
                $(this).addClass('table-active');
            }
            Utils.refreshAddButton();
        });
        $('body').on('dragstart', 'tr[tree_id]', function(e) {
            Utils.dragNode = ProjectTree.getItems(e.target.getAttribute('tree_id'));
        });
        $('body').on('drop', 'tr[tree_id]', function(e) {
            Utils.dropNode = ProjectTree.getItems(e.currentTarget.getAttribute('tree_id'));
            Utils.dropTo();
        });
        $('body').on('dragover', 'tr[tree_id]', function(e) {
            const parent = ProjectTree.getItems(e.currentTarget.getAttribute('tree_id'));
            return !parent || !parent.is_folder || parent.tree_level > 3 || parent.id === Utils.dragNode.id;
        });

        $('body').on('click', 'button[name=del]', function(e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (node.is_folder) {
                $('.modal-title', '#del').html('确认删除文件夹');
                $('#del-hint').attr('tree_id', treeId).html(`确定删除「<strong style="word-break: break-word;">${node.name}</strong>」及其下所有内容？`)
            } else {
                $('.modal-title', '#del').html('确认删除标段');
                $('#del-hint').attr('tree_id', treeId).html(`确定删除「<strong style="word-break: break-word;">${node.name}</strong>」？`)
            }
            $('#del').modal('show');
        });
        $('body').on('click', 'button[name=up]', function (e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (!ProjectTree.getPreSiblingNode(node)) {
                toastr.warning('不可上移');
                return;
            }
            Utils.move(node, 'up');
        });
        $('body').on('click', 'button[name=down]', function (e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (!ProjectTree.getNextSiblingNode(node)) {
                toastr.warning('不可下移');
                return;
            }
            Utils.move(node, 'down');
        });
        $('body').on('click', 'button[name=top]', function (e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (!ProjectTree.getParent(node)) {
                toastr.warning('已是顶层节点');
                return;
            }
            Utils.move(node, 'top');
        });
        $('body').on('click', 'button[name=edit]', function(e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            $('#edit-project-name').attr('tree_id', treeId).val(node.name);
            $('#edit-project').modal('show');
        });
        $('body').on('click', 'button[name=set-std]', function(e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (node.is_folder || node.std_id) return;
            $('[name=std_id]').attr('tree_id', treeId);
            $('#set-std').modal('show');
        });
        $('body').on('click', 'a[name=set-management]', function(e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (node.is_folder) return;
            $('#sm-management').attr('tree_id', treeId);
            $('#sm-management').val(node.management);
            if (node.filing_template_id) {
                const ft = $(`[value=${node.filing_template_id}]`)[0];
                if (ft) $('#sm-ft')[0].selectedIndex = Array.prototype.indexOf.call(ft.parentNode.children, ft);
            }
            //$('#sm-ft').val(node.filing_template_name);
            $('#sm-ft').attr('disabled', !!node.management);
            $('#set-management').modal('show');
        });
        $('body').on('click', 'a[name=refresh-management]', function(e) {
            const treeId = $(this).parent().parent().attr('tree_id');
            const node = ProjectTree.getItems(treeId);
            if (node.is_folder) return;
            postData('/subproj/refresh', { id: treeId }, function(result) {
                toastr.success(`更新${result.um + result.dm + result.im}条用户权限`);
            });
        });
        $('body').on('click', '.fold-switch', function() {
            const id = this.getAttribute('id');
            const node = ProjectTree.getItems(id);
            ProjectTree.setExpanded(node, !node.expanded);
            const posterity = ProjectTree.getPosterity(node);
            if (node.expanded) {
                $(this).html(`<i class="fa fa-minus-square-o"></i>`);
            } else {
                $(this).html(`<i class="fa fa-plus-square-o"></i>`);
            }
            for (const p of posterity) {
                if (p.visible) {
                    $(`tr[tree_id=${p.id}]`).show();
                } else {
                    $(`tr[tree_id=${p.id}]`).hide();
                }
            }
        });

        const getChildrenLevel = function (node) {
            let iLevel = node.tree_level || 1;
            if (node.children && node.children.length > 0) {
                for (const c of node.children) {
                    iLevel = Math.max(iLevel, getChildrenLevel(c));
                }
            }
            return iLevel;
        };
        tenderTreeShowLevel = $.cs_showLevel({
            selector: '#show-level',
            levels: [
                {
                    type: 'sort', count: 5, visible_count: function () {
                        return ProjectTree.children.map(getChildrenLevel).reduce((x, y) => { return Math.max(x, y); }, 0) - 1;
                    }
                },
                {
                    type: 'last', title: '最底层', visible: function () {
                        const count = ProjectTree.children.map(getChildrenLevel).reduce((x, y) => { return Math.max(x, y); }, 0) - 1;
                        return count > 0;
                    }
                },
            ],
            showLevel: function (tag) {
                switch (tag) {
                    case "1":
                    case "2":
                    case "3":
                    case "4":
                    case "5":
                        Utils.expandByLevel(parseInt(tag));
                        break;
                    case "last":
                        Utils.expandByLevel(20);
                        break;
                    default: return;
                }
            }
        });
        tenderTreeShowLevel.initShowLevel();
        tenderTreeShowLevel.refreshMenuVisible();
        return { ProjectTree, TableObj, ...Utils };
    })({
        treeSetting: { id: 'id', pid: 'tree_pid', level: 'tree_level', order: 'tree_order', rootId: '-1' },
        source: projectList,
        table: '#projectList',
    });

    $('#add-folder').on('show.bs.modal', function(e) {
        const select = projectTreeObj.getSelectNode();
        if (select) {
            if (select.is_folder) e.stopPropagation();
            $('#folder-hint').html(`在文件夹 [${select.name}] 下新增`).show();
        } else {
            $('#folder-hint').hide();
        }
        $('#folder-name').val('');
    });
    $('#add-folder-ok').click(function() {
        const tree_pid = projectTreeObj.getSelectNodeId();
        const name = $('#folder-name').val();
        if (!name || name.length > 100) return;
        postData('/subproj/addFolder', { name, is_folder: 1, tree_pid }, function(result) {
            projectTreeObj.refreshTreeTable(result);
            $('#add-folder').modal('hide');
        });
    });

    $('#add-project').on('show.bs.modal', function(e) {
        const select = projectTreeObj.getSelectNode();
        if (select) {
            if (select.is_folder) e.stopPropagation();
            $('#project-hint').html(`在文件夹 [${select.name}] 下新增`).show();
        } else {
            $('#project-hint').hide();
        }
        $('#project-name').val('');
    });
    $('#add-project-ok').click(function() {
        const tree_pid = projectTreeObj.getSelectNodeId();
        const name = $('#project-name').val();
        if (!name || name.length > 100) return;
        postData('/subproj/addProj', { name, is_folder: 1, tree_pid }, function(result) {
            projectTreeObj.refreshTreeTable(result);
            $('#add-project').modal('hide');
        });
    });
    $('#del-ok').click(function() {
        const id = $('#del-hint').attr('tree_id');
        postData('/subproj/del', { id }, function(result) {
            projectTreeObj.refreshTreeTable(result);
            $('#del').modal('hide');
            $('#del-hint').attr('tree_id', '');
        });
    });
    $('#edit-project-ok').click(function() {
        const nameObj = $('#edit-project-name');
        const name = nameObj.val();
        if (!name || name.length > 100) return;
        postData('/subproj/save', { id: nameObj.attr('tree_id'), name }, function(result) {
            projectTreeObj.refreshRow(result);
            $('#edit-project').modal('hide');
            $('#edit-project-name').attr('tree_id', '');
        });
    });
    $('#set-std-ok').click(function() {
        const select = $('[name=std_id]:checked');
        const id = select.attr('tree_id');
        const std_id = parseInt(select.val());
        postData('/subproj/save', { id, std_id }, function(result) {
            projectTreeObj.refreshRow(result);
            $('#set-std').modal('hide');
            $('[name=std_id]').attr('tree_id', '');
        });
    });
    $('#set-management-ok').click(function() {
        const select = $('#sm-management');
        const id = select.attr('tree_id');
        const management = select.val();
        const filingTemplate =$('#sm-ft').val();
        postData('/subproj/save', { id, management, filingTemplate }, function(result) {
            projectTreeObj.refreshRow(result);
            $('#set-management').modal('hide');
            $('#sm-management').attr('tree_id', '');
        });
    });
});