UserMenu.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <div class="user-wrapper">
  3. <div class="content-box">
  4. <p class="help-cont" v-if="showHelp" @click="showVideo">
  5. <img style="width: 22px;height: 22px;vertical-align: middle;margin: 0 5px;" src="../../assets/icon_movie.png"/>
  6. <span style="vertical-align: middle;">帮助</span>
  7. </p>
  8. <notice-icon class="action"/>
  9. <a-dropdown>
  10. <span class="action ant-dropdown-link user-dropdown-menu">
  11. <!-- <a-avatar class="avatar" size="small" :src="avatar==''?defaultAvatar:avatar"/> -->
  12. <a-icon type="user" />
  13. <span style="margin: 0 5px;">{{ nickname }} - 【{{ userInfo.orgName || '--' }}】</span>
  14. <a-icon type="down" />
  15. </span>
  16. <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
  17. <a-menu-item v-for="(item, index) in authOrgsList" :key="index" @click="changeRoles(item.orgSn)">
  18. <a-icon type="link" style="vertical-align: super;"/>
  19. <span style="display: inline-block;white-space: nowrap;width: 100%;overflow: hidden;text-overflow:ellipsis;">{{ item.orgName }}</span>
  20. </a-menu-item>
  21. <a-menu-divider/>
  22. <a-menu-item key="5">
  23. <router-link :to="{ name: 'changePwd' }">
  24. <a-icon type="user"/>
  25. <span>修改密码</span>
  26. </router-link>
  27. </a-menu-item>
  28. <a-menu-item key="6">
  29. <a href="javascript:;" @click="handleLogout">
  30. <a-icon type="logout"/>
  31. <span>退出登录</span>
  32. </a>
  33. </a-menu-item>
  34. </a-menu>
  35. </a-dropdown>
  36. <a-icon type="fullscreen" title="全屏" :style="{ fontSize: '20px', color: '#08c', marginLeft: '5px' }" @click="screen" />
  37. </div>
  38. </div>
  39. </template>
  40. <script>
  41. import screenfull from 'screenfull'
  42. import NoticeIcon from '@/components/NoticeIcon'
  43. import { mapActions, mapGetters } from 'vuex'
  44. import defaultAvatar from '@/assets/avatar2.jpg'
  45. import store from '../../store'
  46. export default {
  47. name: 'UserMenu',
  48. components: {
  49. NoticeIcon
  50. },
  51. computed: {
  52. ...mapGetters(['nickname', 'avatar', 'authOrgs', 'userInfo', 'nowRoute']),
  53. authOrgsList () { // 过滤掉当前登录账户(不可由自己切换为自己)
  54. const _this = this
  55. const arr = []
  56. if (this.authOrgs && this.authOrgs.length > 0) {
  57. this.authOrgs.map(item => {
  58. if (item.orgSn != _this.userInfo.orgSn) {
  59. arr.push(item)
  60. }
  61. })
  62. }
  63. return arr
  64. },
  65. // 是否显示帮助视频按钮
  66. showHelp () {
  67. const isSaleOrder = this.nowRoute.indexOf('salesQuery') > -1 // 当前展示是否为销售单模块
  68. const isSalesReturn = this.nowRoute.indexOf('salesReturn') > -1 // 当前展示是否为销售退货模块
  69. const isPurchaseOrder = this.nowRoute.indexOf('purchaseOrder') > -1 // 当前展示是否为采购单管理模块
  70. const isPurchaseReturn = this.nowRoute.indexOf('purchaseReturn') > -1 // 当前展示是否为采购退货模块
  71. return isSaleOrder || isSalesReturn || isPurchaseOrder || isPurchaseReturn
  72. }
  73. },
  74. data () {
  75. return {
  76. defaultAvatar: defaultAvatar,
  77. isFullscreen: false
  78. }
  79. },
  80. methods: {
  81. ...mapActions(['Logout', 'SetOrgSn', 'Login']),
  82. // 打开视频播放弹窗
  83. showVideo () {
  84. store.commit('IS_ShOW_VIDEO', true)
  85. },
  86. handleLogout () {
  87. this.$confirm({
  88. title: '提示',
  89. content: '确定要退出登录吗 ?',
  90. centered: true,
  91. onOk: () => {
  92. return this.Logout({}).then(() => {
  93. setTimeout(() => {
  94. // window.location.reload()
  95. this.$router.push({ path: '/user/login' })
  96. }, 16)
  97. }).catch(err => {
  98. this.$message.error({
  99. title: '错误',
  100. description: err.message
  101. })
  102. })
  103. },
  104. onCancel () {
  105. }
  106. })
  107. },
  108. screen () {
  109. // 如果不允许进入全屏,发出不允许提示
  110. if (!screenfull.isEnabled) {
  111. this.$message.info('您的浏览器不能全屏')
  112. return false
  113. }
  114. screenfull.toggle()
  115. },
  116. // 切换角色
  117. changeRoles (sn) {
  118. console.log('888')
  119. return this.SetOrgSn(sn).then(() => {
  120. // 重新登录
  121. const params = { username: '', password: '' }
  122. return this.Login(params).then(() => {
  123. console.log(111)
  124. this.$router.push({ path: '/home' })
  125. console.log(222)
  126. window.location.reload() // 刷新页面
  127. console.log(333)
  128. }).catch(err => this.requestFailed(err))
  129. })
  130. },
  131. requestFailed (err) {
  132. console.log(err, 'error')
  133. this.isLoginError = true
  134. this.$notification['error']({
  135. message: '提示',
  136. description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
  137. duration: 4
  138. })
  139. }
  140. }
  141. }
  142. </script>
  143. <style scoped="scoped">
  144. .help-cont{
  145. display: inline-block;
  146. cursor: pointer;
  147. transition: all 0.3s;
  148. padding: 0 5px;
  149. margin: 0;
  150. vertical-align: bottom;
  151. }
  152. .help-cont:hover {
  153. background-color: rgba(0, 0, 0, 0.04);
  154. }
  155. </style>