iot/projects/Platform/wwwroot/components/views/shared/layout.html

<template>
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-dark navbar-gray-dark text-sm">
            <ul class="navbar-nav" v-if="store.state.layout">
                <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="/" :class="getLinkClass('default','/')">首页</router-link>
                </li>
                <li v-for="item in getModules()">
                    <router-link :to="getPath(item.number)" :class="getLinkClass(item.number,getPath(item.number))">{{item.name}}</router-link>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
            </ul>
        </nav>
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <div class="brand-link" href="/">
                
            </div>
            <div class="sidebar">
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column nav-flat" data-widget="treeview" role="menu" data-accordion="nav-icon false">
                        <template v-if="getArea()==='default'">
                            <li class="nav-header">智慧校园</li>
                            <li class="nav-item">
                                <router-link to="/" :class="getLinkClass('default','/')">首页</router-link>
                            </li>
                        </template>
                        <template v-else>
                            <li v-for="item in getMenus()">
                                <router-link :to="getPath(item.number)" :class="getLinkClass(item.number,getPath(item.number))">{{item.name}}</router-link>
                            </li>
                        </template>
                    </ul>
                </nav>
            </div>
        </aside>
        <div class="content-wrapper">
            <section class="content">
                <div class="container-fluid">
                    <slot></slot>
                </div>
            </section>
            <a id="back-to-top" href="#" class="btn btn-success back-to-top" role="button" aria-label="Scroll to top">
                <i class="fas fa-chevron-up"></i>
            </a>
        </div>
        <footer class="main-footer">
            <p style="text-align:center;" v-if="store.state.layout">
                <span v-html="store.state.layout.copyright.replace('{0}',new Date().getFullYear())"></span> v {{store.state.layout.version}}
            </p>
        </footer>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                url: config.service('platform/Site/Layout'),
                viewPath:'/components/views/areas/'
            }
        },
        mounted: function () {
            var vm = this;
            axios.post(this.url).then(function (response) {
                store.set('layout',response.data);
            }).catch(function (error) {
                console.log(error);
            });
        },
        methods: {
            getArea: function () {
                var path = this.$route.path === '/' ? (this.viewPath+'default/index.html') : this.$route.path;
                path = path.substr(this.viewPath.length);
                return path === '/' ? 'default' : path.substr(0, path.indexOf('/'));
            },
            getPath: function (area) {
                return this.viewPath + area + '/index.html';
            },
            getModules: function () {
                var numbers = Enumerable.from(store.state.layout.user.claims).where(o => o.type === store.state.layout.user.roleClaimType).select(o => o.value).toArray();
                var modules = Enumerable.from(store.state.layout.modules)
                    .where(o => Enumerable.from(o.permissionCategories).selectMany(o => o.permissions).any(o => Enumerable.from(numbers).any(n => n == o.number)))
                    .orderBy(o => o.order).toArray();
                return modules;
            },
            getMenus: function (area) {
                area = area||this.getArea();
                var module = Enumerable.from(store.state.layout.modules).firstOrDefault(o => o.number === area);
                var numbers = Enumerable.from(store.state.layout.user.claims).where(o => o.type === store.state.layout.user.roleClaimType).select(o => o.value).toArray();
                var permissions = Enumerable.from(module.permissionCategories)
                    .selectMany(o => o.permissions)
                    .where(o => Enumerable.from(numbers).any(n => n === o.number))
                    .orderBy(o => o.order)
                    .toArray()
                return permissions;
            },
            getLinkClass: function (area) {
                var cls = 'nav-link';
                var path = this.$route.path;
                if (area === "default" && path === '/') {
                    cls += ' active';
                }
                else {
                    if (path.indexOf(this.viewPath+area) === 0) {
                        cls += ' active';
                    }
                }
                return cls;
            }
        }
    }
</script>