onboard/resources/js/Pages/Report/Components/DataTableColumns/ActionsColumn.vue

<script setup>
import { NSpace, NDropdown, NButton, NIcon } from 'naive-ui'
import {TbExternalLink, TbEyePlus, TbMessage, TbClick, TbEyeClosed} from "vue-icons-plus/tb"
import { computed, h } from "vue"
import { useDropdownActions } from '../../../../Composables/useDropdownActions.js'

const props = defineProps({
    row: Object,
    isMis: Boolean,
    isAddObservable: Boolean,
    isRemoveObservable: Boolean,
    isAddObservableComment: Boolean,

    onMisClick: Function,
    onAddObservable: Function,
    onAddObservableComment: Function,
    onRemoveObservable: Function,
})

const emits = defineEmits(['addObservable', 'addObservableComment', 'removeObservable'])

const renderIcon = (icon) => {
    return () => h(NIcon, {}, { default: () => h(icon) })
}

// Описываем группы действий
const actionGroups = computed(() => [
    {
        key: 'external', // ключ группы для идентификатора
        items: [
            {
                label: 'Просмотреть в МИС',
                key: 'mis',
                icon: TbExternalLink,
                if: props.isMis
            }
        ]
    },
    {
        key: 'actions',
        items: [
            {
                label: 'Добавить на контроль',
                key: 'add-observable',
                icon: TbEyePlus,
                if: props.isAddObservable
            },
            {
                label: 'Добавить комментарий',
                key: 'add-observable-comment',
                icon: TbMessage,
                if: props.isAddObservableComment
            }
        ]
    },
    {
        key: 'danger',
        items: [
            {
                label: 'Снять с контроля',
                key: 'remove-observable',
                icon: TbEyeClosed,
                if: props.isRemoveObservable
            }
        ]
    }
])

// Получаем плоский массив опций с разделителями
const actions = useDropdownActions(actionGroups.value, renderIcon)

const onOpenMis = () => {
    if (props.onMisClick) {
        props.onMisClick(props.row)
    } else {
        const id = props.row.id
        window.open(`https://stationar.amurzdrav.ru/prod/statist/edit/card/${id}`, '_blank')
    }
}

const onSelectOption = (key) => {
    const handlers = {
        'mis': () => {
            onOpenMis()
            props.onMisClick?.(props.row)
        },
        'add-observable': () => {
            // props.onAddObservable?.(props.row)
            emits('addObservable', props.row)
        },
        'add-comment': () => {
            // props.onAddObservableComment?.(props.row)
            emits('onAddObservableComment', props.row)
        },
        'remove-observable': () => {
            // props.onRemoveObservable?.(props.row)
            emits('removeObservable', props.row)
        },
    }
    handlers[key]?.()
}
</script>

<template>
    <NSpace size="small" justify="end">
        <NDropdown
            size="small"
            trigger="click"
            placement="bottom-end"
            :options="actions"
            @select="onSelectOption"
        >
            <NButton secondary size="tiny">
                <template #icon>
                    <TbClick />
                </template>
                Действия
            </NButton>
        </NDropdown>
    </NSpace>
</template>