UserMenu.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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. <p class="help-cont" @click="showShopCar">
  9. <a-icon type="shopping-cart" style="font-size:16px;vertical-align: middle;margin: 0 5px;"/>
  10. <span style="vertical-align: middle;">购物车</span>
  11. </p>
  12. <!-- 通知 -->
  13. <notice-icon class="action"/>
  14. <!-- 皮肤设置 -->
  15. <a-popover trigger="click">
  16. <div slot="content" :style="{width: fontSize == 'large' ? '340px' : '300px'}">
  17. <a-form-model :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
  18. <a-form-model-item label="主题">
  19. <a-radio-group :value="theme" @change="changeTheme">
  20. <a-radio-button value="dark">
  21. 深色
  22. </a-radio-button>
  23. <a-radio-button value="light">
  24. 浅色
  25. </a-radio-button>
  26. </a-radio-group>
  27. </a-form-model-item>
  28. <a-form-model-item label="字体大小">
  29. <a-radio-group :value="fontSize" @change="changeFontSize">
  30. <a-radio-button value="small">
  31. </a-radio-button>
  32. <a-radio-button value="middle">
  33. </a-radio-button>
  34. <a-radio-button value="large">
  35. </a-radio-button>
  36. </a-radio-group>
  37. </a-form-model-item>
  38. <a-form-model-item label="默认针式打印机">
  39. <div style="line-height: normal;padding-top: 10px;">
  40. <span style="color: #999;">{{ printName ||'还未设置默认打印机' }}</span>
  41. <div style="padding-top: 10px;">
  42. <a-button type="danger" ghost @click="changePrintType('NEEDLE')" size="small">{{ printName ? '点击修改' : '选择打印机' }}</a-button>
  43. </div>
  44. </div>
  45. <!-- <a-radio-group @change="changePrintType">
  46. <a-radio-button value="NEEDLE">
  47. 选择针式打印机
  48. </a-radio-button>
  49. <a-radio-button value="INK">
  50. 选择喷墨打印机
  51. </a-radio-button>
  52. </a-radio-group> -->
  53. </a-form-model-item>
  54. </a-form-model>
  55. </div>
  56. <span class="skin">
  57. <a-icon style="font-size: 15px; padding: 0 3px 0 0" type="setting" />
  58. 设置
  59. </span>
  60. </a-popover>
  61. <a-dropdown>
  62. <span class="action ant-dropdown-link user-dropdown-menu">
  63. <!-- <a-avatar class="avatar" size="small" :src="avatar==''?defaultAvatar:avatar"/> -->
  64. <a-icon type="user" />
  65. <span style="margin: 0 5px;">{{ nickname }} - 【{{ userInfo.orgName || '--' }}】</span>
  66. <a-icon type="down" />
  67. </span>
  68. <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
  69. <a-menu-item v-for="(item, index) in authOrgsList" :key="index" @click="changeRoles(item.orgSn)">
  70. <a-icon type="link" style="vertical-align: super;"/>
  71. <span style="display: inline-block;white-space: nowrap;width: 100%;overflow: hidden;text-overflow:ellipsis;">{{ item.orgName }}</span>
  72. </a-menu-item>
  73. <a-menu-divider/>
  74. <a-menu-item key="5">
  75. <router-link :to="{ name: 'changePwd' }">
  76. <a-icon type="user"/>
  77. <span>修改密码</span>
  78. </router-link>
  79. </a-menu-item>
  80. <a-menu-item key="6">
  81. <a href="javascript:;" @click="handleLogout">
  82. <a-icon type="logout"/>
  83. <span>退出登录</span>
  84. </a>
  85. </a-menu-item>
  86. </a-menu>
  87. </a-dropdown>
  88. <a-icon type="fullscreen" title="全屏" :style="{ fontSize: '20px', color: '#08c', marginLeft: '5px' }" @click="screen" />
  89. </div>
  90. </div>
  91. </template>
  92. <script>
  93. import screenfull from 'screenfull'
  94. import NoticeIcon from '@/components/NoticeIcon'
  95. import { mapActions, mapGetters } from 'vuex'
  96. import defaultAvatar from '@/assets/avatar2.jpg'
  97. import store from '../../store'
  98. import Vue from 'vue'
  99. export default {
  100. name: 'UserMenu',
  101. components: {
  102. NoticeIcon
  103. },
  104. computed: {
  105. ...mapGetters(['nickname', 'avatar', 'authOrgs', 'userInfo', 'nowRoute', 'theme', 'fontSize', 'printDefNeedle']),
  106. authOrgsList () { // 过滤掉当前登录账户(不可由自己切换为自己)
  107. const _this = this
  108. const arr = []
  109. if (this.authOrgs && this.authOrgs.length > 0) {
  110. this.authOrgs.map(item => {
  111. if (item.orgSn != _this.userInfo.orgSn) {
  112. arr.push(item)
  113. }
  114. })
  115. }
  116. return arr
  117. },
  118. // 是否显示帮助视频按钮
  119. showHelp () {
  120. const isSaleOrder = this.nowRoute.indexOf('salesQuery') > -1 // 当前展示是否为销售单模块
  121. const isSalesReturn = this.nowRoute.indexOf('salesReturn') > -1 // 当前展示是否为销售退货模块
  122. const isPurchaseOrder = this.nowRoute.indexOf('purchaseOrder') > -1 // 当前展示是否为采购单管理模块
  123. const isPurchaseReturn = this.nowRoute.indexOf('purchaseReturn') > -1 // 当前展示是否为采购退货模块
  124. return isSaleOrder || isSalesReturn || isPurchaseOrder || isPurchaseReturn
  125. },
  126. printName () {
  127. const defName = this.printDefNeedle
  128. return defName && defName != 'undefined' ? defName : null
  129. }
  130. },
  131. data () {
  132. return {
  133. defaultAvatar: defaultAvatar,
  134. isFullscreen: false
  135. }
  136. },
  137. methods: {
  138. ...mapActions(['Logout', 'SetOrgSn', 'Login']),
  139. // 打开视频播放弹窗
  140. showVideo () {
  141. store.commit('IS_ShOW_VIDEO', true)
  142. },
  143. showShopCar () {
  144. this.$router.push({ name: 'shoppingCarList' })
  145. },
  146. handleLogout () {
  147. this.$confirm({
  148. title: '提示',
  149. content: '确定要退出登录吗 ?',
  150. centered: true,
  151. onOk: () => {
  152. return this.Logout({}).then(() => {
  153. setTimeout(() => {
  154. // window.location.reload()
  155. this.$router.push({ path: '/user/login' })
  156. }, 16)
  157. }).catch(err => {
  158. this.$message.error({
  159. title: '错误',
  160. description: err.message
  161. })
  162. })
  163. },
  164. onCancel () {
  165. }
  166. })
  167. },
  168. screen () {
  169. // 如果不允许进入全屏,发出不允许提示
  170. if (!screenfull.isEnabled) {
  171. this.$message.info('您的浏览器不能全屏')
  172. return false
  173. }
  174. screenfull.toggle()
  175. },
  176. // 切换角色
  177. changeRoles (sn) {
  178. return this.SetOrgSn(sn).then(() => {
  179. // 重新登录
  180. const params = { username: '', password: '' }
  181. return this.Login(params).then(() => {
  182. store.commit('SET_ROLES', Vue.ls.get('rolesAccess-qpls-md'))
  183. this.$router.push({ path: '/home' })
  184. setTimeout(() => {
  185. window.location.reload() // 刷新页面
  186. }, 100)
  187. })
  188. })
  189. },
  190. requestFailed (err) {
  191. console.log(err, 'error')
  192. this.isLoginError = true
  193. this.$notification['error']({
  194. message: '提示',
  195. description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
  196. duration: 4
  197. })
  198. },
  199. // 切换主题
  200. changeTheme (e) {
  201. this.$store.dispatch('ToggleTheme', e.target.value)
  202. },
  203. // 切换字体大小
  204. changeFontSize (e) {
  205. this.$store.dispatch('ToggleFontSize', e.target.value)
  206. },
  207. // 设置打印机
  208. changePrintType (type) {
  209. this.$store.dispatch('TogglePrintUseing', 0)
  210. this.$store.dispatch('TogglePrintSettingType', type)
  211. // 选择打印机
  212. this.$store.commit('SET_showSelectPrint', true)
  213. }
  214. }
  215. }
  216. </script>
  217. <style scoped="scoped">
  218. .help-cont,.skin{
  219. display: inline-block;
  220. cursor: pointer;
  221. transition: all 0.3s;
  222. padding: 0 12px;
  223. margin: 0;
  224. vertical-align: bottom;
  225. }
  226. .help-cont:hover, .skin:hover {
  227. background-color: rgba(0, 0, 0, 0.04);
  228. }
  229. </style>