UserMenu.vue 7.9 KB

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