Vue_shop学习76：分配权限功能数据的树型基本显示

¡Venceremo

于 2023-04-25 20:27:44 发布

阅读量207

点赞数

分类专栏： Vue_shop 文章标签：学习

本文链接：https://blog.csdn.net/weixin_47295886/article/details/130373212

版权

Vue_shop 专栏收录该内容

93 篇文章 3 订阅

订阅专栏

新组件：tree

组件 | Element

        <!-- 分配权限对话框 -->
        <el-dialog title="提示" :visible.sync="setDialogVisible" width="50%" >
           <!-- 树型空间   :data 数据绑定数据源 :props数据绑定的字段（属性）-->
           <el-tree :data="rightsList" :props="treeProps"></el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

   treeProps:{
                    label:'authName',
                    children:'children'


                }

实现效果

<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 添加角色的按钮，最好放到row中 -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addRoleVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
            <!-- 角色列表区域，首先拿到角色列表的数据 -->
            <!-- data指定数据源 stripe斑马隔行变色 border边框-->
            <el-table border :data="rolesList" stripe>
                <!-- 展开列 -->
                <el-table-column type="expand">
                    <template slot-scope="scope">

                        <!-- 给每一个row加上底边框，此时第一个缺少边框，给第一个家顶边框 3原表达式 -->
                        <el-row :class="['btbottom',index===0?'bttop' :'','vcenter']"
                            v-for="(item1,index) in scope.row.children" :key="index.id">
                            <!-- 一级权限渲染 占5列 -->
                            <el-col :span="5">
                                <el-tag closable @close="removeRightById(scope.row,item1.id)">{{item1.authName}}
                                </el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!-- 二级三级权限渲染 -->
                            <el-col :span="19">
                                <!-- 通过for循环嵌套渲染二级权限 -->
                                <!-- 顶部加边框，上面的多了进行判断不加 -->
                                <el-row :class="[index2 === 0?'':'bttop','vcenter']"
                                    v-for="(item2,index2) in item1.children" :key="index2.id">
                                    <el-col :span="6">
                                        <el-tag type="success" closable @close="removeRightById(scope.row,item2.id)">
                                            {{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag type="warning" v-for="(item3,index3) in item2.children" :key="index3.id"
                                            closable @close="removeRightById(scope.row,item3.id)">
                                            {{item3.authName}}
                                        </el-tag>

                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <!-- 索引列 -->
                <el-table-column type="index" label="#"></el-table-column>
                <!-- prop是data数组    中的数据 -->
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <!-- width 为了能一列显示按钮  -->
                <el-table-column label="操作" width="300px">
                    <!-- 作用域插槽的形式渲染权限等级 -->
                    <template slot-scope="scope">
                        <!-- scope.row将拿到的数据渲染 -->
                        <el-button size="mini" type="primary" round icon="el-icon-edit"
                            @click="showEditDialog(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="success" round icon="el-icon-delete"
                            @click="removeById(scope.row.id)">删除</el-button>
                        <el-button size="mini" type="warning" round icon="el-icon-setting" @click="showSetRightDialog">
                            分配权限</el-button>

                    </template>
                </el-table-column>
            </el-table>

        </el-card>
        <!-- 点击按钮弹出添加角色的对话框 -->
        <el-dialog title="添加角色" :visible.sync="addRoleVisible" width="50%" @close="addDialogClose">
            <!-- 内容主题区域 -->
            <!-- 表单数据 addFromRules验证规则 addFromRef索引-->
            <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="80px">
                </el-form-item>
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addFrom.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="addFrom.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- 底部按钮区域 取消按钮的时候隐藏对话框 -->
                <el-button @click="addRoleVisible= false">取 消</el-button>
                <el-button type="primary" @click="addRole">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改角色的对话框-->
        <el-dialog title="修改角色" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <!-- 内容主题区域 -->
            <el-form :model="editForm" :rules="editFromRules" ref="editFromRef" label-width="70px" status-icon>
                <el-form-item label="角色ID">
                    <el-input v-model="editForm.roleId" disabled></el-input>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="editForm.roleName"></el-input>
                </el-form-item>
                <!-- 有验证规则 -->
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="editForm.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible= false">取 消</el-button>
                <el-button type="primary" @click="editRolesInfo">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分配权限对话框 -->
        <el-dialog title="提示" :visible.sync="setDialogVisible" width="50%" >
           <!-- 树型空间   :data 数据绑定数据源 :props数据绑定的字段（属性）-->
           <el-tree :data="rightsList" :props="treeProps"></el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {

        created() {
            //在已进入该路由的时候就获取所有权限
            this.getRolesList()

        },
        data() {
            return {
                //所有角色列表
                rolesList: [],
                addRoleVisible: false,//弹出添加角色对话框的显示与隐藏按钮的
                setDialogVisible:false,//弹出修改角色权限对话框的显示与隐藏按钮的
                addFrom: {//添加角色的表单数据
                    roleName: '',//角色名称 
                    roleDesc: ''//角色描述
                },
                addFromRules: {//验证规则
                    roleName: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                    ],
                    roleDesc: [
                        { message: '请输入角色藐视', trigger: 'blur' },

                    ],

                },
                editDialogVisible: false,//控制修改角色对话框的隐藏 
                editForm: {},//查询到的角色对象
                editFromRules: {//修改用户数据的验证规则
                    roleName: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                    ],
                    roleDesc: [
                        { message: '请输入角色藐视', trigger: 'blur' },

                    ],
                },
                rightsList:[],
                treeProps:{
                    label:'authName',
                    children:'children'


                }

            }
        },
        methods: {
            async getRolesList() {//获取所有数据
                const { data: res } = await this.$http.get('roles')
                if (res.meta.status !== 200) return this.$message.error('获取用户角色数据失败')
                this.rolesList = res.data
                //console.log(this.rolesList) //测试

            },
            addDialogClose() {//监听添加对话框关闭事件
                this.$refs.addFromRef.resetFields()
            },
            addRole() {//添加角色
                //第一步:预校验
                this.$refs.addFromRef.validate(async valid => {
                    //console.log(valid)//打印校验规则--测试的
                    if (!valid) return //校验失败
                    //校验成功 发送网络数据请求
                    //发送对象的数据刚好就双向数据绑定在拿上面 -响应promise数据
                    const { data: res } = await this.$http.post('roles', this.addFrom)
                    if (res.meta.status !== 201) {
                        return this.$message.error('添加角色失败')
                    }
                    this.$message.success('添加角色成功')
                    // 隐藏条件用户的对话框
                    this.addRoleVisible = false
                    this.getRolesList()//重新获取用户角色列表

                })
            },
            editDialogClosed() {//监听修改用户的关闭事件
                this.$refs.editFromRef.resetFields()
            },
            async showEditDialog(id) {//修改角色信息
                const { data: res } = await this.$http.get('roles/' + id)
                if (res.meta.status !== 200) return this.$message.error('查询角色数据失败')
                //查询到的数据双向绑定 然后让表单渲染
                this.editForm = res.data
                //console.log(res.data)
                this.editDialogVisible = true

            },
            editRolesInfo() {//编辑角色信息
                //修改用户信息并且提交
                //第一步:预验证
                this.$refs.editFromRef.validate(
                    async valid => {
                        if (!valid) return
                        //发起修改用户信息的数据请求 点击的时候已经绑定了editForm
                        const { data: res } = await this.$http.put('roles/' + this.editForm.roleId, {
                            id: this.editForm.roleId,
                            roleName: this.editForm.roleName,
                            roleDesc: this.editForm.roleDesc
                        })
                        if (res.meta.status !== 200) return this.$message.error('修改角色数据失败')
                        //关闭对话框
                        this.editDialogVisible = false
                        //刷新数据列表
                        this.getRolesList()
                        //提示修改成功
                        this.$message.success('修改用户数据成功')
                    })

            },
            async removeById(id) {//删除用户信息
                //提示消息 标题文本 提示信息
                const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(error => //只有一个return 只有一个参数 可以省略return {} ()
                    error  //返回给confirmResult接收
                )
                //确认是confirm 取消就会报错-使用捕获错误
                //取消为cancel字段
                //console.log(confirmResult)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已经取消删除')
                }
                const { data: res } = await this.$http.delete('roles/' + id)
                if (res.meta.status !== 200) return this.$message.error('删除角色失败')
                this.$message.success('删除角色成功')
                //刷新列表
                this.getRolesList()

            },
            async removeRightById(role, rightId) {//点击Tag标签，就删除
                //提示消息 标题文本 提示信息
                const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(error => //只有一个return 只有一个参数 可以省略return {} ()
                    error  //返回给confirmResult接收
                )
                //确认是confirm 取消就会报错-使用捕获错误
                //取消为cancel字段
                //console.log(confirmResult)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已经取消删除')
                }
                console.log(role.id)
                const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
                if (res.meta.status !== 200) return this.$message.error('删除权限失败')
                this.$message.success('删除权限成功')
                //刷新数据
                role.children = res.data

            },
            async showSetRightDialog() {//分配权限
                //展示分配权限的对话框
                this.setDialogVisible = true 
                //获取所有权限
               const{data:res}=await this.$http.get('rights/tree')
               if(res.meta.status!==200) return this.$message.error('获取权限数据失败')
               this.rightsList=res.data //将获取到的所有权限数据保存到rightsList中
               


            }
        },

    }
</script>
<style lang="less" scoped></style>