admin/django-vue3-admin-gd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update TableAction

Browse Source
This commit is contained in:
XIE7654
2025-10-10 20:41:12 +08:00
parent 112c0dd3bc
commit 969be9904c
14 changed files with 442 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/apps/web-antd/src/adapter/vxe-table.ts
View File

@@ -285,4 +285,5 @@ export type OnActionClickParams<T = Recordable<any>> = {
export type OnActionClickFn<T = Recordable<any>> = (
params: OnActionClickParams<T>,
) => void;
export * from '#/components/table-action';
export type * from '@vben/plugins/vxe-table';

13
web/apps/web-antd/src/components/table-action/icons.ts Normal file
View File

@@ -0,0 +1,13 @@
export const ACTION_ICON = {
DOWNLOAD: 'lucide:download',
UPLOAD: 'lucide:upload',
ADD: 'lucide:plus',
EDIT: 'lucide:edit',
DELETE: 'lucide:trash-2',
REFRESH: 'lucide:refresh-cw',
SEARCH: 'lucide:search',
FILTER: 'lucide:filter',
MORE: 'lucide:ellipsis-vertical',
VIEW: 'lucide:eye',
COPY: 'lucide:copy',
};

4
web/apps/web-antd/src/components/table-action/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export * from './icons';
export { default as TableAction } from './table-action.vue';
export * from './typing';

278
web/apps/web-antd/src/components/table-action/table-action.vue Normal file
View File

@@ -0,0 +1,278 @@
<!-- add by 星语：参考 vben2 的方式，增加 TableAction 组件 -->
<script setup lang="ts">
import type { PropType } from 'vue';
import type { ActionItem, PopConfirm } from './typing';
import { computed, unref, watch } from 'vue';
import { useAccess } from '@vben/access';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { isBoolean, isFunction } from '@vben/utils';
import {
Button,
Dropdown,
Menu,
Popconfirm,
Space,
Tooltip,
} from 'ant-design-vue';
const props = defineProps({
actions: {
type: Array as PropType<ActionItem[]>,
default() {
return [];
},
},
dropDownActions: {
type: Array as PropType<ActionItem[]>,
default() {
return [];
},
},
divider: {
type: Boolean,
default: true,
},
});
const { hasAccessByCodes } = useAccess();
/** 检查是否显示 */
function isIfShow(action: ActionItem): boolean {
const ifShow = action.ifShow;
let isIfShow = true;
if (isBoolean(ifShow)) {
isIfShow = ifShow;
}
if (isFunction(ifShow)) {
isIfShow = ifShow(action);
}
if (isIfShow) {
isIfShow =
hasAccessByCodes(action.auth || []) || (action.auth || []).length === 0;
}
return isIfShow;
}
/** 处理按钮 actions */
const getActions = computed(() => {
const actions = props.actions || [];
return actions.filter((action: ActionItem) => isIfShow(action));
});
/** 处理下拉菜单 actions */
const getDropdownList = computed(() => {
const dropDownActions = props.dropDownActions || [];
return dropDownActions.filter((action: ActionItem) => isIfShow(action));
});
/** Space 组件的 size */
const spaceSize = computed(() => {
const actions = unref(getActions);
return actions?.some((item: ActionItem) => item.type === 'link') ? 0 : 8;
});
/** 获取 PopConfirm 属性 */
function getPopConfirmProps(popConfirm: PopConfirm) {
if (!popConfirm) return {};
const attrs: Record<string, any> = {};
// 复制基本属性，排除函数
Object.keys(popConfirm).forEach((key) => {
if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
attrs[key] = popConfirm[key as keyof PopConfirm];
}
});
// 单独处理事件函数
if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
attrs.onConfirm = popConfirm.confirm;
}
if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
attrs.onCancel = popConfirm.cancel;
}
return attrs;
}
/** 获取 Button 属性 */
function getButtonProps(action: ActionItem) {
return {
type: action.type || 'link',
danger: action.danger || false,
disabled: action.disabled,
loading: action.loading,
size: action.size,
};
}
/** 获取 Tooltip 属性 */
function getTooltipProps(tooltip: any | string) {
if (!tooltip) return {};
return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
}
/** 处理菜单点击 */
function handleMenuClick(e: any) {
const action = getDropdownList.value[e.key];
if (action && action.onClick && isFunction(action.onClick)) {
action.onClick();
}
}
/** 生成稳定的 key */
function getActionKey(action: ActionItem, index: number) {
return `${action.label || ''}-${action.type || ''}-${index}`;
}
/** 处理按钮点击 */
function handleButtonClick(action: ActionItem) {
if (action.onClick && isFunction(action.onClick)) {
action.onClick();
}
}
// 监听props变化，强制重新计算
watch(
() => [props.actions, props.dropDownActions],
() => {
// 这里不需要额外处理，computed会自动重新计算
},
{ deep: true },
);
</script>
<template>
<div class="table-actions">
<Space :size="spaceSize">
<template
v-for="(action, index) in getActions"
:key="getActionKey(action, index)"
>
<Popconfirm
v-if="action.popConfirm"
v-bind="getPopConfirmProps(action.popConfirm)"
>
<template v-if="action.popConfirm.icon" #icon>
<IconifyIcon :icon="action.popConfirm.icon" />
</template>
<Tooltip v-bind="getTooltipProps(action.tooltip)">
<Button v-bind="getButtonProps(action)">
<template v-if="action.icon" #icon>
<IconifyIcon :icon="action.icon" />
</template>
{{ action.label }}
</Button>
</Tooltip>
</Popconfirm>
<Tooltip v-else v-bind="getTooltipProps(action.tooltip)">
<Button
v-bind="getButtonProps(action)"
@click="handleButtonClick(action)"
>
<template v-if="action.icon" #icon>
<IconifyIcon :icon="action.icon" />
</template>
{{ action.label }}
</Button>
</Tooltip>
</template>
</Space>
<Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
<slot name="more">
<Button type="link">
<template #icon>
{{ $t('page.action.more') }}
<IconifyIcon icon="lucide:ellipsis-vertical" />
</template>
</Button>
</slot>
<template #overlay>
<Menu>
<Menu.Item
v-for="(action, index) in getDropdownList"
:key="index"
:disabled="action.disabled"
@click="!action.popConfirm && handleMenuClick({ key: index })"
>
<template v-if="action.popConfirm">
<Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
<template v-if="action.popConfirm.icon" #icon>
<IconifyIcon :icon="action.popConfirm.icon" />
</template>
<div
:class="
action.disabled === true
? 'cursor-not-allowed text-gray-300'
: ''
"
>
<IconifyIcon v-if="action.icon" :icon="action.icon" />
<span :class="action.icon ? 'ml-1' : ''">
{{ action.label }}
</span>
</div>
</Popconfirm>
</template>
<template v-else>
<div
:class="
action.disabled === true
? 'cursor-not-allowed text-gray-300'
: ''
"
>
<IconifyIcon v-if="action.icon" :icon="action.icon" />
{{ action.label }}
</div>
</template>
</Menu.Item>
</Menu>
</template>
</Dropdown>
</div>
</template>
<style lang="scss">
.table-actions {
.ant-btn-link {
padding: 4px;
margin-left: 0;
}
.ant-btn > .iconify + span,
.ant-btn > span + .iconify {
margin-inline-start: 4px;
}
.iconify {
display: inline-flex;
align-items: center;
width: 1em;
height: 1em;
font-style: normal;
line-height: 0;
vertical-align: -0.125em;
color: inherit;
text-align: center;
text-transform: none;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.ant-popconfirm {
.ant-popconfirm-buttons {
.ant-btn {
margin-inline-start: 4px !important;
}
}
}
</style>

31
web/apps/web-antd/src/components/table-action/typing.ts Normal file
View File

@@ -0,0 +1,31 @@
import type {
ButtonProps,
ButtonType,
} from 'ant-design-vue/es/button/buttonTypes';
import type { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
export interface PopConfirm {
title: string;
okText?: string;
cancelText?: string;
confirm: () => void;
cancel?: () => void;
icon?: string;
disabled?: boolean;
}
export interface ActionItem extends ButtonProps {
onClick?: () => void;
type?: ButtonType;
label?: string;
color?: 'error' | 'success' | 'warning';
icon?: string;
popConfirm?: PopConfirm;
disabled?: boolean;
divider?: boolean;
// 权限编码控制是否显示
auth?: string[];
// 业务控制是否显示
ifShow?: ((action: ActionItem) => boolean) | boolean;
tooltip?: string | TooltipProps;
}

2
web/apps/web-antd/src/store/auth.ts
View File

@@ -49,7 +49,6 @@ export const useAuthStore = defineStore('auth', () => {
]);
userInfo = fetchUserInfoResult;
userStore.setUserInfo(userInfo);
accessStore.setAccessCodes(accessCodes);
@@ -107,6 +106,7 @@ export const useAuthStore = defineStore('auth', () => {
// 设置权限
if (userInfo && Array.isArray(userInfo.permissions)) {
permissionStore.setPermissions(userInfo.permissions);
accessStore.setAccessCodes(userInfo.permissions);
}
return userInfo;

26
web/apps/web-antd/src/views/system/config/list.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
import {
ACTION_ICON,
type OnActionClickParams, TableAction,
type VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemConfigApi } from '#/models/system/config';
@@ -127,14 +128,17 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="参数配置">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-permission="'system:config:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.config.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:config:create'],
onClick: onCreate,
},
]"
/>
</template>
</Grid>
</Page>

42
web/apps/web-antd/src/views/system/dept/list.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
import {
ACTION_ICON,
type OnActionClickParams, TableAction,
type VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
@@ -139,20 +140,27 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="部门列表">
<template #toolbar-tools>
<Button class="mr-2" type="primary" @click="expandAll">
展开全部
</Button>
<Button class="mr-2" type="primary" @click="collapseAll">
折叠全部
</Button>
<Button
type="primary"
@click="onCreate"
v-permission="'system:dept:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [$t('system.dept.name')]) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.dept.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:dept:create'],
onClick: onCreate,
},
{
label: '展开全部',
type: 'primary',
onClick: expandAll,
},
{
label: '折叠全部',
type: 'primary',
onClick: collapseAll,
},
]"
/>
</template>
</Grid>
</Page>

26
web/apps/web-antd/src/views/system/dict_data/list.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
import {
ACTION_ICON,
type OnActionClickParams, TableAction,
type VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemDictDataApi } from '#/api/system/dict_data';
@@ -137,14 +138,17 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="字典数据">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-permission="'system:dict_data:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [$t('system.dict_data.name')]) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.dict_data.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:dict_data:create'],
onClick: onCreate,
},
]"
/>
</template>
</Grid>
</Page>

26
web/apps/web-antd/src/views/system/dict_type/list.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
import {
ACTION_ICON,
type OnActionClickParams, TableAction,
type VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemDictTypeApi } from '#/api/system/dict_type';
@@ -145,14 +146,17 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="字典列表">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-permission="'system:dict_type:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [$t('system.dict_type.name')]) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.dict_type.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:dict_type:create'],
onClick: onCreate,
},
]"
/>
</template>
</Grid>
</Page>

2
web/apps/web-antd/src/views/system/menu/list.vue
View File

@@ -118,7 +118,7 @@ function onDelete(row: SystemMenuApi.SystemMenu) {
<template>
<Page auto-content-height>
<FormDrawer @success="onRefresh" />
<Grid>
<Grid table-title="菜单列表">
<template #toolbar-tools>
<Button class="mr-2" type="primary" @click="expandAll">
展开全部

26
web/apps/web-antd/src/views/system/post/list.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
import {
ACTION_ICON,
type OnActionClickParams, TableAction,
type VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemPostApi } from '#/models/system/post';
@@ -127,14 +128,17 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="岗位信息表">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-permission="'system:post:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [$t('system.post.name')]) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.post.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:post:create'],
onClick: onCreate,
},
]"
/>
</template>
</Grid>
</Page>

24
web/apps/web-antd/src/views/system/role/list.vue
View File

@@ -8,11 +8,10 @@ import type {
import type { SystemRoleApi } from '#/api/system/role';
import { Page, useVbenDrawer } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message, Modal } from 'ant-design-vue';
import { message, Modal } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteRole, getRoleList, patchRole } from '#/api/system/role';
import { $t } from '#/locales';
@@ -156,14 +155,17 @@ function onCreate() {
<FormDrawer @success="onRefresh" />
<Grid :table-title="$t('system.role.list')">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-permission="'system:role:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [$t('system.role.name')]) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.role.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:role:create'],
onClick: onCreate,
},
]"
/>
</template>
</Grid>
</Page>

26
web/apps/web-antd/src/views/system/user/list.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
import {
ACTION_ICON,
type OnActionClickParams, TableAction,
type VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemUserApi } from '#/models/system/user';
@@ -128,14 +129,17 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="用户数据">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-permission="'system:user:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [$t('system.user.name')]) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', [$t('system.user.name')]),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:user:create'],
onClick: onCreate,
},
]"
/>
</template>
</Grid>
</Page>