123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <template>
- <a-layout :class="['layout', device]">
- <!-- SideMenu -->
- <a-drawer
- v-if="isMobile()"
- placement="left"
- :wrapClassName="`drawer-sider ${navTheme}`"
- :closable="false"
- :visible="collapsed"
- @close="drawerClose"
- >
- <side-menu
- mode="inline"
- :menus="menus"
- :theme="navTheme"
- :collapsed="false"
- :collapsible="true"
- @menuSelect="menuSelect"
- ></side-menu>
- </a-drawer>
- <side-menu
- v-else-if="isSideMenu()"
- mode="inline"
- :menus="menus"
- :theme="navTheme"
- :collapsed="collapsed"
- :collapsible="true"
- ></side-menu>
- <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
- <!-- layout header -->
- <global-header
- :mode="layoutMode"
- :menus="menus"
- :theme="navTheme"
- :collapsed="collapsed"
- :device="device"
- @toggle="toggle"
- />
- <!-- layout content -->
- <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
- <multi-tab v-if="multiTab"></multi-tab>
- <transition name="page-transition">
- <route-view />
- </transition>
- </a-layout-content>
- <!-- layout footer -->
- <a-layout-footer>
- <global-footer />
- </a-layout-footer>
- <!-- Setting Drawer (show in development mode) -->
- <!-- <setting-drawer v-if="!production"></setting-drawer>-->
- </a-layout>
- </a-layout>
- </template>
- <script>
- import { triggerWindowResizeEvent } from '@/utils/util'
- import { mapState, mapActions } from 'vuex'
- import { mixin, mixinDevice } from '@/utils/mixin'
- import config from '@/config/defaultSettings'
- import RouteView from './RouteView'
- import SideMenu from '@/components/Menu/SideMenu'
- import GlobalHeader from '@/components/GlobalHeader'
- import GlobalFooter from '@/components/GlobalFooter'
- import SettingDrawer from '@/components/SettingDrawer'
- export default {
- name: 'BasicLayout',
- mixins: [mixin, mixinDevice],
- components: {
- RouteView,
- SideMenu,
- GlobalHeader,
- GlobalFooter,
- SettingDrawer
- },
- data () {
- return {
- production: config.production,
- collapsed: false,
- menus: []
- }
- },
- computed: {
- ...mapState({
- // 动态主路由
- mainMenu: state => state.permission.addRouters
- }),
- contentPaddingLeft () {
- if (!this.fixSidebar || this.isMobile()) {
- return '0'
- }
- if (this.sidebarOpened) {
- return '256px'
- }
- return '80px'
- }
- },
- watch: {
- sidebarOpened (val) {
- this.collapsed = !val
- }
- },
- created () {
- this.menus = this.mainMenu.find(item => item.path === '/').children
- this.collapsed = !this.sidebarOpened
- },
- mounted () {
- const userAgent = navigator.userAgent
- if (userAgent.indexOf('Edge') > -1) {
- this.$nextTick(() => {
- this.collapsed = !this.collapsed
- setTimeout(() => {
- this.collapsed = !this.collapsed
- }, 16)
- })
- }
- },
- methods: {
- ...mapActions(['setSidebar']),
- toggle () {
- this.collapsed = !this.collapsed
- this.setSidebar(!this.collapsed)
- triggerWindowResizeEvent()
- },
- paddingCalc () {
- let left = ''
- if (this.sidebarOpened) {
- left = this.isDesktop() ? '256px' : '80px'
- } else {
- left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
- }
- return left
- },
- menuSelect () {
- },
- drawerClose () {
- this.collapsed = false
- }
- }
- }
- </script>
- <style lang="less">
- /*
- * The following styles are auto-applied to elements with
- * transition="page-transition" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the page transition by editing
- * these styles.
- */
- .page-transition-enter {
- opacity: 0;
- }
- .page-transition-leave-active {
- opacity: 0;
- }
- .page-transition-enter .page-transition-container,
- .page-transition-leave-active .page-transition-container {
- -webkit-transform: scale(1.1);
- transform: scale(1.1);
- }
- </style>
|