fix: 【antd】修复添加批量删除时产生的副作用

pull/144/head
puhui999 2025-06-15 21:09:40 +08:00
parent 2939c2e4f5
commit 0d411310fe
16 changed files with 281 additions and 315 deletions

View File

@ -61,12 +61,14 @@ function handleEdit(row: SystemDeptApi.Dept) {
async function handleDelete(row: SystemDeptApi.Dept) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteDept(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -58,12 +58,14 @@ function handleEdit(row: SystemDictDataApi.DictData) {
async function handleDelete(row: SystemDictDataApi.DictData) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.label]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteDictData(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.label]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.label]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -56,12 +56,14 @@ function handleEdit(row: any) {
async function handleDelete(row: SystemDictTypeApi.DictType) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteDictType(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -44,12 +44,14 @@ function handleEdit(row: SystemMailAccountApi.MailAccount) {
async function handleDelete(row: SystemMailAccountApi.MailAccount) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.mail]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteMailAccount(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.mail]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -57,18 +57,17 @@ function handleSend(row: SystemMailTemplateApi.MailTemplate) {
/** 删除邮件模板 */
async function handleDelete(row: SystemMailTemplateApi.MailTemplate) {
const hideLoading = message.loading({
message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteMailTemplate(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
hideLoading();
}
await deleteMailTemplate(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
}
const checkedIds = ref<number[]>([]);

View File

@ -268,7 +268,6 @@ export function useFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'name',
title: '菜单名称',

View File

@ -6,12 +6,11 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { isEmpty } from '@vben/utils';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMenu, deleteMenuList, getMenuList } from '#/api/system/menu';
import { deleteMenu, getMenuList } from '#/api/system/menu';
import { $t } from '#/locales';
import { SystemMenuTypeEnum } from '#/utils';
@ -29,8 +28,13 @@ function onRefresh() {
}
/** 创建菜单 */
function handleCreate(parentId?: number) {
formModalApi.setData({ parentId: parentId || 0 }).open();
function handleCreate() {
formModalApi.setData({}).open();
}
/** 添加下级菜单 */
function handleAppend(row: SystemMenuApi.Menu) {
formModalApi.setData({ pid: row.id }).open();
}
/** 编辑菜单 */
@ -42,74 +46,55 @@ function handleEdit(row: SystemMenuApi.Menu) {
async function handleDelete(row: SystemMenuApi.Menu) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteMenu(row.id);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
await deleteMenu(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: SystemMenuApi.Menu[];
}) {
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 deleteMenuList(checkedIds.value);
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
/** 切换树形展开/收缩状态 */
const isExpanded = ref(false);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
pagerConfig: {
enabled: false,
},
proxyConfig: {
ajax: {
query: async () => {
query: async (_params) => {
return await getMenuList();
},
},
},
treeConfig: {
transform: true,
rowField: 'id',
parentField: 'parentId',
expandAll: true,
accordion: false,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemMenuApi.Menu>,
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
treeConfig: {
parentField: 'parentId',
rowField: 'id',
transform: true,
reserve: true,
},
} as VxeTableGridOptions,
});
</script>
@ -124,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
</template>
<FormModal @success="onRefresh" />
<Grid table-title="">
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
@ -136,13 +121,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
onClick: handleCreate,
},
{
label: '批量删除',
label: isExpanded ? '收缩' : '展开',
type: 'primary',
danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE,
auth: ['system:menu:delete'],
onClick: handleDeleteBatch,
onClick: toggleExpand,
},
]"
/>
@ -168,6 +149,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '新增下级',
type: 'link',
icon: ACTION_ICON.ADD,
auth: ['system:menu:create'],
onClick: handleAppend.bind(null, row),
},
{
label: $t('common.edit'),
type: 'link',
@ -186,14 +174,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
confirm: handleDelete.bind(null, row),
},
},
{
label: '添加下级',
type: 'link',
icon: ACTION_ICON.ADD,
auth: ['system:menu:create'],
onClick: handleCreate.bind(null, row.id),
ifShow: () => row.type !== 3,
},
]"
/>
</template>

View File

@ -45,12 +45,14 @@ function handleEdit(row: SystemNoticeApi.Notice) {
async function handleDelete(row: SystemNoticeApi.Notice) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.title]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteNotice(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.title]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.title]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
@ -90,7 +92,10 @@ async function handlePush(row: SystemNoticeApi.Notice) {
});
try {
await pushNotice(row.id as number);
message.success($t('ui.actionMessage.operationSuccess'));
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_key_msg',
});
} finally {
hideLoading();
}

View File

@ -62,12 +62,14 @@ function handleSend(row: SystemNotifyTemplateApi.NotifyTemplate) {
async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteNotifyTemplate(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -2,8 +2,6 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
import { ref } from 'vue';
import { DocAlert, Page } from '@vben/common-ui';
import { message } from 'ant-design-vue';
@ -11,7 +9,6 @@ import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteOAuth2Token,
deleteOAuth2TokenList,
getOAuth2TokenPage,
} from '#/api/system/oauth2/token';
import { $t } from '#/locales';
@ -41,41 +38,6 @@ async function handleDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
}
}
// ID
const checkedAccessTokens = ref<string[]>([]);
/** 处理表格选择变化 */
function handleSelectionChange({
selectRecords,
}: {
selectRecords: SystemOAuth2TokenApi.OAuth2Token[];
}) {
checkedAccessTokens.value = selectRecords.map((row) => row.accessToken);
}
/** 批量删除处理 */
async function handleDeleteBatch() {
if (checkedAccessTokens.value.length === 0) {
message.warning('请至少选择一条数据');
return;
}
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', ['令牌']),
key: 'action_key_msg',
});
try {
await deleteOAuth2TokenList(checkedAccessTokens.value);
message.success({
content: $t('ui.actionMessage.deleteSuccess', ['令牌']),
key: 'action_key_msg',
});
checkedAccessTokens.value = [];
onRefresh();
} finally {
hideLoading();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@ -101,18 +63,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
toolbarConfig: {
refresh: { code: 'query' },
search: true,
slots: {
buttons: 'toolbar_buttons',
},
},
checkboxConfig: {
checkField: 'checked',
trigger: 'row',
highlight: true,
range: true,
},
events: {
checkboxChange: handleSelectionChange,
},
} as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
});
@ -128,20 +78,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
</template>
<Grid table-title="">
<template #toolbar_buttons>
<a-button
v-auth="['system:oauth2-token:delete']"
type="primary"
danger
:disabled="checkedAccessTokens.length === 0"
@click="handleDeleteBatch"
>
<template #icon>
<component :is="ACTION_ICON.DELETE" />
</template>
批量强退
</a-button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[

View File

@ -51,12 +51,14 @@ function handleEdit(row: SystemPostApi.Post) {
async function handleDelete(row: SystemPostApi.Post) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deletePost(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -28,13 +28,14 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
const [AssignMenuModal, assignMenuModalApi] = useVbenModal({
connectedComponent: AssignMenuForm,
destroyOnClose: true,
});
const [AssignDataPermissionFormModel, assignDataPermissionFormApi] =
useVbenModal({
connectedComponent: AssignDataPermissionForm,
destroyOnClose: true,
});
const [AssignDataPermissionModal, assignDataPermissionModalApi] = useVbenModal({
connectedComponent: AssignDataPermissionForm,
const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
connectedComponent: AssignMenuForm,
destroyOnClose: true,
});
@ -46,12 +47,7 @@ function onRefresh() {
/** 导出表格 */
async function handleExport() {
const data = await exportRole(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '角色数据.xls', source: data });
}
/** 创建角色 */
function handleCreate() {
formModalApi.setData(null).open();
downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
}
/** 编辑角色 */
@ -59,16 +55,23 @@ function handleEdit(row: SystemRoleApi.Role) {
formModalApi.setData(row).open();
}
/** 创建角色 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 删除角色 */
async function handleDelete(row: SystemRoleApi.Role) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteRole(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
@ -100,14 +103,14 @@ async function handleDeleteBatch() {
}
}
/** 分配菜单 */
function handleAssignMenu(row: SystemRoleApi.Role) {
assignMenuModalApi.setData(row).open();
/** 分配角色的数据权限 */
function handleAssignDataPermission(row: SystemRoleApi.Role) {
assignDataPermissionFormApi.setData(row).open();
}
/** 分配数据权限 */
function handleAssignDataPermission(row: SystemRoleApi.Role) {
assignDataPermissionModalApi.setData(row).open();
/** 分配角色的菜单权限 */
function handleAssignMenu(row: SystemRoleApi.Role) {
assignMenuFormApi.setData(row).open();
}
const [Grid, gridApi] = useVbenVxeGrid({
@ -117,6 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
@ -155,8 +159,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
</template>
<FormModal @success="onRefresh" />
<AssignMenuModal @success="onRefresh" />
<AssignDataPermissionModal @success="onRefresh" />
<AssignDataPermissionFormModel @success="onRefresh" />
<AssignMenuFormModel @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
@ -211,17 +215,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
:drop-down-actions="[
{
label: '分配菜单',
type: 'link',
auth: ['system:permission:assign-role-menu'],
onClick: handleAssignMenu.bind(null, row),
},
{
label: '分配数据权限',
label: '数据权限',
type: 'link',
auth: ['system:permission:assign-role-data-scope'],
onClick: handleAssignDataPermission.bind(null, row),
},
{
label: '菜单权限',
type: 'link',
auth: ['system:permission:assign-role-menu'],
onClick: handleAssignMenu.bind(null, row),
},
]"
/>
</template>

View File

@ -62,12 +62,14 @@ function handleSend(row: SystemSmsTemplateApi.SmsTemplate) {
async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteSmsTemplate(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -63,12 +63,14 @@ function handleEdit(row: SystemTenantApi.Tenant) {
async function handleDelete(row: SystemTenantApi.Tenant) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteTenant(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -44,12 +44,14 @@ function handleEdit(row: SystemTenantPackageApi.TenantPackage) {
async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteTenantPackage(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();

View File

@ -1,10 +1,11 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
import type { SystemUserApi } from '#/api/system/user';
import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { message } from 'ant-design-vue';
@ -15,14 +16,14 @@ import {
deleteUserList,
exportUser,
getUserPage,
importUserTemplate,
updateUserStatus,
} from '#/api/system/user';
import { $t } from '#/locales';
import { CommonStatusEnum } from '#/utils';
import { DICT_TYPE, getDictLabel } from '#/utils';
import { useGridColumns, useGridFormSchema } from './data';
import AssignRoleForm from './modules/assign-role-form.vue';
import DeptTree from './modules/dept-tree.vue';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
import ResetPasswordForm from './modules/reset-password-form.vue';
@ -52,11 +53,30 @@ function onRefresh() {
gridApi.query();
}
/** 导出表格 */
async function handleExport() {
const data = await exportUser(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
}
/** 选择部门 */
const searchDeptId = ref<number | undefined>(undefined);
async function handleDeptSelect(dept: SystemDeptApi.Dept) {
searchDeptId.value = dept.id;
onRefresh();
}
/** 创建用户 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 导入用户 */
function handleImport() {
importModalApi.open();
}
/** 编辑用户 */
function handleEdit(row: SystemUserApi.User) {
formModalApi.setData(row).open();
@ -66,12 +86,14 @@ function handleEdit(row: SystemUserApi.User) {
async function handleDelete(row: SystemUserApi.User) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.username]),
duration: 0,
key: 'action_process_msg',
key: 'action_key_msg',
});
try {
await deleteUser(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.username]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
@ -105,7 +127,7 @@ async function handleDeleteBatch() {
/** 重置密码 */
function handleResetPassword(row: SystemUserApi.User) {
resetPasswordModalApi.setData({ id: row.id }).open();
resetPasswordModalApi.setData(row).open();
}
/** 分配角色 */
@ -113,40 +135,30 @@ function handleAssignRole(row: SystemUserApi.User) {
assignRoleModalApi.setData(row).open();
}
/** 导入用户 */
function handleImport() {
importModalApi.open();
}
/** 导出用户 */
async function handleExport() {
const data = await exportUser(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '用户数据.xls', source: data });
}
/** 下载导入模板 */
async function handleImportTemplate() {
const data = await importUserTemplate();
downloadFileFromBlobPart({ fileName: '用户导入模板.xlsx', source: data });
}
/** 用户状态修改 */
/** 更新用户状态 */
async function handleStatusChange(
newStatus: number,
row: SystemUserApi.User,
): Promise<boolean | undefined> {
try {
await updateUserStatus(row.id as number, newStatus);
message.success(
$t('ui.actionMessage.updateSuccess', [
row.username,
newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用',
]),
);
return true;
} catch {
return false;
}
return new Promise((resolve, reject) => {
confirm({
content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗?`,
})
.then(async () => {
//
const res = await updateUserStatus(row.id as number, newStatus);
if (res) {
//
message.success($t('ui.actionMessage.operationSuccess'));
resolve(true);
} else {
reject(new Error('更新失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
const [Grid, gridApi] = useVbenVxeGrid({
@ -156,6 +168,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(handleStatusChange),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
@ -163,6 +176,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
deptId: searchDeptId.value,
});
},
},
@ -185,93 +199,104 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<template #doc>
<DocAlert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
<DocAlert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
<DocAlert
title="Excel 导入导出"
url="https://doc.iocoder.cn/excel-import-and-export/"
/>
</template>
<FormModal @success="onRefresh" />
<ResetPasswordModal @success="onRefresh" />
<AssignRoleModal @success="onRefresh" />
<ImportModal @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['用户']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:user:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.import'),
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['system:user:import'],
onClick: handleImport,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:user:export'],
onClick: handleExport,
},
{
label: '下载模板',
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:user:import'],
onClick: handleImportTemplate,
},
{
label: '批量删除',
type: 'primary',
danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE,
auth: ['system:user:delete'],
onClick: handleDeleteBatch,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['system:user:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['system:user:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.username]),
confirm: handleDelete.bind(null, row),
},
},
]"
:drop-down-actions="[
{
label: '重置密码',
type: 'link',
auth: ['system:user:update-password'],
onClick: handleResetPassword.bind(null, row),
},
{
label: '分配角色',
type: 'link',
auth: ['system:permission:assign-user-role'],
onClick: handleAssignRole.bind(null, row),
},
]"
/>
</template>
</Grid>
<div class="flex h-full w-full">
<!-- 左侧部门树 -->
<div class="h-full w-1/6 pr-4">
<DeptTree @select="handleDeptSelect" />
</div>
<!-- 右侧用户列表 -->
<div class="w-5/6">
<Grid table-title="">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['用户']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:user:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:user:export'],
onClick: handleExport,
},
{
label: $t('ui.actionTitle.import', ['用户']),
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['system:user:import'],
onClick: handleImport,
},
{
label: '批量删除',
type: 'primary',
danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE,
auth: ['system:user:delete'],
onClick: handleDeleteBatch,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['system:user:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['system:user:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
:drop-down-actions="[
{
label: '分配角色',
type: 'link',
auth: ['system:permission:assign-user-role'],
onClick: handleAssignRole.bind(null, row),
},
{
label: '重置密码',
type: 'link',
auth: ['system:user:update-password'],
onClick: handleResetPassword.bind(null, row),
},
]"
/>
</template>
</Grid>
</div>
</div>
</Page>
</template>