【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，将页面展示出来

<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>

运行程序：

添加角色

点击左上角添加角色按钮弹出一个对话框即可。我们根据 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 改为完整引入

运行：

权限列表跳转

新建 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
    }

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

权限列表页面展示

我们也可以用路由的 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

<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>

权限列表页面修改功能

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