| commit | author | age | ||
| 9bcb19 | 1 | <template> |
| I | 2 | <div class="user-wrapper"> |
| 3 | <div class="content-box"> | |
| 4 | <span class="action" @click="toggleFullscreen"> | |
| 5 | <a-icon type="fullscreen-exit" v-if="isFullscreen"/> | |
| 6 | <a-icon type="fullscreen" v-else/> | |
| 7 | </span> | |
| 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"/> | |
| 12 | <span>{{ nickname }}</span> | |
| 13 | </span> | |
| 14 | <a-menu slot="overlay" class="user-dropdown-menu-wrapper"> | |
| 15 | <a-menu-item key="4" v-if="mode === 'sidemenu'"> | |
| 16 | <a @click="appToggled()" > | |
| 17 | <a-icon type="swap"/> | |
| 18 | <span>切换应用</span> | |
| 19 | </a> | |
| 20 | </a-menu-item> | |
| 21 | <a-menu-item key="0"> | |
| 22 | <router-link :to="{ name: 'center' }"> | |
| 23 | <a-icon type="user"/> | |
| 24 | <span>个人中心</span> | |
| 25 | </router-link> | |
| 26 | </a-menu-item> | |
| 27 | <a-menu-item key="1"> | |
| 28 | <router-link :to="{ name: 'settings' }"> | |
| 29 | <a-icon type="setting"/> | |
| 30 | <span>账户设置</span> | |
| 31 | </router-link> | |
| 32 | </a-menu-item> | |
| 33 | <a-menu-divider/> | |
| 34 | <a-menu-item key="3"> | |
| 35 | <a href="javascript:;" @click="handleLogout"> | |
| 36 | <a-icon type="logout"/> | |
| 37 | <span>退出登录</span> | |
| 38 | </a> | |
| 39 | </a-menu-item> | |
| 40 | </a-menu> | |
| 41 | </a-dropdown> | |
| 42 | </div> | |
| 43 | <a-modal | |
| 44 | title="切换应用" | |
| 45 | :visible="visible" | |
| 46 | :footer="null" | |
| 47 | :confirm-loading="confirmLoading" | |
| 48 | @cancel="handleCancel" | |
| 49 | > | |
| 50 | <a-form :form="form1" > | |
| 51 | <a-form-item | |
| 52 | :labelCol="labelCol" | |
| 53 | :wrapperCol="wrapperCol" | |
| 54 | label="选择应用" | |
| 55 | > | |
| 56 | <a-menu | |
| 57 | mode="inline" | |
| 58 | :default-selected-keys="this.defApp" | |
| 59 | style="border-bottom:0px;lineHeight:55px;" | |
| 60 | > | |
| 61 | <a-menu-item v-for="(item) in userInfo.apps" :key="item.code" style="top:0px;" @click="switchApp(item.code)"> | |
| 62 | {{ item.name }} | |
| 63 | </a-menu-item> | |
| 64 | </a-menu> | |
| 65 | </a-form-item> | |
| 66 | </a-form> | |
| 67 | </a-modal> | |
| 68 | </div> | |
| 69 | </template> | |
| 70 | ||
| 71 | <script> | |
| 72 | import screenfull from 'screenfull' | |
| 73 | import NoticeIcon from '@/components/NoticeIcon' | |
| 74 | import { mapActions, mapGetters } from 'vuex' | |
| 75 | import { ALL_APPS_MENU } from '@/store/mutation-types' | |
| 76 | import Vue from 'vue' | |
| 77 | import { message } from 'ant-design-vue/es' | |
| 78 | ||
| 79 | export default { | |
| 80 | name: 'UserMenu', | |
| 81 | components: { | |
| 82 | NoticeIcon, | |
| 83 | screenfull | |
| 84 | }, | |
| 85 | props: { | |
| 86 | mode: { | |
| 87 | type: String, | |
| 88 | // sidemenu, topmenu | |
| 89 | default: 'sidemenu' | |
| 90 | } | |
| 91 | }, | |
| 92 | data () { | |
| 93 | return { | |
| 94 | labelCol: { | |
| 95 | xs: { span: 24 }, | |
| 96 | sm: { span: 5 } | |
| 97 | }, | |
| 98 | wrapperCol: { | |
| 99 | xs: { span: 24 }, | |
| 100 | sm: { span: 16 } | |
| 101 | }, | |
| 102 | visible: false, | |
| 103 | confirmLoading: false, | |
| 104 | form1: this.$form.createForm(this), | |
| 105 | defApp: [], | |
| 106 | isFullscreen: false | |
| 107 | } | |
| 108 | }, | |
| 109 | ||
| 110 | computed: { | |
| 111 | ...mapGetters(['nickname', 'avatar', 'userInfo']) | |
| 112 | }, | |
| 113 | methods: { | |
| 114 | ...mapActions(['Logout', 'MenuChange']), | |
| 115 | ||
| 116 | handleLogout () { | |
| 117 | this.$confirm({ | |
| 118 | title: '提示', | |
| 119 | content: '真的要注销登录吗 ?', | |
| 120 | okText: '确定', | |
| 121 | cancelText: '取消', | |
| 122 | onOk: () => { | |
| 123 | return this.Logout({}).then(() => { | |
| 124 | setTimeout(() => { | |
| 125 | window.location.reload() | |
| 126 | }, 16) | |
| 127 | }).catch(err => { | |
| 128 | this.$message.error({ | |
| 129 | title: '错误', | |
| 130 | description: err.message | |
| 131 | }) | |
| 132 | }) | |
| 133 | }, | |
| 134 | onCancel () { | |
| 135 | } | |
| 136 | }) | |
| 137 | }, | |
| 138 | ||
| 139 | /** | |
| 140 | * 打开切换应用框 | |
| 141 | */ | |
| 142 | appToggled () { | |
| 143 | this.visible = true | |
| 144 | this.defApp.push(Vue.ls.get(ALL_APPS_MENU)[0].code) | |
| 145 | }, | |
| 146 | ||
| 147 | switchApp (appCode) { | |
| 148 | this.visible = false | |
| 149 | this.defApp = [] | |
| 150 | const applicationData = this.userInfo.apps.filter(item => item.code === appCode) | |
| 151 | const hideMessage = message.loading('正在切换应用！', 0) | |
| 152 | this.MenuChange(applicationData[0]).then((res) => { | |
| 153 | hideMessage() | |
| 154 | // eslint-disable-next-line handle-callback-err | |
| 155 | }).catch((err) => { | |
| 156 | message.error('应用切换异常') | |
| 157 | }) | |
| 158 | }, | |
| 159 | handleCancel () { | |
| 160 | this.form1.resetFields() | |
| 161 | this.visible = false | |
| 162 | }, | |
| 163 | /* 全屏切换 */ | |
| 164 | toggleFullscreen () { | |
| 165 | if (!screenfull.isEnabled) { | |
| 166 | message.error('您的浏览器不支持全屏模式') | |
| 167 | return | |
| 168 | } | |
| 169 | screenfull.toggle() | |
| 170 | if (screenfull.isFullscreen) { | |
| 171 | this.isFullscreen = false | |
| 172 | } else { | |
| 173 | this.isFullscreen = true | |
| 174 | } | |
| 175 | } | |
| 176 | } | |
| 177 | } | |
| 178 | </script> | |
| 179 | ||
| 180 | <style lang="less" scoped> | |
| 181 | .appRedio { | |
| 182 | border:1px solid #91d5ff; | |
| 183 | padding:10px 20px; | |
| 184 | background: #e6f7ff; | |
| 185 | border-radius:2px; | |
| 186 | margin-bottom:10px; | |
| 187 | color: #91d5ff; | |
| 188 | /*display: inline; | |
| 189 | margin-bottom:10px;*/ | |
| 190 | } | |
| 191 | </style> | |
