角色授权

角色管理显示授权

1、授权事件

table.on("tool(role-table)", function (obj) {
    if (obj.event === "role-tool-edit") {
        // ...
    } else if (obj.event === "role-tool-del") {
        // ...
    } else if (obj.event === "role-tool-detail") {

        // 打开授权表单
        layer.open({
            type: 1,
            title: "授权",
            shade: false,
            area: ["500px", "500px"],
            content: $("#role-rights-form"),
        });
    }
});

2、授权表单

tree 组件占位

<!--授权表单-->
<form
        class="layui-form"
        action=""
        style="display: none"
        id="role-rights-form"
        lay-filter="role-rights-form"
>
    <div class="row" style="margin: 10px 5px">
        <ul id="role_rights" class="dtree" data-id="0"></ul>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button
                    type="submit"
                    class="layui-btn layui-btn-primary layui-btn-sm"
                    lay-submit
                    lay-filter="role-rights-save"
            >
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

3、加载授权数据

let role_id = -1;

table.on("tool(role-table)", function (obj) {
    if (obj.event === "role-tool-edit") {
        // ...
    } else if (obj.event === "role-tool-del") {
        // ...
    } else if (obj.event === "role-tool-detail") {
        //  角色授权 role-tool-detail
        role_id = obj.data["id"];
        $.ajax({
            url: "/api/v1/rights/tree",
            type: "get",
            success: function (ret) {
                // 渲染组件数据
                tree.render({
                    elem: "#role_rights",
                    id: "role_rights",
                    data: ret.data,
                    showCheckbox: true,
                });

                // 获取需要授权角色的权限数据
                $.ajax({
                    url: `/api/v1/role/role_rights/${role_id}`,
                    type: "get",
                    success: function (ret) {
                        tree.setChecked("role_rights", ret.data);
                    },
                });
            },
        });

        // 打开授权表单
        layer.open({
            type: 1,
            title: "授权",
            shade: false,
            area: ["500px", "500px"],
            content: $("#role-rights-form"),
        });
    }
});

4、后端返回 tree 权限数据

@rights_api.get("/rights/tree")
@jwt_required()
def rights_list():
    # 1. 获取所有的权限
    rights_all = db.session.execute(db.select(RightsORM)).scalars()
    rights_list = [
        {"id": r.id, "pid": r.pid, "title": r.name, "sort": r.sort}
        for r in rights_all
    ]
    # 2. 获取已有权限 id 集合
    # 3. 列表转属性组件
    rights_list.sort(key=lambda item: (item["pid"], item["id"]), reverse=True)
    tree_dict = {}
    for rights_dict in rights_list:  # 遍历子节点
        # 2. 如果当前阶段已经存在于树状表格字典，则是父节点
        if rights_dict["id"] in tree_dict.keys():
            # 将之前的节点添加到父节点之下
            rights_dict["children"] = deepcopy(tree_dict[rights_dict["id"]])
            rights_dict["children"].sort(key=lambda item: item["sort"])
            del tree_dict[rights_dict["id"]]

        # 1. 如果父节点未出现在树状字典里面，就新增子节点列表，否则就追加
        if rights_dict["pid"] not in tree_dict.keys():
            tree_dict[rights_dict["pid"]] = [rights_dict]
        else:
            tree_dict[rights_dict["pid"]].append(rights_dict)

    return {"code": 0, "data": tree_dict.get(0)}

5、后端返回角色权限数据

@role_api.get("/role/role_rights/<int:rid>")
def role_rights(rid):
    role: RoleORM = db.session.execute(
        db.select(RoleORM).where(RoleORM.id == rid)
    ).scalar()
    own_rights_list = [r.id for r in role.rights_list]

    return {
        "code": 0,
        "msg": "返回角色权限数据成功",
        "data": own_rights_list,
    }

6、前端提交修改

function get_id(list_tree_data) {
    if (Array.isArray(list_tree_data)) {
        let ret = [];
        $.each(list_tree_data, function (index, item) {
            if (item?.children) {
                ret.push(...get_id(item.children));
            }
            ret.push(...get_id(item));
        });
        return ret;
    } else {
        return [list_tree_data.id];
    }
}

form.on("submit(role-rights-save)", function (data) {
    let param = tree.getChecked("role_rights"); // 获取选中节点的数据
    let rights_ids = get_id(param).join();
    $.ajax({
        url: `/api/v1/role/role_rights/${role_id}`,
        data: JSON.stringify({rights_ids: rights_ids}),
        dataType: "json",
        contentType: "application/json",
        type: "put",
        success: function (result) {
            if (result.code === 0) {
                layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                    layer.closeAll();
                });
            } else {
                layer.msg(result.msg, {icon: 2, time: 1000});
            }
        },
    });
    return false;
});

7、后端完成修改

@role_api.put("/role/role_rights/<int:rid>")
def change_role_rights(rid):
    rights_ids = request.json.get("rights_ids", "")

    rights_list = rights_ids.split(",")
    role: RoleORM = db.session.execute(
        db.select(RoleORM).where(RoleORM.id == rid)
    ).scalar()
    rights_obj_list = db.session.execute(
        db.select(RightsORM).where(RightsORM.id.in_(rights_list))
    ).all()
    role.rights_list = [r[0] for r in rights_obj_list]
    role.save()
    return {"code": 0, "msg": "授权成功"}