From 7d84f860819d66290ca8d0156e370f0690aba698 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 31 Mar 2023 13:40:57 +0800
Subject: [PATCH] =?UTF-8?q?REVIEW=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
=?UTF-8?q?=EF=BC=88=E5=88=86=E9=85=8D=E7=94=A8=E6=88=B7=E8=A7=92=E8=89=B2?=
=?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/system/permission/index.ts | 4 +-
src/api/system/user/index.ts | 4 +-
src/views/system/user/UserAssignRoleForm.vue | 93 +++++++++++++
.../user/components/UserAssignRoleForm.vue | 108 ---------------
src/views/system/user/index.vue | 123 +++++++++---------
5 files changed, 157 insertions(+), 175 deletions(-)
create mode 100644 src/views/system/user/UserAssignRoleForm.vue
delete mode 100644 src/views/system/user/components/UserAssignRoleForm.vue
diff --git a/src/api/system/permission/index.ts b/src/api/system/permission/index.ts
index c529f884..6e2adcdf 100644
--- a/src/api/system/permission/index.ts
+++ b/src/api/system/permission/index.ts
@@ -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 })
}
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index 3ae4928c..90b07fe5 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -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
diff --git a/src/views/system/user/UserAssignRoleForm.vue b/src/views/system/user/UserAssignRoleForm.vue
new file mode 100644
index 00000000..2dc04e52
--- /dev/null
+++ b/src/views/system/user/UserAssignRoleForm.vue
@@ -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>
diff --git a/src/views/system/user/components/UserAssignRoleForm.vue b/src/views/system/user/components/UserAssignRoleForm.vue
deleted file mode 100644
index bbf37739..00000000
--- a/src/views/system/user/components/UserAssignRoleForm.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index cdd47436..e57a62b4 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -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)
}
/** 初始化 */