shrimp-admin/src/components/ShrimpPowerTree.vue

<template>
    <div class="power-tree-wrap">
        <el-tree ref="treeRef" :data="treeData" show-checkbox node-key="key" default-expand-all
            :props="{ label: 'label', children: 'children' }" @check="onCheck" />
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, nextTick } from 'vue'
import { vueAdmin } from '../VueAdmin'
import type { IMenuItem, ILabel } from '../IShrimpType'

interface IPowerItem {
    key: string
    label: ILabel
}

const props = defineProps<{
    modelValue: string[]
    allPowers: IPowerItem[]
    menuTree: IMenuItem[]
}>()

const emit = defineEmits<{
    'update:modelValue': [value: string[]]
}>()

const treeRef = ref<any>(null)

interface PowerNode { key: string; label: string; children?: PowerNode[] }

const MENU_PREFIX = '_menu:'

const treeData = computed(() => {
    function walkMenu(items: IMenuItem[]): PowerNode[] {
        return items.reduce<PowerNode[]>((acc, item) => {
            if (item.moduleKey) {
                const modulePowers = props.allPowers.filter(p => p.key === item.moduleKey)
                const children = props.allPowers
                    .filter(p => p.key.startsWith(item.moduleKey + '.'))
                    .map(p => ({ key: p.key, label: vueAdmin.t(p.label) }))

                // 模块本身（view 权限）
                if (modulePowers.length > 0) {
                    children.unshift({
                        key: item.moduleKey,
                        label: vueAdmin.t({ t: "power.view" }),
                    })
                }

                const node: PowerNode = {
                    key: MENU_PREFIX + item.moduleKey,
                    label: vueAdmin.t(item.label),
                    children: children.length ? children : undefined,
                }
                acc.push(node)
            } else if (item.children?.length) {
                const children = walkMenu(item.children)
                if (children.length) {
                    acc.push({
                        key: MENU_PREFIX + (item.name || ''),
                        label: vueAdmin.t(item.label),
                        children,
                    })
                }
            }
            return acc
        }, [])
    }
    return walkMenu(props.menuTree)
})

function onCheck(data: any, state: any) {
    const allKeys: string[] = state.checkedKeys
    let keys = allKeys.filter((k: string) => !k.startsWith(MENU_PREFIX))
    const toggledKey: string = data.key

    // 菜单分组节点的子节点已由 el-tree 自动处理，直接返回
    if (toggledKey.startsWith(MENU_PREFIX)) {
        emit('update:modelValue', keys)
        return
    }

    const checked = new Set(keys)
    const isChecked = checked.has(toggledKey)

    if (isChecked) {
        // 勾选子权限时，自动勾选所有祖先
        let ancestor = toggledKey
        while (ancestor.includes('.')) {
            ancestor = ancestor.substring(0, ancestor.lastIndexOf('.'))
            checked.add(ancestor)
        }
    } else {
        // 取消父权限时，自动取消所有后代
        const prefix = toggledKey + '.'
        keys = keys.filter(key => !key.startsWith(prefix))
        emit('update:modelValue', keys)
        return
    }

    emit('update:modelValue', [...checked])
}

watch(() => [props.modelValue, props.allPowers], () => {
    nextTick(() => treeRef.value?.setCheckedKeys(props.modelValue || []))
}, { immediate: true })
</script>

<style scoped>
.power-tree-wrap {
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background: var(--el-bg-color);
    padding: 8px 12px;
    width: 100%;
}

.power-tree-wrap :deep(.el-tree) {
    background: transparent;
}
</style>