效果
点击分配角色后，弹窗，显示用户目前的权限，并且在下拉菜单里可以多选
image.png
image.png
分配角色弹窗组件跟之前的用户列表差不多

  1. <template>
  2. <el-dialog v-model="visible" title="分配角色" :before-close="close">
  3.     <el-form :model="form">
  4.       <el-form-item >
  5.         <el-select multiple v-model="roles" placeholder="请分配角色权限">
  6.           <el-option v-for="role in form.roleLists"  :label="role.name" :value="role.id" />
  7.         </el-select>
  8.       </el-form-item>
  9.     </el-form>
  10.     <template #footer>
  11.       <span class="dialog-footer">
  12.         <el-button @click="close">确认</el-button>
  13.         <el-button type="primary" @click="updateRole">
  14.           取消
  15.         </el-button>
  16.       </span>
  17.     </template>
  18.   </el-dialog>
  19. </template>
  21. <script setup lang='ts'>
  22. import {defineProps,reactive,ref,watch} from 'vue'
  23. type NU = number | undefined;
  25. const roles = ref<NU[]>([]);
  26. const props = defineProps<{
  27.   visible: boolean;
  28.   form: AdminRoleFormData
  29. }>()
  31. const emits = defineEmits<{
  32.   (event: 'close'):void
  33. }>();
  34. //监听
  35. watch(() => props.form.userRoles,() => {
  36.   if(props.form.userRoles){
  37.     roles.value = props.form.userRoles.map(item => item.id)
  38.   }
  39. })
  41. const close = () => {
  42.   emits('close')
  43. }
  44. const updateRole = () => {
  45.   close();
  46. }
  47. </script>
  1. <EditRole :visible="roleVisible" :form="roleData" @close="closeRoleDialog"></EditRole>
  2. import { getAdminList,getRoleListAll,getAdminRoleById } from '../../request/api'
  4.   const state = reactive<{ tableData: {}[]; visible: boolean; rowData: {}; roleVisible: boolean;roleData: AdminRoleFormData }>({
  5.     tableData: [],
  6.     visible: false,
  7.     rowData: {},
  8.     roleVisible: false,
  9.     roleData: {}
  10.   })
  11.   const { tableData, visible, rowData, roleVisible, roleData } = toRefs(state);
  13.   //获取所有角色
  14. getRoleListAll().then(res => {
  15.   if(res.code === 200){
  16.     roleData.value.roleLists = res.data;
  17.   }
  18. })
  20. //分配角色事件点击
  21. const allocRole = (id: number) => {
  22.   getAdminRoleById(id).then(res => {
  23.     if(res.code === 200){
  24.       roleVisible.value= true;
  25.       roleData.value.userRoles = res.data;
  26.     }
  27.   })
  28. }
  30. //隐藏分配角色弹框
  31. const closeRoleDialog = () => {
  32.   roleVisible.value = false;
  33. }

难点：分配角色的弹窗组件需要第一时间显示用户已有角色

  1. <el-form :model="form">
  2.   <el-form-item >
  3.     <el-select multiple v-model="roles" placeholder="请分配角色权限">
  4.       <el-option v-for="role in form.roleLists"  :label="role.name" :value="role.id" />
  5.     </el-select>
  6.   </el-form-item>
  7. </el-form>

v-model的数据可以直接展示，因此watch监听到父组件传过来的数据后，马上让roles接受

  1. watch(() => props.form.userRoles,() => {
  2.   if(props.form.userRoles){
  3.     roles.value = props.form.userRoles.map(item => item.id)
  4.   }
  5. })

监听之后，只需要返回id即可,因为options的value绑定的也是id，相当于key一致

接口类型依然需要重视

  1. interface AdminRoleFormData {
  2.   userRoles?: RoleObjItf[];
  3.   roleLists?: RoleObjItf[];
  4. }
  1. interface RoleObjItf {
  2.   id?: number;
  3.   name?: string;
  4. }
  1. //获取所有角色
  2. export const getRoleListAll = ():PromiseRes<RoleObjItf[]> => request.get('/role/listAll')
  4. //根据用户id获取角色
  5. export const getAdminRoleById = (id:number):PromiseRes<RoleObjItf[]> => request.get('/admin/role/'+id)

分配角色弹窗确认事件

先写接口
post接口发送params参数，需要放在第三个参数位置;第二个参数为请求体

  1. //分配用户角色
  2. export const updateAdminRole = (data: {adminId: number| undefined;roleIds: string}):PromiseRes => request.post('/admin/role/update',null,{params: data})
  1. import {updateAdminRole} from '../../../request/api'
  2. const updateRole = () => {
  3.   updateAdminRole({adminId :props.form.adminId,roleIds:roles.value.join(',')}).then(res => {
  4.     if(res.code === 200){
  5.       close();
  6.     }
  7.   })
  8. }

这里使用数组拼接转换为字符串

如果不希望手动转，也可以使用第三方库qs
image.png
这样可以把参数放第二位，且自动转换数组内容
roleIds可以直接传数组了