vue3:十五、管理员管理-页面搭建

一、页面效果

实现管理员页面，完成管理员对应角色的中文名称显示，实现搜索栏，表格基本增删改查，分页等功能

二、修改问题

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

<