peko-admin-web/src/components/maintainer/index.vue

<template>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar" style="height: 100%; overflow: hidden; overflow: scroll;">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img :src="avatar" class="img-circle" :alt="username">
                </div>
                <div class="pull-left info">
                    <p>{{ username }}</p>
                    <!-- Status -->
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <!-- search form (Optional) -->
            <form method="get" class="sidebar-form" onsubmit="return false;">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                        <button name="search" id="search-btn" class="btn btn-flat" @click="search">
                            <i class="fa fa-search"></i>
                        </button>
                    </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <li class="header">主导航</li>
                <!-- Optionally, you can add icons to the links -->
                <li v-for="(parent, parentIndex) in parentMenus" :key="parent" :data-index="parentIndex" class="treeview">
                    <a>
                        <i :class="[parent.icon ? parent.icon : 'fa fa-link']"></i>
                        <span>{{ parent.name }}</span>
                        <span class="label pull-right bg-yellow" id='`ic${parent.id}`'>
                            {{ getChildLength(parent.id) }}
                        </span>
                    </a>
                    <ul class="treeview-menu" id='`menu${parent.id}`'>
                        <li v-for="(child, childIndex) in getChilds(parent.id)" :key="child" :data-index="childIndex">
                            <a :data-url="child.path" @click="handleClick(child)">
                                <i
                                    :class="[child.icon && child.icon != '' ? child.icon : 'fa fa-circle-o text-yellow']"></i>
                                <span>{{ child.name }}</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="height: 100%;">
        <!-- Content Header (Page header) -->
        <section class="content-header"
            :style="[childMenu.name && childMenu.name != '' ? 'display:block;' : 'display:none;']">
            <h1>
                {{ childMenu.name }}
                <small>{{ childMenu.description }}</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> {{ childMenu.parentName }}</a></li>
                <li class="active">{{ childMenu.name }}</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content" style="height: 100%; overflow: hidden; overflow: scroll;">
            <!-- Your Page Content Here -->
            <component :is="componentName"></component>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</template>
  
<script>
import store from '@/store';

export default {
    name: 'MaintainerView',
    data() {
        return {
            componentName: "",
            username: "",
            avatar: "",
            parentMenus: [],
            childMenus: [],
            childMenu: {
                name: "",
                parentName: "",
                description: "",
            }
        };
    },
    created() {
        this.getMenu();
        this.username = store.getters.username;
        this.avatar = store.getters.avatar;
    },
    methods: {
        getMenu() {
            store.dispatch('getMenu').then(res => {
                this.parentMenus = res.parents;
                this.childMenus = res.childs;
            });
        },
        getChilds(parentId) {
            return this.childMenus.filter(v => v.parentid == parentId);
        },
        getChildLength(parentId) {
            return this.childMenus.filter(v => v.parentid == parentId).length;
        },
        handleClick(menu) {
            this.childMenu.name = menu.name;
            this.childMenu.parentName = menu.parentstr;
            this.childMenu.description = menu.description;
            store.dispatch('getViewComponent', menu.path).then(componentName => {
                console.log(componentName);
                this.componentName = componentName;
            });
        },
        search() {
            let text = $("input[type='text']").val();
            this.childMenus = store.getters.childMenus.filter(v => v.name.indexOf(text) >= 0);
            if (!this.childMenus.length || this.childMenus.length == 0) {
                this.parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 0);
            } else {
                let parentIds = this.childMenus.map(v => v.parentid);
                let parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 0);
                if (parentMenus && parentMenus.length > 0) {
                    parentMenus.forEach(v => {
                        parentIds.push(v.id);
                    });
                }
                console.log(parentIds);
                this.parentMenus = store.getters.parentMenus.filter(v1 => parentIds.filter(v2 => v1.id == v2).length > 0);
                this.childMenus = store.getters.childMenus.filter(v1 => parentIds.filter(v2 => v1.parentid == v2).length > 0);
            }
        }
    },
}
</script>
  
<style scoped>
@import '@/css/main.css';
</style>