黑马】完善用户管理的分配角色

最新推荐文章于 2023-10-26 17:54:20 发布

princess66

最新推荐文章于 2023-10-26 17:54:20 发布

阅读量166

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/princess66/article/details/128248378

版权

3.为分配角色按钮绑定一个单击事件@click="setRole"

4.methods中写函数方法

5.传递当前的用户信息，使用作用域插槽

6.接收传递过来的参数，先设置参数userInfo

7.在data中的return定义这个接受的对象，默认为空对象

8.需要将获取到的数据展示到页面上

8.1在展示对话框之前，获取所有展示的权限列表

9.拿到这个数组之后，渲染到页面的下拉菜单

10.将选中的展示到对话框中，写在双向绑定事件里

一。完善用户管理的分配角色模块

1，为分配角色按钮绑定一个单击事件

2，点击后弹出一个对话框

1.对话框

  <!-- 分配角色的对话框 -->
        <el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setRoleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setRoleDialogVisible= false">确 定</el-button>
            </span>
        </el-dialog>

2.data

 //控制分配角色对话框的显示与隐藏
            setRoleDialogVisible:false

3.为分配角色按钮绑定一个单击事件@click="setRole"

<el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole"></el-button>

4.methods中写函数方法

 //展示分配角色的对话框
        setRole(){
             this.setRoleDialogVisible = true
        }

可弹出

5，传递当前的用户信息，使用作用域插槽

                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>

6.接收传递过来的参数，先设置参数userInfo

  //展示分配角色的对话框
        setRole(userInfo){
        this.userInfo=userInfo
           this.setRoleDialogVisible = true
        }

7.在data中的return定义这个接受的对象，默认为空对象

  //需要被分配角色的用户信息
            userInfo:{}

8，需要将获取到的数据展示到页面上

需要实现这样的效果

分配新角色，还需要获取展示所有的权限列表

8.1在展示对话框之前，获取所有展示的权限列表

//展示对话框之前，获取所有的角色列表。去查看API中的角色列表

 //展示分配角色的对话框
        async setRole(userInfo){
        this.userInfo=userInfo
        //展示对话框之前，获取所有的角色列表。去查看API中的角色列表
        const { data: res } = await this.$http.get('roles')
            //因为请求不一定永远都是成功的，所以要进行判断
            if (res.meta.status !== 200) {
                return this.$message.error('获取角色列表失败！')
            }
            this.rolesList = res.data
           this.setRoleDialogVisible = true
        }

但在数据中还没有定义这个rolesList

 //所有角色的数据列表
            rolesList:[]

9，拿到这个数组之后，渲染到页面的下拉菜单

下拉菜单，找element的select选择器

:label="item.label"是看到的值

:value="item.value是选中的背后的值，比如是id

在element中进行注册组件

   <!-- 分配角色的对话框 -->
        <el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%">
            <div>
                <p>当前的用户：{{ userInfo.username }}</p>
                <p>当前的角色：{{ userInfo.role_name }}</p>
                <p>分配新角色
                    <template>
                        <!-- v-model双向绑定，选中之后的值 -->
                        <el-select v-model="selectedRoleId" placeholder="请选择">
                            <!-- //使用循环生成下拉菜单里的每一个选项，每一个Item都是一个角色，在刚刚的rolesList中循环 -->
                            <!-- :key="item.value 绑定id值， -->
                            <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </template>

                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setRoleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setRoleDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

现在可以看到表面一样，但选中后不会展示在对话框里

10，将选中的展示到对话框中，写在双向绑定事件里

先在data里定义

 //已选中的角色id值
            selectedRoleId:''

现在选中就会在对话框里显示，

11，点击确定，把数据同步到后台

11.1给确定按钮绑定单击事件

<el-button type="primary" @click="saveRoleInfo">确定</el-button>

11.2写处理函数

  //点击按钮，分配角色
        async saveRoleInfo(){
            //在触发之前，应该判断有没有选中一个新的角色,如果取反之后等于真，就说明没有选中新角色
            if(!this.selectedRoleId){
                return this.$message.error('请选择要分配的角色！')
            }
            //发起请求，API，{rid:this.selectedRoleId}请求体
            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
        }

这样就可以把数据同步到后台，但是现在关闭再次点开之后还会有上次的痕迹

12清除上次痕迹的方法

给分配角色对话框添加一个关闭事件

   <!-- 分配角色的对话框 -->
        <el-dialog 
        @close="setRoleDialogClosed"

//监听分配角色对话框的关闭事件
        setRoleDialogClosed(){
            //把对话框选择器里面的内容置为空,把用户信息也重置为一个空对象
            this.selectedRoleId=''
            this.userInfo={}
        }