修改一级菜单交互方式，更改为点击一级菜单后直接打开功能界面

src/assets/less/Suless.less

@@ -845,6 +845,23 @@ textarea,
   border-bottom: none !important;
 }
 
+.ant-menu-horizontal .ant-menu-item {
+  background-image: url('~@/assets/img/menuDefault.png');
+  background-repeat: no-repeat !important;
+  background-size: 100% 100% !important;
+  min-width: 130px !important;
+  margin: 0 10px !important;
+  min-height: 55px !important;
+  line-height: 50px !important;
+  text-align: center;
+  font-weight: 800;
+  font-size: 20px !important;
+  padding: 0 40px !important;
+  vertical-align: middle !important;
+  font-family: @fontfamily;
+  border-bottom: none !important;
+}
+
 
 .ant-menu-item-selected>a>span,
 .ant-menu-item-active>a>span,
@@ -868,7 +885,6 @@ textarea,
 .ant-menu {
   border-radius: 0 !important;
   box-shadow: none !important;
-  border-bottom: 1px dotted #00CBFF;
 }
 
 .ant-menu-submenu,
@@ -888,8 +904,22 @@ textarea,
   line-height: 50px !important;
   text-align: left;
   float: left;
-  margin-right: 20px;
+  // margin-right: 20px;
-  padding: 0 0 0 20px !important;
+  // padding: 0 0 0 20px !important;
+  // border-top: 1px dotted #00CBFF;
+  color: #fff !important;
+  border-bottom: 1px dotted #00CBFF;
+}
+
+.ant-menu-dark.ant-menu-vertical{
+  background-size: 100% 100%;
+  width: 263px !important;
+  height: 50px !important;
+  margin-bottom: 0 !important;
+  margin-top: -1px !important;
+  line-height: 50px !important;
+  text-align: left;
+  float: left;
   border-top: 1px dotted #00CBFF;  
 }
 

src/components/menu/index.js

@@ -103,7 +103,7 @@ export default {
     // render
     renderItem(menu) {
       if (!menu.hidden) {
-        return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
+        // return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
         return this.renderMenuItem(menu)
       }
       return null
@@ -116,11 +116,14 @@ export default {
       const target = menu.meta.target || null
       const tag = target && 'a' || 'router-link'
       let props = { to: { name: menu.name } }
+      if (menu.children && menu.children.length > 0) props = { to: { name: menu.children[0].name } }
+
       if (menu.route && menu.route === '0') {
         props = { to: { path: menu.path } }
       }
 
-      const attrs = { href: menu.path, target: menu.meta.target }
+      let attrs = { href: menu.path, target: menu.meta.target }
+      if (menu.children && menu.children.length > 0) attrs = { href: menu.children[0].path, target: menu.children[0].meta.target }
      
       if (menu.children && menu.alwaysShow) {
         // 把有子菜单的 并且 父菜单是要隐藏子菜单的

src/components/page/PageLayout.vue

@@ -30,6 +30,11 @@
     <div class="leftMenu">
       <!-- <div class="parent"></div> -->
       <!-- <div class="child" v-for="(item,index) in menuList">{{ item.meta.title }}</div> -->
+      <a-menu mode="vertical" theme="dark" :selected-keys="[current]" @click="handleClick">
+        <a-menu-item v-for="item in menuList" :key="item.id">
+          {{ item.meta.title }}
+        </a-menu-item>
+      </a-menu>
     </div>
     <div class="content">
       <div :class="['page-header-index-wide']">
@@ -40,6 +45,7 @@
 </template>
 
 <script>
+
 import PageHeader from './PageHeader'
 import { mapState, mapActions } from 'vuex'
 export default {
@@ -49,6 +55,7 @@ export default {
   },
   data() {
     return {
+      current: '',
       menuList: [],
       parentTitle: ''
     }
@@ -96,21 +103,34 @@ export default {
       permissionMenuList: (state) => state.user.permissionList,
     }),
   },
+  watch: {
+    title(val) {
+      if (val) {
+        this.initMenuList()
+      }
+    }
+  },
   mounted() {
     this.initMenuList()
   },
   methods: {
     initMenuList() {
-
       this.menuList = []
       this.parentTitle = this.$route.matched[1].meta.title
       this.permissionMenuList.forEach((item) => {
         if (item.meta.title == this.parentTitle) this.menuList = item.children
       })
-
+      // 依据标题设置选中
-      console.log(333, this.menuList)
+      if (this.menuList && this.menuList.length > 0) {
+        var choseMenu = this.menuList.filter(item => item.meta.title == this.title)
+        if (choseMenu && choseMenu.length > 0) this.current = choseMenu[0].id
       }
-
+    },
+    handleClick(e) {
+      this.current = e.key;
+      var node = this.menuList.filter(item => item.id == e.key)
+      if (node && node.length > 0) this.$router.push({ name: node[0].name, path: node[0].path })
+    },
 
   }
 }
@@ -126,6 +146,7 @@ export default {
   left: 20px;
   top: 140px;
   font-size: 18px;
+  padding: 30px 15px 0;
 }
 
 .leftMenu .parent {
@@ -140,6 +161,7 @@ export default {
   left: 14px;
   top: 30px;
 }
+
 .leftMenu .child {
   height: 60px;
   background-color: #00467C;

src/views/account/center/Index.vue

@@ -90,7 +90,6 @@
 </template>
 
 <script>
-  import PageLayout from '@/components/page/PageLayout'
   import RouteView from "@/components/layouts/RouteView"
   import { AppPage, ArticlePage, ProjectPage } from './page'
   import { mapGetters } from 'vuex'
@@ -99,7 +98,6 @@
   export default {
     components: {
       RouteView,
-      PageLayout,
       AppPage,
       ArticlePage,
       ProjectPage

src/views/account/settings/Index.vue

@@ -45,7 +45,6 @@
 </template>
 
 <script>
-  import PageLayout from '@/components/page/PageLayout'
   import RouteView from "@/components/layouts/RouteView"
   import { mixinDevice } from '@/utils/mixin.js'
   import security from './Security'
@@ -56,7 +55,6 @@
   export default {
     components: {
       RouteView,
-      PageLayout,
       security,
       baseSetting,
       custom,

src/views/dashboard/Workplace.vue

@@ -112,8 +112,6 @@
 <script>
   import { timeFix } from "@/utils/util"
   import {mapGetters} from "vuex"
-
-  import PageLayout from '@/components/page/PageLayout'
   import HeadInfo from '@/components/tools/HeadInfo'
   import Radar from '@/components/chart/Radar'
   import { getRoleList, getServiceList, getFileAccessHttpUrl } from "@/api/manage"
@@ -123,7 +121,6 @@
   export default {
     name: "Workplace",
     components: {
-      PageLayout,
       HeadInfo,
       Radar
     },

src/views/examples/profile/advanced/Advanced.vue

@@ -134,7 +134,6 @@
 
 <script>
   import { mixinDevice } from '@/utils/mixin.js'
-  import PageLayout from '@/components/page/PageLayout'
   import DetailList from '@/components/tools/DetailList'
 
   const DetailListItem = DetailList.Item
@@ -142,7 +141,6 @@
   export default {
     name: "Advanced",
     components: {
-      PageLayout,
       DetailList,
       DetailListItem
     },

src/views/examples/profile/basic/Index.vue

@@ -43,7 +43,6 @@
 </template>
 
 <script>
-  import PageLayout from '@/components/page/PageLayout'
   import STable from '@/components/table/'
   import DetailList from '@/components/tools/DetailList'
   import ABadge from "ant-design-vue/es/badge/Badge"
@@ -51,7 +50,6 @@
 
   export default {
     components: {
-      PageLayout,
       ABadge,
       DetailList,
       DetailListItem,