重构vxetable（formconfig待办）-- layout 菜单

src/layout/index copy.vue

@@ -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>