rax-medical/src/views/permissions-manage/index.vue

<template>
    <div class="permissions-manage-page">
        <div class="menu-box">
            <CommonMenu :menuData="menuData" @selectMenu="selectMenu"/>
        </div>
        <div class="content-box">
            <div class="header-box">
                <PageTabs ref="pageTabsRef"/>
            </div>
            <div class="main-box">
                <div class="background-block">
                    <RouterView/>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import type {MenuItem} from '@/utils/public-interface'
import CommonMenu from '@/components/common-menu.vue'
import PageTabs from '@/components/page-tabs.vue'
import {useRoute, useRouter} from "vue-router";
import {useUserStore} from "@/stores/user-info-store";

const router = useRouter()
const route = useRoute();
const menuData = ref([])

const pageTabsRef = ref()
const selectMenu = (e: MenuItem) => {
    pageTabsRef.value.setTab(e)
}

onMounted(async () => {
    const paths = route.path.split("/")
    const e: any = await useUserStore().getMenuChild("/" + paths[1])
    menuData.value = e
    if (e && e.length > 0) {
        router.push(e[0].path)
    }
})

</script>

<style lang='scss' scoped>
.permissions-manage-page {
    width: 100%;
    height: 100%;
    display: flex;

    .menu-box {
        width: 200px;
        height: 100%;
        background: white;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .content-box {
        width: calc(100% - 200px);
        height: 100%;

        .header-box {
            width: 100%;
            height: 50px;
        }

        .main-box {
            width: 100%;
            height: calc(100% - 50px);
            padding: 10px;

            .background-block {
                width: 100%;
                height: 100%;
                background: white;
                border-radius: 15px;
                padding: 20px;

            }
        }
    }
}</style>