0
点赞
收藏
分享

微信扫一扫

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


文章目录

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

新建页面和规范数据

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

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

【vue3+ts后台管理】角色列表_树形控件


修改 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,将页面展示出来

<template>
<div>
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-button type="primary" @click="addRole">添加角色</el-button>
</el-form-item>
</el-form>

<el-table :data="list" border style="width: 100%">
<el-table-column prop="roleId" label="ID" width="180"/>
<el-table-column prop="roleName" label="角色" width="180"/>
<el-table-column prop="authority" label="操作">
<template #default="scope">
<el-button
type="primary"
size="small"
@click="changeRole(scope.row)">
修改权限
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs, watch} from 'vue';
import {getRoleList, getUserList} from "@/request/api";
import {InitData, ListInt} from "@/type/user";

export default defineComponent({
name: 'HomeView',
setup(){
const data = reactive(new InitData())

onMounted(()=>{
getRoleList().then((res)=>{
data.list = res.data
})
})

return{
...toRefs(data)
}
},
components: {},
});
</script>

<style lang="scss" scoped>
</style>

运行程序:

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

添加角色

点击左上角添加角色按钮弹出一个对话框即可。我们根据 ​​MessageBox消息弹框​​来写。复制代码并稍作修改

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 改为完整引入

运行:

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

权限列表跳转

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

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

RoleView.vue 中添加点击修改权限时的方法 ​​changeRole​​,我们可以用路由的 query 参数传递

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

return {
...toRefs(data),
addRole,
changeRole
}

这样当我们点击修改权限时,跳转权限页面就会把所需信息传过去

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

权限列表页面展示

我们也可以用路由的 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 中,放入 ​​树形控件​​,并请求权限列表来填充数据。我们可以先来打印下权限列表接口返回的数据:

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


根据这个数据我们在 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

<template>
<div>
<el-tree
:data="list"
show-checkbox
node-key="roleId"
:default-checked-keys="authority"
:check-strictly="true"
:props="{
children: 'roleList',
label: 'name',
}"
/>
</div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue';
import {useRoute} from "vue-router";
import {InitData} from "@/type/authority";
import {getAuthorityList} from "@/request/api";

export default defineComponent({
name: 'HomeView',
setup() {
const route = useRoute()
const params:any = route.params;
const data = reactive(new InitData(params.id,params.authority))
onMounted(()=>{
getAuthorityList().then((res)=>{
data.list = res.data
})
})
return{
...toRefs(data)
}
},
components: {},
});
</script>

<style lang="scss" scoped>

</style>

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

权限列表页面修改功能

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

<el-tree
ref="treeRef"
......
/>
<el-button type="primary" @click="changeAuthority">确认修改</el-button>

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 需要调用后台的接口,进行网络请求改变数据。


举报

相关推荐

0 条评论