正心全栈编程-文档站

Appearance

角色管理 ​

渲染角色数据 ​

1、前端表格占位 ​

html
<div style="padding: 16px">
  <div class="layui-card">
    <div class="layui-card-body">
      <table class="layui-hide" id="role-table" lay-filter="role-table"></table>
    </div>
  </div>
</div>

2、请求接口数据 ​

javascript
table.render({
  elem: "#role-table",
  id: "role-table",
  url: "/api/v1/role",
  height: "full-35",
  toolbar: "#role-toolbar",
  page: true,
  cols: [
    [
      //标题栏
      { field: "id", title: "ID", width: 80, sort: true },
      { field: "name", title: "用户名", width: 120 },
      { field: "code", title: "用户标识", width: 160 },
      { field: "desc", title: "描述", maxWidth: 120 },
      { field: "ids", title: "权限列表", width: 100 },
      {
        fixed: "right",
        title: "操作",
        width: 180,
        align: "center",
        toolbar: "#role-tool",
      },
    ],
  ],
});

3、后端返回用户数据 ​

python
@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,
    }

新增角色 ​

1、新增表格头标签 ​

html
<script type="text/html" id="role-toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="role-toolbar-add">
      新增角色
    </button>
  </div>
</script>

2、处理新增事件 ​

javascript
table.on("toolbar(role-table)", function (obj) {
  if (obj.event === "role-toolbar-add") {
    layer.open({
      type: 1,
      shade: false,
      content: $("#role-form"),
      area: ["50%", "80%"],
    });
    form.render($("#role-form"));
  }
});

3、新增表单 ​

html
<form
  class="layui-form"
  lay-filter="role-form"
  id="role-form"
  action=""
  style="padding: 15px; display: none"
>
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="id"
        value="0"
        lay-verify="required"
        autocomplete="off"
        class="layui-input"
        disabled
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="name"
        placeholder="请输入用户名"
        lay-verify="required"
        autocomplete="off"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">标识</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="code"
        placeholder="请输入用户标识"
        lay-verify="required"
        autocomplete="off"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="desc"
        placeholder="请输入用户描述"
        autocomplete="off"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限列表</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="rights_ids"
        placeholder="请输入用户权限列表"
        autocomplete="off"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button
        type="submit"
        class="layui-btn"
        lay-submit
        lay-filter="role-form-btn"
      >
        立即提交
      </button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

4、前端提交事件 ​

javascript
form.on("submit(role-form-btn)", function (data) {
  var field = data.field;
  let method, url;
  if (field.id == 0) {
    field.id = null;
    method = "POST";
    url = "/api/v1/role";
  } else {
    method = "PUT";
    url = `/api/v1/role/${field.id}`;
  }
  $.ajax({
    url: url,
    type: method,
    contentType: "application/json",
    data: JSON.stringify(field),
    success: function (res) {
      if (!res.code) {
        layer.closeAll();
        table.reloadData("role-table");
      }
    },
  });
  return false;
});

5、后端完成修改 ​

python
@role_api.post("/role")
def create_role():
    data = request.get_json()
    if data["id"]:
        del data["id"]
    role = RoleORM(**data)
    role.save()
    return {"code": 0, "msg": "新增角色成功"}

修改角色 ​

1、添加表格行编辑标签

html
<script type="text/html" id="role-tool">
  <div class="layui-btn-container">
    <button
      class="layui-btn layui-btn-sm layui-bg-blue"
      lay-event="role-tool-edit"
    >
      编辑
    </button>
    <button
      class="layui-btn layui-btn-sm layui-bg-yellow"
      lay-event="role-tool-detail"
    >
      授权
    </button>
    <button
      class="layui-btn layui-btn-sm layui-bg-red"
      lay-event="role-tool-del"
    >
      删除
    </button>
  </div>
</script>

2、处理表格行编辑事件 ​

javascript
table.on("tool(role-table)", function (obj) {
  if (obj.event === "role-tool-edit") {
    form.val("role-form", obj.data);
    layer.open({
      type: 1,
      shade: false,
      content: $("#role-form"),
      area: ["50%", "80%"],
    });
  }
});

3、处理提交事件 ​

与新增共用同一个事件

4、后端完成修改 ​

python
@role_api.put("/role/<int:rid>")
def change_role(rid):
    data = request.get_json()
    del data["id"]

    role_obj = RoleORM.query.get(rid)
    for key, value in data.items():
        setattr(role_obj, key, value)
    role_obj.save()
    return {"code": 0, "msg": "修改角色权限成功"}

删除角色 ​

1、前端部分 ​

javascript
table.on("tool(role-table)", function (obj) {
    if (obj.event === "role-tool-edit") {
        // ...
    } else if (obj.event === "role-tool-del") {
        $.ajax({
            url: `/api/v1/role/${obj.data.id}`,
            type: "DELETE",
            contentType: "application/json",
            success: function (res) {
                if (!res.code) {
                    table.reloadData("role-table");
                }
            },
        });
    }
});

2、后端完成删除 ​

python
@role_api.delete("/role/<int:rid>")
def del_role(rid):
    role_obj = RoleORM.query.get(rid)
    role_obj.delete()
    return {"code": 0, "msg": "删除角色成功"}