feat: 【antd】新增批量删除操作

This commit is contained in:
puhui999
2025-06-15 17:02:10 +08:00
parent 34f41790c2
commit 0cc83967ed
45 changed files with 997 additions and 297 deletions

View File

@@ -37,6 +37,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'accessToken',
title: '访问令牌',

View File

@@ -2,6 +2,8 @@
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';
@@ -9,6 +11,7 @@ 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';
@@ -38,6 +41,41 @@ 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(),
@@ -63,6 +101,18 @@ 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>,
});
@@ -78,6 +128,20 @@ 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="[