inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
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>