GlobalHeader.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
  3. <a-layout-header
  4. v-if="!headerBarFixed"
  5. :class="[
  6. fixedHeader && 'ant-header-fixedHeader',
  7. sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
  8. ]"
  9. :style="{ padding: '0' }"
  10. >
  11. <div v-if="mode === 'sidemenu'" class="header" :class="theme">
  12. <a-icon
  13. v-if="device === 'mobile'"
  14. class="trigger"
  15. :type="collapsed ? 'menu-fold' : 'menu-unfold'"
  16. @click="toggle"
  17. ></a-icon>
  18. <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
  19. <span v-if="device === 'desktop'">
  20. <!-- 欢迎进入 Jeecg-Boot 企业级快速开发平台 -->
  21. </span>
  22. <span v-else>
  23. <!-- Jeecg-Boot -->
  24. </span>
  25. <user-menu :theme="theme" :showSwitch='showSwitch'/>
  26. <a href="http://220.191.168.86:18002/dashboard/analysis" target="_top" style="color:white;float: right;" v-if="showSwitch =='森语'">切换单证系统</a>
  27. </div>
  28. <!-- 顶部导航栏模式 -->
  29. <div v-else :class="['top-nav-header-index', theme]">
  30. <div class="header-index-wide">
  31. <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
  32. <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader" />
  33. <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
  34. <!-- mode="horizontal -->
  35. <s-menu mode="vertical" :menu="menus" :theme="theme"></s-menu>
  36. </div>
  37. <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"></a-icon>
  38. </div>
  39. <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
  40. </div>
  41. </div>
  42. </a-layout-header>
  43. </template>
  44. <script>
  45. import UserMenu from '../tools/UserMenu'
  46. import SMenu from '../menu/'
  47. import Logo from '../tools/Logo'
  48. import {getProjctName}from '../../../url.config'
  49. import { mixin } from '@/utils/mixin.js'
  50. export default {
  51. name: 'GlobalHeader',
  52. components: {
  53. UserMenu,
  54. SMenu,
  55. Logo
  56. },
  57. mixins: [mixin],
  58. props: {
  59. mode: {
  60. type: String,
  61. // sidemenu, topmenu
  62. default: 'sidemenu'
  63. },
  64. menus: {
  65. type: Array,
  66. required: true
  67. },
  68. theme: {
  69. type: String,
  70. required: false,
  71. default: 'dark'
  72. },
  73. collapsed: {
  74. type: Boolean,
  75. required: false,
  76. default: false
  77. },
  78. device: {
  79. type: String,
  80. required: false,
  81. default: 'desktop'
  82. }
  83. },
  84. data () {
  85. return {
  86. headerBarFixed: false,
  87. showSwitch:'森语',
  88. // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  89. topMenuStyle: {
  90. headerIndexLeft: {},
  91. topNavHeader: {},
  92. headerIndexRight: {},
  93. topSmenuStyle: {}
  94. }
  95. }
  96. },
  97. watch: {
  98. /** 监听设备变化 */
  99. device () {
  100. if (this.mode === 'topmenu') {
  101. this.buildTopMenuStyle()
  102. }
  103. },
  104. /** 监听导航栏模式变化 */
  105. mode (newVal) {
  106. if (newVal === 'topmenu') {
  107. this.buildTopMenuStyle()
  108. }
  109. }
  110. },
  111. // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  112. mounted () {
  113. window.addEventListener('scroll', this.handleScroll)
  114. // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  115. if (this.mode === 'topmenu') {
  116. this.buildTopMenuStyle()
  117. }
  118. if(getProjctName() =='技能博物馆'){
  119. this.showSwitch='技能'
  120. }
  121. // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  122. },
  123. methods: {
  124. handleScroll () {
  125. if (this.autoHideHeader) {
  126. let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  127. if (scrollTop > 100) {
  128. this.headerBarFixed = true
  129. } else {
  130. this.headerBarFixed = false
  131. }
  132. } else {
  133. this.headerBarFixed = false
  134. }
  135. },
  136. toggle () {
  137. this.$emit('toggle')
  138. },
  139. // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  140. buildTopMenuStyle () {
  141. if (this.mode === 'topmenu') {
  142. if (this.device === 'mobile') {
  143. // 手机端需要清空样式,否则显示会错乱
  144. this.topMenuStyle.topNavHeader = {}
  145. this.topMenuStyle.topSmenuStyle = {}
  146. this.topMenuStyle.headerIndexRight = {}
  147. this.topMenuStyle.headerIndexLeft = {}
  148. } else {
  149. let rightWidth = '360px'
  150. this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
  151. this.topMenuStyle.topSmenuStyle = { width: 'calc(100% - 165px)' }
  152. this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
  153. this.topMenuStyle.headerIndexLeft = { width: `calc(100% - ${rightWidth})` }
  154. }
  155. }
  156. }
  157. // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  158. }
  159. }
  160. </script>
  161. <style lang="less" scoped>
  162. /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  163. @height: 59px;
  164. .layout {
  165. .top-nav-header-index {
  166. .header-index-wide {
  167. margin-left: 10px;
  168. .ant-menu.ant-menu-horizontal {
  169. height: @height;
  170. line-height: @height;
  171. }
  172. }
  173. .trigger {
  174. line-height: 14px;
  175. &:hover {
  176. background: rgba(0, 0, 0, 0.05);
  177. }
  178. }
  179. }
  180. .header {
  181. z-index: 2;
  182. color: white;
  183. height: @height;
  184. background-color: @primary-color !important;
  185. transition: background 300ms;
  186. /* dark 样式 */
  187. &.dark {
  188. color: #000000;
  189. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  190. background-color: white !important;
  191. }
  192. }
  193. .header,
  194. .top-nav-header-index {
  195. &.dark .trigger:hover {
  196. background: rgba(0, 0, 0, 0.05);
  197. }
  198. }
  199. }
  200. .ant-layout-header {
  201. height: @height;
  202. line-height: @height;
  203. }
  204. // 技能博物馆
  205. // .layout .header[data-v-6d229060] {
  206. // background-color: #6bc5f3 !important;
  207. // }
  208. /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  209. </style>