p71924506
/
RuoYi-Vue
mirror of https://gitee.com/y_project/RuoYi-Vue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

调整空格同步格式

This commit is contained in:
北风 2020-05-22 19:06:37 +08:00
parent ff0749984d
commit 98bb78a9d6
2 changed files with 328 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,26 @@
<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="settings.theme" :active-text-color="settings.theme"
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >
<sidebar-item <sidebar-item
v-for="route in permission_routes" v-for="route in permission_routes"
:key="route.path" :key="route.path"
:item="route" :item="route"
:base-path="route.path" :base-path="route.path"
/> />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<script> <script>
@ -30,28 +30,28 @@ 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: {
...mapState(["settings"]), ...mapState(["settings"]),
...mapGetters(["permission_routes", "sidebar"]), ...mapGetters(["permission_routes", "sidebar"]),
activeMenu() { activeMenu() {
const route = this.$route; const route = this.$route;
const { meta, path } = route; const { meta, path } = route;
// if set path, the sidebar will highlight the path you set // if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
return meta.activeMenu; return meta.activeMenu;
} }
return path; return path;
}, },
showLogo() { showLogo() {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
}, },
variables() { variables() {
return variables; return variables;
}, },
isCollapse() { isCollapse() {
return !this.sidebar.opened; return !this.sidebar.opened;
}
} }
}
}; };
</script> </script>

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

@ -1,33 +1,33 @@
<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"
:style="activeStyle(tag)" :style="activeStyle(tag)"
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''" @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)" @contextmenu.prevent.native="openMenu(tag,$event)"
> >
{{ tag.title }} {{ tag.title }}
<span <span
v-if="!isAffix(tag)" v-if="!isAffix(tag)"
class="el-icon-close" class="el-icon-close"
@click.prevent.stop="closeSelectedTag(tag)" @click.prevent.stop="closeSelectedTag(tag)"
/> />
</router-link> </router-link>
</scroll-pane> </scroll-pane>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">刷新页面</li> <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li> <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
<li @click="closeOthersTags">关闭其他</li> <li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭所有</li> <li @click="closeAllTags(selectedTag)">关闭所有</li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
@ -35,274 +35,284 @@ 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() { computed: {
return this.$store.state.permission.routes; visitedViews() {
}, return this.$store.state.tagsView.visitedViews;
theme() { },
return this.$store.state.settings.theme; routes() {
} return this.$store.state.permission.routes;
}, },
watch: { theme() {
$route() { return this.$store.state.settings.theme;
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;
},
activeStyle(tag) {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
},
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() { watch: {
const affixTags = (this.affixTags = this.filterAffixTags(this.routes)); $route() {
for (const tag of affixTags) { this.addTags();
// Must have tag name this.moveToCurrentTag();
if (tag.name) { },
this.$store.dispatch("tagsView/addVisitedView", tag); visible(value) {
} if (value) {
} document.body.addEventListener("click", this.closeMenu);
}, } else {
addTags() { document.body.removeEventListener("click", this.closeMenu);
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) { mounted() {
this.$store.dispatch("tagsView/delCachedView", view).then(() => { this.initTags();
const { fullPath } = view; this.addTags();
this.$nextTick(() => {
this.$router.replace({
path: "/redirect" + fullPath
});
});
});
}, },
closeSelectedTag(view) { methods: {
this.$store isActive(route) {
.dispatch("tagsView/delView", view) return route.path === this.$route.path;
.then(({ visitedViews }) => { },
if (this.isActive(view)) { activeStyle(tag) {
this.toLastView(visitedViews, view); if (!this.isActive(tag)) return {};
} return {
}); "background-color": this.theme,
}, "border-color": this.theme
closeOthersTags() { };
this.$router.push(this.selectedTag); },
this.$store isAffix(tag) {
.dispatch("tagsView/delOthersViews", this.selectedTag) return tag.meta && tag.meta.affix;
.then(() => { },
this.moveToCurrentTag(); filterAffixTags(routes, basePath = "/") {
}); let tags = [];
}, routes.forEach(route => {
closeAllTags(view) { if (route.meta && route.meta.affix) {
this.$store.dispatch("tagsView/delAllViews").then(({ visitedViews }) => { const tagPath = path.resolve(basePath, route.path);
if (this.affixTags.some(tag => tag.path === view.path)) { tags.push({
return; fullPath: tagPath,
} path: tagPath,
this.toLastView(visitedViews, view); name: route.name,
}); meta: { ...route.meta }
}, });
toLastView(visitedViews, view) { }
const latestView = visitedViews.slice(-1)[0]; if (route.children) {
if (latestView) { const tempTags = this.filterAffixTags(
this.$router.push(latestView.fullPath); route.children,
} else { route.path
// 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 (tempTags.length >= 1) {
if (view.name === "Dashboard") { tags = [...tags, ...tempTags];
// to reload home page }
this.$router.replace({ path: "/redirect" + view.fullPath }); }
} else { });
this.$router.push("/"); return tags;
} },
} initTags() {
}, const affixTags = (this.affixTags = this.filterAffixTags(
openMenu(tag, e) { this.routes
const menuMinWidth = 105; ));
const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left for (const tag of affixTags) {
const offsetWidth = this.$el.offsetWidth; // container width // Must have tag name
const maxLeft = offsetWidth - menuMinWidth; // left boundary if (tag.name) {
const left = e.clientX - offsetLeft + 15; // 15: margin right 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;
border-bottom: 1px solid #d8dce5;
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-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: "";
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
}
}
.contextmenu {
margin: 0;
background: #fff; background: #fff;
z-index: 3000; border-bottom: 1px solid #d8dce5;
position: absolute; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
list-style-type: none; .tags-view-wrapper {
padding: 5px 0; .tags-view-item {
border-radius: 4px; display: inline-block;
font-size: 12px; position: relative;
font-weight: 400; cursor: pointer;
color: #333; height: 26px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); line-height: 26px;
li { border: 1px solid #d8dce5;
margin: 0; color: #495060;
padding: 7px 16px; background: #fff;
cursor: pointer; padding: 0 8px;
&:hover { font-size: 12px;
background: #eee; margin-left: 5px;
} margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: "";
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
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 0.3s cubic-bezier(0.645, 0.045, 0.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(0.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>