权限和角色（四）

实现的功能

功能 详述
权限列表 面包屑导航；卡片视图；权限等级 数值渲染为标签
角色列表 面包屑导航；卡片视图；获取和渲染角色数据列表；获取角色权限；渲染多级权限列表
角色权限 分配角色对话框显示和隐藏；渲染多选树形权限列表；分配角色权限；重置权限列表；弹框询问 删除角色权限
分配角色 分配角色对话框显示和隐藏；获取和渲染被分配角色的用户信息；分配角色；重置分配角色表单

使用到的Element-ui组件

组件名称_EN 注册 备注
Tag Vue.use(Tag) 标签
Tree Vue.use(Tree) 树形控件
Select Vue.use(Select) 选择器
Option Vue.use(Option)

一、权限

1.渲染组件和子路由

2.布局

①面包屑导航

②卡片视图

3.获取渲染权限数据列表

①获取权限数据列表

②渲染权限数据列表

1️⃣权限等级 数值渲染为标签

v-if；v-else-if；v-else

<!-- [Rights.vue] -->
<el-table-column label="权限等级" prop="level">
    <template slot-scope="scope">
        <el-tag v-if="scope.row.level === '0'">一级</el-tag>
        <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
        <el-tag type="warning" v-else>三级</el-tag>
    </template>
</el-table-column>

二、角色

1.渲染组件和子路由

2.布局

①面包屑导航

②卡片视图

3.获取渲染角色数据列表

①获取角色数据列表

②渲染角色数据列表

1️⃣展开列

type="expand"：展开列

<!-- [Roles.vue] --> 
<!-- 展开列 -->
<el-table-column type="expand">
    <template slot-scope="scope">
    <!-- ...... -->
    </template>
</el-table-column>

2️⃣多级权限渲染

  1. 通过scope.row获取角色数据
  2. 三层for循环
<!-- [Roles.vue] --> 
<el-row>
    <!-- 一级权限 -->
    <el-col :span="5"></el-col>
    <!-- 二级+三级权限 -->
    <el-col :span="19"></el-col>
</el-row>
  • 第一层for循环渲染一级权限
<el-row :class="['bdbottom',index1 === 0 ? 'bdtop':'','vcenter']"
        v-for="(item1,index1) in scope.row.children" :key="item1.id">
    <!-- 一级权限 -->
    <el-col :span="5">
        <el-tag>{{item1.authName}}</el-tag>
        <i class="el-icon-caret-right"></i>
    </el-col>
    <!-- ...... -->
</el-row>

/* [Roles.vue] */
/* 边框样式 */
.bdtop {
  border-top: 1px solid #eeeeee;
}
.bdbottom {
  border-bottom: 1px solid #eeeeee;
}
  • 第二层for循环渲染二级权限
<!-- ...... -->
<!-- 二级+三级权限 -->
<el-col :span="19">
    <el-row :class="[index2 === 0 ?'' : 'bdtop','vcenter']" 
            v-for="(item2,index2) in item1.children" :key="item2.id">
        <el-col :span="6">
            <el-tag type="success">{{item2.authName}}</el-tag>
            <i class="el-icon-caret-right"></i>
        </el-col>
        <!-- ...... -->
    </el-row>
</el-col>
  • 第三层for循环渲染三级权限
<el-col :span="18">
    <el-tag type="warning"
            v-for="(item3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
</el-col>

3️⃣美化权限列表

/* [assets/css/global.css] */
html,body,#app{
	/* ...... */
    min- 1366px;
}

/* [Roles.vue] */
/* tags纵向居中对齐 */
.vcenter {
  display: flex;
  align-items: center;
}

3、删除角色权限

弹框询问是否删除角色权限

<!-- [Roles.vue] --> 
<el-tag
        closable
        @close="removeRightById(scope.row,item3.id)"
        type="warning"
        v-for="(item3) in item2.children"
        :key="item3.id"
        >{{item3.authName}}</el-tag>

// [Roles.vue -> methods]
// 根据id删除对应权限
async removeRightById(role, rightId) {
    // 弹框提示
    const confirmResult = await this.$confirm(
        '此操作将永久删除该用户权限, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).catch((err) => err)

    if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
    }
    // 发起删除权限请求
    const { data: res } = await this.$http.delete(
        `roles/${role.id}/rights/${rightId}`
    )
    if (res.meta.status !== 200) {
        return this.$message.error('删除权限失败')
    }

    // 删除后不关闭多级权限列表 api返回最新角色权限数据
    role.children = res.data
}

4、分配角色权限

①展示分配权限对话框

②获取所有权限列表

③渲染所有权限列表

树形控件

:data：数据源

:props：数据绑定字段

​ label：文本

​ children：父子节点通过哪一个属性嵌套

show-checkbox：复选框

node-key：选中后选中的值

default-expand-all：默认展开所有节点

:default-checked-keys：默认勾选的数组

<!-- [Roles.vue] -->  
<!-- 树形控件 -->
<el-tree
         :data="rightslist"
         :props="treeProps"
         show-checkbox
         node-key="id"
         default-expand-all
         :default-checked-keys="defkeys"
         ref="treeRef"
         ></el-tree>

// [Roles.vue -> data]
// 树形控件的属性绑定对象
treeProps: {
    label: 'authName',
    children: 'children',
},
// 默认选中的节点id数组
defkeys: [],

// [Roles.vue -> methods]
// 展示分配权限对话框
async showSetRightDialog(role) {
    // ......
    // 递归获取三级节点id
    this.getLeafKeys(role, this.defkeys)
    // ......
},
    
// 通过递归的形式，获取角色下所有三级权限的id，并保存到defkeys
getLeafKeys(node, arr) {
    // 如果当前node属性不包含children属性，则为三级节点
    if (!node.children) {
        return arr.push(node.id)
    }
    node.children.forEach((item) => this.getLeafKeys(item, arr))
}

④重置权限列表

<!-- [Roles.vue] -->  
<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="SetRightDialogVisible"
           width="50%"
           @close="setRightDialogClosed"
           ></el-dialog>

// [Roles.vue -> methods]
// 监听分配权限对话框的关闭事件
setRightDialogClosed() {
    this.defkeys = []
}

⑤分配角色权限

树形组件Tree

getCheckedKeys：获取所有选中的节点数组

getHalfCheckedKeys：获取所有半选中的节点数组

// [Roles.vue -> data] 
// 即将分配权限的id
roleId: ''
          
// [Roles.vue -> methods] 
// 展示分配权限对话框
async showSetRightDialog(role) {
    this.roleId = role.id
    // ......
},
// 点击确定为角色分配权限
async allotRights() {
    const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys(),
    ]

    const idStr = keys.join(',')

    const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        { rids: idStr }
    )
    if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败')
    }
    this.$message.success('分配权限成功')
    this.getRoleList()
    this.SetRightDialogVisible = false
}

5、分配角色

①展示分配角色对话框

②获取被分配角色的用户信息

scope.row传递userInfo，保存到userInfo

// [Users.vue -> data] 
// 需要被分配角色的用户信息
userInfo: {},
// 所有角色的数据列表
roleslist: []

// [Users.vue -> methods] 
// 展示分配角色对话框
async setRole(userInfo) {
    this.userInfo = userInfo
    // 在展示对话框之前，获取所有角色列表
    const { data: res } = await this.$http.get('roles')
    if (res.meta.status !== 200)
        return this.$message.error('获取角色列表失败')
    this.roleslist = res.data
    this.setRoleDialogVisible = true
}

③渲染被分配角色的用户信息

  1. select

    v-model：选中的值

    placeholder：显示的文本

  2. option

    :label：显示的文本

    :value：真正选中的值

<!-- [Users.vue] --> 
<div>
    <p>当前的用户：{{userInfo.username}}</p>
    <p>当前的角色：{{userInfo.role_name}}</p>
    <p>
        分配新角色：
        <el-select v-model="selectedRoleId" placeholder="请选择">
            <el-option
                       v-for="item in roleslist"
                       :key="item.id"
                       :label="item.roleName"
                       :value="item.id"
                       ></el-option>
        </el-select>
    </p>
</div>

// [Users.vue -> data]
// 已选中的角色id
selectedRoleId:''

④分配角色

// [Users.vue -> methods]
// 点击确定按钮分配新角色
async saveRoleInfo(){
    if(!this.selectedRoleId)
        return this.$message.error('请选择要分配的新角色')

    // 发起请求
    const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId})
    
    if(res.meta.status !== 200)
        return this.$message.error('更新用户角色失败')
    this.$message.success('更新用户角色成功')
    this.getUserList()
    this.setRoleDialogVisible = false
},

⑤重置表单

// [Users.vue -> methods]
// 监听分配角色对话框的关闭
setRoleDialogClosed(){
    this.selectedRoleId = ''
    this.userInfo={}
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wattmelon/p/13568286.html