123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <div class="user-wrapper">
- <div class="content-box">
- <p class="help-cont" v-if="showHelp" @click="showVideo">
- <img style="width: 22px;height: 22px;vertical-align: middle;margin: 0 5px;" src="../../assets/icon_movie.png"/>
- <span style="vertical-align: middle;">帮助</span>
- </p>
- <p class="help-cont" v-if="isShopCar" @click="showShopCar">
- <a-icon type="shopping-cart" style="font-size:18px;vertical-align: middle;margin: 0 5px;"/>
- <span style="vertical-align: middle;">购物车</span>
- </p>
- <!-- 通知 -->
- <notice-icon class="action"/>
- <!-- 皮肤设置 -->
- <a-popover trigger="click">
- <div slot="content" :style="{width: fontSize == 'large' ? '340px' : '300px'}">
- <a-form-model :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
- <a-form-model-item label="主题">
- <a-radio-group :value="theme" @change="changeTheme">
- <a-radio-button value="dark">
- 深色
- </a-radio-button>
- <a-radio-button value="light">
- 浅色
- </a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="字体大小">
- <a-radio-group :value="fontSize" @change="changeFontSize">
- <a-radio-button value="small">
- 小
- </a-radio-button>
- <a-radio-button value="middle">
- 中
- </a-radio-button>
- <a-radio-button value="large">
- 大
- </a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="默认针式打印机">
- <div style="line-height: normal;padding-top: 10px;">
- <span style="color: #999;">{{ printName ||'还未设置默认打印机' }}</span>
- <div style="padding-top: 10px;">
- <a-button type="danger" ghost @click="changePrintType('NEEDLE')" size="small">{{ printName ? '点击修改' : '选择打印机' }}</a-button>
- </div>
- </div>
- <!-- <a-radio-group @change="changePrintType">
- <a-radio-button value="NEEDLE">
- 选择针式打印机
- </a-radio-button>
- <a-radio-button value="INK">
- 选择喷墨打印机
- </a-radio-button>
- </a-radio-group> -->
- </a-form-model-item>
- </a-form-model>
- </div>
- <span class="skin">
- <a-icon style="font-size: 15px; padding: 0 3px 0 0" type="setting" />
- 设置
- </span>
- </a-popover>
- <a-dropdown>
- <span class="action ant-dropdown-link user-dropdown-menu">
- <!-- <a-avatar class="avatar" size="small" :src="avatar==''?defaultAvatar:avatar"/> -->
- <a-icon type="user" />
- <span style="margin: 0 5px;">{{ nickname }} - 【{{ userInfo.orgName || '--' }}】</span>
- <a-icon type="down" />
- </span>
- <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
- <a-menu-item v-for="(item, index) in authOrgsList" :key="index" @click="changeRoles(item.orgSn)">
- <a-icon type="link" style="vertical-align: super;"/>
- <span style="display: inline-block;white-space: nowrap;width: 100%;overflow: hidden;text-overflow:ellipsis;">{{ item.orgName }}</span>
- </a-menu-item>
- <a-menu-divider/>
- <a-menu-item key="5">
- <router-link :to="{ name: 'changePwd' }">
- <a-icon type="user"/>
- <span>修改密码</span>
- </router-link>
- </a-menu-item>
- <a-menu-item key="6">
- <a href="javascript:;" @click="handleLogout">
- <a-icon type="logout"/>
- <span>退出登录</span>
- </a>
- </a-menu-item>
- </a-menu>
- </a-dropdown>
- <a-icon type="fullscreen" title="全屏" :style="{ fontSize: '20px', color: '#08c', marginLeft: '5px' }" @click="screen" />
- </div>
- </div>
- </template>
- <script>
- import screenfull from 'screenfull'
- import NoticeIcon from '@/components/NoticeIcon'
- import { mapActions, mapGetters } from 'vuex'
- import defaultAvatar from '@/assets/avatar2.jpg'
- import store from '../../store'
- import Vue from 'vue'
- export default {
- name: 'UserMenu',
- components: {
- NoticeIcon
- },
- computed: {
- ...mapGetters(['nickname', 'avatar', 'authOrgs', 'userInfo', 'nowRoute', 'theme', 'fontSize', 'printDefNeedle']),
- authOrgsList () { // 过滤掉当前登录账户(不可由自己切换为自己)
- const _this = this
- const arr = []
- if (this.authOrgs && this.authOrgs.length > 0) {
- this.authOrgs.map(item => {
- if (item.orgSn != _this.userInfo.orgSn) {
- arr.push(item)
- }
- })
- }
- return arr
- },
- // 是否显示帮助视频按钮
- showHelp () {
- const isSaleOrder = this.nowRoute.indexOf('salesQuery') > -1 // 当前展示是否为销售单模块
- const isSalesReturn = this.nowRoute.indexOf('salesReturn') > -1 // 当前展示是否为销售退货模块
- const isPurchaseOrder = this.nowRoute.indexOf('purchaseOrder') > -1 // 当前展示是否为采购单管理模块
- const isPurchaseReturn = this.nowRoute.indexOf('purchaseReturn') > -1 // 当前展示是否为采购退货模块
- return isSaleOrder || isSalesReturn || isPurchaseOrder || isPurchaseReturn
- },
- isShopCar () {
- const isInventoryQuery = this.nowRoute.indexOf('inventoryQuery') > -1
- return isInventoryQuery
- },
- printName () {
- const defName = this.printDefNeedle
- return defName && defName != 'undefined' ? defName : null
- }
- },
- data () {
- return {
- defaultAvatar: defaultAvatar,
- isFullscreen: false
- }
- },
- methods: {
- ...mapActions(['Logout', 'SetOrgSn', 'Login']),
- // 打开视频播放弹窗
- showVideo () {
- store.commit('IS_ShOW_VIDEO', true)
- },
- showShopCar () {
- this.$router.push({ path: '/shoppingCarManagement/shoppingCar/list' })
- },
- handleLogout () {
- this.$confirm({
- title: '提示',
- content: '确定要退出登录吗 ?',
- centered: true,
- onOk: () => {
- return this.Logout({}).then(() => {
- setTimeout(() => {
- // window.location.reload()
- this.$router.push({ path: '/user/login' })
- }, 16)
- }).catch(err => {
- this.$message.error({
- title: '错误',
- description: err.message
- })
- })
- },
- onCancel () {
- }
- })
- },
- screen () {
- // 如果不允许进入全屏,发出不允许提示
- if (!screenfull.isEnabled) {
- this.$message.info('您的浏览器不能全屏')
- return false
- }
- screenfull.toggle()
- },
- // 切换角色
- changeRoles (sn) {
- return this.SetOrgSn(sn).then(() => {
- // 重新登录
- const params = { username: '', password: '' }
- return this.Login(params).then(() => {
- store.commit('SET_ROLES', Vue.ls.get('rolesAccess-qpls-md'))
- this.$router.push({ path: '/home' })
- setTimeout(() => {
- window.location.reload() // 刷新页面
- }, 100)
- })
- })
- },
- requestFailed (err) {
- console.log(err, 'error')
- this.isLoginError = true
- this.$notification['error']({
- message: '提示',
- description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
- duration: 4
- })
- },
- // 切换主题
- changeTheme (e) {
- this.$store.dispatch('ToggleTheme', e.target.value)
- },
- // 切换字体大小
- changeFontSize (e) {
- this.$store.dispatch('ToggleFontSize', e.target.value)
- },
- // 设置打印机
- changePrintType (type) {
- this.$store.dispatch('TogglePrintUseing', 0)
- this.$store.dispatch('TogglePrintSettingType', type)
- // 选择打印机
- this.$store.commit('SET_showSelectPrint', true)
- }
- }
- }
- </script>
- <style scoped="scoped">
- .help-cont,.skin{
- display: inline-block;
- cursor: pointer;
- transition: all 0.3s;
- padding: 0 12px;
- margin: 0;
- vertical-align: bottom;
- }
- .help-cont:hover, .skin:hover {
- background-color: rgba(0, 0, 0, 0.04);
- }
- </style>
|