Main.vue 2.87 KB
<template>
    <el-container>
        <el-aside width="200px">
            <div class="logo"/>
            <el-menu :router="true" :default-openeds="getOpeneds()">
                <el-submenu v-for="(list, name ,index) in accessedMenu" :index="index" :key="index">
                    <template #title>
                        <span>{{ name }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="(title, i) in list" :index="getUrlByTitle(title)" :key="i">
                            {{
                                title
                            }}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

<!--                <el-submenu :index="100">-->
<!--                    <template #title>-->
<!--                        <span> 数据清洗 </span>-->
<!--                    </template>-->
<!--                    <el-menu-item-group>-->
<!--                        <el-menu-item :index="'/DataClean/DataClean'">-->
<!--                            数据清洗-->
<!--                        </el-menu-item>-->
<!--                    </el-menu-item-group>-->
<!--                </el-submenu>-->
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background: #fff; padding: 0;height: 35px">
                <div style="display: flex; justify-content: flex-end;">
                    <el-button @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-main>
                <router-view :key="$route.fullPath"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import {defineComponent, ref} from 'vue'
import {useRouter} from 'vue-router'
import {getAccessedMenu,} from '@/PublicUtil/PublicUtil'
import {getUrlByTitle} from '@/router'
import loginApi from '@/views/Login/LoginApi'

export default defineComponent({
    setup() {
        const accessedMenu = getAccessedMenu()
        const router = useRouter()

        const goto = function(path) {
            router.push(path)
        }

        const getOpeneds = function() {
            let result = []
            for (let i = 0; i < 1000; i++)
            {
                result.push(i)
            }
            return result
        }

        const logout = function() {
            loginApi.logout().then(
                () => {
                    router.push('/')
                }
            )
        }

        const initialize = function() {
            // log(accessedMenu)
        }

        initialize()

        return {
            // scalar
            // sequence
            // mapping
            accessedMenu,
            // function
            goto,
            getUrlByTitle,
            getOpeneds,
            logout,
        }
    },
})
</script>
<style>
</style>