菜单

src/layout/header-aside/components/components/menu-item/index.vue

 <template>
-  <el-menu-item v-if="menu.name != '报警中心'" :index="menu.path || uniqueId"  @click="handleMenuClick" >
-    <!-- <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i> -->
-    <span :class="menu.icon" class="menu_icon"></span>
-    <!-- <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/> -->
-    <!-- <i v-else class="fa fa-file-o"></i> -->
-    <span class="zMenu_item" slot="title">{{menu.title || '未命名菜单'}}</span>
+  <el-menu-item :index="menu.url||menu.path || uniqueId">
+    <i v-if="menu.icon" :class="`el-icon-my-${menu.icon}`"></i>
+    <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
+    <span v-else >&emsp;</span>
+    <span slot="title">{{menu.title|| menu.name  || '未命名菜单'}}</span>
   </el-menu-item>
 </template>
 
 <script>
 import { uniqueId } from 'lodash'
 export default {
-  inject: ['reload'],
   name: 'd2-layout-header-aside-menu-item',
   props: {
     menu: {
@@ -20,71 +18,10 @@ export default {
       default: () => {}
     }
   },
-  data() {
+  data () {
     return {
       uniqueId: uniqueId('d2-menu-empty-')
     }
-  },
-  methods: {
-   handleMenuClick () {
-   //点击菜单时重新刷新页面
-   //this.reload()
-}
   }
 }
 </script>
-<style >
-.menu_icon {
-  width: 22px;
-  height: 22px;
-  transform: translateY(10px);
-}
-.sys {
-  background: url(../../../imgs/iconImg/sys.png);
-  background-size: 100% 100%;
-}
-.em {
-  background: url(../../../imgs/iconImg/em.png);
-  background-size: 100% 100%;
-}
-.eq {
-  background: url(../../../imgs/iconImg/eq.png);
-  background-size: 100% 100%;
-}
-.plan {
-  background: url(../../../imgs/iconImg/plan.png);
-  background-size: 100% 100%;
-}
-.linkage {
-  background: url(../../../imgs/iconImg/linkage.png);
-  background-size: 100% 100%;
-}
-.monitor {
-  background: url(../../../imgs/iconImg/monitor.png);
-  background-size: 100% 100%;
-}
-.access {
-  background: url(../../../imgs/iconImg/access.png);
-  background-size: 100% 100%;
-}
-.police {
-  background: url(../../../imgs/iconImg/police.png);
-  background-size: 100% 100%;
-}
-.inspect {
-  background: url(../../../imgs/iconImg/inspect.png);
-  background-size: 100% 100%;
-}
-.patrol {
-  background: url(../../../imgs/iconImg/patrol.png);
-  background-size: 100% 100%;
-}
-.ol {
-  background: url(../../../imgs/iconImg/ol.png);
-  background-size: 100% 100%;
-}
-
-/* .zMenu_item{
- color:rgba(255,255,255,0.75);
-} */
-</style>

src/layout/header-aside/components/components/menu-sub/index.vue

 <template>
-  <el-submenu :index="menu.path || uniqueId">
+  <el-submenu :index="menu.path|| menu.id ||uniqueId ">
     <template slot="title">
-      <!-- <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
+      <i v-if="menu.icon" :class="`el-icon-my-${menu.icon}`"></i>
       <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
-      <i v-else class="fa fa-folder-o"></i> -->
-      <i :class="menu.icon"></i>
-      <span slot="title">{{menu.title}}</span>
+      <span v-else >&emsp;</span>
+      <span slot="title">{{menu.name}}</span>
     </template>
+
     <template v-for="(child, childIndex) in menu.list">
-      <d2-layout-header-aside-menu-item v-if="child.list == undefined" :menu="child" :key="childIndex"/>
-      <d2-layout-header-aside-menu-sub v-else :menu="child" :key="childIndex"/>
+
+      <d2-layout-header-aside-menu-item v-if="child.list.length==0" :menu="child" :key="childIndex"/>
+      <d2-layout-header-aside-menu-sub v-else :menu="{...child}" :key="childIndex"/>
     </template>
   </el-submenu>
 </template>

src/layout/header-aside/components/menu-side/index.vue

@@ -6,15 +6,11 @@
       :default-active="active"
       ref="menu"
       @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in aside">
+      <template v-for="(menu, menuIndex) in header">
         <d2-layout-header-aside-menu-item v-if="menu.list == undefined" :menu="menu" :key="menuIndex"/>
         <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
       </template>
     </el-menu>
-    <div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
-      <d2-icon name="inbox"/>
-      <span>没有侧栏菜单</span>
-    </div>
   </div>
 </template>
 
@@ -38,128 +34,14 @@ export default {
       active: '',
       asideHeight: 300,
       BS: null,
-      aside: [
-        // {
-        //   title: '电子围栏报警',
-        //   path: '/sys/log',
-        //   icon: 'el-icon-bell'
-        // },
-        // {
-        //   title: '报警信息列表',
-        //   path: '/sys/setting/sql',
-        //   icon: 'el-icon-menu'
-        // },
-         {
-          title: '电子地图',
-          path: '/ol',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '电子地图', path: '/ol/demo' }
-          ]
-        },
-         {
-          title: '设备管理',
-          path: '/eq',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '设备管理', path: '/eq/equ' },
-            { title: '设备拓扑监测', path: '/eq/topology' },
-            { title: '告警信息', path: '/eq/alarm' },
-            { title: '告警统计', path: '/eq/chart' }
-
-          ]
-        },
-        {
-          title: '视频监控',
-          path: '/monitor',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '电子地图', path: '/monitor/point' },
-            { title: '实时监控', path: '/monitor/monitor' },
-            { title: '视频轮播', path: '/monitor/rotation' },
-            { title: '视频回放', path: '/monitor/playback' },
-            { title: '历史指令', path: '/monitor/instructions' }
-          ]
-        },
-        {
-          title: '出入口控制',
-          path: '/access',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '电子地图', path: '/access/point' },
-            { title: '发卡查询', path: '/access/card' },
-            { title: '历史指令', path: '/access/instructions' }
-          ]
-        },
-        {
-          title: '入侵报警',
-          path: '/police',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '电子地图', path: '/police/point' },
-            { title: '历史指令', path: '/police/instructions' }
-          ]
-        },
-        {
-          title: '安全检查',
-          path: '/inspect',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '电子地图', path: '/inspect/point' },
-            { title: '实时安检', path: '/inspect/security' },
-            { title: '安检视频回放', path: '/inspect/playback' },
-            { title: '历史指令', path: '/inspect/instructions' }
-          ]
-        },
-        {
-          title: '电子巡更',
-          path: '/patrol',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '巡查点', path: '/patrol/spot' },
-            { title: '巡查线路', path: '/patrol/line' },
-            { title: '巡查计划', path: '/patrol/plan' },
-            { title: '巡查结果', path: '/patrol/result' },
-            { title: '巡查机管理', path: '/patrol/machine' },
-            { title: '漏检数据', path: '/patrol/data' }
-          ]
-        },
-        {
-          title: '应急物资管理',
-          path: '/em',
-          icon: 'el-icon-setting',
-          list: [
-            { title: '应急部门管理', path: '/em/org' },
-            { title: '应急专家管理', path: '/em/proficient' },
-            { title: '应急人员管理', path: '/em/person' },
-            { title: '应急物资管理', path: '/em/material' }
-
-          ]
-        },
-        {
-          title: '系统管理',
-          path: '/sys',
-          icon: 'el-icon-setting',
-          list: [
-            // {title:'菜单管理',path:'/sys/menu'},
-            { title: '机构管理', path: '/sys/org' },
-            { title: '用户管理', path: '/sys/admin' },
-            { title: '角色管理', path: '/sys/role' },
-            { title: '系统日志', path: '/sys/logs' },
-            { title: '资源点管理', path: '/sys/point' },
-            { title: '线路站点管理', path: '/sys/road' },
-            { title: '系统参数设置', path: '/sys/parameter' },
-            { title: '代码生成', path: '/sys/code' },
-            { title: '数据字典', path: '/sys/dictionary' }
-          ]
-        }
-      ]
+      aside: []
 
     }
   },
   computed: {
     ...mapState('d2admin/menu', [
       // 'aside',
+      'header',
       'asideCollapse'
     ])
   },