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);

        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="javascript: void(0)" 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 {
                        html.push(`<td class="text-center"><button class="btn btn-outline-primary btn-sm ml-1" name="set-std">选择</button></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>`);
                    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></td>`);
                }
                // 操作
                html.push(`<td>`);
                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>');
                if (!node.is_folder) html.push('<button class="btn btn-outline-primary btn-sm ml-1" name="member">成员管理</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;
            },
        };

        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=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);
            $('#set-management').modal('show');
        });
        $('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();
                }
            }
        });
        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();
        postData('/subproj/save', { id, management }, function(result) {
            projectTreeObj.refreshRow(result);
            $('#set-management').modal('hide');
            $('#sm-management').attr('tree_id', '');
        });
    });

    let timer = null;
    let oldSearchVal = null;
    $('#member-search').bind('input propertychange', function(e) {
        oldSearchVal = e.target.value;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            const newVal = $('#member-search').val();
            let html = '';
            if (newVal && newVal === oldSearchVal) {
                accountList
                    .filter(item => item && (item.name.indexOf(newVal) !== -1 || (item.mobile && item.mobile.indexOf(newVal) !== -1)))
                    .forEach(item => {
                        html += `<dd class="border-bottom p-2 mb-0 " data-id="${item.id}" >
                        <p class="mb-0 d-flex"><span class="text-primary">${item.name}</span><span
                                class="ml-auto">${item.mobile || ''}</span></p>
                        <span class="text-muted">${item.role || ''}</span></dd>`
                    });
                $('.book-list').empty();
                $('.book-list').append(html);
            } else {
                if (!$('.acc-btn').length) {
                    accountGroup.forEach((group, idx) => {
                        if (!group) return;
                        html += `<dt><a href="javascript: void(0);" class="acc-btn" data-groupid="${idx}" data-type="hide"><i class="fa fa-plus-square"></i>
                        </a> ${group.groupName}</dt>
                        <div class="dd-content" data-toggleid="${idx}">`;
                        group.groupList.forEach(item => {
                            html += `<dd class="border-bottom p-2 mb-0 " data-id="${item.id}" >
                                    <p class="mb-0 d-flex"><span class="text-primary">${item.name}</span><span
                                            class="ml-auto">${item.mobile || ''}</span></p>
                                    <span class="text-muted">${item.role || ''}</span>
                                </dd>`
                        });
                        html += '</div>';
                    });
                    $('.book-list').empty();
                    $('.book-list').append(html);
                }
            }
        }, 400);
    });
    $('.book-list').on('click', 'dt', function () {
        const idx = $(this).find('.acc-btn').attr('data-groupid')
        const type = $(this).find('.acc-btn').attr('data-type')
        if (type === 'hide') {
            $(this).parent().find(`div[data-toggleid="${idx}"]`).show(() => {
                $(this).children().find('i').removeClass('fa-plus-square').addClass('fa-minus-square-o')
                $(this).find('.acc-btn').attr('data-type', 'show')

            })
        } else {
            $(this).parent().find(`div[data-toggleid="${idx}"]`).hide(() => {
                $(this).children().find('i').removeClass('fa-minus-square-o').addClass('fa-plus-square')
                $(this).find('.acc-btn').attr('data-type', 'hide')
            })
        }
        return false
    });
    let orgMembers, newMembers;
    const generateMemberHtml = function () {
        const html = [];
        for (const mem of newMembers) {
            html.push(`<tr uid="${mem.uid}">`);
            html.push(`<td>${mem.name}</td>`);
            html.push(`<td>${mem.role}</td>`);
            // 动态投资
            const viewBudget = mem.budget_permission.indexOf(permissionConst.budget.view.value) >= 0;
            html.push(`<td><div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" ptype="budget" sptype="view" uid="${mem.uid}" id="budgetview${mem.uid}" class="custom-control-input" ${(viewBudget ? 'checked' : '')}>
                        <label class="custom-control-label" for="budgetview${mem.uid}"></label></div></td>`);
            const editBudget = mem.budget_permission.indexOf(permissionConst.budget.edit.value) >= 0;
            html.push(`<td><div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" ptype="budget" sptype="edit" id="budgetedit${mem.uid}" uid="${mem.uid}" class="custom-control-input" ${(editBudget ? 'checked' : '')}>
                        <label class="custom-control-label" for="budgetedit${mem.uid}"></label></div></td>`);
            // 电子文档

            const fileView = mem.file_permission.indexOf(permissionConst.file.view.value) >= 0;
            html.push(`<td><div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" ptype="file" sptype="view" uid="${mem.uid}" id="fileview${mem.uid}" class="custom-control-input" ${(fileView ? 'checked' : '')}>
                        <label class="custom-control-label" for="fileview${mem.uid}"></label></div></td>`);
            const fileUpload = mem.file_permission.indexOf(permissionConst.file.upload.value) >= 0;
            html.push(`<td><div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" ptype="file" sptype="upload" id="fileupload${mem.uid}" uid="${mem.uid}" class="custom-control-input" ${(fileUpload ? 'checked' : '')}>
                        <label class="custom-control-label" for="fileupload${mem.uid}"></label></div></td>`);
            const fileEdit = mem.file_permission.indexOf(permissionConst.file.filing.value) >= 0;
            html.push(`<td><div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" ptype="file" sptype="filing" uid="${mem.uid}" id="fileedit${mem.uid}" class="custom-control-input" ${(fileEdit ? 'checked' : '')}>
                        <label class="custom-control-label" for="fileedit${mem.uid}"></label></div></td>`);
            // 关联标段
            const rela = mem.manage_permission.indexOf(permissionConst.manage.rela.value) >= 0;
            html.push(`<td><div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" ptype="manage" sptype="rela" id="rela${mem.uid}" uid="${mem.uid}" class="custom-control-input" ${(rela ? 'checked' : '')}>
                        <label class="custom-control-label" for="rela${mem.uid}"></label></div></td>`);
            html.push(`<td><a href="javascript: void(0);" class="btn btn-outline-danger btn-sm ml-1" name="del-member" uid="${mem.uid}">移除</a></td>`);
            html.push('</tr>');
        }
        $('#member-list').html(html.join(''));
    };
    $('[data-target="#member"]').click(function(){
        const tr = this.parentNode.parentNode;
        curBudget.id = tr.getAttribute('tree_id');
        curBudget.bid = tr.getAttribute('bid');
        curBudget.name = tr.getAttribute('bname');
        curBudget.rela_tender = tr.getAttribute('rela-tender');

    });

    $('body').on('click', 'button[name=member]', function(e) {
        const treeId = $(this).parent().parent().attr('tree_id');
        const node = projectTreeObj.ProjectTree.getItems(treeId);
        if (node.is_folder) return;
        $('#member-ok').attr('tree_id', treeId);
        postData('/subproj/member', { id: treeId }, function (result) {
            orgMembers = result;
            newMembers = result;
            generateMemberHtml();
            $('#member').modal('show');
        });
    });
    $('dl').on('click', 'dd', function () {
        const auditorId = parseInt($(this).data('id'));
        const user = accountList.find(x => { return x.id === auditorId; });
        const check = $(`tr[uid=${auditorId}]`, '#member-list');
        if (check.length > 0) {
            toastr.error('请勿重复添加成员');
            return;
        }
        newMembers.push({
            uid: user.id,
            name: user.name,
            role: user.role,
            budget_permission: [],
            file_permission: [],
            manage_permission: [],
        });
        generateMemberHtml();
    });
    $('#member').on('click', 'a[name="del-member"]', function () {
        const id = parseInt(this.getAttribute('uid'));
        newMembers.splice(newMembers.findIndex(x => { return x.uid === id}), 1);
        generateMemberHtml();
    });
    $('#member-list').on('click', 'input', function () {
        const id = parseInt(this.getAttribute('uid'));
        const mem = newMembers.find(x => { return x.uid === id});
        const pType = this.getAttribute('ptype'), spType = this.getAttribute('sptype');
        if (this.checked) {
            if (pType === 'budget' && spType === 'view') {
                mem.budget_permission.push(parseInt(permissionConst.budget.view.value));
            } else if (pType === 'budget' && spType === 'edit') {
                mem.budget_permission.push(parseInt(permissionConst.budget.edit.value));
                if (mem.budget_permission.indexOf(permissionConst.budget.view.value) < 0) {
                    mem.budget_permission.push(parseInt(permissionConst.budget.view.value));
                    $(`#budgetview${id}`)[0].checked = true;
                }
            } else if (pType === 'file' && spType === 'view') {
                mem.file_permission.push(parseInt(permissionConst.file.view.value));
            } else if (pType === 'file' && spType === 'upload') {
                mem.file_permission.push(parseInt(permissionConst.file.upload.value));
                if (mem.file_permission.indexOf(permissionConst.file.view.value) < 0) {
                    mem.file_permission.push(parseInt(permissionConst.file.view.value));
                    $(`#fileview${id}`)[0].checked = true;
                }
            } else if (pType === 'file' && spType === 'filing') {
                mem.file_permission.push(parseInt(permissionConst.file.filing.value));
                if (mem.file_permission.indexOf(permissionConst.file.view.value) < 0) {
                    mem.file_permission.push(parseInt(permissionConst.file.view.value));
                    $(`#fileview${id}`)[0].checked = true;
                }
            } else if (pType === 'manage' && spType === 'rela') {
                mem.manage_permission.push(parseInt(permissionConst.manage.rela.value));
            }
        } else {
            if (pType === 'budget' && spType === 'view') {
                mem.budget_permission = [];
                $(`#budgetedit${id}`)[0].checked = false;
            } else if (pType === 'budget' && spType === 'edit') {
                mem.budget_permission.splice(mem.budget_permission.indexOf(permissionConst.budget.edit.value), 1);
            } else if (pType === 'file' && spType === 'view') {
                mem.file_permission = [];
                $(`#fileupload${id}`)[0].checked = false;
                $(`#fileedit${id}`)[0].checked = false;
            } else if (pType === 'file' && spType === 'upload') {
                mem.file_permission.splice(mem.file_permission.indexOf(permissionConst.file.upload.value), 1);
            } else if (pType === 'file' && spType === 'filing') {
                mem.file_permission.splice(mem.file_permission.indexOf(permissionConst.file.filing.value), 1);
            } else if (pType === 'manage' && spType === 'rela') {
                mem.manage_permission = [];
            }
        }
    });
    $('#member-ok').click(function(){
        const id = this.getAttribute('tree_id');
        postData('/subproj/memberSave', {id, member: newMembers}, function () {
            $('#member').modal('hide');
        })
    });
});