|
|
@@ -1,209 +0,0 @@
|
|
|
-<template>
|
|
|
- <!-- 通栏布局 -->
|
|
|
- <template v-if="layout == 'header'">
|
|
|
- <header class="aminui-header">
|
|
|
- <div class="aminui-header-left">
|
|
|
- <div class="logo-bar">
|
|
|
- <img class="logo" :src="require('/public/img/logo.png')">
|
|
|
- <span>{{ $CONFIG.APP_NAME }}</span>
|
|
|
- </div>
|
|
|
- <el-tabs v-if="!ismobile" ref="menuTabs" class="nav-menu" v-model="tabsName" @tab-change="showMenu">
|
|
|
- <el-tab-pane v-for="item in menus" :key="item" :name="item.path">
|
|
|
- <template #label>
|
|
|
- <sc-iconify :icon="item.meta.icon || undefined"></sc-iconify>
|
|
|
- <vxe-text-ellipsis :title="item.meta.title" :content="item.meta.title"></vxe-text-ellipsis>
|
|
|
- </template>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- <div class="aminui-header-right">
|
|
|
- <userbar></userbar>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <section class="aminui-wrapper">
|
|
|
- <div v-if="!ismobile && currentMenu?.children?.length" :class="['aminui-side', menuIsCollapse && 'isCollapse']">
|
|
|
- <div v-if="!menuIsCollapse" class="aminui-side-top">
|
|
|
- <h2><vxe-text-ellipsis :title="currentMenu.meta.title" :content="currentMenu.meta.title"></vxe-text-ellipsis></h2>
|
|
|
- </div>
|
|
|
- <div class="aminui-side-scroll">
|
|
|
- <el-scrollbar>
|
|
|
- <el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
|
|
|
- <NavMenu :navMenus="menus.find(menu => menu.path == currentMenu.path).children"></NavMenu>
|
|
|
- </el-menu>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="aminui-side-collapse" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
|
|
- <sc-iconify :icon="menuIsCollapse ? 'ep:arrow-right': 'ep:arrow-left'" size="14"></sc-iconify>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Side-m v-if="ismobile"></Side-m>
|
|
|
- <div class="aminui-body el-container">
|
|
|
- <Tags v-if="!ismobile && layoutTags"></Tags>
|
|
|
- <div class="aminui-main" id="aminui-main">
|
|
|
- <router-view v-slot="{ Component }">
|
|
|
- <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
|
|
- <component v-if="$store.state.keepAlive.routeShow" :is="Component" :key="$route.fullPath" />
|
|
|
- <page-loading v-else />
|
|
|
- </keep-alive>
|
|
|
- </router-view>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 经典布局 -->
|
|
|
- <template v-else-if="layout == 'menu'">
|
|
|
- <header class="aminui-header">
|
|
|
- <div class="aminui-header-left">
|
|
|
- <div class="logo-bar">
|
|
|
- <img class="logo" :src="require('/public/img/logo.png')">
|
|
|
- <span>{{ $CONFIG.APP_NAME }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="aminui-header-right">
|
|
|
- <userbar></userbar>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <section class="aminui-wrapper">
|
|
|
- <div v-if="!ismobile" :class="['aminui-side', menuIsCollapse && 'isCollapse']">
|
|
|
- <div class="aminui-side-scroll">
|
|
|
- <el-scrollbar>
|
|
|
- <el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
|
|
|
- <NavMenu :navMenus="menus"></NavMenu>
|
|
|
- </el-menu>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Side-m v-if="ismobile"></Side-m>
|
|
|
- <div class="aminui-body el-container">
|
|
|
- <Topbar v-if="!ismobile"></Topbar>
|
|
|
- <Tags v-if="!ismobile && layoutTags"></Tags>
|
|
|
- <div class="aminui-main" id="aminui-main">
|
|
|
- <router-view v-slot="{ Component }">
|
|
|
- <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
|
|
- <component v-if="$store.state.keepAlive.routeShow" :is="Component" :key="$route.fullPath" />
|
|
|
- <page-loading v-else />
|
|
|
- </keep-alive>
|
|
|
- </router-view>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 默认布局 -->
|
|
|
- <template v-else>
|
|
|
- <section class="aminui-wrapper">
|
|
|
- <div v-if="!ismobile" :class="['aminui-side hasMenu', menuIsCollapse && 'isCollapse']">
|
|
|
- <div class="aminui-side-top">
|
|
|
- <div class="logo-bar">
|
|
|
- <img class="logo" :src="require('/public/img/logo.png')">
|
|
|
- <vxe-text-ellipsis v-if="!menuIsCollapse" :title="$CONFIG.APP_NAME" :content="$CONFIG.APP_NAME"></vxe-text-ellipsis>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="aminui-side-scroll">
|
|
|
- <el-scrollbar>
|
|
|
- <el-menu popper-class="side-menu-popper" :default-active="$route.fullPath" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
|
|
|
- <NavMenu :navMenus="menus"></NavMenu>
|
|
|
- </el-menu>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Side-m v-if="ismobile"></Side-m>
|
|
|
- <div class="aminui-body el-container">
|
|
|
- <Topbar>
|
|
|
- <userbar></userbar>
|
|
|
- </Topbar>
|
|
|
- <Tags v-if="!ismobile && layoutTags"></Tags>
|
|
|
- <div class="aminui-main" id="aminui-main">
|
|
|
- <router-view v-slot="{ Component }">
|
|
|
- <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
|
|
- <component v-if="$store.state.keepAlive.routeShow" :is="Component" :key="$route.fullPath" />
|
|
|
- <page-loading v-else />
|
|
|
- </keep-alive>
|
|
|
- </router-view>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </template>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import XEUtils from "xe-utils";
|
|
|
-
|
|
|
-import pageLoading from "./components/pageLoading";
|
|
|
-import SideM from "./components/sideM";
|
|
|
-import Topbar from "./components/topbar";
|
|
|
-import Tags from "./components/tags";
|
|
|
-import NavMenu from "./components/NavMenu";
|
|
|
-import userbar from "./components/userbar";
|
|
|
-import { nextTick } from 'vue';
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "index",
|
|
|
- components: { pageLoading, SideM, Topbar, Tags, NavMenu, userbar },
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabsName: ""
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- watch: {
|
|
|
- layout: {
|
|
|
- immediate: true,
|
|
|
- handler(val) {
|
|
|
- document.body.setAttribute("data-layout", val)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- currentMenu: {
|
|
|
- handler(val) {
|
|
|
- this.tabsName = XEUtils.get(val, "path", "")
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
- ismobile() {
|
|
|
- return this.$store.state.global.ismobile
|
|
|
- },
|
|
|
- layout() {
|
|
|
- return this.$store.state.global.layout
|
|
|
- },
|
|
|
- layoutTags() {
|
|
|
- return this.$store.state.global.layoutTags
|
|
|
- },
|
|
|
- menuIsCollapse() {
|
|
|
- return this.$store.state.global.menuIsCollapse
|
|
|
- },
|
|
|
- menus() {
|
|
|
- return (this.$TOOL.data.get("MENU") || []).filter(item => item.path !== this.$CONFIG.DASHBOARD_URL && !item.meta?.hidden)
|
|
|
- },
|
|
|
- currentMenu() {
|
|
|
- return XEUtils.first(XEUtils.searchTree(this.menus, item => item.path === this.$route.path)) || {}
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- created() {
|
|
|
- this.tabsName = XEUtils.get(this.currentMenu, "path", "")
|
|
|
- this.onLayoutResize();
|
|
|
- window.addEventListener("resize", this.onLayoutResize);
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- onLayoutResize() {
|
|
|
- this.$store.commit("SET_ismobile", document.body.clientWidth < 992);
|
|
|
- },
|
|
|
-
|
|
|
- // 点击显示
|
|
|
- showMenu(path) {
|
|
|
- const currentMenu = XEUtils.first(XEUtils.searchTree(this.menus, item => item.path === path))
|
|
|
- currentMenu && this.$router.push({ path: currentMenu.redirect || currentMenu.path });
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-</style>
|
