mes-ui-d2/src/menu/index.js

import util from '@/libs/util'

/**
 * 将后端返回的扁平菜单数组转为 { header: [], aside: [] } 树结构
 * @param {Array} arr 后端返回的扁平菜单数据
 */
function getMenuData (arr) {
  const tree = { header: [], aside: [] }

  arr.forEach(value => {
    if (!value.is_navi) {
      return
    }

    const menuItem = {
      path: value.url || ('d2-menu-empty-' + value.menu_id),
      title: value.name,
      icon: value.icon,
      type: value.type,
      params: value.params
    }

    // parent_id 为 0 的节点放入顶栏
    if (value.parent_id === 0) {
      tree.header.push({ ...menuItem })
    }

    // 所有节点保留 menu_id / parent_id 用于构建侧栏树形结构
    menuItem.menu_id = value.menu_id
    menuItem.parent_id = value.parent_id
    tree.aside.push(menuItem)
  })

  // 扁平 aside 数组转为嵌套树
  tree.aside = util.formatDataToTree(tree.aside)

  return tree
}

export default {
  /**
   * 由 sourceDataLoad 调用，将菜单源数据写入 store
   * @param {Object} vm vuex store 实例 (this)
   * @param {Array} source 后端返回的扁平菜单数组
   */
  install (vm, source) {
    vm.commit('d2admin/menu/headerAuth', source)
    const { header, aside } = getMenuData(source)
    vm.commit('d2admin/menu/headerSet', header)
    vm.commit('d2admin/menu/asideSet', aside)
  }
}