隐藏/显示jeecg-boot 后端管理页面的右侧的系统设置
Posted jeecg158
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了隐藏/显示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()"> 退出登录</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([