Calculation/app/view/account/index.ejs

<% include ../layout/body_header.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main">
            <h2><%= ctx.menu.children[ctx.actionName].name %>
            <a href="#ver" data-toggle="modal" data-target="#add-user" class="btn btn-primary btn-sm pull-right">添加账号</a>
            </h2>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <nav class="nav nav-tabs mb-3" role="tablist">
                <a class="nav-item nav-link active" data-toggle="tab" href="#user-list" role="tab">账号列表</a>
                <a class="nav-item nav-link" data-toggle="tab" href="#user-purview" role="tab">账号权限</a>
            </nav>
            <div class="tab-content">
                <div id="user-list" class="tab-pane active">
                    <table class="table table-hover table-bordered table-sm">
                        <thead>
                        <tr>
                            <th>账号</th>
                            <th>姓名</th>
                            <th>单位</th>
                            <th>职位</th>
                            <th>手机</th>
                            <th>电话</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% if (accountList.length > 0) { %>
                        <% accountList.forEach(function (account) { %>
                        <tr class="<%= account.enable !== 1 ? 'table-danger' : ''%>">
                            <td><%= account.account %></td>
                            <td><%= account.name %></td>
                            <td><%= account.company %></td>
                            <td><%= account.role %></td>
                            <td><%= account.mobile %></td>
                            <td><%= account.telephone %></td>
                            <td class="text-center">
                                <a href="#edit-user" data-toggle="modal" data-target="#edit-user" class="btn btn-sm btn-outline-primary">编辑</a>
                                <a href="/project/account/enable/<%= account.id %>" class="btn btn-sm btn-outline-<%= account.enable === 1 ? 'danger' : 'success'%>"><%= account.enable === 1 ? '停用' : '启用'%></a>
                            </td>
                        </tr>
                        <% }) %>
                        <% } %>
                        </tbody>
                    </table>
                </div>
                <div id="user-purview" class="tab-pane">
                    <table class="table table-hover table-bordered table-sm">
                        <thead>
                        <tr>
                            <th>账号</th>
                            <th>姓名</th>
                            <th>单位</th>
                            <th>职位</th>
                            <th>权限</th>
                        </thead>
                        <tbody>
                        <% if (accountList.length > 0) { %>
                        <% accountList.forEach(function (account) { %>
                        <tr>
                            <td><%= account.account %></td>
                            <td><%= account.name %></td>
                            <td><%= account.company %></td>
                            <td><%= account.role %></td>
                            <td>
                                <span class="permission-string"></span>
                                <a href="#permission-form" data-toggle="modal" data-target="#permission-form" class="btn btn-sm permission" data-permission="<%= account.permission %>" data-id="<%= account.id %>">编辑</a>
                            </td>
                        </tr>
                        <% }) %>
                        <% } %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
let permissionList = '<%- permissionList %>';
permissionList = JSON.parse(permissionList);

let permissionString = '<%- permissionString %>';
permissionString = JSON.parse(permissionString);
$(document).ready(function() {

    // 页面载入时显示权限中文
    $(".permission").each(function() {
        const permission = $(this).data('permission');
        const permissionShowString = getPermissionString(permission);
        $(this).prev(".permission-string").html(permissionShowString);
    });

    // 点击编辑权限按钮
    let currentPermission = [];
    let currentId = 0;
    let currentTarget = null;
    $(".permission").click(function() {
        const permission = $(this).data('permission');
        currentPermission = permission.split(',');
        currentId = $(this).data('id');
        currentTarget = $(this);
    });

    // 初始化弹窗数据
    $("#permission-form").on("show.bs.modal", function() {
        let html = '';
        for (const index in permissionList) {
            html += '<div class="form-group">' +
                '<label><i class="fa '+ permissionList[index].icon +'"></i> '+ permissionList[index].name +'</label>' +
                '<div>';
            for (const child of permissionList[index].permission) {
                const checkedString = currentPermission.indexOf(child.value + '') >= 0 ? 'checked="checked"' : '';
                html += '<div class="form-check form-check-inline">' +
                    '<input class="form-check-input" type="checkbox" name="permission" value="'+ child.value +'" '+ checkedString +'>' +
                    '<label class="form-check-label">'+ child.name +'</label>' +
                    '</div>';
            }
            html += '</div></div>';
        }
        $(this).find('.modal-body').html(html);
    });

    // 修改数据
    let isChanging = false;
    $("#modify-permission").click(function() {
        currentId = parseInt(currentId);
        if (isNaN(currentId) || currentId <= 0 || isChanging) {
            return false;
        }
        const selectPermission = [];
        $("input[name='permission']").each(function() {
            if ($(this).is(":checked")) {
                selectPermission.push($(this).val());
            }
        });

        if (selectPermission.length <= 0) {
            alert('请选择权限!');
            return false;
        }

        $.ajax({
            url: '/project/account/permission/' + currentId + "?_csrf=<%= ctx.csrf %>",
            type: 'post',
            data: { permission: selectPermission.join(',') },
            error: function() {
                alert('通信错误');
                isChanging = false;
            },
            beforeSend: function() {
                isChanging = true;
            },
            success: function(response) {
                isChanging = false;
                if (response.err !== 0) {
                    alert(response.msg);
                    return false;
                }

                const permissionShowString = getPermissionString(selectPermission);
                currentTarget.prev(".permission-string").html(permissionShowString);

                $("#permission-form").modal('hide');
            }
        });
    });
});

function getPermissionString(permission) {
    let result = '';
    permission = permission instanceof Array ? permission : permission.split(",");
    if (permission.length <= 0) {
        return result;
    }
    const permissionArr = [];
    for (const tmp of permission) {
        if (permissionString[tmp] !== undefined) {
            permissionArr.push(permissionString[tmp]);
        }
    }

    return permissionArr.join(',');
}
</script>