duoji-frontend/src/views/index.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>