iot/projects/WebMVC/wwwroot/router/shared/layout.html

<template>
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <router-link :to="{path:'/'}" class="nav-link">首页</router-link>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto" v-if="model.username">
                <li class="nav-item">
                    <router-link class="nav-link" to="/router/user.html">{{model.username}}</router-link>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:;" v-on:click="logout">退出</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto" v-else>
                <li class="nav-item">
                    <a class="nav-link" href="/router/register.html">注册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/router/login.html">登录</a>
                </li>
            </ul>
        </nav>
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <a class="brand-link" href="/">
                <img class="brand-image img-circle elevation-3" style="opacity: .8" :src="model.logo" />
                <span class="brand-text font-weight-light">{{model.name}}</span>
            </a>
            <div class="sidebar">
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <li class="nav-item">
                            <router-link :to="{path:'/'}" :class="isPageActive('/','/router/product.html','/router/device.html')">
                                <i class="fa fa-folder"></i>
                                <p>
                                    产品
                                </p>
                            </router-link>
                        </li>
                        <li class="nav-item">
                            <router-link :to="{path:'/router/nodes.html'}" :class="isPageActive('/router/nodes.html','/router/node.html')">
                                <i class="fa fa-cube"></i>
                                <p>
                                    节点
                                </p>
                            </router-link>
                        </li>
                        <li class="nav-item" v-if="hasPermission('Read-Setting')">
                            <router-link :to="{path:'/router/admin/home.html'}" :class="isPageActive('/router/admin/home.html')">
                                <i class="fa fa-folder"></i>
                                <p>
                                    控制台
                                </p>
                            </router-link>
                        </li>
                        <li class="nav-item" v-if="hasPermission('Read-Node')">
                            <router-link :to="{path:'/router/shared/list.html',query:{entity:'Node'}}" :class="isEntityActive('Node')">
                                <i class="fa fa-folder"></i>
                                <p>
                                    节点
                                </p>
                            </router-link>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>
        <div class="content-wrapper">
            <div class="content-header" v-if="model.bread">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>{{model.name}}</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="@Url.Action(" Index","Home")">首页</a></li>
                                @RenderSection("bread", false)
                                <li class="breadcrumb-item active">@HtmlTitle</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <section class="content">
                <div class="container-fluid">
                    <slot></slot>
                </div>
            </section>
            <!--<a id="back-to-top" href="#" class="btn btn-primary back-to-top" role="button" aria-label="Scroll to top">
                <i class="fas fa-chevron-up"></i>
            </a>-->
        </div>
        <footer class="main-footer">
            <strong>
                {{model.copyright.replace('{0}',new Date().getFullYear())}}
            </strong>
            <div class="float-right d-none d-sm-inline-block">
                <b>version: {{model.version}}</b>
            </div>
        </footer>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                activeIndex: 1,
                openKeys: ['sub1'],
                url: config.baseUrl + '/IoTCenter/api/v1/site/getSite',
                model: {
                    logo: '/images/logo.png',
                    copyright: '',
                    version: '',
                    username: '',
                    permissions: []
                }
            }
        },
        mounted: function () {
            document.querySelector('title').innerText = this.$attrs.title;
            var vm = this;
            axios.post(this.url).then(function (response) {
                vm.model = response.data;
                store.commit('setState', { key: 'permissions', value: response.data.permissions });
            }).catch(function (error) {
                console.log(error);
            });
        },
        methods: {
            logout() {
                store.commit('logout');
                router.push('/router/login.html');
            },
            hasPermission(permission) {
                return Enumerable.from(this.model.permissions).any(o => o == permission);
            },
            isPageActive() {
                var cls = 'nav-link';
                for (var i = 0; i < arguments.length; i++) {
                    if (this.$route.path == arguments[i]) {
                        return cls + ' active';
                    }
                }
                return cls;
            },
            isEntityActive(entity) {
                var cls = 'nav-link';
                if (this.$route.query.entity === entity) {
                    return cls + ' active';
                }
                return cls;
            }
        }
    }
</script>