BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 30be2a08a17ac7721ad32ed022e14345e2286367

Authored by 若依 2020-05-26 10:49:27 +0800

Committed by Gitee 2020-05-26 10:49:27 +0800

!22 tagview & sidebar 主题颜色与element ui(全局)同步

Merge pull request !22 from 北风/master

Inline Side-by-side

Showing 2 changed files with 335 additions and 303 deletions

ruoyi-ui/src/layout/components/Sidebar/index.vue

View file @30be2a0

1	1	<template>
2		- <div :class="{'has-logo':showLogo}">
3		- <logo v-if="showLogo" :collapse="isCollapse" />
4		- <el-scrollbar wrap-class="scrollbar-wrapper">
5		- <el-menu
6		- :default-active="activeMenu"
7		- :collapse="isCollapse"
8		- :background-color="variables.menuBg"
9		- :text-color="variables.menuText"
10		- :unique-opened="true"
11		- :active-text-color="variables.menuActiveText"
12		- :collapse-transition="false"
13		- mode="vertical"
14		- >
15		- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
16		- </el-menu>
17		- </el-scrollbar>
18		- </div>
	2	+ <div :class="{'has-logo':showLogo}">
	3	+ <logo v-if="showLogo" :collapse="isCollapse" />
	4	+ <el-scrollbar wrap-class="scrollbar-wrapper">
	5	+ <el-menu
	6	+ :default-active="activeMenu"
	7	+ :collapse="isCollapse"
	8	+ :background-color="variables.menuBg"
	9	+ :text-color="variables.menuText"
	10	+ :unique-opened="true"
	11	+ :active-text-color="settings.theme"
	12	+ :collapse-transition="false"
	13	+ mode="vertical"
	14	+ >
	15	+ <sidebar-item
	16	+ v-for="route in permission_routes"
	17	+ :key="route.path"
	18	+ :item="route"
	19	+ :base-path="route.path"
	20	+ />
	21	+ </el-menu>
	22	+ </el-scrollbar>
	23	+ </div>
19	24	</template>
20	25
21	26	<script>
22		-import { mapGetters } from 'vuex'
23		-import Logo from './Logo'
24		-import SidebarItem from './SidebarItem'
25		-import variables from '@/assets/styles/variables.scss'
	27	+import { mapGetters, mapState } from "vuex";
	28	+import Logo from "./Logo";
	29	+import SidebarItem from "./SidebarItem";
	30	+import variables from "@/assets/styles/variables.scss";
26	31
27	32	export default {
28		- components: { SidebarItem, Logo },
29		- computed: {
30		- ...mapGetters([
31		- 'permission_routes',
32		- 'sidebar'
33		- ]),
34		- activeMenu() {
35		- const route = this.$route
36		- const { meta, path } = route
37		- // if set path, the sidebar will highlight the path you set
38		- if (meta.activeMenu) {
39		- return meta.activeMenu
40		- }
41		- return path
42		- },
43		- showLogo() {
44		- return this.$store.state.settings.sidebarLogo
45		- },
46		- variables() {
47		- return variables
48		- },
49		- isCollapse() {
50		- return !this.sidebar.opened
	33	+ components: { SidebarItem, Logo },
	34	+ computed: {
	35	+ ...mapState(["settings"]),
	36	+ ...mapGetters(["permission_routes", "sidebar"]),
	37	+ activeMenu() {
	38	+ const route = this.$route;
	39	+ const { meta, path } = route;
	40	+ // if set path, the sidebar will highlight the path you set
	41	+ if (meta.activeMenu) {
	42	+ return meta.activeMenu;
	43	+ }
	44	+ return path;
	45	+ },
	46	+ showLogo() {
	47	+ return this.$store.state.settings.sidebarLogo;
	48	+ },
	49	+ variables() {
	50	+ return variables;
	51	+ },
	52	+ isCollapse() {
	53	+ return !this.sidebar.opened;
	54	+ }
51	55	}
52		- }
53		-}
	56	+};
54	57	</script>
...	...

ruoyi-ui/src/layout/components/TagsView/index.vue

View file @30be2a0

1	1	<template>
2		- <div id="tags-view-container" class="tags-view-container">
3		- <scroll-pane ref="scrollPane" class="tags-view-wrapper">
4		- <router-link
5		- v-for="tag in visitedViews"
6		- ref="tag"
7		- :key="tag.path"
8		- :class="isActive(tag)?'active':''"
9		- :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
10		- tag="span"
11		- class="tags-view-item"
12		- @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
13		- @contextmenu.prevent.native="openMenu(tag,$event)"
14		- >
15		- {{ tag.title }}
16		- <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
17		- </router-link>
18		- </scroll-pane>
19		- <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
20		- <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
21		- <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
22		- <li @click="closeOthersTags">关闭其他</li>
23		- <li @click="closeAllTags(selectedTag)">关闭所有</li>
24		- </ul>
25		- </div>
	2	+ <div id="tags-view-container" class="tags-view-container">
	3	+ <scroll-pane ref="scrollPane" class="tags-view-wrapper">
	4	+ <router-link
	5	+ v-for="tag in visitedViews"
	6	+ ref="tag"
	7	+ :key="tag.path"
	8	+ :class="isActive(tag)?'active':''"
	9	+ :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
	10	+ tag="span"
	11	+ class="tags-view-item"
	12	+ :style="activeStyle(tag)"
	13	+ @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
	14	+ @contextmenu.prevent.native="openMenu(tag,$event)"
	15	+ >
	16	+ {{ tag.title }}
	17	+ <span
	18	+ v-if="!isAffix(tag)"
	19	+ class="el-icon-close"
	20	+ @click.prevent.stop="closeSelectedTag(tag)"
	21	+ />
	22	+ </router-link>
	23	+ </scroll-pane>
	24	+ <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
	25	+ <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
	26	+ <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
	27	+ <li @click="closeOthersTags">关闭其他</li>
	28	+ <li @click="closeAllTags(selectedTag)">关闭所有</li>
	29	+ </ul>
	30	+ </div>
26	31	</template>
27	32
28	33	<script>
29		-import ScrollPane from './ScrollPane'
30		-import path from 'path'
	34	+import ScrollPane from "./ScrollPane";
	35	+import path from "path";
31	36
32	37	export default {
33		- components: { ScrollPane },
34		- data() {
35		- return {
36		- visible: false,
37		- top: 0,
38		- left: 0,
39		- selectedTag: {},
40		- affixTags: []
41		- }
42		- },
43		- computed: {
44		- visitedViews() {
45		- return this.$store.state.tagsView.visitedViews
46		- },
47		- routes() {
48		- return this.$store.state.permission.routes
49		- }
50		- },
51		- watch: {
52		- $route() {
53		- this.addTags()
54		- this.moveToCurrentTag()
55		- },
56		- visible(value) {
57		- if (value) {
58		- document.body.addEventListener('click', this.closeMenu)
59		- } else {
60		- document.body.removeEventListener('click', this.closeMenu)
61		- }
62		- }
63		- },
64		- mounted() {
65		- this.initTags()
66		- this.addTags()
67		- },
68		- methods: {
69		- isActive(route) {
70		- return route.path === this.$route.path
71		- },
72		- isAffix(tag) {
73		- return tag.meta && tag.meta.affix
74		- },
75		- filterAffixTags(routes, basePath = '/') {
76		- let tags = []
77		- routes.forEach(route => {
78		- if (route.meta && route.meta.affix) {
79		- const tagPath = path.resolve(basePath, route.path)
80		- tags.push({
81		- fullPath: tagPath,
82		- path: tagPath,
83		- name: route.name,
84		- meta: { ...route.meta }
85		- })
86		- }
87		- if (route.children) {
88		- const tempTags = this.filterAffixTags(route.children, route.path)
89		- if (tempTags.length >= 1) {
90		- tags = [...tags, ...tempTags]
91		- }
92		- }
93		- })
94		- return tags
	38	+ components: { ScrollPane },
	39	+ data() {
	40	+ return {
	41	+ visible: false,
	42	+ top: 0,
	43	+ left: 0,
	44	+ selectedTag: {},
	45	+ affixTags: []
	46	+ };
95	47	},
96		- initTags() {
97		- const affixTags = this.affixTags = this.filterAffixTags(this.routes)
98		- for (const tag of affixTags) {
99		- // Must have tag name
100		- if (tag.name) {
101		- this.$store.dispatch('tagsView/addVisitedView', tag)
	48	+ computed: {
	49	+ visitedViews() {
	50	+ return this.$store.state.tagsView.visitedViews;
	51	+ },
	52	+ routes() {
	53	+ return this.$store.state.permission.routes;
	54	+ },
	55	+ theme() {
	56	+ return this.$store.state.settings.theme;
102	57	}
103		- }
104	58	},
105		- addTags() {
106		- const { name } = this.$route
107		- if (name) {
108		- this.$store.dispatch('tagsView/addView', this.$route)
109		- }
110		- return false
111		- },
112		- moveToCurrentTag() {
113		- const tags = this.$refs.tag
114		- this.$nextTick(() => {
115		- for (const tag of tags) {
116		- if (tag.to.path === this.$route.path) {
117		- this.$refs.scrollPane.moveToTarget(tag)
118		- // when query is different then update
119		- if (tag.to.fullPath !== this.$route.fullPath) {
120		- this.$store.dispatch('tagsView/updateVisitedView', this.$route)
	59	+ watch: {
	60	+ $route() {
	61	+ this.addTags();
	62	+ this.moveToCurrentTag();
	63	+ },
	64	+ visible(value) {
	65	+ if (value) {
	66	+ document.body.addEventListener("click", this.closeMenu);
	67	+ } else {
	68	+ document.body.removeEventListener("click", this.closeMenu);
121	69	}
122		- break
123		- }
124	70	}
125		- })
126		- },
127		- refreshSelectedTag(view) {
128		- this.$store.dispatch('tagsView/delCachedView', view).then(() => {
129		- const { fullPath } = view
130		- this.$nextTick(() => {
131		- this.$router.replace({
132		- path: '/redirect' + fullPath
133		- })
134		- })
135		- })
136	71	},
137		- closeSelectedTag(view) {
138		- this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
139		- if (this.isActive(view)) {
140		- this.toLastView(visitedViews, view)
141		- }
142		- })
	72	+ mounted() {
	73	+ this.initTags();
	74	+ this.addTags();
143	75	},
144		- closeOthersTags() {
145		- this.$router.push(this.selectedTag)
146		- this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
147		- this.moveToCurrentTag()
148		- })
149		- },
150		- closeAllTags(view) {
151		- this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
152		- if (this.affixTags.some(tag => tag.path === view.path)) {
153		- return
154		- }
155		- this.toLastView(visitedViews, view)
156		- })
157		- },
158		- toLastView(visitedViews, view) {
159		- const latestView = visitedViews.slice(-1)[0]
160		- if (latestView) {
161		- this.$router.push(latestView.fullPath)
162		- } else {
163		- // now the default is to redirect to the home page if there is no tags-view,
164		- // you can adjust it according to your needs.
165		- if (view.name === 'Dashboard') {
166		- // to reload home page
167		- this.$router.replace({ path: '/redirect' + view.fullPath })
168		- } else {
169		- this.$router.push('/')
170		- }
171		- }
172		- },
173		- openMenu(tag, e) {
174		- const menuMinWidth = 105
175		- const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
176		- const offsetWidth = this.$el.offsetWidth // container width
177		- const maxLeft = offsetWidth - menuMinWidth // left boundary
178		- const left = e.clientX - offsetLeft + 15 // 15: margin right
	76	+ methods: {
	77	+ isActive(route) {
	78	+ return route.path === this.$route.path;
	79	+ },
	80	+ activeStyle(tag) {
	81	+ if (!this.isActive(tag)) return {};
	82	+ return {
	83	+ "background-color": this.theme,
	84	+ "border-color": this.theme
	85	+ };
	86	+ },
	87	+ isAffix(tag) {
	88	+ return tag.meta && tag.meta.affix;
	89	+ },
	90	+ filterAffixTags(routes, basePath = "/") {
	91	+ let tags = [];
	92	+ routes.forEach(route => {
	93	+ if (route.meta && route.meta.affix) {
	94	+ const tagPath = path.resolve(basePath, route.path);
	95	+ tags.push({
	96	+ fullPath: tagPath,
	97	+ path: tagPath,
	98	+ name: route.name,
	99	+ meta: { ...route.meta }
	100	+ });
	101	+ }
	102	+ if (route.children) {
	103	+ const tempTags = this.filterAffixTags(
	104	+ route.children,
	105	+ route.path
	106	+ );
	107	+ if (tempTags.length >= 1) {
	108	+ tags = [...tags, ...tempTags];
	109	+ }
	110	+ }
	111	+ });
	112	+ return tags;
	113	+ },
	114	+ initTags() {
	115	+ const affixTags = (this.affixTags = this.filterAffixTags(
	116	+ this.routes
	117	+ ));
	118	+ for (const tag of affixTags) {
	119	+ // Must have tag name
	120	+ if (tag.name) {
	121	+ this.$store.dispatch("tagsView/addVisitedView", tag);
	122	+ }
	123	+ }
	124	+ },
	125	+ addTags() {
	126	+ const { name } = this.$route;
	127	+ if (name) {
	128	+ this.$store.dispatch("tagsView/addView", this.$route);
	129	+ }
	130	+ return false;
	131	+ },
	132	+ moveToCurrentTag() {
	133	+ const tags = this.$refs.tag;
	134	+ this.$nextTick(() => {
	135	+ for (const tag of tags) {
	136	+ if (tag.to.path === this.$route.path) {
	137	+ this.$refs.scrollPane.moveToTarget(tag);
	138	+ // when query is different then update
	139	+ if (tag.to.fullPath !== this.$route.fullPath) {
	140	+ this.$store.dispatch(
	141	+ "tagsView/updateVisitedView",
	142	+ this.$route
	143	+ );
	144	+ }
	145	+ break;
	146	+ }
	147	+ }
	148	+ });
	149	+ },
	150	+ refreshSelectedTag(view) {
	151	+ this.$store.dispatch("tagsView/delCachedView", view).then(() => {
	152	+ const { fullPath } = view;
	153	+ this.$nextTick(() => {
	154	+ this.$router.replace({
	155	+ path: "/redirect" + fullPath
	156	+ });
	157	+ });
	158	+ });
	159	+ },
	160	+ closeSelectedTag(view) {
	161	+ this.$store
	162	+ .dispatch("tagsView/delView", view)
	163	+ .then(({ visitedViews }) => {
	164	+ if (this.isActive(view)) {
	165	+ this.toLastView(visitedViews, view);
	166	+ }
	167	+ });
	168	+ },
	169	+ closeOthersTags() {
	170	+ this.$router.push(this.selectedTag);
	171	+ this.$store
	172	+ .dispatch("tagsView/delOthersViews", this.selectedTag)
	173	+ .then(() => {
	174	+ this.moveToCurrentTag();
	175	+ });
	176	+ },
	177	+ closeAllTags(view) {
	178	+ this.$store
	179	+ .dispatch("tagsView/delAllViews")
	180	+ .then(({ visitedViews }) => {
	181	+ if (this.affixTags.some(tag => tag.path === view.path)) {
	182	+ return;
	183	+ }
	184	+ this.toLastView(visitedViews, view);
	185	+ });
	186	+ },
	187	+ toLastView(visitedViews, view) {
	188	+ const latestView = visitedViews.slice(-1)[0];
	189	+ if (latestView) {
	190	+ this.$router.push(latestView.fullPath);
	191	+ } else {
	192	+ // now the default is to redirect to the home page if there is no tags-view,
	193	+ // you can adjust it according to your needs.
	194	+ if (view.name === "Dashboard") {
	195	+ // to reload home page
	196	+ this.$router.replace({ path: "/redirect" + view.fullPath });
	197	+ } else {
	198	+ this.$router.push("/");
	199	+ }
	200	+ }
	201	+ },
	202	+ openMenu(tag, e) {
	203	+ const menuMinWidth = 105;
	204	+ const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
	205	+ const offsetWidth = this.$el.offsetWidth; // container width
	206	+ const maxLeft = offsetWidth - menuMinWidth; // left boundary
	207	+ const left = e.clientX - offsetLeft + 15; // 15: margin right
179	208
180		- if (left > maxLeft) {
181		- this.left = maxLeft
182		- } else {
183		- this.left = left
184		- }
	209	+ if (left > maxLeft) {
	210	+ this.left = maxLeft;
	211	+ } else {
	212	+ this.left = left;
	213	+ }
185	214
186		- this.top = e.clientY
187		- this.visible = true
188		- this.selectedTag = tag
189		- },
190		- closeMenu() {
191		- this.visible = false
	215	+ this.top = e.clientY;
	216	+ this.visible = true;
	217	+ this.selectedTag = tag;
	218	+ },
	219	+ closeMenu() {
	220	+ this.visible = false;
	221	+ }
192	222	}
193		- }
194		-}
	223	+};
195	224	</script>
196	225
197	226	<style lang="scss" scoped>
198	227	.tags-view-container {
199		- height: 34px;
200		- width: 100%;
201		- background: #fff;
202		- border-bottom: 1px solid #d8dce5;
203		- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
204		- .tags-view-wrapper {
205		- .tags-view-item {
206		- display: inline-block;
207		- position: relative;
208		- cursor: pointer;
209		- height: 26px;
210		- line-height: 26px;
211		- border: 1px solid #d8dce5;
212		- color: #495060;
213		- background: #fff;
214		- padding: 0 8px;
215		- font-size: 12px;
216		- margin-left: 5px;
217		- margin-top: 4px;
218		- &:first-of-type {
219		- margin-left: 15px;
220		- }
221		- &:last-of-type {
222		- margin-right: 15px;
223		- }
224		- &.active {
225		- background-color: #42b983;
226		- color: #fff;
227		- border-color: #42b983;
228		- &::before {
229		- content: '';
230		- background: #fff;
231		- display: inline-block;
232		- width: 8px;
233		- height: 8px;
234		- border-radius: 50%;
235		- position: relative;
236		- margin-right: 2px;
	228	+ height: 34px;
	229	+ width: 100%;
	230	+ background: #fff;
	231	+ border-bottom: 1px solid #d8dce5;
	232	+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
	233	+ .tags-view-wrapper {
	234	+ .tags-view-item {
	235	+ display: inline-block;
	236	+ position: relative;
	237	+ cursor: pointer;
	238	+ height: 26px;
	239	+ line-height: 26px;
	240	+ border: 1px solid #d8dce5;
	241	+ color: #495060;
	242	+ background: #fff;
	243	+ padding: 0 8px;
	244	+ font-size: 12px;
	245	+ margin-left: 5px;
	246	+ margin-top: 4px;
	247	+ &:first-of-type {
	248	+ margin-left: 15px;
	249	+ }
	250	+ &:last-of-type {
	251	+ margin-right: 15px;
	252	+ }
	253	+ &.active {
	254	+ background-color: #42b983;
	255	+ color: #fff;
	256	+ border-color: #42b983;
	257	+ &::before {
	258	+ content: "";
	259	+ background: #fff;
	260	+ display: inline-block;
	261	+ width: 8px;
	262	+ height: 8px;
	263	+ border-radius: 50%;
	264	+ position: relative;
	265	+ margin-right: 2px;
	266	+ }
	267	+ }
237	268	}
238		- }
239	269	}
240		- }
241		- .contextmenu {
242		- margin: 0;
243		- background: #fff;
244		- z-index: 3000;
245		- position: absolute;
246		- list-style-type: none;
247		- padding: 5px 0;
248		- border-radius: 4px;
249		- font-size: 12px;
250		- font-weight: 400;
251		- color: #333;
252		- box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
253		- li {
254		- margin: 0;
255		- padding: 7px 16px;
256		- cursor: pointer;
257		- &:hover {
258		- background: #eee;
259		- }
	270	+ .contextmenu {
	271	+ margin: 0;
	272	+ background: #fff;
	273	+ z-index: 3000;
	274	+ position: absolute;
	275	+ list-style-type: none;
	276	+ padding: 5px 0;
	277	+ border-radius: 4px;
	278	+ font-size: 12px;
	279	+ font-weight: 400;
	280	+ color: #333;
	281	+ box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
	282	+ li {
	283	+ margin: 0;
	284	+ padding: 7px 16px;
	285	+ cursor: pointer;
	286	+ &:hover {
	287	+ background: #eee;
	288	+ }
	289	+ }
260	290	}
261		- }
262	291	}
263	292	</style>
264	293
265	294	<style lang="scss">
266	295	//reset element css of el-icon-close
267	296	.tags-view-wrapper {
268		- .tags-view-item {
269		- .el-icon-close {
270		- width: 16px;
271		- height: 16px;
272		- vertical-align: 2px;
273		- border-radius: 50%;
274		- text-align: center;
275		- transition: all .3s cubic-bezier(.645, .045, .355, 1);
276		- transform-origin: 100% 50%;
277		- &:before {
278		- transform: scale(.6);
279		- display: inline-block;
280		- vertical-align: -3px;
281		- }
282		- &:hover {
283		- background-color: #b4bccc;
284		- color: #fff;
285		- }
	297	+ .tags-view-item {
	298	+ .el-icon-close {
	299	+ width: 16px;
	300	+ height: 16px;
	301	+ vertical-align: 2px;
	302	+ border-radius: 50%;
	303	+ text-align: center;
	304	+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	305	+ transform-origin: 100% 50%;
	306	+ &:before {
	307	+ transform: scale(0.6);
	308	+ display: inline-block;
	309	+ vertical-align: -3px;
	310	+ }
	311	+ &:hover {
	312	+ background-color: #b4bccc;
	313	+ color: #fff;
	314	+ }
	315	+ }
286	316	}
287		- }
288	317	}
289	318	</style>
...	...