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

    文章目录

    新建页面和规范数据

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述
    修改 router 下的 index.ts，在用户列表同级增加

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    export interface ListInt {
    authority: number[],
    roleId: number,
    roleName: string
}

export class InitData {
    list:ListInt[] = []
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    运行程序：
    在这里插入图片描述

    添加角色

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

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

    运行：
    在这里插入图片描述

    权限列表跳转

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    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
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    在这里插入图片描述

    权限列表页面展示

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在 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[] = []
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    其中树形控件中 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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述

    权限列表页面修改功能

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    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
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在 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
      }))
    }

    • 1
    • 2
    • 3
    • 4
    • 5

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

  • 相关阅读:
    遇见和光同尘
    JSP page对象简介说明
    [Tools: cntk] Linux下cntk-gpu安装
    Qt槽函数的几种写法
    int和Integer的区别
    TrueLicense源码解析-寻找license安装后存放的位置
    Hive【Hive（六）窗口函数】
    【Linux网络编程】Socket-TCP实例
    JavaEE进阶 - Spring AOP - 细节狂魔
    SSL/TLS 的工作原理
  • 原文地址：https://blog.csdn.net/u010356768/article/details/126134820