smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：增加 user 用户的分配角色、重置密码

Browse Source
This commit is contained in:
YunaiV
2025-04-04 10:44:40 +08:00
parent 4870bff2a0
commit 8fa52f0d30
8 changed files with 389 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
apps/web-antd/src/views/system/user/data.ts
View File

@@ -1,9 +1,14 @@
import { type VbenFormSchema, z } from '#/adapter/form';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemUserApi } from '#/api/system/user';
import { z } from '#/adapter/form';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum } from '#/utils/constants';
import { getDeptList } from '#/api/system/dept';
import { getSimplePostList } from '#/api/system/post';
import { getSimpleRoleList } from '#/api/system/role';
import { handleTree } from '#/utils/tree';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
@@ -18,15 +23,34 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
component: 'Input',
fieldName: 'username',
label: '用户名称',
component: 'Input',
componentProps: {
placeholder: '请输入用户名称',
},
rules: 'required',
},
{
component: 'Input',
label: '用户密码',
fieldName: 'password',
component: 'InputPassword',
componentProps: {
placeholder: '请输入用户密码',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
show: (values) => !values.id,
},
},
{
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
placeholder: '请输入用户昵称',
},
rules: 'required',
},
{
@@ -34,37 +58,47 @@ export function useFormSchema(): VbenFormSchema[] {
label: '归属部门',
component: 'ApiTreeSelect',
componentProps: {
api: () => Promise.resolve([]),
fieldNames: {
label: 'name',
key: 'id',
value: 'id',
api: async () => {
const data = await getDeptList();
return handleTree(data);
},
class: 'w-full',
labelField: 'name',
valueField: 'id',
childrenField: 'children',
placeholder: '请选择归属部门',
treeDefaultExpandAll: true,
},
rules: 'required',
},
{
fieldName: 'postIds',
label: '岗位',
component: 'ApiSelect',
componentProps: {
api: () => Promise.resolve([]),
api: getSimplePostList,
class: 'w-full',
labelField: 'name',
valueField: 'id',
mode: 'multiple',
placeholder: '请选择岗位',
},
rules: 'required',
},
{
fieldName: 'email',
label: '邮箱',
component: 'Input',
componentProps: {
placeholder: '请输入邮箱',
},
rules: z.string().email('邮箱格式不正确').optional(),
},
{
fieldName: 'mobile',
label: '手机号码',
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
}
},
{
fieldName: 'sex',
@@ -92,10 +126,99 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
];
}
/** 重置密码的表单 */
export function useResetPasswordFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'newPassword',
label: '新密码',
component: 'InputPassword',
componentProps: {
placeholder: '请输入新密码',
},
rules: 'required',
},
{
fieldName: 'confirmPassword',
label: '确认密码',
component: 'InputPassword',
componentProps: {
placeholder: '请再次输入新密码',
},
dependencies: {
rules(values: Record<string, any>) {
const { newPassword } = values;
return z
.string()
.nonempty('确认密码不能为空')
.refine((value) => value === newPassword, '两次输入的密码不一致');
},
triggerFields: ['newPassword'],
},
},
]
}
/** 分配角色的表单 */
export function useAssignRoleFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'username',
label: '用户名称',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
fieldName: 'roleIds',
label: '角色',
component: 'ApiSelect',
componentProps: {
api: getSimpleRoleList,
class: 'w-full',
labelField: 'name',
valueField: 'id',
mode: 'multiple',
placeholder: '请选择角色',
},
},
]
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@@ -117,16 +240,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
placeholder: '请输入用户状态',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
{
fieldName: 'createTime',
label: '创建时间',
@@ -144,6 +257,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns<T = SystemUserApi.SystemUser>(
onActionClick: OnActionClickFn<T>,
onStatusChange?: (newStatus: number, row: T) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
return [
{
@@ -171,17 +285,17 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
title: '手机号码',
minWidth: 120,
},
// TODO @芋艿：switch 的接入
{
field: 'status',
title: '状态',
minWidth: 100,
align: 'center',
cellRender: {
attrs: { beforeChange: onStatusChange },
name: 'CellSwitch',
props: {
activeValue: 0,
inactiveValue: 1
checkedValue: CommonStatusEnum.ENABLE,
unCheckedValue: CommonStatusEnum.DISABLE,
},
},
},
@@ -199,22 +313,23 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
align: 'center',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '角色',
nameField: 'username',
nameTitle: '用户',
onClick: onActionClick,
},
name: 'CellOperation',
// TODO @芋艿：后续把 delete、assign-role、reset-password 搞成“更多”
options: [
'edit', // 默认的编辑按钮
'delete', // 默认的删除按钮
{
code: 'assign-data-permission',
text: '数据权限',
code: 'assign-role',
text: '分配角色',
},
{
code: 'assign-menu',
text: '菜单权限',
}
code: 'reset-password',
text: '重置密码',
},
],
},
},

76
apps/web-antd/src/views/system/user/index.vue
View File

@@ -1,26 +1,37 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemUserApi } from '#/api/system/user';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message, Modal } from 'ant-design-vue';
import { Plus, Download } from '@vben/icons';
import Form from './modules/form.vue';
import ResetPasswordForm from './modules/reset-password-form.vue';
import AssignRoleForm from './modules/assign-role-form.vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserPage, deleteUser, exportUser } from '#/api/system/user';
import { useGridColumns, useGridFormSchema } from './data';
import { getUserPage, deleteUser, exportUser, updateUserStatus } from '#/api/system/user';
import { downloadByData } from '#/utils/download';
import { DICT_TYPE, getDictLabel } from '#/utils/dict';
import { useGridColumns, useGridFormSchema } from './data';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [ResetPasswordModal, resetPasswordModalApi] = useVbenModal({
connectedComponent: ResetPasswordForm,
destroyOnClose: true,
});
const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
connectedComponent: AssignRoleForm,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
@@ -61,6 +72,45 @@ async function onDelete(row: SystemUserApi.SystemUser) {
}
}
/** 重置密码 */
function onResetPassword(row: SystemUserApi.SystemUser) {
resetPasswordModalApi.setData(row).open();
}
/** 分配角色 */
function onAssignRole(row: SystemUserApi.SystemUser) {
assignRoleModalApi.setData(row).open();
}
// TODO @芋艿：后续怎么简化一下 confirm 的实现。
/** 更新用户状态 */
async function onStatusChange(newStatus: number, row: SystemUserApi.SystemUser): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
Modal.confirm({
title: '切换状态',
content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
onCancel() {
reject(new Error('已取消'));
},
onOk() {
// 更新用户状态
updateUserStatus(row.id as number, newStatus)
.then(() => {
// 提示并返回成功
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
resolve(true);
})
.catch((error) => {
reject(error);
});
},
});
});
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
@@ -75,6 +125,14 @@ function onActionClick({
onDelete(row);
break;
}
case 'reset-password': {
onResetPassword(row);
break;
}
case 'assign-role': {
onAssignRole(row);
break;
}
}
}
@@ -83,7 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(onActionClick, onStatusChange),
height: 'auto',
keepSource: true,
proxyConfig: {
@@ -111,6 +169,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<ResetPasswordModal @success="onRefresh" />
<AssignRoleModal @success="onRefresh" />
<Grid table-title="用户列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate">

73
apps/web-antd/src/views/system/user/modules/assign-role-form.vue Normal file
View File

@@ -0,0 +1,73 @@
<script lang="ts" setup>
import type { SystemUserApi } from '#/api/system/user';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { getUserRoleList, assignUserRole } from '#/api/system/permission';
import { useAssignRoleFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useAssignRoleFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const values = await formApi.getValues();
try {
await assignUserRole({
userId: values.id,
roleIds: values.roleIds,
});
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemUserApi.SystemUser>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
const roleIds = await getUserRoleList(data.id as number);
// 设置到 values
await formApi.setValues({
...data,
roleIds,
});
} finally {
modalApi.lock(false);
}
},
});
</script>
<template>
<Modal title="分配角色">
<Form class="mx-4" />
</Modal>
</template>

61
apps/web-antd/src/views/system/user/modules/reset-password-form.vue Normal file
View File

@@ -0,0 +1,61 @@
<script lang="ts" setup>
import type { SystemUserApi } from '#/api/system/user';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { resetUserPassword } from '#/api/system/user';
import { useResetPasswordFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useResetPasswordFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = await formApi.getValues();
try {
await resetUserPassword(data.id, data.newPassword);
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemUserApi.SystemUser>();
if (!data || !data.id) {
return;
}
// 设置到 values
await formApi.setValues(data);
},
});
</script>
<template>
<Modal title="重置密码">
<Form class="mx-4" />
</Modal>
</template>