hitch-sb-antd/src/layouts/BasicLayout.vue

<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="mobileMenus"
        :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>-->
      <setting-drawer></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: [],
      analysisFinance: {
        'path': '/mobile/analysisFinance',
        'name': 'MobileAnalysisFinance',
        'meta': {
          'title': '财务指标',
          'keepAlive': false,
          'hiddenHeaderContent': false,
          'target': null,
          'permission': null
        }
      },
      analysisFinancing: {
        'path': '/mobile/analysisFinancing',
        'name': 'MobileAnalysisFinancing',
        'meta': {
          'title': '融资指标',
          'keepAlive': false,
          'hiddenHeaderContent': false,
          'target': null,
          'permission': null
        }
      },
      analysisInvest: {
        'path': '/mobile/analysisInvest',
        'name': 'MobileAnalysisInvest',
        'meta': {
          'title': '投资指标',
          'keepAlive': false,
          'hiddenHeaderContent': false,
          'target': null,
          'permission': null
        }
      },
      analysisLiquidate: {
        'path': '/mobile/analysisLiquidate',
        'name': 'MobileAnalysisLiquidate',
        'meta': {
          'title': '清收指标',
          'keepAlive': false,
          'hiddenHeaderContent': false,
          'target': null,
          'permission': null
        }
      },
      mobileMenus: [
        {
          'path': '/dashboard',
          'name': 'dashboard',
          'component': {
            'name': 'RouteView',
            'props': {
              'keepAlive': {
                'default': true
              }
            },
            'beforeCreate': [
              null
            ],
            'beforeDestroy': [
              null
            ],
            '__file': 'src/layouts/RouteView.vue',
            '_Ctor': {}
          },
          'meta': {
            'title': '指标分析',
            'icon': 'form',
            'keepAlive': false,
            'hiddenHeaderContent': false,
            'target': null,
            'permission': 'test:test'
          },
          'redirect': '/dashboard/workplace',
          'children': []
        }
      ]
    }
  },
  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.setMobileMenus()
    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: {
    setMobileMenus () {
      if (this.BaseTool.Object.isBlank(this.menus)) {
        return
      }
      const menuJson = JSON.stringify(this.menus)
      if (menuJson.indexOf('财务指标') !== -1) {
        this.mobileMenus[0].children.push(this.analysisFinance)
      }
      if (menuJson.indexOf('融资指标') !== -1) {
        this.mobileMenus[0].children.push(this.analysisFinancing)
      }
      if (menuJson.indexOf('投资指标') !== -1) {
        this.mobileMenus[0].children.push(this.analysisInvest)
      }
      if (menuJson.indexOf('清收指标') !== -1) {
        this.mobileMenus[0].children.push(this.analysisLiquidate)
      }
    },
    ...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">
  @import url('../components/global.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);
  }

  .ant-pro-multi-tab{
    margin-left: 0px !important;
  }
  .ant-tabs-bar{
    padding-left: 0px !important;
  }
</style>