App.vue 3.15 KB
Newer Older
1
2
<template>
    <div id="app">
3
        <Navbar/>
gj4210's avatar
gj4210 committed
4
        <div id="wrapper" :style="{paddingRight: show_sidebar ? '380px': 0}">
5
6
7
8
            <div id="page-content-wrapper">
                <div class="container">
                    <b-breadcrumb :items="breadcrumbs"/>
                    <router-view/>
9
                    <Footer/>
10
11
                </div>
            </div>
gj4210's avatar
gj4210 committed
12
            <b-card id="sidebar-wrapper" :style="{right: show_sidebar ? 0: '-380px'}">
13
                <Sidebar/>
gj4210's avatar
gj4210 committed
14
            </b-card>
15
16
17
18
19
        </div>
    </div>
</template>

<script>
20
    import LoginService from '@/api-services/login.service'
21
    import Navbar from "./components/Navbar";
22
    import Footer from "./components/Footer";
23
    import Sidebar from "./components/Sidebar";
24

25
    export default {
26
        components: {Sidebar, Footer, Navbar},
27
28
        data() {
            return {
29
                breadcrumbs: [],
gj4210's avatar
gj4210 committed
30
                show_sidebar: false
31
32
33
            }
        },
        watch: {
34
            $route() {
gj4210's avatar
gj4210 committed
35
                let m = this.$router.currentRoute.matched
36
                m = m[m.length - 1]
gj4210's avatar
gj4210 committed
37
                this.breadcrumbs = this.getBreadcrumbs(m)
38
39
40
            }
        },
        methods: {
gj4210's avatar
gj4210 committed
41
42
43
44
45
            toggleSidebar() {
              this.show_sidebar = !this.show_sidebar
            },
            getBreadcrumbs(m) {
                let res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
46
47
48
                while ((m.meta && m.meta.resolveParents) || m.parent) {
                    if (m.meta && m.meta.resolveParents) {
                        let parents = m.meta.resolveParents(this.$route.params)
49
50
                        for (let i = 0; i < parents.length; i++) {
                            if (typeof parents[i] === 'object' && 'text' in parents[i] && 'to' in parents[i]) {
51
52
53
54
55
56
57
                                res.unshift(parents[i])
                                continue
                            }
                            m = this.$router.resolve(parents[i]).resolved.matched
                            m = m[m.length - 1]
                            res.unshift({text: m.meta.resolveName(this.$route.params), to: parents[i]})
                        }
58
59
                    } else {
                        m = m.parent
60
                        res.unshift({text: m.meta.resolveName(this.$route.params), to: m.path})
61
62
                    }
                }
63
                return res
64
65
66
67
68
            },
            logout() {
                LoginService.logout(this.$store.state.token.pk)
                this.$store.commit('logout')
                this.$router.push('/login')
69
70
71
72
            }
        }
    }
</script>
gj4210's avatar
gj4210 committed
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';
    @import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
    @import 'assets/css/net-suite.css';
    @import 'assets/css/net-suite-devel.css';
    @import 'assets/css/net-suite-test.css';

    #wrapper {
        transition: padding-right .5s;
    }

    #sidebar-wrapper {
        height: 100%;
        width: 380px;
        position: fixed;
        z-index: 1;
        top: 0;
        transition: right .5s;
        padding-top: 50px;
        background: #F7F7F7;
    }
</style>