perf: use TableAction

pull/110/MERGE
xingyu4j 2025-05-19 16:31:17 +08:00
parent b125299c38
commit 28abdb019b
4 changed files with 96 additions and 96 deletions

View File

@ -5,10 +5,9 @@ import type { SystemDictDataApi } from '#/api/system/dict/data';
import { watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -16,7 +15,7 @@ import {
exportDictData,
getDictDataPage,
} from '#/api/system/dict/data';
import { ACTION_KEY, TableAction } from '#/components/table-action';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { useDataGridColumns, useDataGridFormSchema } from '../data';
@ -59,12 +58,12 @@ function onEdit(row: SystemDictDataApi.DictData) {
async function onDelete(row: SystemDictDataApi.DictData) {
message.loading({
content: $t('ui.actionMessage.deleting', [row.label]),
key: ACTION_KEY,
key: 'action_key_msg',
});
await deleteDictData(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.label]),
key: ACTION_KEY,
key: 'action_key_msg',
});
onRefresh();
}
@ -116,23 +115,24 @@ watch(
<Grid table-title="">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['system:dict:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['字典数据']) }}
</Button>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:dict:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['字典数据']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:dict:create'],
onClick: onCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:dict:export'],
onClick: onExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
@ -140,7 +140,7 @@ watch(
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
icon: ACTION_ICON.EDIT,
auth: ['system:dict:update'],
onClick: onEdit.bind(null, row),
},
@ -148,7 +148,7 @@ watch(
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
icon: ACTION_ICON.DELETE,
auth: ['system:dict:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.label]),

View File

@ -6,10 +6,9 @@ import type {
import type { SystemDictTypeApi } from '#/api/system/dict/type';
import { useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -17,7 +16,7 @@ import {
exportDictType,
getDictTypePage,
} from '#/api/system/dict/type';
import { ACTION_KEY, TableAction } from '#/components/table-action';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { useTypeGridColumns, useTypeGridFormSchema } from '../data';
@ -55,12 +54,12 @@ function onEdit(row: any) {
async function onDelete(row: SystemDictTypeApi.DictType) {
message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
key: ACTION_KEY,
key: 'action_key_msg',
});
await deleteDictType(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: ACTION_KEY,
key: 'action_key_msg',
});
onRefresh();
}
@ -110,23 +109,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Grid table-title="">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['system:dict:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['字典类型']) }}
</Button>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:dict:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['字典类型']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:dict:create'],
onClick: onCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:dict:export'],
onClick: onExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
@ -134,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
icon: ACTION_ICON.EDIT,
auth: ['system:dict:update'],
onClick: onEdit.bind(null, row),
},
@ -142,7 +142,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
icon: ACTION_ICON.DELETE,
auth: ['system:dict:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),

View File

@ -3,15 +3,14 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemRoleApi } from '#/api/system/role';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteRole, exportRole, getRolePage } from '#/api/system/role';
import { DocAlert } from '#/components/doc-alert';
import { ACTION_KEY, TableAction } from '#/components/table-action';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@ -60,12 +59,12 @@ function onCreate() {
async function onDelete(row: SystemRoleApi.Role) {
message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
key: ACTION_KEY,
key: 'action_key_msg',
});
await deleteRole(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: ACTION_KEY,
key: 'action_key_msg',
});
onRefresh();
}
@ -125,23 +124,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
<AssignMenuFormModel @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['system:role:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['角色']) }}
</Button>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:role:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['角色']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:role:create'],
onClick: onCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:role:export'],
onClick: onExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
@ -149,7 +149,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
icon: ACTION_ICON.EDIT,
auth: ['system:role:update'],
onClick: onEdit.bind(null, row),
},
@ -157,7 +157,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
icon: ACTION_ICON.DELETE,
auth: ['system:role:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),

View File

@ -6,16 +6,15 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
import { onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteTenant, exportTenant, getTenantPage } from '#/api/system/tenant';
import { getTenantPackageList } from '#/api/system/tenant-package';
import { DocAlert } from '#/components/doc-alert';
import { ACTION_KEY, TableAction } from '#/components/table-action';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@ -61,12 +60,12 @@ function onEdit(row: SystemTenantApi.Tenant) {
async function onDelete(row: SystemTenantApi.Tenant) {
message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
key: ACTION_KEY,
key: 'action_key_msg',
});
await deleteTenant(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: ACTION_KEY,
key: 'action_key_msg',
});
onRefresh();
}
@ -112,23 +111,24 @@ onMounted(async () => {
<FormModal @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['system:tenant:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['租户']) }}
</Button>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:tenant:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['租户']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:tenant:create'],
onClick: onCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:tenant:export'],
onClick: onExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
@ -136,7 +136,7 @@ onMounted(async () => {
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
icon: ACTION_ICON.EDIT,
auth: ['system:role:update'],
onClick: onEdit.bind(null, row),
},
@ -144,7 +144,7 @@ onMounted(async () => {
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
icon: ACTION_ICON.DELETE,
auth: ['system:role:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),