【vue3+ts后台管理】角色列表

【vue3+ts后台管理】角色列表

文章目录

​​新建页面和规范数据​​​​添加角色​​​​权限列表跳转​​​​权限列表页面展示​​​​权限列表页面修改功能​​

新建页面和规范数据

views 下新建 RoleView.vue，在 ​​onMounted​​ 中调用角色列表接口，并打印返回数据

setup(){ onMounted(()=>{ getRoleList().then((res)=>{ console.log(res) }) }) }

修改 router 下的 index.ts，在用户列表同级增加

{ path: 'role', name: 'role', meta:{ isShow:true, title:'角色列表' }, component: () => import('../views/RoleView.vue') }

下面来规范数据，在 type 下新建 role.ts

export interface ListInt { authority: number[], roleId: number, roleName: string}export class InitData { list:ListInt[] = []}

修改 RoleView.vue，将页面展示出来

运行程序：

添加角色

import {ElMessage, ElMessageBox} from 'element-plus'const addRole = () => { ElMessageBox.prompt('请输入角色名称', '添加', { confirmButtonText: '确定', cancelButtonText: '取消' }) .then(({value}) => {//value表示输入框中填入的值 if (value) { data.list.push({roleId: data.list.length + 1, roleName: value, authority: []}) } ElMessage({ type: 'success', message: `${value}角色添加成功`, }) }) .catch(() => { ElMessage({ type: 'info', message: 'Input canceled', }) }) } return { ...toRefs(data), addRole }

注意，这里如果样式有问题，可以先对 ElementUI 改为完整引入

运行：

权限列表跳转

新建 AuthorityView.vue，同时修改路由 router/index.ts，在角色列表同级增加，注意 isShow 的值为 false，暂时不显示出来

, { path: 'authority', name: 'authority', meta:{ isShow:false, title:'权限列表' }, component: () => import('../views/AuthorityView.vue') }

const changeRole = (row:ListInt)=>{ router.push({ path:'authority', query:{ id:row.roleId, authority:row.authority.join(',') } }) } return { ...toRefs(data), addRole, changeRole }

权限列表页面展示

我们也可以用路由的 params 参数传递：

const changeRole = (row:ListInt)=>{ router.push({ name:'authority', params:{ id:row.roleId, authority:row.authority } }) }

在 request/api.ts 中添加权限列表接口：

//权限列表export function getAuthorityList(){ return service({ url:'/getAuthorityList', method:'get', })}

在 AuthorityView.vue 中，放入 ​​树形控件​​，并请求权限列表来填充数据。我们可以先来打印下权限列表接口返回的数据：

根据这个数据我们在 type 下增加 authority.ts

export interface ListInt{ name:string roleId:number viewRole:string roleList:ListInt[]}export class InitData { id:number authority:number[] constructor(id:number,authority:number[]) { this.id = id this.authority = authority } list:ListInt[] = []}

其中树形控件中 ​​data​​​ 是要展示的数据（我们请求权限列表得到的数据），​​node-key​​​是唯一标识（roleId），​​default-checked-keys​​​ 是默认勾选的节点的 key 的数组（我们从角色列表传过来的 authority），​​props​​​ 是配置选项，我们可以根据官网源码示例来写。​​check-strictly​​是在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false，我们改为 true

权限列表页面修改功能

在 AuthorityView.vue 中我们添加一个修改按钮，并给树形控件增加 ref

确认修改

authority.ts 中增加 treeRef 用来获取树形控件节点

export class InitData { id:number authority:number[] constructor(id:number,authority:number[]) { this.id = id this.authority = authority } list:ListInt[] = [] treeRef:any}

在 changeAuthority 这个方法中打印 ​​data.treeRef​​​ 可以在 target 中找到字段 ​​getCheckedKeys​​​表示选中的 key，所以我们可以用​​data.treeRef.getCheckedKeys()​​来拿到选中的 key，然后可以用 sort 对其进行排序

const changeAuthority = ()=>{ console.log(data.treeRef.getCheckedKeys().sort(function (a:number,b:number) { return a-b })) }

当然在真实开发中，我们这里拿到选中的 key 需要调用后台的接口，进行网络请求改变数据。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。