root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

REVIEW 用户管理（分配用户角色）

Browse Source
This commit is contained in:
YunaiV 2023-03-31 13:40:57 +08:00
parent 643b387367
commit 7d84f86081
5 changed files with 157 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/system/permission/index.ts
View File

@ -32,11 +32,11 @@ export const assignRoleDataScopeApi = async (data: PermissionAssignRoleDataScope
}
// 查询用户拥有的角色数组
export const listUserRolesApi = async (userId: number) => {
export const getUserRoleList = async (userId: number) => {
return await request.get({ url: '/system/permission/list-user-roles?userId=' + userId })
}
// 赋予用户角色
export const assignUserRoleApi = async (data: PermissionAssignUserRoleReqVO) => {
export const assignUserRole = async (data: PermissionAssignUserRoleReqVO) => {
return await request.post({ url: '/system/permission/assign-user-role', data })
}

4
src/api/system/user/index.ts
View File

@ -53,7 +53,7 @@ export const importUserTemplateApi = () => {
}
// 用户密码重置
export const resetUserPwdApi = (id: number, password: string) => {
export const resetUserPwd = (id: number, password: string) => {
const data = {
id,
password
@ -62,7 +62,7 @@ export const resetUserPwdApi = (id: number, password: string) => {
}
// 用户状态修改
export const updateUserStatusApi = (id: number, status: number) => {
export const updateUserStatus = (id: number, status: number) => {
const data = {
id,
status

93
src/views/system/user/UserAssignRoleForm.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<Dialog title="分配角色" v-model="modelVisible">
<el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
<el-form-item label="用户名称">
<el-input v-model="formData.username" :disabled="true" />
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="formData.nickname" :disabled="true" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as PermissionApi from '@/api/system/permission'
import * as UserApi from '@/api/system/user'
import * as RoleApi from '@/api/system/role'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
id: undefined,
nickname: '',
username: '',
roleIds: []
})
const formRef = ref() // 表单 Ref
const roleList = ref([]) // 角色的列表
/** 打开弹窗 */
const open = async (row: UserApi.UserVO) => {
modelVisible.value = true
resetForm()
// 设置数据
formData.value.id = row.id
formData.value.username = row.username
formData.value.nickname = row.nickname
// 获得角色拥有的菜单集合
formLoading.value = true
try {
formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
} finally {
formLoading.value = false
}
// 获得角色列表
roleList.value = await RoleApi.getSimpleRoleList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
await PermissionApi.assignUserRole({
userId: formData.value.id,
roleIds: formData.value.roleIds
})
message.success(t('common.updateSuccess'))
modelVisible.value = false
// 发送操作成功的事件
emit('success', true)
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
nickname: '',
username: '',
roleIds: []
}
formRef.value?.resetFields()
}
</script>

108
src/views/system/user/components/UserAssignRoleForm.vue
View File

@ -1,108 +0,0 @@
<template>
<Dialog
title="分配角色"
:modelValue="showDialog"
width="500px"
append-to-body
@close="closeDialog"
>
<el-form :model="formData" label-width="80px" ref="formRef">
<el-form-item label="用户名称">
<el-input v-model="formData.username" :disabled="true" />
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="formData.nickname" :disabled="true" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submit">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import {
assignUserRoleApi,
listUserRolesApi,
PermissionAssignUserRoleReqVO
} from '@/api/system/permission'
import { UserVO } from '@/api/system/user'
import * as RoleApi from '@/api/system/role'
const emits = defineEmits(['success'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 表单初始化参数
const initParams = {
nickname: '',
id: 0,
username: '',
roleIds: [] as number[]
}
const formData = ref<Recordable>({ ...initParams })
/* 弹框按钮操作 */
// 点击取消
const cancel = () => {
closeDialog()
}
// 关闭弹窗
const closeDialog = () => {
showDialog.value = false
}
// 提交
const submit = async () => {
const data = ref<PermissionAssignUserRoleReqVO>({
userId: formData.value.id,
roleIds: formData.value.roleIds
})
try {
await assignUserRoleApi(data.value)
message.success(t('common.updateSuccess'))
emits('success', true)
closeDialog()
} catch (error) {
console.error(error)
}
}
const roleOptions = ref()
const userRole = reactive(initParams)
const showDialog = ref(false)
const formRef = ref()
const openForm = async (row: UserVO) => {
formRef.value?.resetFields()
userRole.id = row.id
userRole.username = row.username
userRole.nickname = row.nickname
// 获得角色列表
const roleOpt = await RoleApi.getSimpleRoleList()
roleOptions.value = [...roleOpt]
// 获得角色拥有的菜单集合
const roles = await listUserRolesApi(row.id)
userRole.roleIds = roles
formData.value = { ...userRole }
showDialog.value = true
}
defineExpose({
openForm
})
</script>

123
src/views/system/user/index.vue
View File

@ -193,13 +193,10 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants'
import { resetUserPwdApi, updateUserStatusApi, UserVO } from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import UserForm from './components/UserForm.vue'
import UserImportForm from './components/UserImportForm.vue'
import UserAssignRoleForm from './components/UserAssignRoleForm.vue'
import UserAssignRoleForm from './UserAssignRoleForm.vue'
import DeptTree from './DeptTree.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
@ -260,54 +257,21 @@ const handleImport = () => {
importFormRef.value?.openForm()
}
// 操作分发
const handleCommand = (command: string, index: number, row: UserApi.UserVO) => {
console.log(index)
switch (command) {
case 'handleDelete':
handleDelete(row.id)
break
case 'handleResetPwd':
handleResetPwd(row)
break
case 'handleRole':
handleRole(row)
break
default:
break
}
}
// 用户状态修改
const handleStatusChange = (row: UserVO) => {
let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
message
.confirm('确认要"' + text + '""' + row.username + '"用户吗?', t('common.reminder'))
.then(async () => {
row.status =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.ENABLE : CommonStatusEnum.DISABLE
await updateUserStatusApi(row.id, row.status)
message.success(text + '成功')
// 刷新列表
getList()
})
.catch(() => {
row.status =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
})
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
/** 修改用户状态 */
const handleStatusChange = async (row: UserApi.UserVO) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await UserApi.deleteUser(id)
message.success(t('common.delSuccess'))
// 修改状态的二次确认
const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
// 发起修改状态
await UserApi.updateUserStatus(row.id, row.status)
// 刷新列表
await getList()
} catch {}
} catch {
// 取消后，进行恢复按钮
row.status =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
}
}
/** 导出按钮操作 */
@ -326,23 +290,56 @@ const handleExport = async () => {
}
}
// 重置密码
const handleResetPwd = (row: UserVO) => {
message
.prompt('请输入"' + row.username + '"的新密码', t('common.reminder'))
.then(async ({ value }) => {
await resetUserPwdApi(row.id, value)
message.success('修改成功，新密码是：' + value)
})
.catch((e) => {
console.error(e)
})
/** 操作分发 */
const handleCommand = (command: string, index: number, row: UserApi.UserVO) => {
console.log(index)
switch (command) {
case 'handleDelete':
handleDelete(row.id)
break
case 'handleResetPwd':
handleResetPwd(row)
break
case 'handleRole':
handleRole(row)
break
default:
break
}
}
// 分配角色
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await UserApi.deleteUser(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 重置密码 */
const handleResetPwd = async (row: UserApi.UserVO) => {
try {
// 重置的二次确认
const result = await message.prompt(
'请输入"' + row.username + '"的新密码',
t('common.reminder')
)
const password = result.value
// 发起重置
await UserApi.resetUserPwd(row.id, password)
message.success('修改成功，新密码是：' + password)
} catch {}
}
/** 分配角色 */
const assignRoleFormRef = ref()
const handleRole = (row: UserVO) => {
assignRoleFormRef.value?.openForm(row)
const handleRole = (row: UserApi.UserVO) => {
assignRoleFormRef.value.open(row)
}
/** 初始化 */