!51 增强ActionButtons组件，并修复form-ui组件警告
Merge pull request !51 from chenminjie/dev-v5_cmjpull/52/MERGE
xingyu
Gitee
commit
0a69bbfd24
|
|
@ -1,74 +1,215 @@
|
|||
<script setup lang="ts">
|
||||
import type { ActionItem } from './types';
|
||||
import type { ButtonType } from 'ant-design-vue/es/button';
|
||||
|
||||
import type { ActionItem, PopConfirm } from './types';
|
||||
|
||||
import { computed, type PropType, toRaw } from 'vue';
|
||||
|
||||
import { AccessControl } from '@vben/access';
|
||||
import { useAccess } from '@vben/access';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { isBoolean, isFunction, isString } from '@vben/utils';
|
||||
import { isBoolean, isFunction } from '@vben/utils';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Dropdown, Menu, Popconfirm, Space } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'ActionButtons' });
|
||||
defineOptions({
|
||||
name: 'ActionButtons',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
actions: {
|
||||
type: Array as PropType<ActionItem[]>,
|
||||
default: null,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
dropDownActions: {
|
||||
type: Array as PropType<ActionItem[]>,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const MenuItem = Menu.Item;
|
||||
|
||||
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 (isBoolean(ifShow)) {
|
||||
isIfShow = ifShow;
|
||||
}
|
||||
if (isFunction(ifShow)) {
|
||||
isIfShow = ifShow(action);
|
||||
}
|
||||
return isIfShow;
|
||||
}
|
||||
|
||||
const getActions = computed(() => {
|
||||
return (toRaw(props.actions) || [])
|
||||
.filter((action) => {
|
||||
return isIfShow(action);
|
||||
return (
|
||||
(hasAccessByCodes(action.auth || []) ||
|
||||
(action.auth || []).length === 0) &&
|
||||
isIfShow(action)
|
||||
);
|
||||
})
|
||||
.map((action) => {
|
||||
const { popConfirm } = action;
|
||||
return {
|
||||
// getPopupContainer: document.body,
|
||||
type: 'default' as ButtonType,
|
||||
...action,
|
||||
auth: isString(action.auth) ? Array.of(action.auth) : action.auth,
|
||||
...popConfirm,
|
||||
onConfirm: popConfirm?.confirm,
|
||||
onCancel: popConfirm?.cancel,
|
||||
enable: !!popConfirm,
|
||||
};
|
||||
});
|
||||
});
|
||||
const getDropdownList = computed((): any[] => {
|
||||
return (toRaw(props.dropDownActions) || [])
|
||||
.filter((action) => {
|
||||
return (
|
||||
(hasAccessByCodes(action.auth || []) ||
|
||||
(action.auth || []).length === 0) &&
|
||||
isIfShow(action)
|
||||
);
|
||||
})
|
||||
.map((action, index) => {
|
||||
const { label, popConfirm } = action;
|
||||
return {
|
||||
...action,
|
||||
...popConfirm,
|
||||
onConfirm: popConfirm?.confirm,
|
||||
onCancel: popConfirm?.cancel,
|
||||
text: label,
|
||||
divider:
|
||||
index < props.dropDownActions.length - 1 ? props.divider : false,
|
||||
};
|
||||
});
|
||||
});
|
||||
const getPopConfirmProps = (attrs: PopConfirm) => {
|
||||
const originAttrs: any = attrs;
|
||||
delete originAttrs.icon;
|
||||
if (attrs.confirm && isFunction(attrs.confirm)) {
|
||||
originAttrs.onConfirm = attrs.confirm;
|
||||
delete originAttrs.confirm;
|
||||
}
|
||||
if (attrs.cancel && isFunction(attrs.cancel)) {
|
||||
originAttrs.onCancel = attrs.cancel;
|
||||
delete originAttrs.cancel;
|
||||
}
|
||||
return originAttrs;
|
||||
};
|
||||
const getButtonProps = (action: ActionItem) => {
|
||||
const res = {
|
||||
type: action.type || 'primary',
|
||||
...action,
|
||||
};
|
||||
delete res.icon;
|
||||
return res;
|
||||
};
|
||||
const handleMenuClick = (e: any) => {
|
||||
const action = getDropdownList.value[e.key];
|
||||
if (action.onClick && isFunction(action.onClick)) {
|
||||
action.onClick();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<template v-for="(action, index) in getActions" :key="index">
|
||||
<AccessControl :codes="action.auth" type="code">
|
||||
<Button class="mr-1 flex" v-bind="action" :key="index">
|
||||
<IconifyIcon
|
||||
v-if="action.preIcon"
|
||||
:class="{ 'mr-1': !!action.label }"
|
||||
:icon="action.preIcon"
|
||||
:size="14"
|
||||
/>
|
||||
<div class="m-table-action">
|
||||
<Space :size="2">
|
||||
<template v-for="(action, index) in getActions" :key="index">
|
||||
<Popconfirm
|
||||
v-if="action.popConfirm"
|
||||
v-bind="getPopConfirmProps(action.popConfirm)"
|
||||
>
|
||||
<template v-if="action.popConfirm.icon" #icon>
|
||||
<IconifyIcon :icon="action.popConfirm.icon" />
|
||||
</template>
|
||||
<Button v-bind="getButtonProps(action)">
|
||||
<template v-if="action.icon" #icon>
|
||||
<IconifyIcon :icon="action.icon" />
|
||||
</template>
|
||||
{{ action.label }}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button v-else v-bind="getButtonProps(action)" @click="action.onClick">
|
||||
<template v-if="action.icon" #icon>
|
||||
<IconifyIcon :icon="action.icon" />
|
||||
</template>
|
||||
{{ action.label }}
|
||||
<IconifyIcon
|
||||
v-if="action.postIcon"
|
||||
:class="{ 'mr-1': !!action.label }"
|
||||
:icon="action.postIcon"
|
||||
:size="14"
|
||||
/>
|
||||
</Button>
|
||||
</AccessControl>
|
||||
</template>
|
||||
</template>
|
||||
</Space>
|
||||
|
||||
<Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
|
||||
<slot name="more">
|
||||
<Button size="large" type="link">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="mdi:more-horiz" />
|
||||
</template>
|
||||
</Button>
|
||||
</slot>
|
||||
<template #overlay>
|
||||
<Menu @click="handleMenuClick">
|
||||
<MenuItem v-for="(action, index) in getDropdownList" :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>
|
||||
<IconifyIcon v-if="action.icon" :icon="action.icon" />
|
||||
<span class="ml-1">{{ action.text }}</span>
|
||||
</div>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
<template v-else>
|
||||
<IconifyIcon v-if="action.icon" :icon="action.icon" />
|
||||
<span class="ml-1">{{ action.label }}</span>
|
||||
</template>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.ant-btn-link {
|
||||
padding: 8px 4px;
|
||||
margin-left: 0;
|
||||
<style lang="less">
|
||||
/** 修复 iconify 位置问题 **/
|
||||
.m-table-action {
|
||||
.ant-btn > .iconify + span,
|
||||
.ant-btn > span + .iconify {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
.ant-btn > .iconify {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-style: normal;
|
||||
line-height: 0;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/** 修复 link 按钮的样式问题 */
|
||||
.ant-btn-link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
import type { ButtonProps, TooltipProps } from 'ant-design-vue';
|
||||
import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
|
||||
import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
|
||||
|
||||
export interface ActionItem extends ButtonProps {
|
||||
color?: 'error' | 'success' | 'warning';
|
||||
preIcon?: string;
|
||||
postIcon?: string;
|
||||
label: string;
|
||||
auth?: string | string[];
|
||||
tooltip?: string | TooltipProps;
|
||||
ifShow?: ((...args: any[]) => boolean) | boolean;
|
||||
export interface PopConfirm {
|
||||
title: string;
|
||||
okText?: string;
|
||||
cancelText?: string;
|
||||
confirm: (...args: any[]) => void;
|
||||
cancel?: (...args: any[]) => void;
|
||||
icon?: string;
|
||||
}
|
||||
export interface ActionItem extends ButtonProps {
|
||||
onClick?: (...args: any[]) => void;
|
||||
class?: string;
|
||||
// 16进制颜色
|
||||
color?: string;
|
||||
label?: string;
|
||||
icon?: string;
|
||||
popConfirm?: PopConfirm;
|
||||
disabled?: boolean;
|
||||
divider?: boolean;
|
||||
// 权限编码控制是否显示
|
||||
auth?: string[];
|
||||
// 业务控制是否显示
|
||||
ifShow?: ((action: ActionItem) => boolean) | boolean;
|
||||
tooltip?: string | TooltipProps;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,16 +81,26 @@ async function handleExport() {
|
|||
{
|
||||
type: 'primary',
|
||||
label: $t('page.action.add'),
|
||||
preIcon: IconEnum.ADD,
|
||||
icon: IconEnum.ADD,
|
||||
auth: ['system:post:create'],
|
||||
onClick: handleCreate.bind(null),
|
||||
},
|
||||
{
|
||||
label: $t('page.action.export'),
|
||||
preIcon: IconEnum.EXPORT,
|
||||
class:
|
||||
'bg-green-500 text-white border-green-400 hover:bg-green-400 hover:!text-white hover:!border-green-400 active:!bg-green-600 active:!text-white active:!border-green-600',
|
||||
icon: IconEnum.EXPORT,
|
||||
auth: ['system:post:export'],
|
||||
onClick: handleExport.bind(null),
|
||||
},
|
||||
{
|
||||
label: $t('page.action.delete'),
|
||||
icon: IconEnum.DELETE,
|
||||
class:
|
||||
'bg-red-500 text-white border-red-400 hover:bg-red-400 hover:!text-white hover:!border-red-400 active:!bg-red-600 active:!text-white active:!border-red-600',
|
||||
auth: ['system:post:delete'],
|
||||
onClick: handleDelete.bind(null, 1),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -100,7 +110,7 @@ async function handleExport() {
|
|||
{
|
||||
type: 'link',
|
||||
label: $t('page.action.edit'),
|
||||
preIcon: IconEnum.EDIT,
|
||||
icon: IconEnum.EDIT,
|
||||
auth: ['system:post:update'],
|
||||
onClick: handleEdit.bind(null, row.id),
|
||||
},
|
||||
|
|
@ -108,11 +118,17 @@ async function handleExport() {
|
|||
type: 'link',
|
||||
danger: true,
|
||||
label: $t('page.action.delete'),
|
||||
preIcon: IconEnum.DELETE,
|
||||
icon: IconEnum.DELETE,
|
||||
auth: ['system:post:delete'],
|
||||
onClick: handleDelete.bind(null, row.id),
|
||||
},
|
||||
]"
|
||||
:drop-down-actions="[
|
||||
{
|
||||
type: 'link',
|
||||
label: $t('page.action.edit'),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -161,9 +161,11 @@ const computedProps = computed(() => {
|
|||
});
|
||||
|
||||
const computedEvents = computed(() => {
|
||||
return isFunction(componentEvents)
|
||||
? componentEvents(values.value, formApi!)
|
||||
: componentEvents;
|
||||
return (
|
||||
(isFunction(componentEvents)
|
||||
? componentEvents(values.value, formApi!)
|
||||
: componentEvents) ?? {}
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
|
|||
Loading…
Reference in New Issue