rms/app/src/components/Home.vue

<template>
    <v-app>
        <v-navigation-drawer
                v-model="drawer"
                width="130"
                :clipped="$vuetify.breakpoint.lgAndUp"
                app
        >
            <v-list dense>
                <template v-for="item in items">
                    <v-list-group
                            v-if="item.children"
                            :key="item.text"
                            v-model="item.model"
                            :prepend-icon="item.model ? item.icon : item['icon-alt']"
                            append-icon=""
                    >
                        <template v-slot:activator>
                            <v-list-item-content>
                                <v-list-item-title>
                                    {{ item.text }}
                                </v-list-item-title>
                            </v-list-item-content>
                        </template>
                        <v-list-item
                                v-for="(child, i) in item.children"
                                :key="i"
                                link
                                :to="child.route"
                        >
                            <v-list-item-action v-if="child.icon">
                                <v-icon>{{ child.icon }}</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>
                                    {{ child.text }}
                                </v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list-group>
                    <v-list-item
                            v-else
                            :key="item.text"
                            link
                            dense
                            :to="item.route"
                            class="px-0 pl-5"
                    >
                        <!--                        <v-list-item-action>-->
                        <!--                            <v-icon>{{ item.icon }}</v-icon>-->
                        <!--                        </v-list-item-action>-->
                        <v-list-item-content>
                            <v-list-item-title class="font-weight-bold subtitle-2">
                                {{ item.text }}
                            </v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar
                :clipped-left="$vuetify.breakpoint.lgAndUp"
                app
                color="blue darken-3"
                dark
                dense
        >
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
            <v-toolbar-title
                    style="width: 400px"
                    class="ml-0 pl-4"
            >
                <span class="hidden-sm-and-down">資訊資產管理系統</span>
            </v-toolbar-title>
            <v-spacer/>
            <v-menu
                    offset-y
                    origin="center center"
                    :nudge-bottom="10"
                    transition="scale-transition">
                <template v-slot:activator="{on}">
                    <v-btn
                            icon
                            large
                            v-on="on"
                    >
                        <v-avatar
                                size="32px"
                                item
                        >
                            <v-btn
                                    color="primary lighten-2"
                                    class="white--text"
                            >
                                {{ username.slice(1) }}
                            </v-btn>
                        </v-avatar>
                    </v-btn>
                </template>
                <v-list class="pa-0">
                    <v-list>
                        <v-list-item>
                            <v-list-item-avatar>
                                <v-icon
                                        class="blue--text"
                                >
                                    mdi-account
                                </v-icon>
                            </v-list-item-avatar>

                            <v-list-item-content>
                                <v-list-item-title>{{ username }}</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                    <v-divider/>
                    <v-list-item
                            v-for="(item,index) in menuitems"
                            :key="index"
                            :to="!item.href ? {name: item.name} : null"
                            :href="item.href"
                            ripple="ripple"
                            :disabled="item.disabled"
                            :target="item.target"
                            rel="noopener"
                            @click="item.click"
                    >
                        <v-list-item-action v-if="item.icon">
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title>{{ item.title }}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-menu>
        </v-app-bar>
        <v-content>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </v-content>
        <v-snackbar v-model="error" top :timeout="2500">
            {{ message }}
            <v-btn
                    color="pink"
                    text
                    @click="error = false"
            >
                Close
            </v-btn>
        </v-snackbar>
    </v-app>
</template>

<script>
    export default {
        components: {},
        props: {
            source: String,
        },
        data() {
            return {
                dialog: false,
                drawer: null,
                error: false,
                message: "",
                items: [{'text': '全域搜尋', 'route': '/search'}],
                username: localStorage.getItem('username'),
                this1: this,
                menuitems: [
                    {
                        icon: 'mdi-exit-to-app',
                        href: '#',
                        title: '登出',
                        click: () => {
                            this.this1.logout();
                        },
                    },
                ],
            }
        },
        created() {
            this.$root.$on('showError', (message) => {
                this.error = true;
                this.message = message;
            });
        },
        computed: {
            isAdmin() {
                let level = localStorage.getItem('level');
                return (level != null && level === '0');
            },
        },
        mounted() {
            this.getRoutes();
        },
        methods: {
            logout() {
                this.$emit("authenticated", null);
            },
            async getRoutes() {
                this.addFeatureByLevel(localStorage.getItem('level'));
                this.$axios.get('/routes').then((resp) => {
                    resp.data.data.forEach((item) => {
                        let route = {'text': '', 'route': ''};
                        route.text = item.descript;
                        route.route = `/inventory/${item.tablename}`;
                        this.items.push(route);

                    });
                });
            },
            addFeatureByLevel(level) {
                //超級管理員
                if (level === '0') {
                    this.items.push({'text': '資訊資產群組', 'route': '/asset_group'});
                    this.items.push({'text': '帳號與權限管理', 'route': '/account'});
                }
                //一般管理員
                if (level === '1') {
                    this.items.push({text: '資訊資產群組', route: '/asset_group'});
                }
            }
        }
    }
</script>