微搭低代码MBA培训管理系统07——页面管理
目录
- 前情回顾
- 本节目标
- 第一步：数据准备
- 1.1 数据源配置
- 第二步：页面布局搭建
- 2.1 页面整体布局
- 2.2 数据表格配置
- 2.3 配置查询条件
- 2.4 配置排序字段
- 2.5 角色权限分配
- 最终效果
- 总结
前情回顾
在上一讲中，我们完成了角色管理的实现，包括：
- 创建了
Roles数据模型，包含角色的核心信息字段 - 实现了角色管理界面，包括搜索栏、操作按钮和数据表格
- 支持角色的新增、编辑、删除、搜索和状态筛选功能
- 实现了角色成员管理
本节我们将基于角色管理，实现页面管理功能，并在角色管理中添加权限分配功能，进一步完善系统的安全控制体系。
本节目标
- 数据模型设计：创建页面管理所需的数据模型
- 页面布局搭建：使用低代码组件实现页面管理界面
- 核心功能实现：包括页面的新增、编辑、删除、查询等功能
- 角色权限分配：在角色管理中添加权限按钮，实现页面权限的分配
第一步：数据准备
1.1 数据源配置
首先，创建名为Pages的数据模型，包含以下核心字段：
| 字段名称 | 字段标识 | 类型 | 说明 |
|---|---|---|---|
| 页面名称 | name | 单行文本 | 页面显示名称 |
| 页面ID | pageId | 单行文本 | 页面唯一标识 |
| 应用类型 | appType | 枚举 | 1: Web端, 2: 移动端, 3: 微信端 |
| 应用名称 | appName | 单行文本 | 所属应用名称 |
| 排序 | order | 数字 | 显示顺序 |
| 状态 | status | 枚举 | 1: 启用, 2: 停用 |
| 描述 | description | 多行文本 | 页面功能描述 |
| 创建时间 | createdAt | 日期时间 | 自动生成 |
| 更新时间 | updatedAt | 日期时间 | 自动更新 |
有了页面表之后，需要在角色表里增加一个字段，关联我们的页面表
第二步：页面布局搭建
2.1 页面整体布局
点击创建页面的图标
输入页面的名称页面管理，布局选择管理员布局
切换到页面布局，选择管理员布局，添加平级菜单
添加页面管理菜单
2.2 数据表格配置
在管理员布局的内容插槽下添加布局组件
修改标题，改为页面管理
在页面布局中添加数据表格组件
数据模型选择页面表，勾选场景
2.3 配置查询条件
点击筛选器，给表格配置查询条件
添加具体的查询条件
2.4 配置排序字段
默认是按照更新时间进行排序，我们按照排序字段的升序进行排序
2.5 角色权限分配
在角色管理表格的操作列中添加"权限"按钮
选中页面组件，添加弹窗组件
添加表单容器，数据模型选择角色表，场景选择更新
数据标识绑定弹窗的入参
给权限按钮配置点击事件，打开弹窗，传入所在行的数据标识
最终效果
在页面管理里配置所有需要分配的页面
在角色管理里，点击权限勾选可以访问的页面
总结
本节我们实现了页面管理功能，并在角色管理中添加了权限分配功能，包括：
数据模型设计：创建了
Pages数据模型，包含页面的核心信息字段页面布局搭建：使用低代码组件实现了专业的页面管理界面，包括搜索栏、操作按钮和数据表格
页面管理功能：实现了页面的新增、编辑、删除、搜索和状态筛选功能
角色权限分配：在角色管理中添加了"权限"按钮，实现了权限分配弹窗，支持页面权限的配置
通过本讲的实现，我们构建了一个功能完整、交互流畅的页面管理和角色权限分配系统，与部门管理、人员管理、岗位管理和角色管理一起形成了完整的组织架构和权限控制体系。这种低代码实现方案不仅开发效率高，而且代码结构清晰，易于维护和扩展。
下一步，我们将基于页面管理和角色权限分配，实现更细粒度的操作权限控制，进一步完善系统的安全体系。