fix:layout
This commit is contained in:
parent
054829996e
commit
b32511f35e
|
|
@ -6,11 +6,16 @@
|
|||
<div class="logo-bar">
|
||||
<!-- <img class="logo" src="img/bbmg.png"> -->
|
||||
<!-- <span>{{ $CONFIG.APP_NAME }}</span> -->
|
||||
<img class="logo" :src="baseLogo">
|
||||
<img class="logo" :src="baseLogo" />
|
||||
<span>{{ baseName }}</span>
|
||||
</div>
|
||||
<ul v-if="!ismobile" class="nav">
|
||||
<li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''" @click="showMenu(item)">
|
||||
<li
|
||||
v-for="item in menu"
|
||||
:key="item"
|
||||
:class="pmenu.path == item.path ? 'active' : ''"
|
||||
@click="showMenu(item)"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="item.meta.icon || 'el-icon-menu'" />
|
||||
</el-icon>
|
||||
|
|
@ -23,21 +28,35 @@
|
|||
</div>
|
||||
</header>
|
||||
<section class="aminui-wrapper">
|
||||
<div v-if="!ismobile && nextMenu.length > 0 || !pmenu.component"
|
||||
:class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
|
||||
<div
|
||||
v-if="(!ismobile && nextMenu.length > 0) || !pmenu.component"
|
||||
:class="
|
||||
menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'
|
||||
"
|
||||
>
|
||||
<div v-if="!menuIsCollapse" class="adminui-side-top">
|
||||
<h2>{{ pmenu.meta.title }}</h2>
|
||||
</div>
|
||||
<div class="adminui-side-scroll">
|
||||
<el-scrollbar>
|
||||
<el-menu :default-active="active" router :collapse="menuIsCollapse"
|
||||
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
|
||||
<el-menu
|
||||
:default-active="active"
|
||||
router
|
||||
:collapse="menuIsCollapse"
|
||||
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED"
|
||||
>
|
||||
<NavMenu :navMenus="nextMenu"></NavMenu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
|
||||
<div
|
||||
class="adminui-side-bottom"
|
||||
@click="$store.commit('TOGGLE_menuIsCollapse')"
|
||||
>
|
||||
<el-icon
|
||||
><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold
|
||||
v-else
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
|
|
@ -46,8 +65,14 @@
|
|||
<Tags v-if="!ismobile && layoutTags"></Tags>
|
||||
<div class="adminui-main" id="adminui-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
||||
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
|
||||
<keep-alive
|
||||
:include="this.$store.state.keepAlive.keepLiveRoute"
|
||||
>
|
||||
<component
|
||||
:is="Component"
|
||||
:key="$route.fullPath"
|
||||
v-if="$store.state.keepAlive.routeShow"
|
||||
/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
<iframe-view></iframe-view>
|
||||
|
|
@ -60,8 +85,16 @@
|
|||
<template v-else-if="layout == 'menu'">
|
||||
<header class="adminui-header">
|
||||
<div class="adminui-header-left">
|
||||
<div class="logo-bar" style="width: 202px;background: #ffffff;margin-right: 10px;border-radius: 5px;">
|
||||
<img class="logo" :src="baseLogo">
|
||||
<div
|
||||
class="logo-bar"
|
||||
style="
|
||||
width: 202px;
|
||||
background: #ffffff;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<img class="logo" :src="baseLogo" />
|
||||
<!-- <img class="logo" src="/img/bbmg.jpg"> -->
|
||||
</div>
|
||||
<div class="logo-bar">
|
||||
|
|
@ -73,17 +106,32 @@
|
|||
</div>
|
||||
</header>
|
||||
<section class="aminui-wrapper">
|
||||
<div v-if="!ismobile" :class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
|
||||
<div
|
||||
v-if="!ismobile"
|
||||
:class="
|
||||
menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'
|
||||
"
|
||||
>
|
||||
<div class="adminui-side-scroll">
|
||||
<el-scrollbar>
|
||||
<el-menu :default-active="active" router :collapse="menuIsCollapse"
|
||||
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
|
||||
<el-menu
|
||||
:default-active="active"
|
||||
router
|
||||
:collapse="menuIsCollapse"
|
||||
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED"
|
||||
>
|
||||
<NavMenu :navMenus="menu"></NavMenu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
|
||||
<div
|
||||
class="adminui-side-bottom"
|
||||
@click="$store.commit('TOGGLE_menuIsCollapse')"
|
||||
>
|
||||
<el-icon
|
||||
><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold
|
||||
v-else
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
|
|
@ -92,8 +140,14 @@
|
|||
<!-- <Tags v-if="!ismobile && layoutTags"></Tags> -->
|
||||
<div class="adminui-main" id="adminui-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
||||
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
|
||||
<keep-alive
|
||||
:include="this.$store.state.keepAlive.keepLiveRoute"
|
||||
>
|
||||
<component
|
||||
:is="Component"
|
||||
:key="$route.fullPath"
|
||||
v-if="$store.state.keepAlive.routeShow"
|
||||
/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
<iframe-view></iframe-view>
|
||||
|
|
@ -107,14 +161,20 @@
|
|||
<header class="adminui-header">
|
||||
<div class="adminui-header-left">
|
||||
<div class="logo-bar">
|
||||
<img class="logo" src="img/bbmg.jpg">
|
||||
<img class="logo" src="img/bbmg.jpg" />
|
||||
<span>{{ $CONFIG.APP_NAME }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="adminui-header-right">
|
||||
<div v-if="!ismobile" class="adminui-header-menu">
|
||||
<el-menu mode="horizontal" :default-active="active" router background-color="#222b45" text-color="#fff"
|
||||
active-text-color="var(--el-color-primary)">
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
:default-active="active"
|
||||
router
|
||||
background-color="#222b45"
|
||||
text-color="#fff"
|
||||
active-text-color="var(--el-color-primary)"
|
||||
>
|
||||
<NavMenu :navMenus="menu"></NavMenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
|
@ -127,8 +187,14 @@
|
|||
<Tags v-if="!ismobile && layoutTags"></Tags>
|
||||
<div class="adminui-main" id="adminui-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
||||
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
|
||||
<keep-alive
|
||||
:include="this.$store.state.keepAlive.keepLiveRoute"
|
||||
>
|
||||
<component
|
||||
:is="Component"
|
||||
:key="$route.fullPath"
|
||||
v-if="$store.state.keepAlive.routeShow"
|
||||
/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
<iframe-view></iframe-view>
|
||||
|
|
@ -143,16 +209,26 @@
|
|||
<div v-if="!ismobile" class="aminui-side-split">
|
||||
<div class="aminui-side-split-top">
|
||||
<router-link :to="$CONFIG.DASHBOARD_URL">
|
||||
<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo-r.png">
|
||||
<img
|
||||
class="logo"
|
||||
:title="$CONFIG.APP_NAME"
|
||||
src="img/logo-r.png"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="adminui-side-split-scroll">
|
||||
<el-scrollbar>
|
||||
<ul>
|
||||
<li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''"
|
||||
@click="showMenu(item)">
|
||||
<li
|
||||
v-for="item in menu"
|
||||
:key="item"
|
||||
:class="pmenu.path == item.path ? 'active' : ''"
|
||||
@click="showMenu(item)"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="item.meta.icon || el-icon-menu" />
|
||||
<component
|
||||
:is="item.meta.icon || el - icon - menu"
|
||||
/>
|
||||
</el-icon>
|
||||
<p>{{ item.meta.title }}</p>
|
||||
</li>
|
||||
|
|
@ -160,21 +236,35 @@
|
|||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!ismobile && nextMenu.length > 0 || !pmenu.component"
|
||||
:class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
|
||||
<div
|
||||
v-if="(!ismobile && nextMenu.length > 0) || !pmenu.component"
|
||||
:class="
|
||||
menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'
|
||||
"
|
||||
>
|
||||
<div v-if="!menuIsCollapse" class="adminui-side-top">
|
||||
<h2>{{ pmenu.meta.title }}</h2>
|
||||
</div>
|
||||
<div class="adminui-side-scroll">
|
||||
<el-scrollbar>
|
||||
<el-menu :default-active="active" router :collapse="menuIsCollapse"
|
||||
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
|
||||
<el-menu
|
||||
:default-active="active"
|
||||
router
|
||||
:collapse="menuIsCollapse"
|
||||
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED"
|
||||
>
|
||||
<NavMenu :navMenus="nextMenu"></NavMenu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
|
||||
<div
|
||||
class="adminui-side-bottom"
|
||||
@click="$store.commit('TOGGLE_menuIsCollapse')"
|
||||
>
|
||||
<el-icon
|
||||
><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold
|
||||
v-else
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
|
|
@ -185,8 +275,14 @@
|
|||
<Tags v-if="!ismobile && layoutTags"></Tags>
|
||||
<div class="adminui-main" id="adminui-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
|
||||
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
|
||||
<keep-alive
|
||||
:include="this.$store.state.keepAlive.keepLiveRoute"
|
||||
>
|
||||
<component
|
||||
:is="Component"
|
||||
:key="$route.fullPath"
|
||||
v-if="$store.state.keepAlive.routeShow"
|
||||
/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
<iframe-view></iframe-view>
|
||||
|
|
@ -195,11 +291,19 @@
|
|||
</section>
|
||||
</template>
|
||||
|
||||
<div class="main-maximize-exit" @click="exitMaximize"><el-icon><el-icon-close /></el-icon></div>
|
||||
<div class="main-maximize-exit" @click="exitMaximize">
|
||||
<el-icon><el-icon-close /></el-icon>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layout-setting" @click="openSetting"><el-icon><el-icon-brush-filled /></el-icon></div> -->
|
||||
|
||||
<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
|
||||
<el-drawer
|
||||
title="布局实时演示"
|
||||
v-model="settingDialog"
|
||||
:size="400"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<setting></setting>
|
||||
</el-drawer>
|
||||
|
||||
|
|
@ -207,17 +311,17 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import SideM from './components/sideM.vue';
|
||||
import Topbar from './components/topbar.vue';
|
||||
import Tags from './components/tags.vue';
|
||||
import NavMenu from './components/NavMenu.vue';
|
||||
import userbar from './components/userbar.vue';
|
||||
import setting from './components/setting.vue';
|
||||
import iframeView from './components/iframeView.vue';
|
||||
import autoExit from './other/autoExit.js';
|
||||
import data from './../utils/baseJson';
|
||||
import SideM from "./components/sideM.vue";
|
||||
import Topbar from "./components/topbar.vue";
|
||||
import Tags from "./components/tags.vue";
|
||||
import NavMenu from "./components/NavMenu.vue";
|
||||
import userbar from "./components/userbar.vue";
|
||||
import setting from "./components/setting.vue";
|
||||
import iframeView from "./components/iframeView.vue";
|
||||
import autoExit from "./other/autoExit.js";
|
||||
import data from "./../utils/baseJson";
|
||||
export default {
|
||||
name: 'index',
|
||||
name: "index",
|
||||
components: {
|
||||
SideM,
|
||||
Topbar,
|
||||
|
|
@ -226,7 +330,7 @@ export default {
|
|||
userbar,
|
||||
setting,
|
||||
iframeView,
|
||||
autoExit
|
||||
autoExit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -234,102 +338,136 @@ export default {
|
|||
menu: [],
|
||||
nextMenu: [],
|
||||
pmenu: {},
|
||||
active: ''
|
||||
}
|
||||
active: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseName() {
|
||||
// let baseInFo = data[data.current];
|
||||
let baseName = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_name : '智能管理平台';
|
||||
let baseName =
|
||||
this.$TOOL.data.get("BASE_INFO") !== null
|
||||
? this.$TOOL.data.get("BASE_INFO").base.base_name
|
||||
: "智能管理平台";
|
||||
// let baseName = baseInFo!==null?baseInFo.base.base_name:'智能管理平台';
|
||||
return baseName;
|
||||
},
|
||||
baseLogo() {
|
||||
// let baseInFo = data[data.current];
|
||||
let base_logo = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_logo : 'img/logo.png';
|
||||
let base_logo =
|
||||
this.$TOOL.data.get("BASE_INFO") !== null
|
||||
? this.$TOOL.data.get("BASE_INFO").base.base_logo
|
||||
: "img/logo.png";
|
||||
// let base_logo = baseInFo!==null?baseInFo.base.base_logo:'img/logo.png';
|
||||
return base_logo
|
||||
return base_logo;
|
||||
},
|
||||
ismobile() {
|
||||
return this.$store.state.global.ismobile
|
||||
return this.$store.state.global.ismobile;
|
||||
},
|
||||
layout() {
|
||||
return this.$store.state.global.layout
|
||||
return this.$store.state.global.layout;
|
||||
},
|
||||
layoutTags() {
|
||||
return this.$store.state.global.layoutTags
|
||||
return this.$store.state.global.layoutTags;
|
||||
},
|
||||
menuIsCollapse() {
|
||||
return this.$store.state.global.menuIsCollapse
|
||||
}
|
||||
return this.$store.state.global.menuIsCollapse;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
document.title = this.$store.state.global.baseName
|
||||
document.title = this.$store.state.global.baseName;
|
||||
this.onLayoutResize();
|
||||
window.addEventListener('resize', this.onLayoutResize);
|
||||
window.addEventListener("resize", this.onLayoutResize);
|
||||
var menu = this.$router.sc_getMenu();
|
||||
// console.log("menu", menu);
|
||||
this.menu = this.filterUrl(menu);
|
||||
this.showThis()
|
||||
// console.log("this.menu", this.menu);
|
||||
this.showThis();
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.showThis()
|
||||
this.showThis();
|
||||
},
|
||||
layout: {
|
||||
handler(val) {
|
||||
document.body.setAttribute('data-layout', val)
|
||||
document.body.setAttribute("data-layout", val);
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openSetting() {
|
||||
this.settingDialog = true;
|
||||
},
|
||||
onLayoutResize() {
|
||||
this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
|
||||
this.$store.commit("SET_ismobile", document.body.clientWidth < 992);
|
||||
},
|
||||
//路由监听高亮
|
||||
showThis() {
|
||||
this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
|
||||
function hasPerm(perms_need, perms_have) {
|
||||
let has = false;
|
||||
for (var m = 0; m < perms_need.length; m++) {
|
||||
if (perms_have.indexOf(perms_need[m]) > -1) {
|
||||
has = true;
|
||||
}
|
||||
}
|
||||
return has;
|
||||
}
|
||||
this.pmenu = this.$route.meta.breadcrumb
|
||||
? this.$route.meta.breadcrumb[0]
|
||||
: {};
|
||||
let lists = this.pmenu.children;
|
||||
let perms = this.$TOOL.data.get("PERMISSIONS") || [];
|
||||
for (var i = 0; i < lists.length; i++) {
|
||||
if (lists[i].meta && lists[i].meta.perms) {
|
||||
let has = hasPerm(lists[i].meta.perms, perms);
|
||||
if (!has) {
|
||||
lists.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log("this.pmenu.children", this.pmenu.children);
|
||||
this.nextMenu = this.filterUrl(this.pmenu.children);
|
||||
this.$nextTick(() => {
|
||||
this.active = this.$route.meta.active || this.$route.fullPath;
|
||||
})
|
||||
});
|
||||
},
|
||||
//点击显示
|
||||
showMenu(route) {
|
||||
this.pmenu = route;
|
||||
this.nextMenu = this.filterUrl(route.children);
|
||||
if ((!route.children || route.children.length == 0) && route.component) {
|
||||
this.$router.push({ path: route.path })
|
||||
if (
|
||||
(!route.children || route.children.length == 0) &&
|
||||
route.component
|
||||
) {
|
||||
this.$router.push({ path: route.path });
|
||||
}
|
||||
},
|
||||
//转换外部链接的路由
|
||||
filterUrl(map) {
|
||||
var newMap = []
|
||||
map && map.forEach(item => {
|
||||
item.meta = item.meta ? item.meta : {};
|
||||
//处理隐藏
|
||||
if (item.meta.hidden || item.meta.type == "button") {
|
||||
return false
|
||||
}
|
||||
//处理http
|
||||
if (item.meta.type == 'iframe') {
|
||||
item.path = `/i/${item.name}`;
|
||||
}
|
||||
//递归循环
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children = this.filterUrl(item.children)
|
||||
}
|
||||
newMap.push(item)
|
||||
})
|
||||
var newMap = [];
|
||||
map &&
|
||||
map.forEach((item) => {
|
||||
item.meta = item.meta ? item.meta : {};
|
||||
//处理隐藏
|
||||
if (item.meta.hidden || item.meta.type == "button") {
|
||||
return false;
|
||||
}
|
||||
//处理http
|
||||
if (item.meta.type == "iframe") {
|
||||
item.path = `/i/${item.name}`;
|
||||
}
|
||||
//递归循环
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children = this.filterUrl(item.children);
|
||||
}
|
||||
newMap.push(item);
|
||||
});
|
||||
return newMap;
|
||||
},
|
||||
//退出最大化
|
||||
exitMaximize() {
|
||||
document.getElementById('app').classList.remove('main-maximize')
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("app").classList.remove("main-maximize");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue