用户授权

用户管理显示授权

1、授权事件

table.on("tool(user-table)", function (obj) {
    if (obj.event === "user-tool-edit") {
        // ...
    } else if (obj.event === "user-tool-del") {
        // ...
    } else if (obj.event === "user-tool-detail") {
        // 用户授权表单
        layer.open({
            type: 1,
            title: "授权",
            shade: false,
            area: ["500px", "500px"],
            content: $("#user-role-form"),
        });
    }
})

2、授权表单

<!--用户授权标签-->
<form
  class="layui-form"
  action=""
  id="user-role-form"
  lay-filter="user-role-form"
>
  <div class="row" style="margin: 10px 5px">
    <ul id="user_role" 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="user-role-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>

2、渲染授权数据

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(user-role-save)", function (data) {
  let param = tree.getChecked("user_role"); // 获取选中节点的数据
  let rights_ids = get_id(param).join();
  $.ajax({
    url: `/api/v1/user/user_role/${user_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;
});

3、后端返回 tree 角色数据

按道理要返回 tree 数据，但是角色没有嵌套，列表数据也可以用。

@role_api.get("/role")
def role_list():
    page = request.args.get("page", default=1, type=int)
    per_page = request.args.get("limit", default=10, type=int)
    q = db.select(RoleORM)

    pages: Pagination = db.paginate(q, page=page, per_page=per_page)

    return {
        "code": 0,
        "msg": "获取角色数据成功",
        "data": [item.json() for item in pages.items],
        "count": pages.total,
    }

4、渲染角色数据

table.on("tool(user-table)", function (obj) {
    if (obj.event === "user-tool-edit") {
        // ...
    } else if (obj.event === "user-tool-del") {
        // ...
    } else if (obj.event === "user-tool-detail") {
        user_id = obj.data["id"];  
        $.ajax({
            url: "/api/v1/role",
            type: "get",
            success: function (ret) {
                let data = [];
                $.each(ret.data, function (index, item) {
                    data.push({id: item.id, title: item.name});
                });
                tree.render({
                    elem: "#user_role",
                    id: "user_role",
                    data: data,
                    showCheckbox: true,
                });
                // 请求获取当前用户的权限
                $.ajax({
                    url: `/api/v1/user/user_role/${user_id}`,
                    type: "get",
                    success: function (ret) {
                        tree.setChecked("user_role", ret.data);
                    },
                });
            },
        });
        // 用户授权表单
        layer.open({
            type: 1,
            title: "授权",
            shade: false,
            area: ["500px", "500px"],
            content: $("#user-role-form"),
        });
    }
})

5、后端返回用户角色数据

@user_api.get("/user/user_role/<int:uid>")
def get_user_role(uid):
    user: UserORM = db.session.execute(
        db.select(UserORM).where(UserORM.id == uid)
    ).scalar()

    wn_role_list = [r.id for r in user.role_list]

    return {
        "code": 0,
        "msg": "返回角色权限数据成功",
        "data": wn_role_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(user-role-save)", function (data) {
  let param = tree.getChecked("user_role"); // 获取选中节点的数据
  let rights_ids = get_id(param).join();
  $.ajax({
    url: `/api/v1/user/user_role/${user_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、后端完成修改

@user_api.put("/user/user_role/<int:rid>")
def change_user_role(rid):
    role_ids = request.json.get("rights_ids", "")
    role_list = role_ids.split(",")

    user: UserORM = db.session.execute(
        db.select(UserORM).where(UserORM.id == rid)
    ).scalar()
    role_obj_list = db.session.execute(
        db.select(RoleORM).where(RoleORM.id.in_(role_list))
    ).all()
    user.role_list = [r[0] for r in role_obj_list]
    user.save()
    return {"code": 0, "msg": "授权成功"}