diff --git a/src/components/custom/business-table-action-cell.tsx b/src/components/custom/business-table-action-cell.tsx index 7fadb6d..fab7b36 100644 --- a/src/components/custom/business-table-action-cell.tsx +++ b/src/components/custom/business-table-action-cell.tsx @@ -1,12 +1,13 @@ -import { computed, defineComponent, ref } from 'vue'; -import type { PropType } from 'vue'; -import { ElButton, ElPopover } from 'element-plus'; +import { computed, defineComponent, h, ref } from 'vue'; +import type { Component, PropType } from 'vue'; +import { ElButton, ElPopover, ElTooltip } from 'element-plus'; import { $t } from '@/locales'; export type BusinessTableAction = { key: string; label: string; buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'; + icon?: Component; disabled?: boolean; onClick: () => void | Promise; }; @@ -17,12 +18,20 @@ export default defineComponent({ actions: { type: Array as PropType, required: true + }, + variant: { + type: String as PropType<'button' | 'icon'>, + default: 'button' } }, setup(props) { const popoverVisible = ref(false); const directActions = computed(() => { + if (props.variant === 'icon') { + return props.actions; + } + if (props.actions.length <= 2) { return props.actions; } @@ -31,6 +40,10 @@ export default defineComponent({ }); const moreActions = computed(() => { + if (props.variant === 'icon') { + return []; + } + if (props.actions.length <= 2) { return []; } @@ -47,21 +60,86 @@ export default defineComponent({ await action.onClick(); } - return () => ( -
event.stopPropagation()}> - {directActions.value.map(action => ( + function renderIcon(action: BusinessTableAction) { + if (!action.icon) return null; + + return h(action.icon, { class: 'business-table-action-icon' }); + } + + function renderButtonAction(action: BusinessTableAction) { + return ( + handleAction(action)} + > + {action.label} + + ); + } + + function renderIconAction(action: BusinessTableAction) { + return ( + handleAction(action)} > - {action.label} + {renderIcon(action)} - ))} + + ); + } + + function renderMenuButton(action: BusinessTableAction) { + if (props.variant === 'icon') { + return ( + handleAction(action)} + > + + {renderIcon(action)} + {action.label} + + + ); + } + + return ( + handleAction(action)} + > + {action.label} + + ); + } + + return () => ( +
event.stopPropagation()}> + {directActions.value.map(action => + props.variant === 'icon' ? renderIconAction(action) : renderButtonAction(action) + )} {moreActions.value.length > 0 && ( ( event.stopPropagation()} > - - {$t('common.more')} - - + {props.variant === 'icon' ? ( + + ) : ( + + {$t('common.more')} + + + )} ), default: () => (
- {moreActions.value.map(action => ( - handleAction(action)} - > - {action.label} - - ))} + {moreActions.value.map(action => renderMenuButton(action))}
) }} diff --git a/src/components/custom/dict-select.vue b/src/components/custom/dict-select.vue index 7892093..68f8b92 100644 --- a/src/components/custom/dict-select.vue +++ b/src/components/custom/dict-select.vue @@ -1,9 +1,12 @@