| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <Dialog v-model="dialogVisible" title="分配角色"> |
| 3 | <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px"> | |
| 4 | <el-form-item label="用户名称"> | |
| 5 | <el-input v-model="formData.username" :disabled="true" /> | |
| 6 | </el-form-item> | |
| 7 | <el-form-item label="用户昵称"> | |
| 8 | <el-input v-model="formData.nickname" :disabled="true" /> | |
| 9 | </el-form-item> | |
| 10 | <el-form-item label="角色"> | |
| 11 | <el-select v-model="formData.roleIds" multiple placeholder="请选择角色"> | |
| 12 | <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" /> | |
| 13 | </el-select> | |
| 14 | </el-form-item> | |
| 15 | </el-form> | |
| 16 | <template #footer> | |
| 17 | <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> | |
| 18 | <el-button @click="dialogVisible = false">取 消</el-button> | |
| 19 | </template> | |
| 20 | </Dialog> | |
| 21 | </template> | |
| 22 | <script lang="ts" setup> | |
| 23 | import * as PermissionApi from '@/api/system/permission' | |
| 24 | import * as UserApi from '@/api/system/user' | |
| 25 | import * as RoleApi from '@/api/system/role' | |
| 26 | ||
| 27 | defineOptions({ name: 'SystemUserAssignRoleForm' }) | |
| 28 | ||
| 29 | const { t } = useI18n() // 国际化 | |
| 30 | const message = useMessage() // 消息弹窗 | |
| 31 | ||
| 32 | const dialogVisible = ref(false) // 弹窗的是否展示 | |
| 33 | const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 | |
| 34 | const formData = ref({ | |
| 35 | id: -1, | |
| 36 | nickname: '', | |
| 37 | username: '', | |
| 38 | roleIds: [] | |
| 39 | }) | |
| 40 | const formRef = ref() // 表单 Ref | |
| 41 | const roleList = ref([] as RoleApi.RoleVO[]) // 角色的列表 | |
| 42 | ||
| 43 | /** 打开弹窗 */ | |
| 44 | const open = async (row: UserApi.UserVO) => { | |
| 45 | dialogVisible.value = true | |
| 46 | resetForm() | |
| 47 | // 设置数据 | |
| 48 | formData.value.id = row.id | |
| 49 | formData.value.username = row.username | |
| 50 | formData.value.nickname = row.nickname | |
| 51 | // 获得角色拥有的菜单集合 | |
| 52 | formLoading.value = true | |
| 53 | try { | |
| 54 | formData.value.roleIds = await PermissionApi.getUserRoleList(row.id) | |
| 55 | } finally { | |
| 56 | formLoading.value = false | |
| 57 | } | |
| 58 | // 获得角色列表 | |
| 59 | roleList.value = await RoleApi.getSimpleRoleList() | |
| 60 | } | |
| 61 | defineExpose({ open }) // 提供 open 方法，用于打开弹窗 | |
| 62 | ||
| 63 | /** 提交表单 */ | |
| 64 | const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 | |
| 65 | const submitForm = async () => { | |
| 66 | // 校验表单 | |
| 67 | if (!formRef) return | |
| 68 | const valid = await formRef.value.validate() | |
| 69 | if (!valid) return | |
| 70 | // 提交请求 | |
| 71 | formLoading.value = true | |
| 72 | try { | |
| 73 | await PermissionApi.assignUserRole({ | |
| 74 | userId: formData.value.id, | |
| 75 | roleIds: formData.value.roleIds | |
| 76 | }) | |
| 77 | message.success(t('common.updateSuccess')) | |
| 78 | dialogVisible.value = false | |
| 79 | // 发送操作成功的事件 | |
| 80 | emit('success', true) | |
| 81 | } finally { | |
| 82 | formLoading.value = false | |
| 83 | } | |
| 84 | } | |
| 85 | ||
| 86 | /** 重置表单 */ | |
| 87 | const resetForm = () => { | |
| 88 | formData.value = { | |
| 89 | id: -1, | |
| 90 | nickname: '', | |
| 91 | username: '', | |
| 92 | roleIds: [] | |
| 93 | } | |
| 94 | formRef.value?.resetFields() | |
| 95 | } | |
| 96 | </script> | |
