隐藏/显示jeecg-boot 后端管理页面的右侧的系统设置

登录后台，通过添加一个下拉选项【系统设置】来控制系统的后侧系统设置，布局如下：

• 修改UserMenu.vue文件

     1.全局搜索“账户设置”，找到对应的vue文件：UserMenu.vue

     2.添加【系统设置】下拉选项

      在UserMenu.vue中的“账户设置”的代码

      <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>

            3.并将【密码修改】、【切换部门】的a-menu-item的key分别设置为4、5
            
            4.引入系统设置页面SettingDrawer.vue
                1）在<depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>代码下面
                添加代码
                <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
                2）import区域添加代码 import SettingDrawer from "@/components/setting/SettingDrawer";
                3） components中添加 SettingDrawer
            5.为步骤2中的【系统设置】添加click方法
            在methods中添加
                  systemSetting(){
                    this.$refs.settingDrawer.showDrawer()
                  }

•    修改SettingDrawer.vue文件

            将代码     
                 <div class="setting-drawer-index-handle" @click="toggle">
                   <a-icon type="setting" v-if="!visible"/>
                   <a-icon type="close" v-else/>
                 </div>
            更改为：
                  <div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
                    <a-icon type="close" />
                  </div>

• 最终代码

        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-item key="2" disabled> <a-icon type="setting"/> <span>测试</span> </a-menu-item> <a-menu-divider/> <a-menu-item key="3"> <a href="javascript:;" @click="handleLogout"> <a-icon type="logout"/> <span>退出登录</span> </a> </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()">&nbsp;退出登录</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", 

转载于:https://www.cnblogs.com/jeecg158/p/11214125.html