Calculation/app/view/sp_setting/user_modal.ejs

<link href="/public/css/bootstrap/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/public/css/bootstrap/select2-bootstrap4.min.css">
<script src="/public/js/bootstrap/select2.min.js"></script>
<div class="modal fade" id="sel-batch" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加账号至项目成员</h5>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center justify-content-between mb-2 project-member-filters">
                    <div class="col-5 pl-0">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" placeholder="姓名/职位 搜索" aria-label="姓名/职位 搜索" id="sb-keyword" aria-describedby="sb-search">
                            <div class="input-group-append">
                                <button class="btn btn-outline-primary" type="button" id="sb-search"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="col pr-0">
                        <div class="d-flex align-items-center justify-content-end">
                            <label for="sel-batch-unit" class="mb-0 text-nowrap">单位：</label>
                            <select class="form-control form-control-sm" style="width:300px" id="sel-batch-unit">
                                <option value="">全部单位</option>
                                <% for (const g of accountGroup) { %>
                                <option value="<%- g.name %>"><%- g.name %></option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-height-500 scroll-y">
                    <table class="table table-bordered">
                        <thead><tr class="text-center"><th width="15%"><input type="checkbox" id="sel-batch-all"></th><th width="20%">用户</th><th width="30%">职位</th><th>单位</th></tr></thead>
                        <tbody id="sel-batch-users"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-sm btn-sm btn-primary" id="sel-batch-ok">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="permission" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑权限</h5>
            </div>
            <div class="modal-body" style="max-height: 800px;overflow: auto;">
                <% for (const pb of permissionBlock) { %>
                <div class="card mb-2">
                    <h6 class="card-header">
                        <%- pb.name %>
                        <% if (pb.hint) { %>
                        <div class="btn-group">
                            <a href="javascript:void(0);" data-toggle="dropdown" title="权限说明" aria-expanded="false"><i class="fa fa-question-circle"></i></a>
                            <div class="dropdown-menu bg-dark" style="will-change: transform;">
                                <% for (const i of pb.hint) { %>
                                <div class="dropdown-item text-light bg-dark"><%- i %></div>
                                <% } %>
                            </div>
                        </div>
                        <% } %>
                    </h6>
                    <div class="card-body permission-parent">
                        <% if (pb.children) { %>
                        <% for (const [i, c] of pb.children.entries()) { %>
                        <% if (i !== 0) { %><hr/><% } %>
                        <div class="d-flex">
                            <div class="vertical-align ml-3" style="width:100px"><%- c.name %></div>
                            <div class="container ml-0">
                                <div class="row">
                                    <% for (const cp of c.permission) { %>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="permission-check" id="icb-<%- c.key %>-<%- cp.value %>" ptype="<%- c.key %>" pvalue="<%- cp.value %>">
                                            <label class="form-check-label" for="icb-<%- c.key %>-<%- cp.value %>"><%- cp.title %></label>
                                        </div>
                                    </div>
                                    <% } %>
                                </div>
                            </div>
                        </div>
                        <% } %>
                        <% } else { %>
                        <div class="d-flex">
                            <div class="vertical-align ml-3" style="width:100px"><%- pb.name %></div>
                            <div class="container ml-0">
                                <div class="row">
                                    <% for (const p of pb.permission) { %>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="permission-check" id="icb-<%- pb.key %>-<%- p.value %>" ptype="<%- pb.key %>" pvalue="<%- p.value %>">
                                            <label class="form-check-label" for="icb-<%- pb.key %>-<%- p.value %>"><%- p.title %></label>
                                        </div>
                                    </div>
                                    <% } %>
                                </div>
                            </div>
                        </div>
                        <% } %>
                    </div>
                </div>
                <% } %>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="permission-uid">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-sm btn-primary" id="permission-ok">提交修改</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="copy-permission" data-backdorp="static" style="display: none" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">拷贝权限</h5>
            </div>
            <div class="modal-body">
                <div class="modal-height-500 scroll-y">
                    <table class="table table-bordered">
                        <thead><tr class="text-center"><th width="15%"><input type="checkbox" id="copy-batch-all"></th><th width="20%">用户</th><th width="30%">职位</th><th>单位</th></tr></thead>
                        <tbody id="copy-batch-users">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="source-permission">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-sm btn-sm btn-primary" id="copy-batch-ok">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="copy-user-batch" data-backdorp="static" style="display: none" aria-hidden="true">
    <div class="modal-dialog modal-lgx" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">拷贝权限</h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-5">
                        <div class="modal-height-500 scroll-y">
                            <table class="table table-bordered">
                                <thead class="text-center" style="position: sticky; top:0; z-index:1;"><tr><th width="15%"><input type="checkbox" id="cub-sp-all"></th><th>项目名称</th></tr></thead>
                                <tbody>
                                <% for (const sp of subProjects) { %>
                                <% if (sp.id === ctx.subProject.id) continue; %>
                                <tr tree_id="<%- sp.id %>" tree_pid="<%- sp.tree_pid %>" tree_expand="1" tree_leaf="<%- (sp.has_children ? 0 : 1) %>">
                                    <td class="text-center"><input type="checkbox" name="cub-sp-check" tree_is_folder="<%- (sp.is_folder ? 1 : 0) %>" spid="<%- sp.id %>"></td>
                                    <td class="in-<%- sp.tree_level%> d-flex">
                                        <% if (sp.has_children) { %>
                                        <div onselectstart="return false" style="{-moz-user-select:none}" class="fold-switch mr-1 d-inline-block" title="收起" id="<%- sp.id %>"><i class="fa fa-minus-square-o"></i></div>
                                        <% } else { %>
                                        <div class="text-muted mr-1 d-inline-block" style="heigth: 100%"><%- (sp.is_last_sibling ? '└' : '├') %></div>
                                        <% } %>
                                        <div class="d-inline-block"><%- sp.name %></div>
                                    </td>
                                </tr>
                                <% } %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col">
                        <div class="modal-height-500 scroll-y">
                            <table class="table table-bordered">
                                <thead style="position: sticky; top:0; z-index:1;"><tr class="text-center"><th width="15%"><input type="checkbox" id="cub-user-all"></th><th width="20%">用户</th><th width="30%">职位</th><th>单位</th></tr></thead>
                                <tbody>
                                <% for (const u of subProjectAllAccountList) { %>
                                <tr><td class="text-center"><input type="checkbox" name="cub-user-check" uid="<%- u.id %>"></td><td><%- u.name %></td><td><%- u.role %></td><td><%- u.company %></td></tr>
                                <% } %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="justify-content: space-between">
                <div class="d-flex">
                    <div class="form-check form-check-inline">已有用户:</div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="exist-type" id="inlineRadio2" value="cover" checked>
                        <label class="form-check-label" for="inlineRadio2">覆盖</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="exist-type" id="inlineRadio3" value="skip">
                        <label class="form-check-label" for="inlineRadio3">跳过</label>
                    </div>
                </div>
                <div class="d-flex">
                    <input type="hidden" id="source-permission">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-sm btn-sm btn-primary ml-1" id="copy-user-batch-ok">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const setPosterityShow = function(id, show) {
        const children = $(`tr[tree_pid=${id}]`);
        for (const c of children) {
            if (show) {
                $(c).show();
            } else {
                $(c).hide();
            }
            if (c.getAttribute('tree_leaf') !== '1') {
                setPosterityShow(c.getAttribute('tree_id'), c.getAttribute('tree_expand') === '1' && show);
            }
        }
    }
    $('body').on('click', '.fold-switch', function() {
        const id = this.getAttribute('id');
        const nodeTr = $(`tr[tree_id=${id}]`);
        const expand = nodeTr.attr('tree_expand') === '1';
        nodeTr.attr('tree_expand', expand ? 0 : 1);
        if (!expand) {
            $(this).html(`<i class="fa fa-minus-square-o"></i>`);
        } else {
            $(this).html(`<i class="fa fa-plus-square-o"></i>`);
        }
        setPosterityShow(id, !expand);
    });
    const setChildrenCheck = function(id, check) {
        const children = $(`tr[tree_pid=${id}]`);
        for (const c of children) {
            $('input', c)[0].checked = check;
            if (c.getAttribute('tree_leaf') !== '1') {
                setChildrenCheck(c.getAttribute('tree_id'), check);
            }
        }
    }
    $('body').on('change', 'input[name=cub-sp-check][tree_is_folder="1"]', function() {
        setChildrenCheck(this.getAttribute('spid'), this.checked);
    })
</script>