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

reactor：【system 系统管理】user 进一步统一代码风格

pull/210/head
YunaiV 2025-09-08 09:52:43 +08:00
parent 74ffefb09f
commit 28df31cc37
6 changed files with 123 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import type { SystemUserApi } from '#/api/system/user';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
import { $t } from '@vben/locales';
import { handleTree } from '@vben/utils'; import { handleTree } from '@vben/utils';
import { z } from '#/adapter/form'; import { z } from '#/adapter/form';
@ -45,6 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Input', component: 'Input',
rules: 'required', rules: 'required',
}, },
// TODO @xingyu：【重要】这个字段出不来
{ {
fieldName: 'deptId', fieldName: 'deptId',
label: '归属部门', label: '归属部门',
@ -126,31 +128,50 @@ export function useResetPasswordFormSchema(): VbenFormSchema[] {
}, },
}, },
{ {
fieldName: 'newPassword', component: 'VbenInputPassword',
label: '新密码',
component: 'InputPassword',
componentProps: { componentProps: {
passwordStrength: true,
placeholder: '请输入新密码', placeholder: '请输入新密码',
}, },
dependencies: {
rules(values) {
return z
.string({ message: '请输入新密码' })
.min(5, '密码长度不能少于 5 个字符')
.max(20, '密码长度不能超过 20 个字符')
.refine(
(value) => value !== values.oldPassword,
'新旧密码不能相同',
);
},
triggerFields: ['newPassword', 'oldPassword'],
},
fieldName: 'newPassword',
label: '新密码',
rules: 'required', rules: 'required',
}, },
{ {
fieldName: 'confirmPassword', component: 'VbenInputPassword',
label: '确认密码',
component: 'InputPassword',
componentProps: { componentProps: {
placeholder: '请再次输入新密码', passwordStrength: true,
placeholder: $t('authentication.confirmPassword'),
}, },
dependencies: { dependencies: {
rules(values: Record<string, any>) { rules(values) {
const { newPassword } = values;
return z return z
.string() .string({ message: '请输入确认密码' })
.nonempty('确认密码不能为空') .min(5, '密码长度不能少于 5 个字符')
.refine((value) => value === newPassword, '两次输入的密码不一致'); .max(20, '密码长度不能超过 20 个字符')
.refine(
(value) => value === values.newPassword,
'新密码和确认密码不一致',
);
}, },
triggerFields: ['newPassword'], triggerFields: ['newPassword', 'confirmPassword'],
}, },
fieldName: 'confirmPassword',
label: '确认密码',
rules: 'required',
}, },
]; ];
} }
@ -207,6 +228,7 @@ export function useImportFormSchema(): VbenFormSchema[] {
rules: 'required', rules: 'required',
help: '仅允许导入 xls、xlsx 格式文件', help: '仅允许导入 xls、xlsx 格式文件',
}, },
// TODO @xingyu：【重要】看不到 switch 这个按钮
{ {
fieldName: 'updateSupport', fieldName: 'updateSupport',
label: '是否覆盖', label: '是否覆盖',
@ -266,26 +288,32 @@ export function useGridColumns<T = SystemUserApi.User>(
{ {
field: 'id', field: 'id',
title: '用户编号', title: '用户编号',
minWidth: 100,
}, },
{ {
field: 'username', field: 'username',
title: '用户名称', title: '用户名称',
minWidth: 120,
}, },
{ {
field: 'nickname', field: 'nickname',
title: '用户昵称', title: '用户昵称',
minWidth: 120,
}, },
{ {
field: 'deptName', field: 'deptName',
title: '部门', title: '部门',
minWidth: 120,
}, },
{ {
field: 'mobile', field: 'mobile',
title: '手机号码', title: '手机号码',
minWidth: 120,
}, },
{ {
field: 'status', field: 'status',
title: '状态', title: '状态',
minWidth: 100,
align: 'center', align: 'center',
cellRender: { cellRender: {
attrs: { beforeChange: onStatusChange }, attrs: { beforeChange: onStatusChange },
@ -299,6 +327,7 @@ export function useGridColumns<T = SystemUserApi.User>(
{ {
field: 'createTime', field: 'createTime',
title: '创建时间', title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {

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

@ -50,7 +50,7 @@ const [ImportModal, importModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
@ -62,10 +62,9 @@ async function handleExport() {
/** 选择部门 */ /** 选择部门 */
const searchDeptId = ref<number | undefined>(undefined); const searchDeptId = ref<number | undefined>(undefined);
async function handleDeptSelect(dept: SystemDeptApi.Dept) { async function handleDeptSelect(dept: SystemDeptApi.Dept) {
searchDeptId.value = dept.id; searchDeptId.value = dept.id;
onRefresh(); handleRefresh();
} }
/** 创建用户 */ /** 创建用户 */
@ -87,15 +86,29 @@ function handleEdit(row: SystemUserApi.User) {
async function handleDelete(row: SystemUserApi.User) { async function handleDelete(row: SystemUserApi.User) {
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.username]), content: $t('ui.actionMessage.deleting', [row.username]),
key: 'action_key_msg', duration: 0,
}); });
try { try {
await deleteUser(row.id as number); await deleteUser(row.id as number);
message.success({ message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
content: $t('ui.actionMessage.deleteSuccess', [row.username]), handleRefresh();
key: 'action_key_msg', } finally {
}); hideLoading();
onRefresh(); }
}
/** 批量删除用户 */
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const hideLoading = message.loading({
content: $t('ui.actionMessage.deletingBatch'),
duration: 0,
});
try {
await deleteUserList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
@ -110,23 +123,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!); checkedIds.value = records.map((item) => item.id!);
} }
/** 批量删除用户 */
async function handleDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteUserList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
/** 重置密码 */ /** 重置密码 */
function handleResetPassword(row: SystemUserApi.User) { function handleResetPassword(row: SystemUserApi.User) {
resetPasswordModalApi.setData(row).open(); resetPasswordModalApi.setData(row).open();
@ -210,10 +206,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
/> />
</template> </template>
<FormModal @success="onRefresh" /> <FormModal @success="handleRefresh" />
<ResetPasswordModal @success="onRefresh" /> <ResetPasswordModal @success="handleRefresh" />
<AssignRoleModal @success="onRefresh" /> <AssignRoleModal @success="handleRefresh" />
<ImportModal @success="onRefresh" /> <ImportModal @success="handleRefresh" />
<div class="flex h-full w-full"> <div class="flex h-full w-full">
<!-- 左侧部门树 --> <!-- 左侧部门树 -->
@ -248,11 +244,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
onClick: handleImport, onClick: handleImport,
}, },
{ {
label: '批量删除', label: $t('ui.actionTitle.deleteBatch'),
type: 'primary', type: 'primary',
danger: true, danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
auth: ['system:user:delete'], auth: ['system:user:delete'],
onClick: handleDeleteBatch, onClick: handleDeleteBatch,
}, },

3
apps/web-antd/src/views/system/user/modules/form.vue
View File

@ -26,8 +26,9 @@ const [Form, formApi] = useVbenForm({
componentProps: { componentProps: {
class: 'w-full', class: 'w-full',
}, },
formItemClass: 'col-span-2',
labelWidth: 80,
}, },
wrapperClass: 'grid-cols-2',
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema(), schema: useFormSchema(),
showDefaultActions: false, showDefaultActions: false,

5
apps/web-ele/src/views/system/user/data.ts
View File

@ -282,10 +282,7 @@ export function useGridColumns<T = SystemUserApi.User>(
) => PromiseLike<boolean | undefined>, ) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] { ): VxeTableGridOptions['columns'] {
return [ return [
{ { type: 'checkbox', width: 40 },
type: 'checkbox',
width: 40,
},
{ {
field: 'id', field: 'id',
title: '用户编号', title: '用户编号',

83
apps/web-ele/src/views/system/user/index.vue
View File

@ -50,59 +50,66 @@ const [ImportModal, importModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
/** 导出表格 */ /** 导出表格 */
async function onExport() { async function handleExport() {
const data = await exportUser(await gridApi.formApi.getValues()); const data = await exportUser(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '用户.xls', source: data }); downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
} }
/** 选择部门 */ /** 选择部门 */
const searchDeptId = ref<number | undefined>(undefined); const searchDeptId = ref<number | undefined>(undefined);
async function onDeptSelect(dept: SystemDeptApi.Dept) { async function handleDeptSelect(dept: SystemDeptApi.Dept) {
searchDeptId.value = dept.id; searchDeptId.value = dept.id;
onRefresh(); handleRefresh();
} }
/** 创建用户 */ /** 创建用户 */
function onCreate() { function handleCreate() {
formModalApi.setData(null).open(); formModalApi.setData(null).open();
} }
/** 导入用户 */ /** 导入用户 */
function onImport() { function handleImport() {
importModalApi.open(); importModalApi.open();
} }
/** 编辑用户 */ /** 编辑用户 */
function onEdit(row: SystemUserApi.User) { function handleEdit(row: SystemUserApi.User) {
formModalApi.setData(row).open(); formModalApi.setData(row).open();
} }
/** 删除用户 */ /** 删除用户 */
async function onDelete(row: SystemUserApi.User) { async function handleDelete(row: SystemUserApi.User) {
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.username]), text: $t('ui.actionMessage.deleting', [row.username]),
}); });
try { try {
await deleteUser(row.id as number); await deleteUser(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username])); ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
onRefresh(); handleRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
} }
/** 批量删除用户 */ /** 批量删除用户 */
async function onDeleteBatch() { async function handleDeleteBatch() {
await confirm('确定要批量删除该用户吗？'); await confirm($t('ui.actionMessage.deleteBatchConfirm'));
await deleteUserList(checkedIds.value); const loadingInstance = ElLoading.service({
checkedIds.value = []; text: $t('ui.actionMessage.deletingBatch'),
ElMessage.success($t('ui.actionMessage.deleteSuccess')); });
onRefresh(); try {
await deleteUserList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
loadingInstance.close();
}
} }
const checkedIds = ref<number[]>([]); const checkedIds = ref<number[]>([]);
@ -115,17 +122,17 @@ function handleRowCheckboxChange({
} }
/** 重置密码 */ /** 重置密码 */
function onResetPassword(row: SystemUserApi.User) { function handleResetPassword(row: SystemUserApi.User) {
resetPasswordModalApi.setData(row).open(); resetPasswordModalApi.setData(row).open();
} }
/** 分配角色 */ /** 分配角色 */
function onAssignRole(row: SystemUserApi.User) { function handleAssignRole(row: SystemUserApi.User) {
assignRoleModalApi.setData(row).open(); assignRoleModalApi.setData(row).open();
} }
/** 更新用户状态 */ /** 更新用户状态 */
async function onStatusChange( async function handleStatusChange(
newStatus: number, newStatus: number,
row: SystemUserApi.User, row: SystemUserApi.User,
): Promise<boolean | undefined> { ): Promise<boolean | undefined> {
@ -155,7 +162,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(), schema: useGridFormSchema(),
}, },
gridOptions: { gridOptions: {
columns: useGridColumns(onStatusChange), columns: useGridColumns(handleStatusChange),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -172,6 +179,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
toolbarConfig: { toolbarConfig: {
refresh: true, refresh: true,
@ -196,15 +204,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
/> />
</template> </template>
<FormModal @success="onRefresh" /> <FormModal @success="handleRefresh" />
<ResetPasswordModal @success="onRefresh" /> <ResetPasswordModal @success="handleRefresh" />
<AssignRoleModal @success="onRefresh" /> <AssignRoleModal @success="handleRefresh" />
<ImportModal @success="onRefresh" /> <ImportModal @success="handleRefresh" />
<div class="flex h-full w-full"> <div class="flex h-full w-full">
<!-- 左侧部门树 --> <!-- 左侧部门树 -->
<div class="h-full w-1/6 pr-4"> <div class="h-full w-1/6 pr-4">
<DeptTree @select="onDeptSelect" /> <DeptTree @select="handleDeptSelect" />
</div> </div>
<!-- 右侧用户列表 --> <!-- 右侧用户列表 -->
<div class="w-5/6"> <div class="w-5/6">
@ -217,21 +225,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
type: 'primary', type: 'primary',
icon: ACTION_ICON.ADD, icon: ACTION_ICON.ADD,
auth: ['system:user:create'], auth: ['system:user:create'],
onClick: onCreate, onClick: handleCreate,
}, },
{ {
label: $t('ui.actionTitle.export'), label: $t('ui.actionTitle.export'),
type: 'primary', type: 'primary',
icon: ACTION_ICON.DOWNLOAD, icon: ACTION_ICON.DOWNLOAD,
auth: ['system:user:export'], auth: ['system:user:export'],
onClick: onExport, onClick: handleExport,
}, },
{ {
label: $t('ui.actionTitle.import', ['用户']), label: $t('ui.actionTitle.import', ['用户']),
type: 'primary', type: 'primary',
icon: ACTION_ICON.UPLOAD, icon: ACTION_ICON.UPLOAD,
auth: ['system:user:import'], auth: ['system:user:import'],
onClick: onImport, onClick: handleImport,
}, },
{ {
label: $t('ui.actionTitle.deleteBatch'), label: $t('ui.actionTitle.deleteBatch'),
@ -239,7 +247,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds), disabled: isEmpty(checkedIds),
auth: ['system:user:delete'], auth: ['system:user:delete'],
onClick: onDeleteBatch, onClick: handleDeleteBatch,
}, },
]" ]"
/> />
@ -249,35 +257,38 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[ :actions="[
{ {
label: $t('common.edit'), label: $t('common.edit'),
type: 'text', type: 'primary',
link: true,
icon: ACTION_ICON.EDIT, icon: ACTION_ICON.EDIT,
auth: ['system:user:update'], auth: ['system:user:update'],
onClick: onEdit.bind(null, row), onClick: handleEdit.bind(null, row),
}, },
{ {
label: $t('common.delete'), label: $t('common.delete'),
type: 'danger', type: 'danger',
text: true, link: true,
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['system:user:delete'], auth: ['system:user:delete'],
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.username]), title: $t('ui.actionMessage.deleteConfirm', [row.username]),
confirm: onDelete.bind(null, row), confirm: handleDelete.bind(null, row),
}, },
}, },
]" ]"
:drop-down-actions="[ :drop-down-actions="[
{ {
label: '分配角色', label: '分配角色',
type: 'text', type: 'primary',
link: true,
auth: ['system:permission:assign-user-role'], auth: ['system:permission:assign-user-role'],
onClick: onAssignRole.bind(null, row), onClick: handleAssignRole.bind(null, row),
}, },
{ {
label: '重置密码', label: '重置密码',
type: 'text', type: 'primary',
link: true,
auth: ['system:user:update-password'], auth: ['system:user:update-password'],
onClick: onResetPassword.bind(null, row), onClick: handleResetPassword.bind(null, row),
}, },
]" ]"
/> />

9
apps/web-ele/src/views/system/user/modules/import-form.vue
View File

@ -16,11 +16,8 @@ const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
commonConfig: { commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 80, labelWidth: 120,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useImportFormSchema(), schema: useImportFormSchema(),
@ -55,7 +52,7 @@ function beforeUpload(file: UploadRawFile) {
} }
/** 下载模版 */ /** 下载模版 */
async function onDownload() { async function handleDownload() {
const data = await importUserTemplate(); const data = await importUserTemplate();
downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data }); downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data });
} }
@ -79,7 +76,7 @@ async function onDownload() {
</Form> </Form>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center"> <div class="flex flex-auto items-center">
<ElButton @click="onDownload"> 下载导入模板 </ElButton> <ElButton @click="handleDownload"> 下载导入模板 </ElButton>
</div> </div>
</template> </template>
</Modal> </Modal>