隐藏/显示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", "avatar","userInfo"]),getAvatar(){console.log('url = '+ window._CONFIG['imgDomainURL']+"/"+this.avatar())return window._CONFIG['imgDomainURL']+"/"+this.avatar()},handleLogout() {const that = thisthis.$confirm({title: '提示',content: '真的要注销登录吗 ?',onOk() {return that.Logout({}).then(() => {window.location.href="/";//window.location.reload()}).catch(err => {that.$message.error({title: '错误',description: err.message})})},onCancel() {},});},updatePassword(){let username = this.userInfo().usernamethis.$refs.userPassword.show(username)},updateCurrentDepart(){this.$refs.departSelect.show()},systemSetting(){this.$refs.settingDrawer.showDrawer()}}}
</script><style scoped>.logout_title {color: inherit;text-decoration: none;}
</style>

2.SettingDrawer.vue

<template><div class="setting-drawer"><a-drawerwidth="300"placement="right":closable="false"@close="onClose":visible="visible":style="{}"><div class="setting-drawer-index-content"><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">整体风格设置</h3><div class="setting-drawer-index-blockChecbox"><a-tooltip><template slot="title">暗色菜单风格</template><div class="setting-drawer-index-item" @click="handleMenuTheme('dark')"><img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark"><div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'"><a-icon type="check"/></div></div></a-tooltip><a-tooltip><template slot="title">亮色菜单风格</template><div class="setting-drawer-index-item" @click="handleMenuTheme('light')"><img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light"><div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'"><a-icon type="check"/></div></div></a-tooltip></div></div><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">主题色</h3><div style="height: 20px"><a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index"><template slot="title">{{ item.key }}</template><a-tag :color="item.color" @click="changeColor(item.color)"><a-icon type="check" v-if="item.color === primaryColor"></a-icon></a-tag></a-tooltip></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">导航模式</h3><div class="setting-drawer-index-blockChecbox"><a-tooltip><template slot="title">侧边栏导航</template><div class="setting-drawer-index-item" @click="handleLayout('sidemenu')"><img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu"><div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'"><a-icon type="check"/></div></div></a-tooltip><a-tooltip><template slot="title">顶部栏导航</template><div class="setting-drawer-index-item" @click="handleLayout('topmenu')"><img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu"><div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'"><a-icon type="check"/></div></div></a-tooltip></div><div :style="{ marginTop: '24px' }"><a-list :split="false"><a-list-item><a-tooltip slot="actions"><template slot="title">该设定仅 [顶部栏导航] 时有效</template><a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange"><a-select-option value="Fixed">固定</a-select-option><a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option></a-select></a-tooltip><a-list-item-meta><div slot="title">内容区域宽度</div></a-list-item-meta></a-list-item><a-list-item><a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" /><a-list-item-meta><div slot="title">固定 Header</div></a-list-item-meta></a-list-item><a-list-item><a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" /><a-list-item-meta><div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑时隐藏 Header</div></a-list-item-meta></a-list-item><a-list-item ><a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="dataFixSiderbar" @change="handleFixSiderbar" /><a-list-item-meta><div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div></a-list-item-meta></a-list-item></a-list></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">其他设置</h3><div><a-list :split="false"><a-list-item><a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" /><a-list-item-meta><div slot="title">色弱模式</div></a-list-item-meta></a-list-item><a-list-item><a-switch slot="actions" size="small" :defaultChecked="multipage" @change="onMultipageWeak" /><a-list-item-meta><div slot="title">多页签模式</div></a-list-item-meta></a-list-item></a-list></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><a-alert type="warning"><span slot="message">配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件<a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js" target="_blank">src/defaultSettings.js</a></span></a-alert></div></div><div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
<!--        <a-icon type="setting" v-if="!visible"/>-->
<!--        <a-icon type="close" v-else/>--><a-icon type="close" /></div></a-drawer></div>
</template><script>import DetailList from '@/components/tools/DetailList'import SettingItem from '@/components/setting/SettingItem'import config from '@/defaultSettings'import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'import { mixin, mixinDevice } from '@/utils/mixin.js'import { triggerWindowResizeEvent } from '@/utils/util'export default {components: {DetailList,SettingItem},mixins: [mixin, mixinDevice],data() {return {visible: true,colorList,dataFixSiderbar: false}},watch: {},mounted () {const vm = thissetTimeout(() => {vm.visible = false}, 16)// 当主题色不是默认色时，才进行主题编译if (this.primaryColor !== config.primaryColor) {updateTheme(this.primaryColor)}if (this.colorWeak !== config.colorWeak) {updateColorWeak(this.colorWeak)}if (this.multipage !== config.multipage) {this.$store.dispatch('ToggleMultipage', this.multipage)}},methods: {showDrawer() {this.visible = true},onClose() {this.visible = false},toggle() {this.visible = !this.visible},onColorWeak (checked) {this.$store.dispatch('ToggleWeak', checked)updateColorWeak(checked)},onMultipageWeak (checked) {this.$store.dispatch('ToggleMultipage', checked)},handleMenuTheme (theme) {this.$store.dispatch('ToggleTheme', theme)},handleLayout (mode) {this.$store.dispatch('ToggleLayoutMode', mode)// 因为顶部菜单不能固定左侧菜单栏，所以强制关闭this.handleFixSiderbar(false)// 触发窗口resize事件triggerWindowResizeEvent()},handleContentWidthChange (type) {this.$store.dispatch('ToggleContentWidth', type)},changeColor (color) {if (this.primaryColor !== color) {this.$store.dispatch('ToggleColor', color)updateTheme(color)}},handleFixedHeader (fixed) {this.$store.dispatch('ToggleFixedHeader', fixed)},handleFixedHeaderHidden (autoHidden) {this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)},handleFixSiderbar (fixed) {if (this.layoutMode === 'topmenu') {fixed = false}this.dataFixSiderbar = fixedthis.$store.dispatch('ToggleFixSiderbar', fixed)}},}
</script><style lang="scss" scoped>.setting-drawer-index-content {.setting-drawer-index-blockChecbox {display: flex;.setting-drawer-index-item {margin-right: 16px;position: relative;border-radius: 4px;cursor: pointer;img {width: 48px;}.setting-drawer-index-selectIcon {position: absolute;top: 0;right: 0;width: 100%;padding-top: 15px;padding-left: 24px;height: 100%;color: #1890ff;font-size: 14px;font-weight: 700;}}}.setting-drawer-theme-color-colorBlock {width: 20px;height: 20px;border-radius: 2px;float: left;cursor: pointer;margin-right: 8px;padding-left: 0px;padding-right: 0px;text-align: center;color: #fff;font-weight: 700;i {font-size: 14px;}}}.setting-drawer-index-handle {position: absolute;top: 240px;background: #1890ff;width: 48px;height: 48px;right: 300px;display: flex;justify-content: center;align-items: center;cursor: pointer;pointer-events: auto;z-index: 1001;text-align: center;font-size: 16px;border-radius: 4px 0 0 4px;i {color: rgb(255, 255, 255);font-size: 20px;}}
</style>

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

小而美的个人博客——后端——管理页面
我们要做出如下图的两个页面,这个是非常中要的,这两个页面后和数据和后端代码紧密相连要做的简洁美观. blogs页面中间的内容虽然看起来很上,但是时间上还真有点复杂看第一个部分附上代码: < ...
网站荣耀服务器ip,华为荣耀路由器管理页面IP地址是多少
华为路由器还有荣耀路由器都是华为旗下的产品,Web管理页面网址都是192.168.3.1 当手机.或者电脑成功连上路由器Wi-Fi或有线网络时,在浏览器输入此网址就可以进入管理页面. Web管理页面主 ...
Vue + Spring Boot 项目实战:人事管理系统——(2)员工管理页面及方法实现
员工信息管理目录前言一.前端页面的编写 1.编写员工管理vue页面二.后端接口的方法实现 1.编写实体类 2.控制层 3.服务层 4.Dao层 5.xml编写 6.页面实现总结前言项目登录 ...
springboot2 使用hikaridatasource 并测试_基于Spring Boot 2.x的后端管理网站脚手，源码免费分享...
基于Spring Boot 2.x 的 Material Design 的后端管理网站脚手架 :提供权限认证用户管理菜单管理操作日志等常用功能去繁就简重新出发基于Spring Boot ...
查找窗口隐藏了怎么办_如何快速查找网站管理页面
很多时候,对任何URL进行扫描以查找其漏洞时,渗透测试者或安全研究人员都会尝试查找管理页面(" admin",控制面板或登录名). 登陆任何网站的任何管理页面是任何网站的严重漏洞. ...
javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一: document.all<"PanelSMS">.styl ...
js隐藏显示div页面方法
今天呢,给大家分享一下,通过js来隐藏显示首先,先上图这是js代码这是H5及css样式效果图,由于用于测试,比较简陋,不要在意,哈哈哈哈! 给大家测试代码,有需要可以复制 <scrip ...
Spring Boot制作个人博客-后端管理（登录）
文章目录一.构建页面 1.构建登录页面 2.构建后台管理页面 3.复制_fragments 二.实现登录 1.创建用户接口 2.创建用户实现类 3.创建UserRepository 4.初始化一个用 ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...

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

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

最新文章

热门文章