登录后台，通过添加一个下拉选项【系统设置】来控制系统的后侧系统设置，布局如下：
- 修改UserMenu.vue文件
1.全局搜索“账户设置”，找到对应的vue文件：UserMenu.vue
2.添加【系统设置】下拉选项
在UserMenu.vue中的“账户设置”的代码
账户设置
下面添加代码：
系统设置
3.并将【密码修改】、【切换部门】的a-menu-item的key分别设置为4、5
4.引入系统设置页面SettingDrawer.vue
1）在
添加代码
2）import区域添加代码 import SettingDrawer from "@/components/setting/SettingDrawer";
3） components中添加 SettingDrawer
5.为步骤2中的【系统设置】添加click方法
在methods中添加
systemSetting(){
this.$refs.settingDrawer.showDrawer()
}
- 修改SettingDrawer.vue文件
将代码
更改为：
- 最终代码
1.UserMenu.vue
<template>
<div class="user-wrapper" :class="theme"> <span class="action"> <a class="logout_title" target="_blank" href="http://jeecg-boot.mydoc.io"> <a-icon type="question-circle-o">a-icon> a> span> <header-notice class="action"/> <a-dropdown> <span class="action action-full ant-dropdown-link user-dropdown-menu"> <a-avatar class="avatar" size="small" :src="getAvatar()"/> <span v-if="isDesktop()">欢迎您，{{ nickname() }}span> span> <a-menu slot="overlay" class="user-dropdown-menu-wrapper"> <a-menu-item key="0"> <router-link :to="{ name: 'account-center' }"> <a-icon type="user"/> <span>个人中心span> router-link> a-menu-item> <a-menu-item key="1"> <router-link :to="{ name: 'account-settings-base' }"> <a-icon type="setting"/> <span>账户设置span> router-link> a-menu-item> <a-menu-item key="3" @click="systemSetting"> <a-icon type="tool"/> <span>系统设置span> a-menu-item> <a-menu-item key="4" @click="updatePassword"> <a-icon type="setting"/> <span>密码修改span> a-menu-item> <a-menu-item key="5" @click="updateCurrentDepart"> <a-icon type="cluster"/> <span>切换部门span> a-menu-item> a-menu> a-dropdown> <span class="action"> <a class="logout_title" href="javascript:;" @click="handleLogout"> <a-icon type="logout"/> <span v-if="isDesktop()"> 退出登录span> a> span> <user-password ref="userPassword">user-password> <depart-select ref="departSelect" :closable="true" title="部门切换">depart-select> <setting-drawer ref="settingDrawer" :closable="true" title="系统设置">setting-drawer> div> template> <script> import HeaderNotice from './HeaderNotice' import UserPassword from './UserPassword' import SettingDrawer from "@/components/setting/SettingDrawer"; import DepartSelect from './DepartSelect' import { mapActions, mapGetters } from 'vuex' import { mixinDevice } from '@/utils/mixin.js' export default { name: "UserMenu", mixins: [mixinDevice], components: { HeaderNotice, UserPassword, DepartSelect, SettingDrawer }, props: { theme: { type: String, required: false, default: 'dark' } }, methods: { ...mapActions(["Logout"]), ...mapGetters(["nickname", "avatar","userInfo"]), getAvatar(){ console.log('url = '+ window._CONFIG['imgDomainURL']+"/"+this.avatar()) return window._CONFIG['imgDomainURL']+"/"+this.avatar() }, handleLogout() { const that = this this.$confirm({ title: '提示', content: '真的要注销登录吗 ?', onOk() { return that.Logout({}).then(