<template>
|
<div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
|
<div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
|
|
<div class="layer-page-leaf-container">
|
<div class="avue-sidebar" v-show="validSidebar">
|
<!-- 左侧导航栏 -->
|
<logo />
|
<sidebar />
|
<div class="footer">
|
<div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]">
|
<img :src="collapse" alt="" @click="setCollapse">
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="layer-page-right-container">
|
<div class="layer-content-top">
|
<top ref="top" />
|
|
<div class="tags-box">
|
<tags />
|
</div>
|
</div>
|
|
<div class="layer-content-bottom">
|
<div class="avue-main">
|
<div class="main-avue-view-container" v-show="!isSearch" v-if="isRefresh">
|
<router-view #="{ Component }">
|
<keep-alive :include="$store.getters.tagsKeep">
|
<component :is="Component" />
|
</keep-alive>
|
</router-view>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<GlobalWS />
|
<!-- <wechat></wechat> -->
|
</div>
|
</template>
|
<script>
|
import index from '@/mixins/index'
|
import wechat from './wechat.vue'
|
//import { validatenull } from 'utils/validate';
|
import { mapGetters } from 'vuex'
|
import tags from './tags.vue'
|
import search from './search.vue'
|
import logo from './logo.vue'
|
import top from './top/index.vue'
|
import sidebar from './sidebar/index.vue'
|
import GlobalWS from '@/page/index/GlobalWS.vue'
|
|
import collapse from '@/assets/images/pageLayout/collapse.png'
|
|
export default {
|
mixins: [index],
|
components: {
|
GlobalWS,
|
top,
|
logo,
|
tags,
|
search,
|
sidebar,
|
wechat,
|
},
|
name: 'index',
|
data () {
|
return {
|
collapse: collapse
|
}
|
},
|
provide () {
|
return {
|
index: this,
|
}
|
},
|
computed: {
|
...mapGetters([
|
'isHorizontal',
|
'isRefresh',
|
'isLock',
|
'isCollapse',
|
'isSearch',
|
'menu',
|
'setting',
|
]),
|
validSidebar () {
|
return !(
|
(this.$route.meta || {}).menu === false || (this.$route.query || {}).menu === 'false'
|
)
|
},
|
},
|
props: [],
|
methods: {
|
//打开菜单
|
openMenu (item = {}) {
|
this.$store.dispatch('GetMenu', item.id).then(data => {
|
if (data.length !== 0) {
|
this.$router.$avueRouter.formatRoutes(data, true)
|
|
// 获取url里面的redirect
|
const redirect = decodeURIComponent(this.$route.query.redirect || '')
|
if (redirect) {
|
console.log('redirect', redirect)
|
const [path, queryString] = redirect.split('?')
|
const query = queryString ? Object.fromEntries(new URLSearchParams(queryString)) : {}
|
this.$router.push({ path, query })
|
}
|
}
|
//当点击顶部菜单后默认打开第一个菜单
|
/*if (!this.validatenull(item)) {
|
let itemActive = {},
|
childItemActive = 0;
|
if (item.path) {
|
itemActive = item;
|
} else {
|
if (this.menu[childItemActive].length === 0) {
|
itemActive = this.menu[childItemActive];
|
} else {
|
itemActive = this.menu[childItemActive].children[childItemActive];
|
}
|
}
|
this.$store.commit('SET_MENU_ID', item);
|
this.$router.push({
|
path: this.$router.$avueRouter.getPath({
|
name: (itemActive.label || itemActive.name),
|
src: itemActive.path
|
}, itemActive.meta)
|
});
|
}*/
|
})
|
},
|
|
setCollapse () {
|
this.$store.commit('SET_COLLAPSE')
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// #avue-view{
|
// :deep(){
|
// .avue-crud__body{
|
// .el-form{
|
// height: 745px;
|
// overflow: auto;
|
// }
|
// }
|
// }
|
// }
|
|
.tags-box {
|
padding-bottom: 30px;
|
}
|
</style>
|
