yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/66/MERGE
YunaiV 2025-04-04 10:44:40 +08:00
parent 4870bff2a0
commit 8fa52f0d30
8 changed files with 389 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/api/system/role/index.ts
View File

@ -22,7 +22,7 @@ export function getRolePage(params: PageParam) {
}
/** 查询角色（精简)列表 */
export function getSimpleRoleList(): Promise<SystemRoleApi.SystemRole[]> {
export function getSimpleRoleList() {
return requestClient.get<SystemRoleApi.SystemRole[]>('/system/role/simple-list');
}

17
apps/web-antd/src/api/system/user/index.ts
View File

@ -1,4 +1,4 @@
import type { PageParam } from '@vben/request';
import type {PageParam, PageResult} from '@vben/request';
import { requestClient } from '#/api/request';
@ -23,17 +23,12 @@ export namespace SystemUserApi {
/** 查询用户管理列表 */
export function getUserPage(params: PageParam) {
return requestClient.get('/system/user/page', { params });
}
/** 查询所有用户列表 */
export function getAllUser() {
return requestClient.get('/system/user/all');
return requestClient.get<PageResult<SystemUserApi.SystemUser>>('/system/user/page', { params });
}
/** 查询用户详情 */
export function getUser(id: number) {
return requestClient.get(`/system/user/get?id=${id}`);
return requestClient.get<SystemUserApi.SystemUser>(`/system/user/get?id=${id}`);
}
/** 新增用户 */
@ -62,7 +57,7 @@ export function importUserTemplate() {
}
/** 用户密码重置 */
export function resetUserPwd(id: number, password: string) {
export function resetUserPassword(id: number, password: string) {
return requestClient.put('/system/user/update-password', { id, password });
}
@ -72,6 +67,6 @@ export function updateUserStatus(id: number, status: number) {
}
/** 获取用户精简信息列表 */
export function getSimpleUserList(): Promise<SystemUserApi.SystemUser[]> {
return requestClient.get('/system/user/simple-list');
export function getSimpleUserList() {
return requestClient.get<SystemUserApi.SystemUser[]>('/system/user/simple-list');
}

16
apps/web-antd/src/utils/dict.ts
View File

@ -8,8 +8,21 @@ import { useDictStore } from '#/store';
const dictStore = useDictStore();
/**
* 获取字典标签
*
* @param dictType 字典类型
* @param value 字典值
* @returns 字典标签
*/
function getDictLabel(dictType: string, value: any) {
const dictObj = dictStore.getDictData(dictType, value);
return isObject(dictObj)? dictObj.label : '';
}
/**
* 获取字典对象
*
* @param dictType 字典类型
* @param value 字典值
* @returns 字典对象
@ -21,6 +34,7 @@ function getDictObj(dictType: string, value: any) {
/**
* 获取字典数组 用于select radio 等
*
* @param dictType 字典类型
* @returns 字典数组
*/
@ -191,4 +205,4 @@ enum DICT_TYPE {
TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
USER_TYPE = 'user_type',
}
export { DICT_TYPE, getDictObj, getDictOptions };
export { DICT_TYPE, getDictObj, getDictLabel, getDictOptions };

19
apps/web-antd/src/views/system/tenant/data.ts
View File

@ -22,6 +22,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '租户名称',
component: 'Input',
componentProps: {
placeholder: '请输入租户名称',
},
rules: 'required',
},
{
@ -41,17 +44,26 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'contactName',
label: '联系人',
component: 'Input',
componentProps: {
placeholder: '请输入联系人',
},
rules: 'required',
},
{
fieldName: 'contactMobile',
label: '联系手机',
component: 'Input',
componentProps: {
placeholder: '请输入联系手机',
},
},
{
label: '用户名称',
fieldName: 'username',
component: 'Input',
componentProps: {
placeholder: '请输入用户名称',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
@ -62,6 +74,9 @@ export function useFormSchema(): VbenFormSchema[] {
label: '用户密码',
fieldName: 'password',
component: 'InputPassword',
componentProps: {
placeholder: '请输入用户密码',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
@ -86,6 +101,7 @@ export function useFormSchema(): VbenFormSchema[] {
format: 'YYYY-MM-DD',
valueFormat: 'x',
class: 'w-full',
placeholder: '请选择过期时间',
},
rules: 'required',
},
@ -93,6 +109,9 @@ export function useFormSchema(): VbenFormSchema[] {
label: '绑定域名',
fieldName: 'website',
component: 'Input',
componentProps: {
placeholder: '请输入绑定域名',
},
rules: 'required',
},
{

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>