目标: 通过rrbac权限控制系统,来完成对用户分配角色。例如点击用户列表旁边的查看弹出角色分配的对话框。
核心点:提炼出一个对话框组件
<template> <el-dialog :title="$t('msg.excel.roleDialogTitle')" :model-value="modelValue" @close="closed" > 内容 <template #footer> <span class="dialog-footer"> <el-button @click="closed">{{ $t('msg.universal.cancel') }}</el-button> <el-button type="primary" @click="onConfirm">{{ $t('msg.universal.confirm') }}</el-button> </span> </template> </el-dialog> </template> <script setup> import { defineProps, defineEmits } from 'vue' defineProps({ modelValue: { type: Boolean, required: true } }) const emits = defineEmits(['update:modelValue']) /** 确定按钮点击事件 */ const onConfirm = async () => { closed() } /** * 关闭 */ const closed = () => { emits('update:modelValue', false) } </script> <style lang="scss" scoped></style>
<roles-dialog v-model="roleDialogVisible"></roles-dialog> import RolesDialog from './components/roles.vue' /** * 查看角色的点击事件 */ const roleDialogVisible = ref(false) const onShowRoleClick = row => { roleDialogVisible.value = true }
/* 获取指定用户角色 */ export const userRoles = (id) => { return request({ url: `/user-manage/role/${id}` }) }
import { defineProps, defineEmits, ref } from 'vue' import { roleList } from '@/api/role' import { watchSwitchLang } from '@/utils/i18n' ... // 所有角色 const allRoleList = ref([]) // 获取所有角色数据的方法 const getListData = async () => { allRoleList.value = await roleList() } getListData() watchSwitchLang(getListData) // 当前用户角色 const userRoleTitleList = ref([])
```
谢谢老师,讲的非常细致,很容易懂。这一节学的为用户为用户分配角色。说通俗易懂点就是之前角色那个按钮的关闭打开,设置给用户设置角色。分为了所有角色和用户当前角色两部分。