<script setup>
|
import { nextTick, ref, inject } from 'vue';
|
import { useRouter } from "vue-router";
|
import { get, post, postForm } from '@/utils/request.js'
|
import { logout } from '@/config.js';
|
import * as Icons from "@ant-design/icons-vue";
|
import { message } from 'ant-design-vue';
|
import {
|
MenuUnfoldOutlined,
|
MenuFoldOutlined,
|
HomeOutlined,
|
CloseOutlined,
|
RedoOutlined,
|
UserOutlined,
|
TranslationOutlined,
|
} from "@ant-design/icons-vue";
|
import { formatMessage } from '@/utils/localeUtils.js';
|
|
const globalState = inject('globalState');
|
const selectedKeys = ref([]);
|
const collapsed = ref(false);
|
const router = useRouter();
|
let routerCache = ref([]);
|
let routerCacheMap = ref(new Map());
|
let currentCache = ref(null);
|
let isRouterAlive = ref(true);
|
const menuCache = ref([]);
|
|
const components = {
|
...Icons,
|
};
|
|
getMenu()
|
function getMenu() {
|
get('/api/auth/menu', {}).then((result) => {
|
menuCache.value = result.data.data;
|
})
|
}
|
|
function menuSelect(item) {
|
console.log(item.key);
|
router.push({
|
path: item.key
|
})
|
|
let name = item.item.name;
|
currentCache.value = name;
|
// console.log(routerCache.value);
|
|
if (name != undefined && routerCache.value.indexOf(name) == -1) {
|
routerCache.value.push(item.item.name)
|
routerCacheMap.value.set(name, item.key)
|
}
|
}
|
|
function closeTabs(name) {
|
let tmp = []
|
routerCache.value.forEach((item) => {
|
if (item != name) {
|
tmp.push(item);
|
}
|
})
|
|
if (tmp == 0) {
|
router.push({
|
path: '/'
|
})
|
routerCache.value.push('home')
|
routerCacheMap.value.set('home', '/')
|
selectedKeys.value = ['/']
|
} else {
|
switchTabs(tmp[0]);
|
}
|
routerCache.value = tmp;
|
}
|
|
function reloadTabs() {
|
const hide = message.loading(formatMessage('common.loading', '加载中'));
|
try {
|
isRouterAlive.value = false;
|
nextTick(() => {
|
isRouterAlive.value = true;
|
message.success(formatMessage('common.success', '加载成功'));
|
})
|
} catch (error) {
|
message.error(formatMessage('common.fail', '加载失败'));
|
} finally {
|
hide();
|
}
|
}
|
|
function switchTabs(name) {
|
router.push({
|
path: routerCacheMap.value.get(name)
|
})
|
|
currentCache.value = name;
|
selectedKeys.value = [routerCacheMap.value.get(name)]
|
|
// console.log(routerCacheMap, name, routerCacheMap.value.get(name));
|
|
}
|
|
const switchLocale = (locale) => {
|
globalState.locale = locale;
|
localStorage.setItem('locale', locale)
|
reloadTabs()
|
console.log(locale);
|
}
|
|
</script>
|
|
<template>
|
<a-layout class="main">
|
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
|
<div class="logo" />
|
<a-menu v-for="(item, index) in menuCache" :key="index" v-model:selectedKeys="selectedKeys" @select="menuSelect"
|
theme="dark" mode="inline">
|
<div>
|
<a-menu-item key="/" name="主页">
|
<HomeOutlined /> {{ formatMessage('common.home', '主页') }}
|
</a-menu-item>
|
</div>
|
|
<a-sub-menu v-if="item.type == 0">
|
<template #title>
|
<span>
|
<component :is="components[ref(item.icon).value]" />
|
{{ item.name }}
|
</span>
|
</template>
|
<div v-for="(child, idx) in item.children">
|
<a-menu-item v-if="child.status == 1" :key="child.route" :name="child.name">
|
{{ child.name }}
|
</a-menu-item>
|
</div>
|
</a-sub-menu>
|
</a-menu>
|
|
</a-layout-sider>
|
<a-layout>
|
<a-layout-header style="background: #fff; padding: 0">
|
<div class="header-top">
|
<div class="header-top-left">
|
<MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
|
<MenuFoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
|
</div>
|
<div class="header-top-right">
|
<div class="trigger">
|
<a-dropdown>
|
<TranslationOutlined />
|
<template #overlay>
|
<a-menu>
|
<a-menu-item @click="switchLocale('enUS')"
|
:class="globalState.locale == 'enUS' ? 'active' : ''">English</a-menu-item>
|
<a-menu-item @click="switchLocale('zhCN')"
|
:class="globalState.locale == 'zhCN' ? 'active' : ''">简体中文</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</div>
|
<div>
|
<a-dropdown>
|
<a class="header-user" @click.prevent>
|
<UserOutlined />
|
<span>{{ globalState.user.username }}</span>
|
</a>
|
<template #overlay>
|
<a-menu @click="logout">
|
<a-menu-item key="logout">{{ formatMessage('common.account.logout', '退出') }}</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</div>
|
</div>
|
</div>
|
</a-layout-header>
|
<a-layout-content class="content-view">
|
<div class="tabs-fixed">
|
<div v-for="(item, index) in routerCache" :key="index" @click="switchTabs(item)" class="tabs-item"
|
:class="currentCache == item ? 'tabs-item-active' : ''">
|
<div :class="currentCache == item ? '' : 'tabs-item-reload-none'" @click="reloadTabs" @click.stop>
|
<RedoOutlined />
|
</div>
|
<div>{{ item }}</div>
|
<div @click="closeTabs(item)" @click.stop>
|
<CloseOutlined />
|
</div>
|
</div>
|
</div>
|
<router-view v-slot="{ Component, route }" v-if="isRouterAlive">
|
<keep-alive :include="routerCache">
|
<component :is="Component" />
|
</keep-alive>
|
</router-view>
|
</a-layout-content>
|
</a-layout>
|
</a-layout>
|
</template>
|
|
<style scoped></style>
|
