From 7d26ed0e19bf952e7c037b21bfd687759b46e851 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 25 六月 2024 19:21:33 +0800
Subject: [PATCH] 菜单更新
---
src/components/Table/src/components/TableAction.vue | 200 ++++++++++++++++++++++++-------------------------
1 files changed, 98 insertions(+), 102 deletions(-)
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index 73bf691..71b64b9 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -2,12 +2,12 @@
<div :class="[prefixCls, getAlign]" @click="onCellClick">
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
<Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
- <PopConfirmButton v-bind="action">
+ <PopConfirmButton v-bind="omit(action, 'icon')">
<Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
<template v-if="action.label">{{ action.label }}</template>
</PopConfirmButton>
</Tooltip>
- <PopConfirmButton v-else v-bind="action">
+ <PopConfirmButton v-else v-bind="omit(action, 'icon')">
<Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
<template v-if="action.label">{{ action.label }}</template>
</PopConfirmButton>
@@ -30,122 +30,118 @@
</Dropdown>
</div>
</template>
-<script lang="ts">
- import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+<script lang="ts" setup>
+ import { PropType, computed, toRaw, unref } from 'vue';
import { MoreOutlined } from '@ant-design/icons-vue';
import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
- import { ActionItem, TableActionType } from '/@/components/Table';
- import { PopConfirmButton } from '/@/components/Button';
- import { Dropdown } from '/@/components/Dropdown';
- import { useDesign } from '/@/hooks/web/useDesign';
+ import { ActionItem, TableActionType } from '@/components/Table';
+ import { PopConfirmButton } from '@/components/Button';
+ import { Dropdown } from '@/components/Dropdown';
+ import { useDesign } from '@/hooks/web/useDesign';
import { useTableContext } from '../hooks/useTableContext';
- import { usePermission } from '/@/hooks/web/usePermission';
- import { isBoolean, isFunction, isString } from '/@/utils/is';
- import { propTypes } from '/@/utils/propTypes';
+ import { usePermission } from '@/hooks/web/usePermission';
+ import { isBoolean, isFunction, isString } from '@/utils/is';
+ import { propTypes } from '@/utils/propTypes';
import { ACTION_COLUMN_FLAG } from '../const';
+ import { omit } from 'lodash-es';
- export default defineComponent({
- name: 'TableAction',
- components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
- props: {
- actions: {
- type: Array as PropType<ActionItem[]>,
- default: null,
- },
- dropDownActions: {
- type: Array as PropType<ActionItem[]>,
- default: null,
- },
- divider: propTypes.bool.def(true),
- outside: propTypes.bool,
- stopButtonPropagation: propTypes.bool.def(false),
+ defineOptions({ name: 'TableAction' });
+
+ const props = defineProps({
+ actions: {
+ type: Array as PropType<ActionItem[]>,
+ default: null,
},
- setup(props) {
- const { prefixCls } = useDesign('basic-table-action');
- let table: Partial<TableActionType> = {};
- if (!props.outside) {
- table = useTableContext();
- }
+ dropDownActions: {
+ type: Array as PropType<ActionItem[]>,
+ default: null,
+ },
+ divider: propTypes.bool.def(true),
+ outside: propTypes.bool,
+ stopButtonPropagation: propTypes.bool.def(false),
+ });
- const { hasPermission } = usePermission();
- function isIfShow(action: ActionItem): boolean {
- const ifShow = action.ifShow;
+ const { prefixCls } = useDesign('basic-table-action');
+ let table: Partial<TableActionType> = {};
+ if (!props.outside) {
+ table = useTableContext();
+ }
- let isIfShow = true;
+ const { hasPermission } = usePermission();
+ function isIfShow(action: ActionItem): boolean {
+ const ifShow = action.ifShow;
- if (isBoolean(ifShow)) {
- isIfShow = ifShow;
- }
- if (isFunction(ifShow)) {
- isIfShow = ifShow(action);
- }
- return isIfShow;
- }
+ let isIfShow = true;
- const getActions = computed(() => {
- return (toRaw(props.actions) || [])
- .filter((action) => {
- return hasPermission(action.auth) && isIfShow(action);
- })
- .map((action) => {
- const { popConfirm } = action;
- return {
- getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
- type: 'link',
- size: 'small',
- ...action,
- ...(popConfirm || {}),
- onConfirm: popConfirm?.confirm,
- onCancel: popConfirm?.cancel,
- enable: !!popConfirm,
- };
- });
- });
+ if (isBoolean(ifShow)) {
+ isIfShow = ifShow;
+ }
+ if (isFunction(ifShow)) {
+ isIfShow = ifShow(action);
+ }
+ return isIfShow;
+ }
- const getDropdownList = computed((): any[] => {
- const list = (toRaw(props.dropDownActions) || []).filter((action) => {
- return hasPermission(action.auth) && isIfShow(action);
- });
- return list.map((action, index) => {
- const { label, popConfirm } = action;
- return {
- ...action,
- ...popConfirm,
- onConfirm: popConfirm?.confirm,
- onCancel: popConfirm?.cancel,
- text: label,
- divider: index < list.length - 1 ? props.divider : false,
- };
- });
- });
-
- const getAlign = computed(() => {
- const columns = (table as TableActionType)?.getColumns?.() || [];
- const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
- return actionColumn?.align ?? 'left';
- });
-
- function getTooltip(data: string | TooltipProps): TooltipProps {
+ const getActions = computed(() => {
+ return (toRaw(props.actions) || [])
+ .filter((action) => {
+ return hasPermission(action.auth) && isIfShow(action);
+ })
+ .map((action) => {
+ const { popConfirm } = action;
return {
getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
- placement: 'bottom',
- ...(isString(data) ? { title: data } : data),
+ type: 'link',
+ size: 'small',
+ ...action,
+ ...(popConfirm || {}),
+ onConfirm: popConfirm?.confirm,
+ onCancel: popConfirm?.cancel,
+ enable: !!popConfirm,
};
- }
-
- function onCellClick(e: MouseEvent) {
- if (!props.stopButtonPropagation) return;
- const path = e.composedPath() as HTMLElement[];
- const isInButton = path.find((ele) => {
- return ele.tagName?.toUpperCase() === 'BUTTON';
- });
- isInButton && e.stopPropagation();
- }
-
- return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
- },
+ });
});
+
+ const getDropdownList = computed((): any[] => {
+ const list = (toRaw(props.dropDownActions) || []).filter((action) => {
+ return hasPermission(action.auth) && isIfShow(action);
+ });
+ return list.map((action, index) => {
+ const { label, popConfirm } = action;
+ return {
+ ...action,
+ ...popConfirm,
+ onConfirm: popConfirm?.confirm,
+ onCancel: popConfirm?.cancel,
+ text: label,
+ divider: index < list.length - 1 ? props.divider : false,
+ };
+ });
+ });
+
+ const getAlign = computed(() => {
+ const columns = (table as TableActionType)?.getColumns?.() || [];
+ const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+ return actionColumn?.align ?? 'left';
+ });
+
+ function getTooltip(data: string | TooltipProps): TooltipProps {
+ return {
+ getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
+ placement: 'bottom',
+ ...(isString(data) ? { title: data } : data),
+ };
+ }
+
+ function onCellClick(e: MouseEvent) {
+ if (!props.stopButtonPropagation) return;
+ const path = e.composedPath() as HTMLElement[];
+ const isInButton = path.find((ele) => {
+ return ele.tagName?.toUpperCase() === 'BUTTON';
+ });
+ isInButton && e.stopPropagation();
+ }
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-action';
--
Gitblit v1.9.3