main-navbar.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
  3. <div class="site-navbar__header">
  4. <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
  5. <a class="site-navbar__brand-lg" href="javascript:;">木之云平台</a>
  6. <a class="site-navbar__brand-mini" href="javascript:;">木之云</a>
  7. </h1>
  8. </div>
  9. <div class="site-navbar__body clearfix">
  10. <el-menu
  11. class="site-navbar__menu"
  12. mode="horizontal">
  13. <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
  14. <icon-svg name="zhedie"></icon-svg>
  15. </el-menu-item>
  16. </el-menu>
  17. <el-menu
  18. class="site-navbar__menu site-navbar__menu--right"
  19. mode="horizontal">
  20. <el-menu-item index="0" @click="$router.push({ name: 'msgCenter' })">
  21. <template slot="title">
  22. <el-badge :value="cnt" :hidden="cnt < 1">
  23. <icon-svg name="lingdang" class="el-icon-lingdang"></icon-svg>
  24. </el-badge>
  25. </template>
  26. </el-menu-item>
  27. <el-menu-item index="1" @click="previewPic">
  28. <template slot="title">
  29. <el-badge value="">
  30. <icon-svg name="minprogram" class="el-icon-setting"></icon-svg>
  31. </el-badge>
  32. </template>
  33. </el-menu-item>
  34. <el-menu-item index="2" @click="$router.push({ name: 'theme' })">
  35. <template slot="title">
  36. <el-badge value="">
  37. <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
  38. </el-badge>
  39. </template>
  40. </el-menu-item>
  41. <el-menu-item class="site-navbar__avatar" index="3">
  42. <el-dropdown :show-timeout="0" placement="bottom">
  43. <span class="el-dropdown-link">
  44. <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
  45. </span>
  46. <el-dropdown-menu slot="dropdown">
  47. <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
  48. <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
  49. </el-dropdown-menu>
  50. </el-dropdown>
  51. </el-menu-item>
  52. </el-menu>
  53. </div>
  54. <!-- 弹窗, 修改密码 -->
  55. <update-password v-if="updatePasswordVisible" ref="updatePassowrd"></update-password>
  56. <Msg ref="msgDialog" @noticeAdded="noticeAdded"/>
  57. <youli-component v-if="previewVisible" ref="preview"/>
  58. </nav>
  59. </template>
  60. <script>
  61. import UpdatePassword from './main-navbar-update-password'
  62. import Msg from './common/msg'
  63. import { clearLoginInfo } from '@/utils'
  64. import PreviewComponent from '@/views/modules/common/preview-component'
  65. import YouliComponent from '@/views/modules/common/youli-component'
  66. import Vue from 'vue'
  67. export default {
  68. data () {
  69. return {
  70. updatePasswordVisible: false,
  71. cnt: 0,
  72. previewVisible: false
  73. }
  74. },
  75. components: {
  76. YouliComponent,
  77. PreviewComponent,
  78. UpdatePassword,
  79. Msg
  80. },
  81. computed: {
  82. navbarLayoutType: {
  83. get () { return this.$store.state.common.navbarLayoutType }
  84. },
  85. sidebarFold: {
  86. get () { return this.$store.state.common.sidebarFold },
  87. set (val) { this.$store.commit('common/updateSidebarFold', val) }
  88. },
  89. mainTabs: {
  90. get () { return this.$store.state.common.mainTabs },
  91. set (val) { this.$store.commit('common/updateMainTabs', val) }
  92. },
  93. userName: {
  94. get () {
  95. // return this.$store.state.user.name
  96. return Vue.cookie.get('name')
  97. }
  98. }
  99. },
  100. methods: {
  101. // 修改密码
  102. updatePasswordHandle () {
  103. this.updatePasswordVisible = true
  104. this.$nextTick(() => {
  105. this.$refs.updatePassowrd.init()
  106. })
  107. },
  108. // 退出
  109. logoutHandle () {
  110. this.$confirm(`确定进行[退出]操作?`, '提示', {
  111. confirmButtonText: '确定',
  112. cancelButtonText: '取消',
  113. type: 'warning'
  114. }).then(() => {
  115. clearLoginInfo()
  116. this.$router.push({ name: 'login' })
  117. // this.$http({
  118. // url: this.$http.adornUrl('/sys/logout'),
  119. // method: 'post',
  120. // data: this.$http.adornData()
  121. // }).then(({data}) => {
  122. // if (data && data.code === 0) {
  123. // clearLoginInfo()
  124. // this.$router.push({ name: 'login' })
  125. // }
  126. // })
  127. }).catch(() => {})
  128. },
  129. // 通知数量变化
  130. noticeAdded (num) {
  131. this.cnt = num
  132. },
  133. // 小程序图片预览
  134. previewPic () {
  135. this.previewVisible = true
  136. this.$nextTick(() => {
  137. this.$refs.preview.init()
  138. })
  139. }
  140. }
  141. }
  142. </script>