inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <a-layout :class="['layout', device]">
3     <!-- SideMenu -->
4     <a-drawer
5       v-if="isMobile()"
6       placement="left"
7       :wrapClassName="`drawer-sider ${navTheme}`"
8       :closable="false"
9       :visible="collapsed"
10       @close="drawerClose"
11     >
12       <side-menu
13         mode="inline"
14         :menus="menus"
15         :theme="navTheme"
16         :collapsed="false"
17         :collapsible="true"
18         @menuSelect="menuSelect"
19       ></side-menu>
20     </a-drawer>
21
22     <side-menu
23       v-else-if="isSideMenu()"
24       mode="inline"
25       :menus="menus"
26       :theme="navTheme"
27       :collapsed="collapsed"
28       :collapsible="true"
29     ></side-menu>
30
31     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
32       <!-- layout header -->
33       <global-header
34         :mode="layoutMode"
35         :menus="menus"
36         :theme="navTheme"
37         :collapsed="collapsed"
38         :device="device"
39         @toggle="toggle"
40       />
41
42       <!-- layout content -->
43       <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '55px' : '0' }">
44         <multi-tab v-if="multiTab"></multi-tab>
45         <transition name="page-transition">
46           <route-view />
47         </transition>
48       </a-layout-content>
49
50       <!-- layout footer -->
51       <a-layout-footer>
52         <global-footer />
53       </a-layout-footer>
54
55       <!-- Setting Drawer (show in development mode) -->
56       <setting-drawer v-if="!production"></setting-drawer>
57     </a-layout>
58   </a-layout>
59
60 </template>
61
62 <script>
63 import { triggerWindowResizeEvent } from '@/utils/util'
64 import { mapState, mapActions } from 'vuex'
65 import { mixin, mixinDevice } from '@/utils/mixin'
66 import config from '@/config/defaultSettings'
67
68 import RouteView from './RouteView'
69 import SideMenu from '@/components/Menu/SideMenu'
70 import GlobalHeader from '@/components/GlobalHeader'
71 import GlobalFooter from '@/components/GlobalFooter'
72 import SettingDrawer from '@/components/SettingDrawer'
73 import { convertRoutes } from '@/utils/routeConvert'
74
75 export default {
76   name: 'BasicLayout',
77   mixins: [mixin, mixinDevice],
78   components: {
79     RouteView,
80     SideMenu,
81     GlobalHeader,
82     GlobalFooter,
83     SettingDrawer
84   },
85   data () {
86     return {
87       production: config.production,
88       collapsed: false,
89       menus: []
90     }
91   },
92   computed: {
93     ...mapState({
94       // 动态主路由
95       mainMenu: state => state.permission.addRouters
96     }),
97     contentPaddingLeft () {
98       if (!this.fixSidebar || this.isMobile()) {
99         return '0'
100       }
101       if (this.sidebarOpened) {
102         return '230px'
103       }
104       return '80px'
105     }
106   },
107   watch: {
108     sidebarOpened (val) {
109       this.collapsed = !val
110     },
111     // 菜单变化
112     mainMenu (val) {
113       this.setMenus()
114     }
115   },
116   created () {
117     this.setMenus()
118     /* const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
119     this.menus = (routes && routes.children) || [] */
120     this.collapsed = !this.sidebarOpened
121   },
122   mounted () {
123     const userAgent = navigator.userAgent
124     if (userAgent.indexOf('Edge') > -1) {
125       this.$nextTick(() => {
126         this.collapsed = !this.collapsed
127         setTimeout(() => {
128           this.collapsed = !this.collapsed
129         }, 16)
130       })
131     }
132   },
133   methods: {
134     ...mapActions(['setSidebar']),
135     // 重新生成
136     setMenus () {
137       const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
138       this.menus = (routes && routes.children) || []
139     },
140     toggle () {
141       this.collapsed = !this.collapsed
142       this.setSidebar(!this.collapsed)
143       triggerWindowResizeEvent()
144     },
145     paddingCalc () {
146       let left = ''
147       if (this.sidebarOpened) {
148         left = this.isDesktop() ? '230px' : '80px'
149       } else {
150         left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
151       }
152       return left
153     },
154     menuSelect () {
155     },
156     drawerClose () {
157       this.collapsed = false
158     }
159   }
160 }
161 </script>
162
163 <style lang="less">
164 /*
165  * The following styles are auto-applied to elements with
166  * transition="page-transition" when their visibility is toggled
167  * by Vue.js.
168  *
169  * You can easily play with the page transition by editing
170  * these styles.
171  */
172
173 .page-transition-enter {
174   opacity: 0;
175 }
176
177 .page-transition-leave-active {
178   opacity: 0;
179 }
180
181 .page-transition-enter .page-transition-container,
182 .page-transition-leave-active .page-transition-container {
183   -webkit-transform: scale(1.1);
184   transform: scale(1.1);
185 }
186 </style>