REVIEW 用户管理(分配用户角色)

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

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 }) 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 }) return await request.post({ url: '/system/permission/assign-user-role', data })
} }

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 = { const data = {
id, id,
password 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 = { const data = {
id, id,
status status

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) // 12
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>

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>

View File

@ -193,13 +193,10 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import { resetUserPwdApi, updateUserStatusApi, UserVO } from '@/api/system/user'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import UserForm from './components/UserForm.vue' import UserForm from './components/UserForm.vue'
import UserImportForm from './components/UserImportForm.vue' import UserImportForm from './components/UserImportForm.vue'
import UserAssignRoleForm from './components/UserAssignRoleForm.vue' import UserAssignRoleForm from './UserAssignRoleForm.vue'
import DeptTree from './DeptTree.vue' import DeptTree from './DeptTree.vue'
const message = useMessage() // const message = useMessage() //
const { t } = useI18n() // const { t } = useI18n() //
@ -260,54 +257,21 @@ const handleImport = () => {
importFormRef.value?.openForm() importFormRef.value?.openForm()
} }
// /** 修改用户状态 */
const handleCommand = (command: string, index: number, row: UserApi.UserVO) => { const handleStatusChange = async (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) => {
try { try {
// //
await message.delConfirm() const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
// await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
await UserApi.deleteUser(id) //
message.success(t('common.delSuccess')) await UserApi.updateUserStatus(row.id, row.status)
// //
await getList() 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) => { const handleCommand = (command: string, index: number, row: UserApi.UserVO) => {
message console.log(index)
.prompt('请输入"' + row.username + '"的新密码', t('common.reminder')) switch (command) {
.then(async ({ value }) => { case 'handleDelete':
await resetUserPwdApi(row.id, value) handleDelete(row.id)
message.success('修改成功,新密码是:' + value) break
}) case 'handleResetPwd':
.catch((e) => { handleResetPwd(row)
console.error(e) 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 assignRoleFormRef = ref()
const handleRole = (row: UserVO) => { const handleRole = (row: UserApi.UserVO) => {
assignRoleFormRef.value?.openForm(row) assignRoleFormRef.value.open(row)
} }
/** 初始化 */ /** 初始化 */