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

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

@@ -26,7 +26,7 @@ export default {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       openKeys: [],
       selectedKeys: [],
@@ -41,11 +41,11 @@ export default {
       return keys
     }
   },
-  mounted () {
+  mounted() {
     this.updateMenu()
   },
   watch: {
-    collapsed (val) {
+    collapsed(val) {
       if (val) {
         this.cachedOpenKeys = this.openKeys.concat()
         this.openKeys = []
@@ -59,10 +59,10 @@ export default {
   },
   methods: {
     // select menu item
-    onOpenChange (openKeys) {
+    onOpenChange(openKeys) {
       // if(openKeys.length == 1 || this.selectedKeys[0] == '/dashboard/analysis') this.latestOpenKey = openKeys
-      if(openKeys.length == 1) this.latestOpenKey = openKeys
+      if (openKeys.length == 1) this.latestOpenKey = openKeys
-      else if(openKeys.length == 2) this.latestOpenKey = [openKeys[1]]
+      else if (openKeys.length == 2) this.latestOpenKey = [openKeys[1]]
       // openKeys = this.latestOpenKey
       // 在水平模式下时执行，并且不再执行后续
       if (this.mode === 'horizontal') {
@@ -78,7 +78,7 @@ export default {
         this.openKeys = latestOpenKey ? [latestOpenKey] : []
       }
     },
-    updateMenu () {
+    updateMenu() {
       const routes = this.$route.matched.concat()
       const { hidden } = this.$route.meta
       if (routes.length >= 3 && hidden) {
@@ -94,21 +94,21 @@ export default {
         })
       }
       //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
-      if(!this.selectedKeys || this.selectedKeys[0].indexOf(":")<0){
+      if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) {
         this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
       }
       //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
     },
 
     // render
-    renderItem (menu) {
+    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
     },
-    renderMenuItem (menu) {
+    renderMenuItem(menu) {
       // if(menu.meta.title == '首页')
       // { 
       //   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.route && menu.route === '0'){
+      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) {
         // 把有子菜单的 并且 父菜单是要隐藏子菜单的
@@ -140,7 +143,7 @@ export default {
         </Item>
       )
     },
-    renderSubMenu (menu) {
+    renderSubMenu(menu) {
       const itemArr = []
       if (!menu.alwaysShow) {
         menu.children.forEach(item => itemArr.push(this.renderItem(item)))
@@ -156,19 +159,19 @@ export default {
         </SubMenu>
       )
     },
-    renderIcon (icon) {
+    renderIcon(icon) {
       if (icon === 'none' || icon === undefined) {
         return null
       }
       const props = {}
       typeof (icon) === 'object' ? props.component = icon : props.type = icon
       return (
-        <Icon {... { props } }/>
+        <Icon {... { props }} />
       )
     }
   },
 
-  render () {
+  render() {
     const { mode, theme, menu } = this
     const props = {
       mode: mode,

src/components/page/PageLayout.vue

@@ -13,8 +13,8 @@
               <span>{{ link.title }}</span>
             </a>
           </template>
-        </div>
+</div>
-      </div> -->
+</div> -->
       <!-- <slot slot="extra" name="extra"></slot>
       <div slot="pageMenu">
         <div class="page-menu-search" v-if="search">
@@ -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,8 +55,9 @@ export default {
   },
   data() {
     return {
+      current: '',
       menuList: [],
-      parentTitle:''
+      parentTitle: ''
     }
   },
   // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
@@ -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,13 +146,14 @@ export default {
   left: 20px;
   top: 140px;
   font-size: 18px;
+  padding: 30px 15px 0;
 }
 
-.leftMenu .parent{
+.leftMenu .parent {
   width: 263px;
   height: 46px;
   background: linear-gradient(0deg, #1E30A2, #11B3FF);
-  color:#fff;
+  color: #fff;
   text-align: left;
   padding-left: 20px;
   line-height: 46px;
@@ -140,15 +161,16 @@ export default {
   left: 14px;
   top: 30px;
 }
-.leftMenu .child{
+
+.leftMenu .child {
   height: 60px;
   background-color: #00467C;
-  color:#fff;
+  color: #fff;
   text-align: center;
   line-height: 60px;
 }
 
-.leftMenu .child.selected{
+.leftMenu .child.selected {
   background-color: #2B85D1;
 }
 

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,