一、页面效果
实现管理员页面，完成管理员对应角色的中文名称显示，实现搜索栏，表格基本增删改查，分页等功能
二、修改问题
1、修改搜索框传递参数问题
(1)问题图示
如下图，之前搜索后，传递的数据不直接是一个value值，而是如下图的格式
查询可知这里传递的数据定义的是一个ref对象，所以不能直接传递其值，而是应该加上value
(2)方法解决
如下图直接在传递的数据上加入.value
解决之后的图示如下
2、增加下列列表change事件的判断
由于change事件不一定每一个页面都有，所以需要增加判断，如果存在change事件，就执行方法，反之不执行
写入方法，如果change字段存在就执行item.change方法并传递参数ruleForm，反之执行空方法
三、初步搭建
1、apifox—api建立
(1)管理员列表查询
建立接口
创建接口/admin/list
建立期望
{
"code": 1,
"msg": "成功",
"total":4,
"data": [
{
id:1,
username:"test1",
nickname:"张三",
roleid:1,
createtime:"2025-04-05",
lastlogintime:"2025-06-05"
},
{
id:2,
username:"test2",
nickname:"李四",
roleid:2,
createtime:"2025-05-05",
lastlogintime:"2025-06-06"
},
{
id:3,
username:"test3",
nickname:"王五",
roleid:3,
createtime:"2025-06-05",
lastlogintime:"2025-06-05"
},
{
id:4,
username:"test4",
nickname:"赵六",
roleid:4,
createtime:"2025-06-06",
lastlogintime:"2025-06-06"
},
]
}(2)管理员新增
新建接口
新建接口/admin/add，并写入参数用户名:username,昵称:nickname,角色id:roleid,密码:password
新建期望
(3)管理员修改
新建接口
新建接口/admin/edit,并写入参数修改行id:id,用户名:username,昵称:nickname,角色id:roleid,密码:password
新建期望
(4)管理员删除
新建接口
新建接口/admin/del,并写入参数删除行id:id
新建期望
2、创建新页面、路由、菜单
(1)创建新页面
建立页面AdminuserView.vue
(2)写入路由
(3)写入菜单
四、写入管理员页面
1、视图层
(1)引入表格组件
import Table from '@/components/Table.vue'(2)写入参数
在表格组件中，写入参数：
- 表格列—columns
- api路径(是否显示对应功能)—apiUrl
- 表单—formItems
- 是否显示分页—showPage
- 是否显示搜索栏—showSearch
- 导出Excel名称—exportName
<template>
<Table :columns="columns" :apiUrl='apiUrl' :formItems="formItems" :showPage="true" :showSearch="true" exportName="管理员数据">
</Table>
</template>2、api路径写入
写入apiUrl,并写入查询list,删除del,新增add,编辑edit,导出功能export
//路径
const apiUrl = {
list: '/admin/list',
del: '/admin/del',
add: '/admin/add',
edit: '/admin/edit',
export: true,
}3、获取全部角色组
(1)api中写入方法
在api/role.js中写入方法，获取全部的角色信息
(2)封装角色方法
在之前权限管理页面中，对角色下拉数据进行了处理，现在需要将其封装到工具方法中便于引用
如下图为权限管理页面RoleView.vue中使用了getRoles方法 ，需要将其方法封装
封装方法如下：
建立工具方法src/utils/tools.js，并将getRoles方法存入其中，并修改其为导出方法
(3)引用方法
- 引入vue的方法ref和reactive
- 引入获取全部角色的方法
- 引入处理角色名称方法
(4)获取全部角色方法
定义方法：存入角色下拉列表数组：parentOptions，存入角色组对象：roleObj
执行AllRoles方法
- ①对获取的数据首先处理角色名称
- ②将处理过名称的数据设置为下拉列表数据parentOptions，数据展示如下
- ③将处理的数据进行循环，并通过数组的方法存入roleObj，key为子项的value(id值)，value为子项的label(名称)，数据展示如下(为了便于写入到表格字段中)
图②
图③
4、表头定义
表头数据有：
- id：ID，隐藏搜索行
- username：用户名，搜索为模糊查询
- nickname：昵称，搜索为模糊查询
- roleid：角色组id，返回值为处理角色组对象对应的角色名称(根据行的id对应数组的key找到对应值)，搜索方式为下拉列表，搜索下拉列表的值为parentOptions的值
- lastlogintime：最后修改时间，隐藏搜索行
- createtime：创建时间，搜索方法为时间范围daterange
5、表单定义
使用的是reactive定义，所以内容的parentOptions不需要使用.value
- roleid：角色组，类型为下拉，下拉数据为变量parentOptions，加入规则
- username：用户名，类型为文本框，加入规则
- nickname：昵称，类型为文本框，加入规则
五、完整代码
1、角色名称处理工具类
src/utils/tool.js
// 定义父级分类
export function getRoles(data, index = 0) {
let opts = [];
index++
let arr = [];
for (let i = 0; i < index; i++) {
if (i == 0) {
arr.push('└')
}
else {
arr.push('┴')
}
}
//存储下拉列表的数组
data.forEach(item => {
opts.push({
label: arr.join('') + item.name,
value: item.id
})
//使用递归，如果存在子项且子项的值不为空，就递归调用自己，并且将子项获取的数据添加到opts中(先结构再传)
if (item.children && item.children.length > 0) {
// getRoles(item.children)
opts.push(...getRoles(item.children, index))
}
});
return opts;
}2、获取角色组api
src/api/role.js
import { get, post } from '@/utils/request'
//获取全部权限列表
export function AllPurviews(data) {
return get('/role/getallpurviews', data)
}
//获取全部角色组
export function AllRoles(data) {
return post('/role/list', data)
}3、管理员页面
src/views/AdminuserView.vue
<
