THJ_Mobile/src/packages/pc/views/system/menu/index.vue

<template>
    <app-view class="system-menu">
        <app-table ref="tableRef" :data="dataList" v-model:columns="columns" row-key="code" :selection="false">
            <template #header>
                <app-action-menu :menus="getAuthButtons(['system_menu_add'])" @click="openComponent" />
                <el-button type="primary" :icon="isRowExpansion ? 'FolderOpened' : 'Folder'" @click="tableExpandAll">
                    <span v-if="isRowExpansion">全部收起</span>
                    <span v-else>全部展开</span>
                </el-button>
            </template>
            <template #operate="{ row }">
                <app-action-menu :menus="getAuthButtons(['system_menu_edit', 'system_menu_delete'])" :record="row"
                    @click="openComponent" linkButton />
            </template>
        </app-table>
        <component ref="componentRef" :is="asyncComponent" v-bind="{ selectedRow: activeMenu.record }"
            @closed="closeComponent" v-if="asyncComponent" />
    </app-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDataTable } from '@/hooks/datatable'
import { useMenu } from '@/hooks/menu'
import { useActionMenu } from '@pc/components/modules/action-menu'
import AppActionMenu from '@pc/components/modules/action-menu/index.vue'
import AppTable from '@pc/components/base/table/index.vue'

const { userRoutes } = useMenu()
const { activeMenu, asyncComponent, getAuthButtons, openComponent, closeComponent } = useActionMenu<Model.UserRoutes>()
const { dataList = userRoutes } = useDataTable<Model.UserRoutes>()
const tableRef = ref()
const isRowExpansion = ref(false)

const columns = ref([
    { prop: 'title', label: '菜单', },
    { prop: 'code', label: '代码', },
    { prop: 'component', label: '组件', },
    { prop: 'icon', label: '图标', },
    { prop: 'operate', label: '操作', }
])

// 展开或收起表格
const tableExpandAll = () => {
    const table = tableRef.value.elTable
    isRowExpansion.value = !isRowExpansion.value

    const toggleRowExpansionAll = (data: Model.UserRoutes[]) => {
        data.forEach((item) => {
            table.toggleRowExpansion(item, isRowExpansion.value)
            if (item.children) {
                toggleRowExpansionAll(item.children)
            }
        })
    }

    toggleRowExpansionAll(dataList.value)
}
</script>

<style lang="less">
@import './index.less';
</style>