正心全栈编程-文档站

Appearance

权限管理 ​

渲染权限数据 ​

在权限编辑页需要完成蛮多东西，首先是渲染权限数据，然后再实现增删改查的逻辑。

1、前端表格占位 ​

html

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

2、请求接口渲染数据 ​

javascript
treeTable.render({
    elem: "#rights-table",
    id: "rights-table",
    url: "/api/v1/rights/treetable",
    height: "full-35",
    toolbar: "#rights-toolbar",
    cols: [
        [
            {type: "checkbox", fixed: "left"},
            {
                field: "id",
                title: "ID",
                width: 80,
                sort: true,
                fixed: "left",
            },
            {field: "name", title: "权限名", width: 180},
            {field: "code", title: "权限标识", width: 150},
            {
                field: "type",
                title: "类型",
                width: 100,
                templet: (d) => {
                    if (d.type === "menu") {
                        return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius">菜单</button>`;
                    } else if (d.type === "path") {
                        return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">路径</button>`;
                    } else if (d.type === "auth") {
                        return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-purple">权限</button>`;
                    }
                },
            },
            {field: "url", title: "访问地址", width: 200},
            {
                field: "icon_sign",
                title: "图标",
                width: 90,
                templet: (d) => {
                    return `<i class="${d.icon_sign}"></i> `;
                },
            },
            {field: "open_type", title: "打开方式", width: 100},
            {field: "sort", title: "排序", width: 100},
            {
                field: "status",
                title: "状态",
                width: 100,
                templet: (d) => {
                    return `<input type="checkbox" name="status" value="${
                        d.id
                    }" title="启用|禁用" lay-skin="switch" ${
                        d.status ? "checked" : ""
                    } lay-filter="rights-table-switch-status"/>`;
                },
            },
            {
                fixed: "right",
                title: "操作",
                width: 120,
                align: "center",
                toolbar: "#rights-tool",
            },
        ],
    ],
    page: true,
});

3、后端数据返回 ​

权限数据使用 treetable 组件进行渲染，首先可以参考 layui 的文档，然后再进行修改。

为了适应前端的数据，先改造数据模型

python
class RightsORM(BaseORM):
    __tablename__ = "ums_rights"

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(20), nullable=False, comment="权限名称")
    code = db.Column(db.String(30), comment="权限标识")
    type = db.Column(db.String(30), comment="权限类型")
    url = db.Column(db.String(30), comment="路径地址")

    icon = db.Column(db.String(128), comment="图标")
    status = db.Column(db.Boolean, default=True, comment="是否开启")
    sort = db.Column(db.Integer, default=1)
    open_type = db.Column(db.String(128), comment="打开方式")
    pid = db.Column(
        db.Integer,
        db.ForeignKey("ums_rights.id"),
        default=0,
        comment="父类编号",
    )

    parent = db.relationship("RightsORM", back_populates="children", remote_side=[id])  # 自关联  
    children = db.relationship("RightsORM", back_populates="parent")  

    def json(self):
        return {
            "id": self.id,
            "name": self.name,
            "code": self.code,
            "type": self.type,
            "url": self.url,
            "icon_sign": self.icon,
            "status": self.status,
            "sort": self.sort,
            "open_type": self.open_type,
            "pid": self.pid,
        }

然后再新增后端接口

python
@rights_api.get('/rights/treetable')
def get_list_as_treetable():
    page = request.args.get("page", type=int, default=1)
    per_page = request.args.get("per_page", type=int, default=10)

    q = db.select(RightsORM).where(RightsORM.type == "menu")
    pages = db.paginate(q, page=page, per_page=per_page, error_out=False)

    ret = []

    # 构建树状表格的数据
    for page in pages.items:
        data = page.json()
        data["children"] = []
        for child in page.children:
            child_data = child.json()
            if child.children:
                child_data["children"] = [
                    sub_child.json() for sub_child in child.children
                ]
                child_data["isParent"] = True

            data["children"].append(child_data)
            data["isParent"] = True
        ret.append(data)
    return {"code": 0, "msg": "请求权限数据成功", "count": pages.total, "data": ret}

编写完成之后，需要注册到 app。

目前接口设计只完成了有限的自己权限嵌套。

权限新增 ​

1、新增表格头标签 ​

点击新增按钮之后，触发 toolbar 事件， 然后进行拦截

html

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

2、处理新增事件 ​

点击之后打开新增表单

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

3、新增表单 ​

准备先把基础的功能实现，后续的逻辑再慢慢优化。

新增与编辑的表单直接写在当前页面，并且准备共用同一个

html

<form
        class="layui-form"
        lay-filter="rights-form"
        id="rights-form"
        style="padding: 15px; display: none"
>
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="id"
                    value="0"
                    lay-verify="required"
                    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="name"
                    lay-verify="required"
                    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="code"
                    autocomplete="off"
                    placeholder="请输入权限标识"
                    class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限类型</label>
        <div class="layui-input-block">
            <input
                    type="radio"
                    name="type"
                    value="menu"
                    title="菜单"
                    lay-filter="form-rights-filter"
                    checked
            />
            <input
                    type="radio"
                    name="type"
                    value="path"
                    title="路由"
                    lay-filter="form-rights-filter"
            />
            <input
                    type="radio"
                    name="type"
                    value="auth"
                    title="权限"
                    lay-filter="form-rights-filter"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-inline">
            <input
                    type="text"
                    name="icon_sign"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">访问地址</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="url"
                    lay-verify=""
                    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="checkbox"
                    name="status"
                    lay-skin="switch"
                    lay-filter="rights-row-status"
                    checked
                    title="启用|禁用"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-inline">
            <input
                    type="text"
                    name="sort"
                    placeholder=""
                    autocomplete="off"
                    class="layui-input"
                    value="1"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">打开方式</label>
        <div class="layui-input-inline">
            <select name="open_type" id="">
                <option value="_component" selected>默认方式</option>
                <option value="_blank">新窗口</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">父元素 ID</label>
        <div class="layui-input-inline">
            <input
                    type="text"
                    name="pid"
                    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="rights-form-btn"
            >
                立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

4、监听类型切换 ​

javascript
form.on("radio(form-rights-filter)", function (data) {
    var elem = data.elem;
    var value = elem.value;

    switch (value) {
        case "menu":
            $('[name="icon_sign"]').parent().parent().show();
            $('[name="url"]').parent().parent().hide();
            break;
        case "path":
            $('[name="icon_sign"]').parent().parent().hide();
            $('[name="url"]').parent().parent().show();
            break;
        case "auth":
            $('[name="url"]').parent().parent().hide();
            $('[name="icon_sign"]').parent().parent().hide();
            break;
    }
});

5、前端提交事件 ​

需要区分新增与修改事件

js
// 提交事件
form.on("submit(rights-form-btn)", function (data) {
    let field = data.field;
    
    // 手动校验是否符合规范
    if (field.type === "path") {
        if (!/\//.test(field.url)) {
            layer.msg("url 不符合格式");
            return false;
        }
    } else if (field.type === "auth") {
        console.log(field.pid);
        if (!field.pid || field.pid === "0") {
            layer.msg("权限必须填入父级 id");
            return false;
        }
    }

    field.status = !!field.status;
    let method, url;
    if (field.id == 0) {
        field.id = null;
        method = "POST";
        url = "/api/v1/rights";
    } else {
        method = "PUT";
        url = `/api/v1/rights/${field.id}`;
    }
    $.ajax({
        url: url,
        type: method,
        contentType: "application/json",
        data: JSON.stringify(field),
        success: function (res) {
            if (!res.code) {
                layer.closeAll();
                treeTable.reloadData("rights-table");
            }
        },
    });

    return false; // 阻止默认 form 跳转
});

6、后端完成修改 ​

python

@rights_api.post("/rights")
@jwt_required()
def create_rights():
    data = request.get_json()
    rights_obj = RightsORM(**data)
    rights_obj.save()
    return {"code": 0, "msg": "新增权限数据成功"}

权限修改 ​

1、添加表格行编辑标签 ​

html

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

2、点击编辑逻辑 ​

点击编辑按钮之后，打开编辑（新增）表单。

js
treeTable.on("tool(rights-table)", function (obj) {
    var layEvent = obj.event;
    if (layEvent === "rights-tool-edit") {
        form.val("rights-form", obj.data);
        layer.open({
            type: 1,
            shade: false,
            content: $("#rights-form"),
            area: ["50%", "80%"],
        });
    } else if (layEvent === "rights-tool-del") {
        console.log("删除权限");
    }
});

3、处理编辑提交 ​

与新增共用同一个提交

4、后端完成修改 ​

python

@rights_api.put("/rights/<int:rid>")
@jwt_required()
def change_rights(rid):
    data = request.get_json()
    del data['id']

    rights_obj = RightsORM.query.get(rid)
    for key, value in data.items():
        setattr(rights_obj, key, value)
    rights_obj.save()
    return {"code": 0, "msg": "修改权限数据成功"}

权限删除 ​

1、前端部分 ​

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

2、后端部分 ​

python
@rights_api.delete('/rights/<int:rid>')
@jwt_required()
def delete_rights(rid):
    rights_obj = RightsORM.query.get(rid)
    rights_obj.delete()
    return {"code": 0, "msg": "删除权限数据成功"}