| | |
| | | <template> |
| | | <div :class="[prefixCls, getAlign]"> |
| | | <div :class="[prefixCls, getAlign]" @click="onCellClick"> |
| | | <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`"> |
| | | <PopConfirmButton v-bind="action"> |
| | | <Icon :icon="action.icon" class="mr-1" v-if="action.icon" /> |
| | | {{ action.label }} |
| | | <Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)"> |
| | | <PopConfirmButton v-bind="action"> |
| | | <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"> |
| | | <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" /> |
| | | <template v-if="action.label">{{ action.label }}</template> |
| | | </PopConfirmButton> |
| | | <Divider |
| | | type="vertical" |
| | | class="action-divider" |
| | | v-if="divider && index < getActions.length - (dropDownActions ? 0 : 1)" |
| | | v-if="divider && index < getActions.length - 1" |
| | | /> |
| | | </template> |
| | | <Dropdown |
| | | :trigger="['hover']" |
| | | :dropMenuList="getDropdownList" |
| | | popconfirm |
| | | v-if="dropDownActions" |
| | | v-if="dropDownActions && getDropdownList.length > 0" |
| | | > |
| | | <slot name="more"></slot> |
| | | <a-button type="link" size="small" v-if="!$slots.more"> |
| | |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, PropType, computed, toRaw } from 'vue'; |
| | | import { defineComponent, PropType, computed, toRaw, unref } from 'vue'; |
| | | import { MoreOutlined } from '@ant-design/icons-vue'; |
| | | import { Divider } from 'ant-design-vue'; |
| | | |
| | | import Icon from '/@/components/Icon/index'; |
| | | 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 { useTableContext } from '../hooks/useTableContext'; |
| | | import { usePermission } from '/@/hooks/web/usePermission'; |
| | | |
| | | import { isBoolean, isFunction } from '/@/utils/is'; |
| | | import { isBoolean, isFunction, isString } from '/@/utils/is'; |
| | | import { propTypes } from '/@/utils/propTypes'; |
| | | import { ACTION_COLUMN_FLAG } from '../const'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'TableAction', |
| | | components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined }, |
| | | components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip }, |
| | | props: { |
| | | actions: { |
| | | type: Array as PropType<ActionItem[]>, |
| | |
| | | }, |
| | | divider: propTypes.bool.def(true), |
| | | outside: propTypes.bool, |
| | | stopButtonPropagation: propTypes.bool.def(false), |
| | | }, |
| | | setup(props) { |
| | | const { prefixCls } = useDesign('basic-table-action'); |
| | |
| | | .map((action) => { |
| | | const { popConfirm } = action; |
| | | return { |
| | | getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body, |
| | | type: 'link', |
| | | size: 'small', |
| | | ...action, |
| | |
| | | }); |
| | | }); |
| | | |
| | | const getDropdownList = computed(() => { |
| | | return (toRaw(props.dropDownActions) || []) |
| | | .filter((action) => { |
| | | return hasPermission(action.auth) && 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 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(() => { |
| | |
| | | return actionColumn?.align ?? 'left'; |
| | | }); |
| | | |
| | | return { prefixCls, getActions, getDropdownList, getAlign }; |
| | | 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(); |
| | | } |
| | | |
| | | return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip }; |
| | | }, |
| | | }); |
| | | </script> |
| | |
| | | } |
| | | } |
| | | |
| | | button.ant-btn-circle { |
| | | span { |
| | | margin: auto !important; |
| | | } |
| | | } |
| | | |
| | | .ant-divider, |
| | | .ant-divider-vertical { |
| | | margin: 0 2px; |