You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<template>
|
|
<a-layout class="mainIndex">
|
|
<AsideMenu/>
|
|
<div :class="['mainIndex-container', collapsed ? 'collapsedClose' :'']">
|
|
<PageHeader/>
|
|
<Breadcrumb/>
|
|
<PageContent/>
|
|
</div>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters, mapState} from "vuex";
|
|
export default {
|
|
name: "mainIndex",
|
|
data() {
|
|
return {
|
|
collapsed:this.$store.state.aside_collapsed,
|
|
breadcrumbList: [],
|
|
current: ""
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["aside_collapsed", "userInfo"]),
|
|
...mapGetters(['getAside_collapsed'])
|
|
},
|
|
watch: {
|
|
$route(data) {
|
|
this.processBread(data);
|
|
},
|
|
getAside_collapsed: function (newValue) {
|
|
console.log(newValue)
|
|
this.collapsed = newValue
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 处理全局面包屑
|
|
* @param route 当前路由信息
|
|
*/
|
|
processBread(route) {
|
|
this.breadcrumbList = route.matched.filter((el, index) => {
|
|
return el.name && (el.meta.unfold || index);
|
|
});
|
|
|
|
this.breadcrumbList.forEach(el => {
|
|
if (el.name === route.name) {
|
|
el.query = route.query;
|
|
}
|
|
});
|
|
},
|
|
// 当前时间
|
|
getCurrentTime() {
|
|
let time = null;
|
|
let _this = this;
|
|
function timerFormat() {
|
|
if (!time) clearTimeout(time);
|
|
time = setTimeout(() => {
|
|
let date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
let h =
|
|
date.getHours() < 10
|
|
? "0" + date.getHours()
|
|
: date.getHours();
|
|
let m =
|
|
date.getMinutes() < 10
|
|
? "0" + date.getMinutes()
|
|
: date.getMinutes();
|
|
let s =
|
|
date.getSeconds() < 10
|
|
? "0" + date.getSeconds()
|
|
: date.getSeconds();
|
|
_this.current =
|
|
year +
|
|
"年" +
|
|
month +
|
|
"月" +
|
|
day +
|
|
"日" +
|
|
" " +
|
|
h +
|
|
":" +
|
|
m +
|
|
":" +
|
|
s;
|
|
timerFormat();
|
|
}, 1000);
|
|
}
|
|
timerFormat();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getCurrentTime();
|
|
this.processBread(this.$route);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mainIndex {
|
|
display: flex;
|
|
&-aside {
|
|
background: #001529;
|
|
}
|
|
&-container {
|
|
flex: auto;
|
|
margin-left: 270px;
|
|
}
|
|
.collapsedClose{
|
|
margin-left: 80px;
|
|
}
|
|
.ant-table td {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|