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

  • 修改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 = this this.$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().username
this.$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-drawer
width="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 = this
setTimeout(() => {
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 = fixed
this.$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 后端管理页面的右侧的系统设置的更多相关文章

  1. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  2. Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容

    后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...

  3. Spring Boot事务管理(中)

    在上一篇 Spring Boot事务管理(上)的基础上介绍Spring Boot事务属性和事务回滚规则 . 4 Spring Boot事务属性 什么是事务属性呢?事务属性可以理解成事务的一些基本配置, ...

  4. python 全栈开发,Day132(玩具管理页面,控制玩具通讯录,基于请求的好友关系建立)

    先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.5.zip 注意:由于涉及到 ...

  5. python 全栈开发,Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)

    昨日内容回顾 1. 小爬爬 内容采集 XMLY 的 儿童频道 requests 2. 登陆 注册 自动登陆 退出 mui.post("请求地址",{数据},function(){} ...

  6. app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面

    一.app端内容播放 下载代码 https://github.com/987334176/Intelligent_toy/archive/v1.0.zip 注意:由于涉及到版权问题,此附件没有图片和音 ...

  7. .net工作流引擎ccflow开发平台属性功能的隐藏显示介绍

    关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明  工作流设计 工作流快速开发平台   业务流程管理   bpm工作流系统  java工 ...

  8. 预约系统(四) 管理页面框架搭建easyUI

    Manage控制器用于管理页面 Index视图为管理页面首页,采用easyUi的后台管理框架 Html头部调用,jquery库,easyui库,easyui.css,icon.css,语言包 < ...

  9. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

随机推荐

  1. VB.NET利用正則表達式巧妙限制字符输入

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010028869/article/details/37913867     在通常的程序设计中.对 ...

  2. Apsara Clouder基础技能认证:阿里巴巴编码规范 考试备考题库

    考试网址: https://edu.aliyun.com/clouder/exam/intro/33 共50道题 限时90分钟 阿里云大学Apsara Clouder基础技能认证——阿里巴巴编码规范认 ...

  3. js获取table checkbox选中行的值.mdjs获取table checkbox选中行的

    <!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jque ...

  4. 在npm中使用bower包依赖工具

    什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和 ...

  5. Hadoop Tez框架

  6. Linux 常用命令:文本查看篇

    前言 Linux常用命令中,除了cat还有很多其他用于文本查看的命令.本文将简单介绍一下这些文本查看的命令. 全文本显示--cat cat可能是常用的一个文本查看命令了,使用方法也很简单: cat f ...

  7. php 查看linux服务器的磁盘使用情况

  8. mysql出现You can’t specify target table for update in FROM clause

    在mysql执行下面语句时报错: You can’t specify target table for update in FROM clause UPDATE edu_grade_hgm_1 ' W ...

  9. jquery实现文字由下到上循环滚动的实例代码

    <div id="oDiv"> <ul id="oUl"> <li>第1个li元素</li> <li> ...

  10. Java笔记 - GUI编程

    一.图形界面开发 1.AWT开发 AWT(Abstract Window Toolkit)在Windows.Linux提供的图形窗口之上,再次进行了抽象,为不同语言开发的程序提供统一定义的图形接口,可 ...