Commit c8df1f5e1f1ba33caad650cbbbd4045e8f5948a3
1 parent
e71c00e6
布局设置支持保存&重置配置
Showing
5 changed files
with
65 additions
and
18 deletions
ruoyi-admin/src/main/resources/application-druid.yml
ruoyi-ui/src/components/TopNav/index.vue
... | ... | @@ -30,6 +30,9 @@ |
30 | 30 | <script> |
31 | 31 | import { constantRoutes } from "@/router"; |
32 | 32 | |
33 | +// 不需要激活的路由 | |
34 | +const noactiveList = ["/user/profile", "/dict/type", "/gen/edit", "/job/log"]; | |
35 | + | |
33 | 36 | export default { |
34 | 37 | data() { |
35 | 38 | return { |
... | ... | @@ -42,10 +45,13 @@ export default { |
42 | 45 | computed: { |
43 | 46 | // 顶部显示菜单 |
44 | 47 | topMenus() { |
45 | - return this.routers.map((menu) => ({ | |
46 | - ...menu, | |
47 | - children: undefined, | |
48 | - })); | |
48 | + let topMenus = []; | |
49 | + this.routers.map((menu) => { | |
50 | + if (menu.hidden === false) { | |
51 | + topMenus.push(menu); | |
52 | + } | |
53 | + }); | |
54 | + return topMenus; | |
49 | 55 | }, |
50 | 56 | // 所有的路由信息 |
51 | 57 | routers() { |
... | ... | @@ -69,6 +75,12 @@ export default { |
69 | 75 | activeMenu() { |
70 | 76 | const path = this.$route.path; |
71 | 77 | let activePath = this.routers[0].path; |
78 | + var noactive = noactiveList.some(function (item) { | |
79 | + return path.indexOf(item) !== -1; | |
80 | + }); | |
81 | + if (noactive) { | |
82 | + return; | |
83 | + } | |
72 | 84 | if (path.lastIndexOf("/") > 0) { |
73 | 85 | const tmpPath = path.substring(1, path.length); |
74 | 86 | activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); |
... | ... | @@ -89,7 +101,7 @@ export default { |
89 | 101 | methods: { |
90 | 102 | // 根据宽度计算设置显示栏数 |
91 | 103 | setVisibleNumber() { |
92 | - const width = document.body.getBoundingClientRect().width - 200; | |
104 | + const width = document.body.getBoundingClientRect().width - 380; | |
93 | 105 | const elWidth = this.$el.getBoundingClientRect().width; |
94 | 106 | const menuItemNodes = this.$el.children; |
95 | 107 | const menuWidth = Array.from(menuItemNodes).map( |
... | ... | @@ -119,7 +131,7 @@ export default { |
119 | 131 | }); |
120 | 132 | } |
121 | 133 | this.$store.commit("SET_SIDEBAR_ROUTERS", routes); |
122 | - }, | |
134 | + } | |
123 | 135 | }, |
124 | 136 | }; |
125 | 137 | </script> |
... | ... |
ruoyi-ui/src/layout/components/Settings/index.vue
... | ... | @@ -62,6 +62,10 @@ |
62 | 62 | <el-switch v-model="sidebarLogo" class="drawer-switch" /> |
63 | 63 | </div> |
64 | 64 | |
65 | + <el-divider/> | |
66 | + | |
67 | + <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button> | |
68 | + <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button> | |
65 | 69 | </div> |
66 | 70 | </div> |
67 | 71 | </template> |
... | ... | @@ -72,15 +76,14 @@ import ThemePicker from '@/components/ThemePicker' |
72 | 76 | export default { |
73 | 77 | components: { ThemePicker }, |
74 | 78 | data() { |
75 | - return {} | |
79 | + return { | |
80 | + sideTheme: this.$store.state.settings.sideTheme | |
81 | + }; | |
76 | 82 | }, |
77 | 83 | computed: { |
78 | 84 | theme() { |
79 | 85 | return this.$store.state.settings.theme |
80 | 86 | }, |
81 | - sideTheme() { | |
82 | - return this.$store.state.settings.sideTheme | |
83 | - }, | |
84 | 87 | fixedHeader: { |
85 | 88 | get() { |
86 | 89 | return this.$store.state.settings.fixedHeader |
... | ... | @@ -141,6 +144,38 @@ export default { |
141 | 144 | key: 'sideTheme', |
142 | 145 | value: val |
143 | 146 | }) |
147 | + this.sideTheme = val; | |
148 | + }, | |
149 | + saveSetting() { | |
150 | + const loading = this.$loading({ | |
151 | + lock: true, | |
152 | + fullscreen: false, | |
153 | + text: "正在保存到本地,请稍后...", | |
154 | + spinner: "el-icon-loading", | |
155 | + background: "rgba(0, 0, 0, 0.7)" | |
156 | + }); | |
157 | + localStorage.setItem( | |
158 | + "layout-setting", | |
159 | + `{ | |
160 | + "topNav":${this.topNav}, | |
161 | + "tagsView":${this.tagsView}, | |
162 | + "fixedHeader":${this.fixedHeader}, | |
163 | + "sidebarLogo":${this.sidebarLogo}, | |
164 | + "sideTheme":"${this.sideTheme}" | |
165 | + }` | |
166 | + ); | |
167 | + setTimeout(loading.close(), 1000) | |
168 | + }, | |
169 | + resetSetting() { | |
170 | + this.$loading({ | |
171 | + lock: true, | |
172 | + fullscreen: false, | |
173 | + text: "正在清除设置缓存并刷新,请稍后...", | |
174 | + spinner: "el-icon-loading", | |
175 | + background: "rgba(0, 0, 0, 0.7)" | |
176 | + }); | |
177 | + localStorage.removeItem("layout-setting") | |
178 | + setTimeout("window.location.reload()", 1000) | |
144 | 179 | } |
145 | 180 | } |
146 | 181 | } |
... | ... |
ruoyi-ui/src/settings.js
ruoyi-ui/src/store/modules/settings.js
... | ... | @@ -3,16 +3,16 @@ import defaultSettings from '@/settings' |
3 | 3 | |
4 | 4 | const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = defaultSettings |
5 | 5 | |
6 | +const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' | |
6 | 7 | const state = { |
7 | 8 | theme: variables.theme, |
8 | - sideTheme: sideTheme, | |
9 | + sideTheme: storageSetting.sideTheme || sideTheme, | |
9 | 10 | showSettings: showSettings, |
10 | - topNav: topNav, | |
11 | - tagsView: tagsView, | |
12 | - fixedHeader: fixedHeader, | |
13 | - sidebarLogo: sidebarLogo | |
11 | + topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, | |
12 | + tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, | |
13 | + fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, | |
14 | + sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo | |
14 | 15 | } |
15 | - | |
16 | 16 | const mutations = { |
17 | 17 | CHANGE_SETTING: (state, { key, value }) => { |
18 | 18 | if (state.hasOwnProperty(key)) { |
... | ... |