2020 zero base to quickly develop Vue family bucket develop the electricity business management system (Element-UI) [assign roles

1 Introduction

寒假是用来反超的！Vue put together to learn, this blog is about assigning roles, like him to teach ~

2, assign roles

2.1 Rendering dialog to assign roles and role request list data

 		<!-- 分配角色的对话框 -->
        <el-dialog
        title="分配角色"
        :visible.sync="setRoleDialogVisible"
        width="50%"
        >
        <div>
            <p>当前用户：{{userInfo.username}}</p>
            <p>当前角色：{{userInfo.role_name}}</p>
            {{rolesList}}
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRoleDialogVisible = false">确 定</el-button>
        </span>

		 // 展示分配角色的对话框
        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
        }

2.2 rendering role select list drop-down menu

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

2.3 assign roles to complete the function

		 // 点击确定按钮，为用户分配角色
        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
        },
        // 监听分配角色对话框关闭事件
        setRoleDialogClosed(){
            this.selectedRoleId= ''
            this.userInfo = {}
        }

3. Conclusion

At this point, our function is complete!

Vue family bucket develop the electricity business management system code cloud address, welcome to learn together ~

https://gitee.com/Chocolate666/vue_shop

---

Finally, after reading this blog, I feel quite helpful, can continue to view the contents of other columns wailing, Vue together to learn it ~

Click to enter Vue❤ learn column ~

学如逆水行舟，不进则退