1. init 侧边栏的基本配置处理

src/installer/index.ts

@@ -39,8 +39,11 @@ import {
     Cascader,
     Carousel,
     CarouselItem,
-    Collapse,
-    CollapseItem,
+    Menu,
+    MenuItem,
+    Submenu,
+    // Collapse,
+    // CollapseItem,
     Form,
     FormItem
 } from 'element-ui';
@@ -111,7 +114,7 @@ Vue.use(Image);
 Vue.use(Tree);
 Vue.use(Table);
 Vue.use(TableColumn);
-Vue.use(Progress).use(Cascader).use(Carousel).use(CarouselItem).use(Collapse).use(CollapseItem).use(Form).use(FormItem);
+Vue.use(Progress).use(Cascader).use(Carousel).use(CarouselItem).use(Menu).use(MenuItem).use(Submenu).use(Form).use(FormItem);
 
 // element ui 的loading注入稍有不同
 Vue.use(Loading.directive);

src/router/compatible-url.ts

@@ -72,7 +72,14 @@ const setDirectionEnum4Url = function(routes: RouteConfig[], prefix = '') {
  */
 const setCompatibleUrl = function(routes: RouteConfig[]): RedirectPath[] {
     setDirectionEnum4Url(routes);
-    return compatibleUrl.map(i => {
+    const isRemoveRepeatUrl = compatibleUrl.filter(i => {
+        if (i.oldPath === direction4AbsolutePathMap.get(i.direction)) {
+            return false;
+        }
+        return true;
+    });
+
+    return isRemoveRepeatUrl.map(i => {
         return {
             path: i.oldPath,
             redirect: direction4AbsolutePathMap.get(i.direction)

src/router/index.ts

@@ -30,42 +30,42 @@ const routes: Array<RouteConfig> = [
       {
         path: 'addressbook',
         component: () => import('@/views/pages/employ-management/address-book/address-book.vue'),
-        meta: { direction: Direction.AddressBook, title: MetaHeader.addressBook },
+        meta: { direction: Direction.AddressBook, title: MetaHeader.employManager.addressBook },
       },
       {
         path: 'applicationrecord',
         component: () => import('@/views/pages/employ-management/application-record/application-record.vue'),
-        meta: { direction: Direction.ApplicationRecord, title: MetaHeader.applicationRecord },
+        meta: { direction: Direction.ApplicationRecord, title: MetaHeader.employManager.applicationRecord },
       },
       {
         path: 'invoicerecord',
         component: () => import('@/views/pages/service-management/invoice-record/invoice-record.vue'),
-        meta: { direction: Direction.InvoiceRecord, title: MetaHeader.invoiceRecord },
+        meta: { direction: Direction.InvoiceRecord, title: MetaHeader.serviceManagement.invoiceRecord },
       },
       {
         path: 'Invoicetitles',
         component: () => import('@/views/pages/service-management/invoice-titles/invoice-titles.vue'),
-        meta: { direction: Direction.InvoiceTitles, title: MetaHeader.invoiceTitles },
+        meta: { direction: Direction.InvoiceTitles, title: MetaHeader.serviceManagement.invoiceTitles },
       },
       {
         path: 'orginfo',
         component: () => import('@/views/pages/enterprise-management/enterprise-info/enterprise-info.vue'),
-        meta: { direction: Direction.EnterpriseInfo, title: MetaHeader.enterpriseInfo },
+        meta: { direction: Direction.EnterpriseInfo, title: MetaHeader.enterpriseManagement.enterpriseInfo },
       },
       {
         path: 'applysetting',
         component: () => import('@/views/pages/enterprise-management/application-setting/application-setting.vue'),
-        meta: { direction: Direction.ApplicationSetting, title: MetaHeader.applicationSetting },
+        meta: { direction: Direction.ApplicationSetting, title: MetaHeader.enterpriseManagement.applicationSetting },
       },
       {
         path: 'managersetting',
         component: () => import('@/views/pages/enterprise-management/manager-setting/manager-setting.vue'),
-        meta: { direction: Direction.ManagerSetting, title: MetaHeader.managerSetting },
+        meta: { direction: Direction.ManagerSetting, title: MetaHeader.enterpriseManagement.managerSetting },
       },
       {
         path: 'managerlog',
         component: () => import('@/views/pages/enterprise-management/manager-log/manager-log.vue'),
-        meta: { direction: Direction.ManagerLog, title: MetaHeader.managerLog },
+        meta: { direction: Direction.ManagerLog, title: MetaHeader.enterpriseManagement.managerLog },
       },
     ]
   }

src/router/meta-header.ts

 export class MetaHeader {
     public static readonly root = '组织管理后台';
     public static readonly home = '首页';
-    public static readonly addressBook = '通讯录';
-    public static readonly applicationRecord = '申请加入记录';
-    public static readonly invoiceTitles = '发票抬头';
-    public static readonly invoiceRecord = '发票记录';
-    public static readonly enterpriseInfo = '企业信息';
-    public static readonly applicationSetting = '申请加入设置';
-    public static readonly managerSetting = '管理员权限';
-    public static readonly managerLog = '管理员日志';
+    public static readonly employManager = {
+        root: "员工管理",
+        addressBook: '通讯录',
+        applicationRecord: '申请加入记录'
+    };
+
+    public static readonly serviceManagement = {
+        root: "服务管理",
+        invoiceTitles: '发票抬头',
+        invoiceRecord: '发票记录',
+    };
+
+    public static readonly enterpriseManagement = {
+        root: "企业管理",
+        enterpriseInfo: '企业信息',
+        applicationSetting: '申请加入设置',
+        managerSetting: '管理员权限',
+        managerLog: '管理员日志',
+    }
 }

src/views/pages/aside-panels/aside-panels.vue

 <template>
     <div class="aside-panels-container">
-        <el-collapse class="aside-collapse">
-            <el-collapse-item
-                :name="item.title"
-                v-for="(item, index) in items"
-                :key="'m' + index"
+        <el-menu
+            class="aside-menu"
+            @select="changeMenu"
+            :default-active="defaultActive"
+        >
+            <components
+                v-for="(item, ind) in items"
+                :key="`it-${ind}`"
+                :index="item.content ? item.key : `base${linkLine}${item.key}`"
+                :is="item.content ? 'el-submenu' : 'el-menu-item'"
             >
                 <template slot="title">
-                    {{ item.title }}
+                    <div class="menu-title">
+                        <!-- <img class="menu-title-icon" :src="item.icon" /> -->
+                        <div class="menu-title-name">{{ item.title }}</div>
+                    </div>
                 </template>
-            </el-collapse-item>
-        </el-collapse>
+
+                <template v-if="item.content && item.content.length">
+                    <el-menu-item
+                        v-for="(con, i) in item.content"
+                        :key="`sub-${i}`"
+                        :index="`${item.key}${linkLine}${con.key}`"
+                    >
+                        {{ con.title }}
+                    </el-menu-item>
+                </template>
+            </components>
+        </el-menu>
     </div>
 </template>
 
 <script lang="ts">
+    import logger from "@/api/logger";
+    import { Direction } from "@/router";
+    import { MetaHeader } from "@/router/meta-header";
     import { Component, Vue } from "vue-property-decorator";
 
     @Component({ components: {} })
     export default class Asidepanels extends Vue {
+        private defaultActive = MetaHeader.home;
+        private linkLine = "-";
         private items = [
             {
-                title: "`132",
+                key: Direction.Home,
+                title: MetaHeader.home,
+                direction: Direction.Home,
+                icon: "",
+            },
+            {
+                key: MetaHeader.employManager.root,
+                title: MetaHeader.employManager.root,
+                icon: "",
+                content: [
+                    {
+                        key: Direction.AddressBook,
+                        direction: Direction.AddressBook,
+                        title: MetaHeader.employManager.addressBook,
+                    },
+                    {
+                        key: Direction.ApplicationRecord,
+                        direction: Direction.ApplicationRecord,
+                        title: MetaHeader.employManager.applicationRecord,
+                    },
+                ],
+            },
+            {
+                key: MetaHeader.serviceManagement.root,
+                title: MetaHeader.serviceManagement.root,
+                icon: "",
+                content: [
+                    {
+                        key: Direction.InvoiceTitles,
+                        direction: Direction.InvoiceTitles,
+                        title: MetaHeader.serviceManagement.invoiceTitles,
+                    },
+                ],
+            },
+            {
+                key: MetaHeader.enterpriseManagement.root,
+                title: MetaHeader.enterpriseManagement.root,
+                icon: "",
+                content: [
+                    {
+                        key: Direction.EnterpriseInfo,
+                        direction: Direction.EnterpriseInfo,
+                        title: MetaHeader.enterpriseManagement.enterpriseInfo,
+                    },
+                    {
+                        key: Direction.ApplicationSetting,
+                        direction: Direction.ApplicationSetting,
+                        title: MetaHeader.enterpriseManagement.applicationSetting,
+                    },
+                    {
+                        key: Direction.ManagerSetting,
+                        direction: Direction.ManagerSetting,
+                        title: MetaHeader.enterpriseManagement.managerSetting,
+                    },
+                    {
+                        key: Direction.ManagerLog,
+                        direction: Direction.ManagerLog,
+                        title: MetaHeader.enterpriseManagement.managerLog,
+                    },
+                ],
             },
         ];
+
+        private changeMenu(key: string) {
+            const arr = key.split(this.linkLine);
+            const direction = +arr[arr.length - 1] as Direction;
+            this.go(direction);
+        }
     }
 </script>
 
@@ -32,16 +120,16 @@
     .aside-panels-container {
         width: 240px;
 
-        /deep/ .aside-collapse {
+        /deep/ .aside-menu {
             height: 100%;
             background-color: #fff;
 
-            .el-collapse-item__header {
+            .el-menu-item__header {
                 border-top: 0px;
                 border-bottom: 0px;
             }
 
-            .el-collapse-item__wrap {
+            .el-menu-item__wrap {
                 border-top: 0px;
                 border-bottom: 0px;
             }