inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <transition name="showHeader">
3     <div v-if="visible" class="header-animat">
4       <a-layout-header
5         v-if="visible"
6         :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
7         :style="{ padding: '0', height: '55px' }">
8         <div v-if="mode === 'sidemenu'" class="header">
9
10           <a-menu
11             style="height: 55px; border-bottom: 0px;"
12             mode="horizontal"
13             :default-selected-keys="this.defApp"
14           >
15             <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
16             <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" style="padding-left: 20px; padding-right: 20px;"/>
17
18             <a-menu-item v-for="(item) in userInfo.apps" :key="item.code" style="top:0px; line-height: 55px; padding-left: 10px; padding-right: 10px" @click="switchApp(item.code)">
19               {{ item.name }}
20             </a-menu-item>
21             <user-menu></user-menu>
22           </a-menu>
23
24         </div>
25         <div v-else :class="['top-nav-header-index', theme]">
26
27           <div class="header-index-wide">
28             <div class="header-index-left">
29               <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
30               <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
31               <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
32             </div>
33             <user-menu class="header-index-right"></user-menu>
34           </div>
35         </div>
36       </a-layout-header>
37     </div>
38   </transition>
39 </template>
40
41 <script>
42 import UserMenu from '../tools/UserMenu'
43 import SMenu from '../Menu/'
44 import Logo from '../tools/Logo'
45 import { mixin } from '@/utils/mixin'
46 import { mapActions, mapGetters } from 'vuex'
47 import { ALL_APPS_MENU } from '@/store/mutation-types'
48 import Vue from 'vue'
49 import { message } from 'ant-design-vue/es'
50
51 export default {
52   name: 'GlobalHeader',
53   components: {
54     UserMenu,
55     SMenu,
56     Logo
57   },
58   computed: {
59     ...mapGetters(['userInfo'])
60   },
61   created () {
62     this.defApp.push(Vue.ls.get(ALL_APPS_MENU)[0].code)
63   },
64   mixins: [mixin],
65   props: {
66     mode: {
67       type: String,
68       // sidemenu, topmenu
69       default: 'sidemenu'
70     },
71     menus: {
72       type: Array,
73       required: true
74     },
75     theme: {
76       type: String,
77       required: false,
78       default: 'dark'
79     },
80     collapsed: {
81       type: Boolean,
82       required: false,
83       default: false
84     },
85     device: {
86       type: String,
87       required: false,
88       default: 'desktop'
89     }
90   },
91   data () {
92     return {
93       visible: true,
94       oldScrollTop: 0,
95       defApp: []
96     }
97   },
98   mounted () {
99     document.addEventListener('scroll', this.handleScroll, { passive: true })
100   },
101   methods: {
102     ...mapActions(['MenuChange']),
103
104     /**
105      * 应用切换
106      */
107     switchApp (appCode) {
108       this.defApp = []
109       const applicationData = this.userInfo.apps.filter(item => item.code === appCode)
110       const hideMessage = message.loading('正在切换应用!', 0)
111       this.MenuChange(applicationData[0]).then((res) => {
112           hideMessage()
113       // eslint-disable-next-line handle-callback-err
114       }).catch((err) => {
115         message.error('应用切换异常')
116       })
117     },
118     handleScroll () {
119       if (!this.autoHideHeader) {
120         return
121       }
122
123       const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
124       if (!this.ticking) {
125         this.ticking = true
126         requestAnimationFrame(() => {
127           if (this.oldScrollTop > scrollTop) {
128             this.visible = true
129           } else if (scrollTop > 300 && this.visible) {
130             this.visible = false
131           } else if (scrollTop < 300 && !this.visible) {
132             this.visible = true
133           }
134           this.oldScrollTop = scrollTop
135           this.ticking = false
136         })
137       }
138     },
139     toggle () {
140       this.$emit('toggle')
141     }
142   },
143   beforeDestroy () {
144     document.body.removeEventListener('scroll', this.handleScroll, true)
145   }
146 }
147 </script>
148
149 <style lang="less">
150 @import '../index.less';
151
152 .header-animat{
153   position: relative;
154   z-index: @ant-global-header-zindex;
155 }
156 .showHeader-enter-active {
157   transition: all 0.25s ease;
158 }
159 .showHeader-leave-active {
160   transition: all 0.5s ease;
161 }
162 .showHeader-enter, .showHeader-leave-to {
163   opacity: 0;
164 }
165 </style>