:sparkles: Introducing new features. 菜单显示调整 @smallwei

src/api/admin/menu.js

@@ -17,9 +17,18 @@
 
 import request from '@/router/axios'
 
-export function GetMenu() {
+export function getMenu(id) {
   return request({
     url: '/admin/menu',
+    params: {parentId: id},
+    method: 'get'
+  })
+}
+
+export function getTopMenu() {
+  return request({
+    url: '/admin/menu',
+    params: {type: 'left'},
     method: 'get'
   })
 }

src/const/setting/index.js

@@ -92,15 +92,6 @@ export const option = (safe) => {
       click: ({ column }) => {
         _safe.set(column.prop)
       }
-    }, {
-      label: '搜索',
-      prop: 'showSearch',
-      type: 'switch',
-      span: 24,
-      dicData: dicData,
-      click: ({ column }) => {
-        _safe.set(column.prop)
-      }
     }, {
       label: '缩放',
       prop: 'showCollapse',

src/page/index/index.vue

@@ -48,6 +48,11 @@
 
   export default {
     name: 'Index',
+    provide() {
+      return {
+        Index: this
+      };
+    },
     components: {
       top,
       tags,
@@ -88,6 +93,13 @@
       showCollapse() {
         this.$store.commit('SET_COLLAPSE')
       },
+      openMenu(item = {}) {
+        this.$store.dispatch("GetMenu",{type: true,id: item.id}).then(data => {
+            if (data.length !== 0) {
+                this.$router.$avueRouter.formatRoutes(data, true);
+            }
+        });
+      },
       // 屏幕检测
       init() {
         this.$store.commit('SET_SCREEN', admin.getScreen())
@@ -104,11 +116,9 @@
             name: 'access_token',
             debug: true
           })
-
           if (this.validatenull(token)) {
             return
           }
-
           if (this.expires_in <= 1000 && !this.refreshLock) {
             this.refreshLock = true
             this.$store

src/page/index/sidebar/index.vue

@@ -28,26 +28,18 @@ import logo from '../logo'
 import sidebarItem from './sidebarItem'
 export default {
   name: 'Sidebar',
+  inject: ["Index"],
   components: { sidebarItem, logo },
-  data() {
-    return {}
-  },
   created() {
-    this.$store.dispatch('GetMenu').then(data => {
-      if (data.length === 0) return
-      this.$router.$avueRouter.formatRoutes(data, true)
-    })
+    this.Index.openMenu(this.menuId);
   },
   computed: {
     ...mapGetters(['website', 'menu', 'tag', 'keyCollapse', 'screen']),
     nowTagValue: function() {
       return this.$router.$avueRouter.getValue(this.$route)
     }
-  },
-  mounted() {},
-  methods: {}
+  }
 }
 </script>
-<style lang="scss" scoped>
-</style>
+
 

src/page/index/top/index.vue

@@ -16,11 +16,6 @@
         class="top-bar__item top-bar__item--show">
         <top-menu/>
       </div>
-      <span
-        v-if="showSearch"
-        class="top-bar__item">
-        <top-search/>
-      </span>
     </div>
     <div class="top-bar__right">
       <el-tooltip
@@ -110,7 +105,6 @@ import { mapGetters, mapState } from 'vuex'
 import { fullscreenToggel, handleImg, listenfullscreen } from '@/util/util'
 import topLock from './top-lock'
 import topMenu from './top-menu'
-import topSearch from './top-search'
 import topTheme from './top-theme'
 import topLogs from './top-logs'
 import topColor from './top-color'
@@ -121,7 +115,6 @@ export default {
   components: {
     topLock,
     topMenu,
-    topSearch,
     topTheme,
     topLogs,
     topColor,
@@ -138,7 +131,6 @@ export default {
       showLock: state => state.common.showLock,
       showFullScren: state => state.common.showFullScren,
       showCollapse: state => state.common.showCollapse,
-      showSearch: state => state.common.showSearch,
       showMenu: state => state.common.showMenu,
       showColor: state => state.common.showColor
     }),

src/page/index/top/top-menu.vue

@@ -23,6 +23,7 @@
 import { mapGetters } from 'vuex'
 export default {
   name: 'TopMenu',
+  inject: ["Index"],
   data() {
     return {
       activeIndex: '0',
@@ -30,34 +31,19 @@ export default {
     }
   },
   created() {
+    this.getTopMenu()
   },
   computed: {
     ...mapGetters(['tagCurrent', 'menu'])
   },
   methods: {
+    getTopMenu() {
+      this.$store.dispatch("GetTopMenu").then(res => {
+          this.items = res;
+      });
+    },
     openMenu(item) {
-      this.$store.dispatch('GetMenu', item.parentId).then(data => {
-        if (data.length !== 0) {
-          this.$router.$avueRouter.formatRoutes(data, true)
-        }
-        let itemActive,
-          childItemActive = 0
-        if (item.path) {
-          itemActive = item
-        } else {
-          if (this.menu[childItemActive].length == 0) {
-            itemActive = this.menu[childItemActive]
-          } else {
-            itemActive = this.menu[childItemActive].children[childItemActive]
-          }
-        }
-        this.$router.push({
-          path: this.$router.$avueRouter.getPath({
-            name: itemActive.label,
-            src: itemActive.path
-          })
-        })
-      })
+      this.Index.openMenu(item)
     }
   }
 }

src/page/index/top/top-search.vue

@@ -1,129 +0,0 @@
-<template>
-  <el-autocomplete
-    v-model="value"
-    :fetch-suggestions="querySearch"
-    class="top-search"
-    popper-class="my-autocomplete"
-    placeholder="请输入搜索内容"
-    @select="handleSelect">
-
-    <template slot-scope="{ item }">
-      <i :class="[item[iconKey],'icon']"/>
-      <div class="name">{{ item[labelKey] }}</div>
-      <div class="addr">{{ item[pathKey] }}</div>
-    </template>
-  </el-autocomplete>
-</template>
-
-<script>
-import config from '../sidebar/config.js'
-import { mapGetters } from 'vuex'
-export default {
-  data() {
-    return {
-      config: config,
-      value: '',
-      menuList: []
-    }
-  },
-
-  watch: {
-    menu() {
-      this.getMenuList()
-    }
-  },
-  created() {
-    this.getMenuList()
-  },
-  computed: {
-    labelKey() {
-      return this.website.menu.props.label || this.config.propsDefault.label
-    },
-    pathKey() {
-      return this.website.menu.props.path || this.config.propsDefault.path
-    },
-    iconKey() {
-      return this.website.menu.props.icon || this.config.propsDefault.icon
-    },
-    childrenKey() {
-      return (
-        this.website.menu.props.children || this.config.propsDefault.children
-      )
-    },
-    ...mapGetters(['menu', 'website'])
-  },
-  methods: {
-    getMenuList() {
-      const findMenu = list => {
-         if (list === undefined){
-             return
-         }
-        for (let i = 0; i < list.length; i++) {
-          const ele = Object.assign({}, list[i])
-          if (ele[this.childrenKey]) findMenu(ele[this.childrenKey])
-          delete ele[this.childrenKey]
-          this.menuList.push(ele)
-        }
-      }
-      this.menuList = []
-      findMenu(this.menu)
-    },
-    querySearch(queryString, cb) {
-      var restaurants = this.menuList
-      var results = queryString
-        ? restaurants.filter(this.createFilter(queryString))
-        : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-    createFilter(queryString) {
-      return restaurant => {
-        return (
-          restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
-          0
-        )
-      }
-    },
-    handleSelect(item) {
-      this.value = ''
-      this.$router.push({
-        path: this.$router.$avueRouter.getPath({
-          name: item[this.labelKey],
-          src: item[this.pathKey]
-        }),
-        query: item.query
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.my-autocomplete {
-  li {
-    line-height: normal;
-    padding: 7px;
-    .icon {
-      margin-right: 5px;
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .name {
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      vertical-align: middle;
-    }
-    .addr {
-      padding-top: 5px;
-      width: 100%;
-      font-size: 12px;
-      color: #b4b4b4;
-    }
-
-    .highlighted .addr {
-      color: #ddd;
-    }
-  }
-}
-</style>

src/store/modules/user.js

@@ -1,12 +1,12 @@
-import { getStore, setStore } from '@/util/store'
-import { isURL, validatenull } from '@/util/validate'
-import { getUserInfo, loginByMobile, loginBySocial, loginByUsername, logout, refreshToken } from '@/api/login'
-import { deepClone, encryption } from '@/util/util'
+import {getStore, setStore} from '@/util/store'
+import {isURL, validatenull} from '@/util/validate'
+import {getUserInfo, loginByMobile, loginBySocial, loginByUsername, logout, refreshToken} from '@/api/login'
+import {deepClone, encryption} from '@/util/util'
 import webiste from '@/const/website'
-import { resetRouter } from '@/router/router'
-import { GetMenu } from '@/api/admin/menu'
+import {resetRouter} from '@/router/router'
+import {getMenu, getTopMenu} from '@/api/admin/menu'
 
-function addPath (ele, first) {
+function addPath(ele, first) {
   const menu = webiste.menu
   const propsConfig = menu.props
   const propsDefault = {
@@ -49,7 +49,7 @@ const user = {
   },
   actions: {
     // 根据用户名登录
-    LoginByUsername ({ commit }, userInfo) {
+    LoginByUsername({commit}, userInfo) {
       const user = encryption({
         data: userInfo,
         key: 'pigxpigxpigxpigx',
@@ -69,7 +69,7 @@ const user = {
       })
     },
     // 根据手机号登录
-    LoginByPhone ({ commit }, userInfo) {
+    LoginByPhone({commit}, userInfo) {
       return new Promise((resolve, reject) => {
         loginByMobile(userInfo.mobile, userInfo.code).then(response => {
           const data = response.data
@@ -84,7 +84,7 @@ const user = {
       })
     },
     // 根据OpenId登录
-    LoginBySocial ({ commit }, param) {
+    LoginBySocial({commit}, param) {
       return new Promise((resolve, reject) => {
         loginBySocial(param.state, param.code).then(response => {
           const data = response.data
@@ -98,7 +98,7 @@ const user = {
         })
       })
     },
-    GetUserInfo ({ commit }) {
+    GetUserInfo({commit}) {
       return new Promise((resolve, reject) => {
         getUserInfo().then((res) => {
           const data = res.data.data || {}
@@ -112,7 +112,7 @@ const user = {
       })
     },
     // 刷新token
-    RefreshToken ({ commit, state }) {
+    RefreshToken({commit, state}) {
       return new Promise((resolve, reject) => {
         refreshToken(state.refresh_token).then(response => {
           const data = response.data
@@ -127,7 +127,7 @@ const user = {
       })
     },
     // 登出
-    LogOut ({ commit }) {
+    LogOut({commit}) {
       return new Promise((resolve, reject) => {
         logout().then(() => {
           resetRouter();
@@ -147,7 +147,7 @@ const user = {
       })
     },
     // 注销session
-    FedLogOut ({ commit }) {
+    FedLogOut({commit}) {
       return new Promise(resolve => {
         resetRouter();
         commit('SET_MENU', [])
@@ -162,22 +162,29 @@ const user = {
       })
     },
     // 获取系统菜单
-    GetMenu ({
-      commit
-    }, type) {
+    GetMenu({commit}, obj) {
       return new Promise(resolve => {
-        GetMenu().then((res) => {
+        getMenu(obj.id).then((res) => {
           const data = res.data.data
           const menu = deepClone(data)
           menu.forEach(ele => {
             addPath(ele)
           })
-          commit('SET_MENU', { type, menu })
+          let type = obj.type
+          commit('SET_MENU', {type, menu})
           resolve(menu)
         })
       })
+    },
+    //顶部菜单
+    GetTopMenu() {
+      return new Promise(resolve => {
+        getTopMenu().then((res) => {
+          const data = res.data.data || []
+          resolve(data)
+        })
+      })
     }
-
   },
   mutations: {
     SET_ACCESS_TOKEN: (state, access_token) => {
@@ -208,7 +215,7 @@ const user = {
       state.userInfo = userInfo
     },
     SET_MENU: (state, params = {}) => {
-      let { menu, type } = params;
+      let {menu, type} = params;
       if (type !== false) state.menu = menu
       setStore({
         name: 'menu',

src/views/admin/role/index.vue

@@ -290,7 +290,7 @@ export default {
         this.menuIds = this.$refs.menuTree.getCheckedKeys().join(',').concat(',').concat(this.$refs.menuTree.getHalfCheckedKeys().join(','))
         permissionUpd(roleId, this.menuIds).then(() => {
             this.dialogPermissionVisible = false
-            this.$store.dispatch('GetMenu', false)
+            this.$store.dispatch('GetMenu', {type:false})
             this.$notify.success('修改成功')
         })
     }