zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:layout

This commit is contained in:
shijing 2024-05-08 15:34:39 +08:00
parent 054829996e
commit b32511f35e
1 changed files with 229 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
src/layout/index.vue
View File

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