UserMenu.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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" v-if="isShopCar" @click="showShopCar">
  9. <a-icon type="shopping-cart" style="font-size:18px;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. isShopCar () {
  127. const isInventoryQuery = this.nowRoute.indexOf('inventoryQuery') > -1
  128. return isInventoryQuery
  129. },
  130. printName () {
  131. const defName = this.printDefNeedle
  132. return defName && defName != 'undefined' ? defName : null
  133. }
  134. },
  135. data () {
  136. return {
  137. defaultAvatar: defaultAvatar,
  138. isFullscreen: false
  139. }
  140. },
  141. methods: {
  142. ...mapActions(['Logout', 'SetOrgSn', 'Login']),
  143. // 打开视频播放弹窗
  144. showVideo () {
  145. store.commit('IS_ShOW_VIDEO', true)
  146. },
  147. showShopCar () {
  148. this.$router.push({ path: '/shoppingCarManagement/shoppingCar/list' })
  149. },
  150. handleLogout () {
  151. this.$confirm({
  152. title: '提示',
  153. content: '确定要退出登录吗 ?',
  154. centered: true,
  155. onOk: () => {
  156. return this.Logout({}).then(() => {
  157. setTimeout(() => {
  158. // window.location.reload()
  159. this.$router.push({ path: '/user/login' })
  160. }, 16)
  161. }).catch(err => {
  162. this.$message.error({
  163. title: '错误',
  164. description: err.message
  165. })
  166. })
  167. },
  168. onCancel () {
  169. }
  170. })
  171. },
  172. screen () {
  173. // 如果不允许进入全屏,发出不允许提示
  174. if (!screenfull.isEnabled) {
  175. this.$message.info('您的浏览器不能全屏')
  176. return false
  177. }
  178. screenfull.toggle()
  179. },
  180. // 切换角色
  181. changeRoles (sn) {
  182. return this.SetOrgSn(sn).then(() => {
  183. // 重新登录
  184. const params = { username: '', password: '' }
  185. return this.Login(params).then(() => {
  186. store.commit('SET_ROLES', Vue.ls.get('rolesAccess-qpls-md'))
  187. this.$router.push({ path: '/home' })
  188. setTimeout(() => {
  189. window.location.reload() // 刷新页面
  190. }, 100)
  191. })
  192. })
  193. },
  194. requestFailed (err) {
  195. console.log(err, 'error')
  196. this.isLoginError = true
  197. this.$notification['error']({
  198. message: '提示',
  199. description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
  200. duration: 4
  201. })
  202. },
  203. // 切换主题
  204. changeTheme (e) {
  205. this.$store.dispatch('ToggleTheme', e.target.value)
  206. },
  207. // 切换字体大小
  208. changeFontSize (e) {
  209. this.$store.dispatch('ToggleFontSize', e.target.value)
  210. },
  211. // 设置打印机
  212. changePrintType (type) {
  213. this.$store.dispatch('TogglePrintUseing', 0)
  214. this.$store.dispatch('TogglePrintSettingType', type)
  215. // 选择打印机
  216. this.$store.commit('SET_showSelectPrint', true)
  217. }
  218. }
  219. }
  220. </script>
  221. <style scoped="scoped">
  222. .help-cont,.skin{
  223. display: inline-block;
  224. cursor: pointer;
  225. transition: all 0.3s;
  226. padding: 0 12px;
  227. margin: 0;
  228. vertical-align: bottom;
  229. }
  230. .help-cont:hover, .skin:hover {
  231. background-color: rgba(0, 0, 0, 0.04);
  232. }
  233. </style>