ccsens_zhengzhichuan
/
acupuncture
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

Merge pull request !22 from 北风/master
newMaster
若依 5 years ago
committed by Gitee
parent
2bd787f633 98bb78a9d6
commit
30be2a08a1
2 changed files with 335 additions and 303 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      ruoyi-ui/src/layout/components/Sidebar/index.vue
  2. 543
      ruoyi-ui/src/layout/components/TagsView/index.vue

95
ruoyi-ui/src/layout/components/Sidebar/index.vue
View File

@ -1,54 +1,57 @@
<template> <template>
<div :class="{'has-logo':showLogo}"> <div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="variables.menuBg" :background-color="variables.menuBg"
:text-color="variables.menuText" :text-color="variables.menuText"
:unique-opened="true" :unique-opened="true"
:active-text-color="variables.menuActiveText" :active-text-color="settings.theme"
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> <sidebar-item
</el-menu> v-for="route in permission_routes"
</el-scrollbar> :key="route.path"
</div> :item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters, mapState } from "vuex";
import Logo from './Logo' import Logo from "./Logo";
import SidebarItem from './SidebarItem' import SidebarItem from "./SidebarItem";
import variables from '@/assets/styles/variables.scss' import variables from "@/assets/styles/variables.scss";
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
computed: { computed: {
...mapGetters([ ...mapState(["settings"]),
'permission_routes', ...mapGetters(["permission_routes", "sidebar"]),
'sidebar' activeMenu() {
]), const route = this.$route;
activeMenu() { const { meta, path } = route;
const route = this.$route // if set path, the sidebar will highlight the path you set
const { meta, path } = route if (meta.activeMenu) {
// if set path, the sidebar will highlight the path you set return meta.activeMenu;
if (meta.activeMenu) { }
return meta.activeMenu return path;
} },
return path showLogo() {
}, return this.$store.state.settings.sidebarLogo;
showLogo() { },
return this.$store.state.settings.sidebarLogo variables() {
}, return variables;
variables() { },
return variables isCollapse() {
}, return !this.sidebar.opened;
isCollapse() { }
return !this.sidebar.opened
} }
} };
}
</script> </script>

543
ruoyi-ui/src/layout/components/TagsView/index.vue
View File

@ -1,289 +1,318 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper"> <scroll-pane ref="scrollPane" class="tags-view-wrapper">
<router-link <router-link
v-for="tag in visitedViews" v-for="tag in visitedViews"
ref="tag" ref="tag"
:key="tag.path" :key="tag.path"
:class="isActive(tag)?'active':''" :class="isActive(tag)?'active':''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span" tag="span"
class="tags-view-item" class="tags-view-item"
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''" :style="activeStyle(tag)"
@contextmenu.prevent.native="openMenu(tag,$event)" @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
> @contextmenu.prevent.native="openMenu(tag,$event)"
{{ tag.title }} >
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> {{ tag.title }}
</router-link> <span
</scroll-pane> v-if="!isAffix(tag)"
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> class="el-icon-close"
<li @click="refreshSelectedTag(selectedTag)">刷新页面</li> @click.prevent.stop="closeSelectedTag(tag)"
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li> />
<li @click="closeOthersTags">关闭其他</li> </router-link>
<li @click="closeAllTags(selectedTag)">关闭所有</li> </scroll-pane>
</ul> <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
</div> <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭所有</li>
</ul>
</div>
</template> </template>
<script> <script>
import ScrollPane from './ScrollPane' import ScrollPane from "./ScrollPane";
import path from 'path' import path from "path";
export default { export default {
components: { ScrollPane }, components: { ScrollPane },
data() { data() {
return { return {
visible: false, visible: false,
top: 0, top: 0,
left: 0, left: 0,
selectedTag: {}, selectedTag: {},
affixTags: [] affixTags: []
} };
},
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews
},
routes() {
return this.$store.state.permission.routes
}
},
watch: {
$route() {
this.addTags()
this.moveToCurrentTag()
},
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
},
mounted() {
this.initTags()
this.addTags()
},
methods: {
isActive(route) {
return route.path === this.$route.path
},
isAffix(tag) {
return tag.meta && tag.meta.affix
},
filterAffixTags(routes, basePath = '/') {
let tags = []
routes.forEach(route => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta }
})
}
if (route.children) {
const tempTags = this.filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
}
}
})
return tags
}, },
initTags() { computed: {
const affixTags = this.affixTags = this.filterAffixTags(this.routes) visitedViews() {
for (const tag of affixTags) { return this.$store.state.tagsView.visitedViews;
// Must have tag name },
if (tag.name) { routes() {
this.$store.dispatch('tagsView/addVisitedView', tag) return this.$store.state.permission.routes;
},
theme() {
return this.$store.state.settings.theme;
} }
}
}, },
addTags() { watch: {
const { name } = this.$route $route() {
if (name) { this.addTags();
this.$store.dispatch('tagsView/addView', this.$route) this.moveToCurrentTag();
} },
return false visible(value) {
}, if (value) {
moveToCurrentTag() { document.body.addEventListener("click", this.closeMenu);
const tags = this.$refs.tag } else {
this.$nextTick(() => { document.body.removeEventListener("click", this.closeMenu);
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag)
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch('tagsView/updateVisitedView', this.$route)
} }
break
}
} }
})
},
refreshSelectedTag(view) {
this.$store.dispatch('tagsView/delCachedView', view).then(() => {
const { fullPath } = view
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
})
}, },
closeSelectedTag(view) { mounted() {
this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { this.initTags();
if (this.isActive(view)) { this.addTags();
this.toLastView(visitedViews, view)
}
})
}, },
closeOthersTags() { methods: {
this.$router.push(this.selectedTag) isActive(route) {
this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { return route.path === this.$route.path;
this.moveToCurrentTag() },
}) activeStyle(tag) {
}, if (!this.isActive(tag)) return {};
closeAllTags(view) { return {
this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { "background-color": this.theme,
if (this.affixTags.some(tag => tag.path === view.path)) { "border-color": this.theme
return };
} },
this.toLastView(visitedViews, view) isAffix(tag) {
}) return tag.meta && tag.meta.affix;
}, },
toLastView(visitedViews, view) { filterAffixTags(routes, basePath = "/") {
const latestView = visitedViews.slice(-1)[0] let tags = [];
if (latestView) { routes.forEach(route => {
this.$router.push(latestView.fullPath) if (route.meta && route.meta.affix) {
} else { const tagPath = path.resolve(basePath, route.path);
// now the default is to redirect to the home page if there is no tags-view, tags.push({
// you can adjust it according to your needs. fullPath: tagPath,
if (view.name === 'Dashboard') { path: tagPath,
// to reload home page name: route.name,
this.$router.replace({ path: '/redirect' + view.fullPath }) meta: { ...route.meta }
} else { });
this.$router.push('/') }
} if (route.children) {
} const tempTags = this.filterAffixTags(
}, route.children,
openMenu(tag, e) { route.path
const menuMinWidth = 105 );
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left if (tempTags.length >= 1) {
const offsetWidth = this.$el.offsetWidth // container width tags = [...tags, ...tempTags];
const maxLeft = offsetWidth - menuMinWidth // left boundary }
const left = e.clientX - offsetLeft + 15 // 15: margin right }
});
return tags;
},
initTags() {
const affixTags = (this.affixTags = this.filterAffixTags(
this.routes
));
for (const tag of affixTags) {
// Must have tag name
if (tag.name) {
this.$store.dispatch("tagsView/addVisitedView", tag);
}
}
},
addTags() {
const { name } = this.$route;
if (name) {
this.$store.dispatch("tagsView/addView", this.$route);
}
return false;
},
moveToCurrentTag() {
const tags = this.$refs.tag;
this.$nextTick(() => {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag);
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch(
"tagsView/updateVisitedView",
this.$route
);
}
break;
}
}
});
},
refreshSelectedTag(view) {
this.$store.dispatch("tagsView/delCachedView", view).then(() => {
const { fullPath } = view;
this.$nextTick(() => {
this.$router.replace({
path: "/redirect" + fullPath
});
});
});
},
closeSelectedTag(view) {
this.$store
.dispatch("tagsView/delView", view)
.then(({ visitedViews }) => {
if (this.isActive(view)) {
this.toLastView(visitedViews, view);
}
});
},
closeOthersTags() {
this.$router.push(this.selectedTag);
this.$store
.dispatch("tagsView/delOthersViews", this.selectedTag)
.then(() => {
this.moveToCurrentTag();
});
},
closeAllTags(view) {
this.$store
.dispatch("tagsView/delAllViews")
.then(({ visitedViews }) => {
if (this.affixTags.some(tag => tag.path === view.path)) {
return;
}
this.toLastView(visitedViews, view);
});
},
toLastView(visitedViews, view) {
const latestView = visitedViews.slice(-1)[0];
if (latestView) {
this.$router.push(latestView.fullPath);
} else {
// now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs.
if (view.name === "Dashboard") {
// to reload home page
this.$router.replace({ path: "/redirect" + view.fullPath });
} else {
this.$router.push("/");
}
}
},
openMenu(tag, e) {
const menuMinWidth = 105;
const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = this.$el.offsetWidth; // container width
const maxLeft = offsetWidth - menuMinWidth; // left boundary
const left = e.clientX - offsetLeft + 15; // 15: margin right
if (left > maxLeft) { if (left > maxLeft) {
this.left = maxLeft this.left = maxLeft;
} else { } else {
this.left = left this.left = left;
} }
this.top = e.clientY this.top = e.clientY;
this.visible = true this.visible = true;
this.selectedTag = tag this.selectedTag = tag;
}, },
closeMenu() { closeMenu() {
this.visible = false this.visible = false;
}
} }
} };
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-view-container { .tags-view-container {
height: 34px; height: 34px;
width: 100%; width: 100%;
background: #fff; background: #fff;
border-bottom: 1px solid #d8dce5; border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
display: inline-block; display: inline-block;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
border: 1px solid #d8dce5; border: 1px solid #d8dce5;
color: #495060; color: #495060;
background: #fff; background: #fff;
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
margin-top: 4px; margin-top: 4px;
&:first-of-type { &:first-of-type {
margin-left: 15px; margin-left: 15px;
} }
&:last-of-type { &:last-of-type {
margin-right: 15px; margin-right: 15px;
} }
&.active { &.active {
background-color: #42b983; background-color: #42b983;
color: #fff; color: #fff;
border-color: #42b983; border-color: #42b983;
&::before { &::before {
content: ''; content: "";
background: #fff; background: #fff;
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
margin-right: 2px; margin-right: 2px;
}
}
} }
}
} }
} .contextmenu {
.contextmenu { margin: 0;
margin: 0; background: #fff;
background: #fff; z-index: 3000;
z-index: 3000; position: absolute;
position: absolute; list-style-type: none;
list-style-type: none; padding: 5px 0;
padding: 5px 0; border-radius: 4px;
border-radius: 4px; font-size: 12px;
font-size: 12px; font-weight: 400;
font-weight: 400; color: #333;
color: #333; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); li {
li { margin: 0;
margin: 0; padding: 7px 16px;
padding: 7px 16px; cursor: pointer;
cursor: pointer; &:hover {
&:hover { background: #eee;
background: #eee; }
} }
} }
}
} }
</style> </style>
<style lang="scss"> <style lang="scss">
//reset element css of el-icon-close //reset element css of el-icon-close
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
.el-icon-close { .el-icon-close {
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: 2px; vertical-align: 2px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: 100% 50%; transform-origin: 100% 50%;
&:before { &:before {
transform: scale(.6); transform: scale(0.6);
display: inline-block; display: inline-block;
vertical-align: -3px; vertical-align: -3px;
} }
&:hover { &:hover {
background-color: #b4bccc; background-color: #b4bccc;
color: #fff; color: #fff;
} }
}
} }
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save