added ESlint 语法检测
This commit is contained in:
何秀钢
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-submenu :popper-append-to-body="false" ref="subMenu" :index="routerInfo.name">
|
||||
<el-submenu ref="subMenu" :popper-append-to-body="false" :index="routerInfo.name">
|
||||
<template slot="title">
|
||||
<i :class="'el-icon-'+routerInfo.meta.icon"></i>
|
||||
<span slot="title">{{routerInfo.meta.title}}</span>
|
||||
<i :class="'el-icon-'+routerInfo.meta.icon" />
|
||||
<span slot="title">{{ routerInfo.meta.title }}</span>
|
||||
</template>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</el-submenu>
|
||||
</template>
|
||||
|
||||
@@ -21,5 +21,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<component :is="menuComponent" :routerInfo="routerInfo" v-if="!routerInfo.hidden">
|
||||
<component :is="menuComponent" v-if="!routerInfo.hidden" :router-info="routerInfo">
|
||||
<template v-if="routerInfo.children&&routerInfo.children.length">
|
||||
<AsideComponent :key="item.name" :routerInfo="item" v-for="item in routerInfo.children" />
|
||||
<AsideComponent v-for="item in routerInfo.children" :key="item.name" :router-info="item" />
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
@@ -12,14 +12,9 @@ import AsyncSubmenu from './asyncSubmenu'
|
||||
|
||||
export default {
|
||||
name: 'AsideComponent',
|
||||
computed: {
|
||||
menuComponent() {
|
||||
if (this.routerInfo.children&&this.routerInfo.children.filter(item=>!item.hidden).length) {
|
||||
return 'AsyncSubmenu'
|
||||
} else {
|
||||
return 'MenuItem'
|
||||
}
|
||||
}
|
||||
components: {
|
||||
MenuItem,
|
||||
AsyncSubmenu
|
||||
},
|
||||
props: {
|
||||
routerInfo: {
|
||||
@@ -29,11 +24,14 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MenuItem,
|
||||
AsyncSubmenu
|
||||
computed: {
|
||||
menuComponent() {
|
||||
if (this.routerInfo.children && this.routerInfo.children.filter(item => !item.hidden).length) {
|
||||
return 'AsyncSubmenu'
|
||||
} else {
|
||||
return 'MenuItem'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-menu-item :index="routerInfo.name" :route="{parameters:routerInfo.parameters}">
|
||||
<i :class="'el-icon-'+routerInfo.meta.icon"></i>
|
||||
<span slot="title">{{routerInfo.meta.title}}</span>
|
||||
<i :class="'el-icon-'+routerInfo.meta.icon" />
|
||||
<span slot="title">{{ routerInfo.meta.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
@@ -18,5 +18,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div class="router-history">
|
||||
<el-tabs
|
||||
:closable="!(historys.length==1&&this.$route.name==defaultRouter)"
|
||||
v-model="activeValue"
|
||||
:closable="!(historys.length===1&&this.$route.name===defaultRouter)"
|
||||
type="card"
|
||||
@contextmenu.prevent.native="openContextMenu($event)"
|
||||
@tab-click="changeTab"
|
||||
@tab-remove="removeTab"
|
||||
type="card"
|
||||
v-model="activeValue"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in historys"
|
||||
:key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
||||
:label="item.meta.title"
|
||||
:name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
||||
:tab="item"
|
||||
v-for="item in historys"
|
||||
></el-tab-pane>
|
||||
/>
|
||||
</el-tabs>
|
||||
|
||||
<!--自定义右键菜单html代码-->
|
||||
<ul :style="{left:left+'px',top:top+'px'}" class="contextmenu" v-show="contextMenuVisible">
|
||||
<ul v-show="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||
<li @click="closeAll">关闭所有</li>
|
||||
<li @click="closeLeft">关闭左侧</li>
|
||||
<li @click="closeRight">关闭右侧</li>
|
||||
@@ -26,84 +26,107 @@
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
const getFmtString = (item)=>{
|
||||
return item.name +
|
||||
JSON.stringify(item.query) +
|
||||
JSON.stringify(item.params)
|
||||
}
|
||||
import { mapGetters } from 'vuex'
|
||||
const getFmtString = (item) => {
|
||||
return item.name +
|
||||
JSON.stringify(item.query) +
|
||||
JSON.stringify(item.params)
|
||||
}
|
||||
export default {
|
||||
name: "HistoryComponent",
|
||||
name: 'HistoryComponent',
|
||||
data() {
|
||||
return {
|
||||
historys: [],
|
||||
activeValue: "",
|
||||
activeValue: '',
|
||||
contextMenuVisible: false,
|
||||
left: 0,
|
||||
top: 0,
|
||||
isCollapse: false,
|
||||
isMobile: false,
|
||||
rightActive: ""
|
||||
};
|
||||
rightActive: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", ["userInfo"]),
|
||||
...mapGetters('user', ['userInfo']),
|
||||
defaultRouter() {
|
||||
return this.userInfo.authority.defaultRouter;
|
||||
return this.userInfo.authority.defaultRouter
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
contextMenuVisible() {
|
||||
if (this.contextMenuVisible) {
|
||||
document.body.addEventListener('click', () => {
|
||||
this.contextMenuVisible = false
|
||||
})
|
||||
} else {
|
||||
document.body.removeEventListener('click', () => {
|
||||
this.contextMenuVisible = false
|
||||
})
|
||||
}
|
||||
},
|
||||
$route(to, now) {
|
||||
this.historys = this.historys.filter(item => !item.meta.closeTab)
|
||||
this.setTab(to)
|
||||
sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
||||
this.activeValue = window.sessionStorage.getItem('activeValue')
|
||||
if (now && to && now.name === to.name) {
|
||||
this.$bus.$emit('reload')
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.on("mobile", isMobile => {
|
||||
this.isMobile = isMobile;
|
||||
});
|
||||
this.$bus.on("collapse", isCollapse => {
|
||||
this.isCollapse = isCollapse;
|
||||
});
|
||||
this.$bus.on('mobile', isMobile => {
|
||||
this.isMobile = isMobile
|
||||
})
|
||||
this.$bus.on('collapse', isCollapse => {
|
||||
this.isCollapse = isCollapse
|
||||
})
|
||||
const initHistorys = [
|
||||
{
|
||||
name: this.defaultRouter,
|
||||
meta: {
|
||||
title: "首页"
|
||||
title: '首页'
|
||||
},
|
||||
query: {},
|
||||
params: {}
|
||||
}
|
||||
];
|
||||
]
|
||||
this.historys =
|
||||
JSON.parse(sessionStorage.getItem("historys")) || initHistorys;
|
||||
if(!window.sessionStorage.getItem("activeValue")){
|
||||
this.activeValue = getFmtString(this.$route)
|
||||
}else{
|
||||
this.activeValue = window.sessionStorage.getItem("activeValue");
|
||||
}
|
||||
this.setTab(this.$route);
|
||||
JSON.parse(sessionStorage.getItem('historys')) || initHistorys
|
||||
if (!window.sessionStorage.getItem('activeValue')) {
|
||||
this.activeValue = getFmtString(this.$route)
|
||||
} else {
|
||||
this.activeValue = window.sessionStorage.getItem('activeValue')
|
||||
}
|
||||
this.setTab(this.$route)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.$bus.off("collapse");
|
||||
this.$bus.off("mobile");
|
||||
this.$bus.off('collapse')
|
||||
this.$bus.off('mobile')
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
openContextMenu(e) {
|
||||
if (this.historys.length == 1 && this.$route.name == this.defaultRouter) {
|
||||
return false;
|
||||
if (this.historys.length === 1 && this.$route.name === this.defaultRouter) {
|
||||
return false
|
||||
}
|
||||
if (e.srcElement.id) {
|
||||
this.contextMenuVisible = true;
|
||||
let width;
|
||||
this.contextMenuVisible = true
|
||||
let width
|
||||
if (this.isCollapse) {
|
||||
width = 54;
|
||||
width = 54
|
||||
} else {
|
||||
width = 220;
|
||||
width = 220
|
||||
}
|
||||
if (this.isMobile) {
|
||||
width = 0;
|
||||
width = 0
|
||||
}
|
||||
this.left = e.clientX - width;
|
||||
this.top = e.clientY + 10;
|
||||
this.rightActive = e.srcElement.id.split("-")[1];
|
||||
this.left = e.clientX - width
|
||||
this.top = e.clientY + 10
|
||||
this.rightActive = e.srcElement.id.split('-')[1]
|
||||
}
|
||||
},
|
||||
closeAll() {
|
||||
@@ -111,155 +134,134 @@ export default {
|
||||
{
|
||||
name: this.defaultRouter,
|
||||
meta: {
|
||||
title: "首页"
|
||||
title: '首页'
|
||||
},
|
||||
query: {},
|
||||
params: {}
|
||||
}
|
||||
];
|
||||
this.$router.push({ name: this.defaultRouter });
|
||||
this.contextMenuVisible = false;
|
||||
sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
||||
]
|
||||
this.$router.push({ name: this.defaultRouter })
|
||||
this.contextMenuVisible = false
|
||||
sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
||||
},
|
||||
closeLeft() {
|
||||
let right;
|
||||
let right
|
||||
const rightIndex = this.historys.findIndex(item => {
|
||||
if (getFmtString(item) == this.rightActive) {
|
||||
right = item;
|
||||
if (getFmtString(item) === this.rightActive) {
|
||||
right = item
|
||||
}
|
||||
return (
|
||||
getFmtString(item) == this.rightActive
|
||||
);
|
||||
});
|
||||
getFmtString(item) === this.rightActive
|
||||
)
|
||||
})
|
||||
const activeIndex = this.historys.findIndex(
|
||||
item => getFmtString(item) == this.activeValue
|
||||
);
|
||||
this.historys.splice(0, rightIndex);
|
||||
item => getFmtString(item) === this.activeValue
|
||||
)
|
||||
this.historys.splice(0, rightIndex)
|
||||
if (rightIndex > activeIndex) {
|
||||
this.$router.push(right);
|
||||
this.$router.push(right)
|
||||
}
|
||||
sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
||||
sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
||||
},
|
||||
closeRight() {
|
||||
let right;
|
||||
let right
|
||||
const leftIndex = this.historys.findIndex(item => {
|
||||
if ( getFmtString(item) == this.rightActive ) {
|
||||
right = item;
|
||||
if (getFmtString(item) === this.rightActive) {
|
||||
right = item
|
||||
}
|
||||
return ( getFmtString(item) == this.rightActive );
|
||||
});
|
||||
return (getFmtString(item) === this.rightActive)
|
||||
})
|
||||
const activeIndex = this.historys.findIndex(
|
||||
item => getFmtString(item) == this.activeValue
|
||||
);
|
||||
this.historys.splice(leftIndex + 1, this.historys.length);
|
||||
item => getFmtString(item) === this.activeValue
|
||||
)
|
||||
this.historys.splice(leftIndex + 1, this.historys.length)
|
||||
if (leftIndex < activeIndex) {
|
||||
this.$router.push(right);
|
||||
this.$router.push(right)
|
||||
}
|
||||
sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
||||
sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
||||
},
|
||||
closeOther() {
|
||||
let right;
|
||||
let right
|
||||
this.historys = this.historys.filter(item => {
|
||||
if ( getFmtString(item) == this.rightActive
|
||||
if (getFmtString(item) === this.rightActive
|
||||
) {
|
||||
right = item;
|
||||
right = item
|
||||
}
|
||||
return ( getFmtString(item) == this.rightActive
|
||||
);
|
||||
});
|
||||
this.$router.push(right);
|
||||
sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
||||
return (getFmtString(item) === this.rightActive
|
||||
)
|
||||
})
|
||||
this.$router.push(right)
|
||||
sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
||||
},
|
||||
isSame(route1, route2) {
|
||||
if (route1.name != route2.name) {
|
||||
return false;
|
||||
if (route1.name !== route2.name) {
|
||||
return false
|
||||
}
|
||||
for (let key in route1.query) {
|
||||
if (route1.query[key] != route2.query[key]) {
|
||||
return false;
|
||||
for (const key in route1.query) {
|
||||
if (route1.query[key] !== route2.query[key]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
for (let key in route1.params) {
|
||||
if (route1.params[key] != route2.params[key]) {
|
||||
return false;
|
||||
for (const key in route1.params) {
|
||||
if (route1.params[key] !== route2.params[key]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true;
|
||||
return true
|
||||
},
|
||||
setTab(route) {
|
||||
if (!this.historys.some(item => this.isSame(item, route))) {
|
||||
const obj = {};
|
||||
obj.name = route.name;
|
||||
obj.meta = route.meta;
|
||||
obj.query = route.query;
|
||||
obj.params = route.params;
|
||||
this.historys.push(obj);
|
||||
const obj = {}
|
||||
obj.name = route.name
|
||||
obj.meta = route.meta
|
||||
obj.query = route.query
|
||||
obj.params = route.params
|
||||
this.historys.push(obj)
|
||||
}
|
||||
window.sessionStorage.setItem(
|
||||
"activeValue",
|
||||
'activeValue',
|
||||
getFmtString(this.$route)
|
||||
);
|
||||
)
|
||||
},
|
||||
changeTab(component) {
|
||||
const tab = component.$attrs.tab;
|
||||
const tab = component.$attrs.tab
|
||||
this.$router.push({
|
||||
name: tab.name,
|
||||
query: tab.query,
|
||||
params: tab.params
|
||||
});
|
||||
})
|
||||
},
|
||||
removeTab(tab) {
|
||||
const index = this.historys.findIndex(
|
||||
item => getFmtString(item) == tab
|
||||
);
|
||||
item => getFmtString(item) === tab
|
||||
)
|
||||
if (
|
||||
getFmtString(this.$route) == tab
|
||||
getFmtString(this.$route) === tab
|
||||
) {
|
||||
if (this.historys.length == 1) {
|
||||
this.$router.push({ name: this.defaultRouter });
|
||||
if (this.historys.length === 1) {
|
||||
this.$router.push({ name: this.defaultRouter })
|
||||
} else {
|
||||
if (index < this.historys.length - 1) {
|
||||
this.$router.push({
|
||||
name: this.historys[index + 1].name,
|
||||
query: this.historys[index + 1].query,
|
||||
params: this.historys[index + 1].params
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: this.historys[index - 1].name,
|
||||
query: this.historys[index - 1].query,
|
||||
params: this.historys[index - 1].params
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
this.historys.splice(index, 1);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
contextMenuVisible() {
|
||||
if (this.contextMenuVisible) {
|
||||
document.body.addEventListener("click", () => {
|
||||
this.contextMenuVisible = false;
|
||||
});
|
||||
} else {
|
||||
document.body.removeEventListener("click", () => {
|
||||
this.contextMenuVisible = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
$route(to, now) {
|
||||
this.historys = this.historys.filter(item => !item.meta.closeTab);
|
||||
this.setTab(to);
|
||||
sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
||||
this.activeValue = window.sessionStorage.getItem("activeValue");
|
||||
if (now && to && now.name == to.name) {
|
||||
this.$bus.$emit("reload");
|
||||
}
|
||||
this.historys.splice(index, 1)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contextmenu {
|
||||
width: 100px;
|
||||
@@ -283,4 +285,4 @@ export default {
|
||||
background: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="true"
|
||||
:default-active="active"
|
||||
@select="selectMenuItem"
|
||||
active-text-color="#fff"
|
||||
class="el-menu-vertical"
|
||||
text-color="rgb(191, 203, 217)"
|
||||
unique-opened
|
||||
@select="selectMenuItem"
|
||||
>
|
||||
<template v-for="item in asyncRouters[0].children">
|
||||
<aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
|
||||
<aside-component v-if="!item.hidden" :key="item.name" :router-info="item" />
|
||||
</template>
|
||||
</el-menu>
|
||||
</transition>
|
||||
@@ -22,63 +22,63 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
import AsideComponent from "@/view/layout/aside/asideComponent";
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import AsideComponent from '@/view/layout/aside/asideComponent'
|
||||
export default {
|
||||
name: "Aside",
|
||||
data() {
|
||||
return {
|
||||
active: "",
|
||||
isCollapse: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("history", ["addHistory"]),
|
||||
selectMenuItem(index, _, ele) {
|
||||
const query = {};
|
||||
const params = {};
|
||||
ele.route.parameters &&
|
||||
ele.route.parameters.map(item => {
|
||||
if (item.type == "query") {
|
||||
query[item.key] = item.value;
|
||||
} else {
|
||||
params[item.key] = item.value;
|
||||
}
|
||||
});
|
||||
if (index === this.$route.name) return;
|
||||
if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
|
||||
window.open(index);
|
||||
} else {
|
||||
this.$router.push({ name: index, query, params });
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("router", ["asyncRouters"])
|
||||
},
|
||||
name: 'Aside',
|
||||
components: {
|
||||
AsideComponent
|
||||
},
|
||||
created() {
|
||||
this.active = this.$route.name;
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if (screenWidth < 1000) {
|
||||
this.isCollapse = !this.isCollapse;
|
||||
data() {
|
||||
return {
|
||||
active: '',
|
||||
isCollapse: false
|
||||
}
|
||||
|
||||
this.$bus.on("collapse", item => {
|
||||
this.isCollapse = item;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('router', ['asyncRouters'])
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.active = this.$route.name;
|
||||
this.active = this.$route.name
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.active = this.$route.name
|
||||
const screenWidth = document.body.clientWidth
|
||||
if (screenWidth < 1000) {
|
||||
this.isCollapse = !this.isCollapse
|
||||
}
|
||||
|
||||
this.$bus.on('collapse', item => {
|
||||
this.isCollapse = item
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.off("collapse");
|
||||
this.$bus.off('collapse')
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('history', ['addHistory']),
|
||||
selectMenuItem(index, _, ele) {
|
||||
const query = {}
|
||||
const params = {}
|
||||
ele.route.parameters &&
|
||||
ele.route.parameters.map(item => {
|
||||
if (item.type === 'query') {
|
||||
query[item.key] = item.value
|
||||
} else {
|
||||
params[item.key] = item.value
|
||||
}
|
||||
})
|
||||
if (index === this.$route.name) return
|
||||
if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
|
||||
window.open(index)
|
||||
} else {
|
||||
this.$router.push({ name: index, query, params })
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -95,4 +95,4 @@ export default {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,21 +3,23 @@
|
||||
<div>
|
||||
<span>Powered by</span>
|
||||
<span>
|
||||
<a href="https://github.com/flipped-aurora/gin-vue-admin">gin-vue-admin</a>
|
||||
<a href="https://github.com/flipped-aurora/gin-vue-admin">gin-vue-admin</a>
|
||||
</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-divider direction="vertical" />
|
||||
<span>Copyright</span>
|
||||
<span>
|
||||
<a href="https://github.com/flipped-aurora">flipped-aurora团队</a>
|
||||
<a href="https://github.com/flipped-aurora">flipped-aurora团队</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"BottomInfo"
|
||||
name: 'BottomInfo'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.bottom-info {
|
||||
color: #888;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<el-container class="layout-cont">
|
||||
<el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
|
||||
<el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()"></el-row>
|
||||
<el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()" />
|
||||
<el-aside class="main-cont main-left">
|
||||
<div class="tilte">
|
||||
<img alt class="logoimg" src="~@/assets/nav_logo.png" />
|
||||
<h2 class="tit-text" v-if="isSider">Gin-Vue-Admin</h2>
|
||||
<img alt class="logoimg" src="~@/assets/nav_logo.png">
|
||||
<h2 v-if="isSider" class="tit-text">Gin-Vue-Admin</h2>
|
||||
</div>
|
||||
<Aside class="aside" />
|
||||
</el-aside>
|
||||
@@ -16,49 +16,49 @@
|
||||
:style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
|
||||
class="topfix"
|
||||
>
|
||||
<el-row>
|
||||
<!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
|
||||
<el-header class="header-cont">
|
||||
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
|
||||
<div @click="totalCollapse" class="menu-total">
|
||||
<i class="el-icon-s-unfold" v-if="isCollapse"></i>
|
||||
<i class="el-icon-s-fold" v-else></i>
|
||||
<el-row>
|
||||
<!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
|
||||
<el-header class="header-cont">
|
||||
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
|
||||
<div class="menu-total" @click="totalCollapse">
|
||||
<i v-if="isCollapse" class="el-icon-s-unfold" />
|
||||
<i v-else class="el-icon-s-fold" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="10" :lg="14" :md='14' :sm="9" :xl="14">
|
||||
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item
|
||||
:key="item.path"
|
||||
v-for="item in matched.slice(1,matched.length)"
|
||||
>{{item.meta.title}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-col>
|
||||
<el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
|
||||
<div class="fl-right right-box">
|
||||
<Search />
|
||||
<Screenfull class="screenfull" :style="{cursor:'pointer'}"></Screenfull>
|
||||
<el-dropdown>
|
||||
<span class="header-avatar">
|
||||
<CustomPic/>
|
||||
<span style="margin-left: 5px">{{userInfo.nickName}}</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
<el-dropdown-menu class="dropdown-group" slot="dropdown">
|
||||
<el-dropdown-item>
|
||||
<span>
|
||||
更多信息
|
||||
<el-badge is-dot />
|
||||
<el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14">
|
||||
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item
|
||||
v-for="item in matched.slice(1,matched.length)"
|
||||
:key="item.path"
|
||||
>{{ item.meta.title }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-col>
|
||||
<el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
|
||||
<div class="fl-right right-box">
|
||||
<Search />
|
||||
<Screenfull class="screenfull" :style="{cursor:'pointer'}" />
|
||||
<el-dropdown>
|
||||
<span class="header-avatar">
|
||||
<CustomPic />
|
||||
<span style="margin-left: 5px">{{ userInfo.nickName }}</span>
|
||||
<i class="el-icon-arrow-down" />
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-group">
|
||||
<el-dropdown-item>
|
||||
<span>
|
||||
更多信息
|
||||
<el-badge is-dot />
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-s-custom" @click.native="toPerson">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-table-lamp" @click.native="LoginOut">登 出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-header>
|
||||
</el-row>
|
||||
</el-header>
|
||||
</el-row>
|
||||
<!-- 当前面包屑用路由自动生成可根据需求修改 -->
|
||||
<!--
|
||||
:to="{ path: item.path }" 暂时注释不用-->
|
||||
@@ -67,16 +67,16 @@
|
||||
</transition>
|
||||
<transition mode="out-in" name="el-fade-in-linear">
|
||||
<keep-alive>
|
||||
<router-view v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" v-if="$route.meta.keepAlive && reloadFlag"></router-view>
|
||||
<router-view v-if="$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<transition mode="out-in" name="el-fade-in-linear">
|
||||
<router-view v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" v-if="!$route.meta.keepAlive && reloadFlag"></router-view>
|
||||
<router-view v-if="!$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
|
||||
</transition>
|
||||
<BottomInfo />
|
||||
<BottomInfo />
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@@ -90,18 +90,6 @@ import { mapGetters, mapActions } from 'vuex'
|
||||
import CustomPic from '@/components/customPic'
|
||||
export default {
|
||||
name: 'Layout',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
isCollapse: false,
|
||||
isSider: true,
|
||||
isMobile: false,
|
||||
isShadowBg: false,
|
||||
loadingFlag:false,
|
||||
reloadFlag:true,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Aside,
|
||||
HistoryComponent,
|
||||
@@ -110,28 +98,17 @@ export default {
|
||||
BottomInfo,
|
||||
CustomPic
|
||||
},
|
||||
methods: {
|
||||
...mapActions('user', ['LoginOut']),
|
||||
reload(){
|
||||
this.reloadFlag = false
|
||||
this.$nextTick(()=>{
|
||||
this.reloadFlag = true
|
||||
})
|
||||
},
|
||||
totalCollapse() {
|
||||
this.isCollapse = !this.isCollapse
|
||||
this.isSider = !this.isCollapse
|
||||
this.isShadowBg = !this.isCollapse
|
||||
this.$bus.emit('collapse', this.isCollapse)
|
||||
},
|
||||
toPerson() {
|
||||
this.$router.push({ name: 'person' })
|
||||
},
|
||||
changeShadow() {
|
||||
this.isShadowBg = !this.isShadowBg
|
||||
this.isSider = !!this.isCollapse
|
||||
this.totalCollapse()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
isCollapse: false,
|
||||
isSider: true,
|
||||
isMobile: false,
|
||||
isShadowBg: false,
|
||||
loadingFlag: false,
|
||||
reloadFlag: true,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo']),
|
||||
@@ -143,7 +120,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let screenWidth = document.body.clientWidth
|
||||
const screenWidth = document.body.clientWidth
|
||||
if (screenWidth < 1000) {
|
||||
this.isMobile = true
|
||||
this.isSider = false
|
||||
@@ -159,16 +136,16 @@ export default {
|
||||
}
|
||||
this.$bus.emit('collapse', this.isCollapse)
|
||||
this.$bus.emit('mobile', this.isMobile)
|
||||
this.$bus.on("reload",this.reload)
|
||||
this.$bus.on("showLoading",()=>{
|
||||
this.$bus.on('reload', this.reload)
|
||||
this.$bus.on('showLoading', () => {
|
||||
this.loadingFlag = true
|
||||
})
|
||||
this.$bus.on("closeLoading",()=>{
|
||||
this.$bus.on('closeLoading', () => {
|
||||
this.loadingFlag = false
|
||||
})
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let screenWidth = document.body.clientWidth
|
||||
const screenWidth = document.body.clientWidth
|
||||
if (screenWidth < 1000) {
|
||||
this.isMobile = true
|
||||
this.isSider = false
|
||||
@@ -186,9 +163,33 @@ export default {
|
||||
this.$bus.emit('mobile', this.isMobile)
|
||||
})()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('user', ['LoginOut']),
|
||||
reload() {
|
||||
this.reloadFlag = false
|
||||
this.$nextTick(() => {
|
||||
this.reloadFlag = true
|
||||
})
|
||||
},
|
||||
totalCollapse() {
|
||||
this.isCollapse = !this.isCollapse
|
||||
this.isSider = !this.isCollapse
|
||||
this.isShadowBg = !this.isCollapse
|
||||
this.$bus.emit('collapse', this.isCollapse)
|
||||
},
|
||||
toPerson() {
|
||||
this.$router.push({ name: 'person' })
|
||||
},
|
||||
changeShadow() {
|
||||
this.isShadowBg = !this.isShadowBg
|
||||
this.isSider = !!this.isCollapse
|
||||
this.totalCollapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/style/mobile.scss';
|
||||
|
||||
@@ -330,7 +331,6 @@ export default {
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// .screenfull {
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
@@ -25,60 +25,93 @@
|
||||
d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
|
||||
p-id="2073"/>
|
||||
</svg> -->
|
||||
<svg t="1590133227479" class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" width="20" height="20" xmlns="http://www.w3.org/2000/svg"
|
||||
v-if="isShow">
|
||||
<svg
|
||||
v-if="isShow"
|
||||
t="1590133227479"
|
||||
class="screenfull-svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path id="svg_1" d="m928.512,959.744a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z" />
|
||||
<path id="svg_2"
|
||||
d="m960.512,927.744a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32zm-864.768,-863.488a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z" />
|
||||
<path
|
||||
id="svg_2"
|
||||
d="m960.512,927.744a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32zm-864.768,-863.488a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z"
|
||||
/>
|
||||
<path id="svg_3" d="m63.744,96.256a32,32 0 0 1 32,-32l256,0a32,32 0 0 1 0,64l-256,0a32,32 0 0 1 -32,-32z" />
|
||||
<path id="svg_4" d="m958.030718,91.777575a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32z" />
|
||||
<path id="svg_5" d="m926.030718,59.777575a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z" />
|
||||
<path id="svg_6"
|
||||
d="m940.622718,69.250038a32,32 0 0 1 0,45.248l-247.936,247.936a32,32 0 0 1 -45.248,-45.248l247.936,-247.936a31.936,31.936 0 0 1 45.248,0z" />
|
||||
<path
|
||||
id="svg_6"
|
||||
d="m940.622718,69.250038a32,32 0 0 1 0,45.248l-247.936,247.936a32,32 0 0 1 -45.248,-45.248l247.936,-247.936a31.936,31.936 0 0 1 45.248,0z"
|
||||
/>
|
||||
<path id="svg_7" d="m61.649508,930.478492a32,32 0 0 1 32,-32l256,0a32,32 0 0 1 0,64l-256,0a32,32 0 0 1 -32,-32z" />
|
||||
<path id="svg_8" d="m93.649508,962.478492a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z" />
|
||||
<path id="svg_9"
|
||||
d="m79.121508,945.070492a32,32 0 0 1 0,-45.248l247.936,-247.936a32,32 0 0 1 45.248,45.248l-247.936,247.936a32,32 0 0 1 -45.248,0z" />
|
||||
<path
|
||||
id="svg_9"
|
||||
d="m79.121508,945.070492a32,32 0 0 1 0,-45.248l247.936,-247.936a32,32 0 0 1 45.248,45.248l-247.936,247.936a32,32 0 0 1 -45.248,0z"
|
||||
/>
|
||||
</svg>
|
||||
<svg t="1590133734869" class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1862"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" v-else>
|
||||
<path d="M928.512 959.744a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1863"></path>
|
||||
<svg
|
||||
v-else
|
||||
t="1590133734869"
|
||||
class="screenfull-svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1862"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path d="M928.512 959.744a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1863" />
|
||||
<path
|
||||
d="M960.512 927.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32zM95.744 64.256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z"
|
||||
fill="" p-id="1864"></path>
|
||||
<path d="M63.744 96.256a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1865"></path>
|
||||
<path d="M384.064 671.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32z" fill="" p-id="1866"></path>
|
||||
<path d="M352.064 639.744a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z" fill="" p-id="1867"></path>
|
||||
<path d="M366.656 657.216a32 32 0 0 1 0 45.248L118.72 950.4a32 32 0 0 1-45.248-45.248l247.936-247.936a31.936 31.936 0 0 1 45.248 0z" fill=""
|
||||
p-id="1868"></path>
|
||||
<path d="M639.616 352.512a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1869"></path>
|
||||
<path d="M671.616 384.512a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1870"></path>
|
||||
<path d="M657.088 367.104a32 32 0 0 1 0-45.248l247.936-247.936a32 32 0 0 1 45.248 45.248l-247.936 247.936a32 32 0 0 1-45.248 0z" fill=""
|
||||
p-id="1871"></path>
|
||||
fill=""
|
||||
p-id="1864"
|
||||
/>
|
||||
<path d="M63.744 96.256a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1865" />
|
||||
<path d="M384.064 671.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32z" fill="" p-id="1866" />
|
||||
<path d="M352.064 639.744a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z" fill="" p-id="1867" />
|
||||
<path
|
||||
d="M366.656 657.216a32 32 0 0 1 0 45.248L118.72 950.4a32 32 0 0 1-45.248-45.248l247.936-247.936a31.936 31.936 0 0 1 45.248 0z"
|
||||
fill=""
|
||||
p-id="1868"
|
||||
/>
|
||||
<path d="M639.616 352.512a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1869" />
|
||||
<path d="M671.616 384.512a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1870" />
|
||||
<path
|
||||
d="M657.088 367.104a32 32 0 0 1 0-45.248l247.936-247.936a32 32 0 0 1 45.248 45.248l-247.936 247.936a32 32 0 0 1-45.248 0z"
|
||||
fill=""
|
||||
p-id="1871"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from 'screenfull' //引入screenfull
|
||||
import screenfull from 'screenfull' // 引入screenfull
|
||||
export default {
|
||||
name: 'Screenfull',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 22,
|
||||
default: 22
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 22,
|
||||
default: 22
|
||||
},
|
||||
fill: {
|
||||
type: String,
|
||||
default: '#48576a',
|
||||
},
|
||||
default: '#48576a'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: true,
|
||||
isShow: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -86,6 +119,9 @@ export default {
|
||||
screenfull.on('change', this.changeFullShow)
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
screenfull.off('change', this.changeFullShow)
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
if (screenfull.isEnabled) {
|
||||
@@ -94,13 +130,11 @@ export default {
|
||||
},
|
||||
changeFullShow() {
|
||||
this.isShow = !screenfull.isFullscreen
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
screenfull.off('change', this.changeFullShow)
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screenfull-svg {
|
||||
width: 17px;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="search-component">
|
||||
<transition name="el-fade-in-linear">
|
||||
<div class="transition-box" style="display: inline-block; " v-show="show">
|
||||
<div v-show="show" class="transition-box" style="display: inline-block; ">
|
||||
<el-select
|
||||
ref="search-input"
|
||||
@blur="hiddenSearch"
|
||||
@change="changeRouter"
|
||||
v-model="value"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
v-model="value"
|
||||
@blur="hiddenSearch"
|
||||
@change="changeRouter"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in routerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in routerList"
|
||||
></el-option>
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -23,43 +23,42 @@
|
||||
:style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
|
||||
class="user-box"
|
||||
>
|
||||
<i @click="$bus.$emit('reload')" :style="{cursor:'pointer'}" class="el-icon-refresh" />
|
||||
<i :style="{cursor:'pointer'}" class="el-icon-refresh" @click="$bus.$emit('reload')" />
|
||||
</div>
|
||||
<div :style="{display:'inline-block',float:'right'}" class="user-box">
|
||||
<i :style="{cursor:'pointer'}" @click="showSearch()" class="el-icon-search search-icon"></i>
|
||||
<i :style="{cursor:'pointer'}" class="el-icon-search search-icon" @click="showSearch()" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "searchComponent",
|
||||
name: 'SearchComponent',
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
value: '',
|
||||
show: false
|
||||
};
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("router", ["routerList"])
|
||||
...mapGetters('router', ['routerList'])
|
||||
},
|
||||
methods: {
|
||||
changeRouter() {
|
||||
this.$router.push({ name: this.value });
|
||||
this.value = "";
|
||||
this.$router.push({ name: this.value })
|
||||
this.value = ''
|
||||
},
|
||||
hiddenSearch() {
|
||||
this.show = false;
|
||||
this.show = false
|
||||
},
|
||||
showSearch() {
|
||||
this.show = true;
|
||||
this.show = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs["search-input"].focus();
|
||||
});
|
||||
this.$refs['search-input'].focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
Reference in New Issue
Block a user