screen/src/store/modules/permission.js

import { constantRoutes } from '@/router'
import { getMenuList } from '@/api/system'

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit, state }) {
    return new Promise(resolve => {
      if (state.addRoutes.length > 0) {
        resolve(state.addRoutes)
        return
      }
      getMenuList().then(response => {
        const menuData = response.data || []
        const accessedRoutes = filterAsyncRoutes(menuData)
        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
      }).catch(() => {
        commit('SET_ROUTES', [])
        resolve([])
      })
    })
  }
}

function filterAsyncRoutes(routes) {
  return routes.filter(route => {
    if (!route.component || route.component === '') {
      route.component = () => import('@/modules/dashboardBig/views/index.vue')
    } else if (route.component !== 'Layout') {
      route.component = loadComponent(route.component)
    }
    if (route.children && route.children.length > 0) {
      route.children = filterAsyncRoutes(route.children)
    }
    return true
  })
}

function loadComponent(componentPath) {
  const path = componentPath.replace(/^\//, '').replace(/\.vue$/, '')
  const componentMap = {
    'Layout': () => import('@/layout/index.vue'),
    'modules/dashboardBig/views/index': () => import('@/modules/dashboardBig/views/index.vue'),
    'modules/dashboardBig/views/order': () => import('@/modules/dashboardBig/views/order.vue'),
    'modules/dashboardBig/views/cost': () => import('@/modules/dashboardBig/views/cost.vue'),
    'modules/dashboardBig/views/energy': () => import('@/modules/dashboardBig/views/energy.vue'),
    'modules/dashboardBig/views/oee': () => import('@/modules/dashboardBig/views/oee.vue'),
    'modules/dashboardBig/views/output': () => import('@/modules/dashboardBig/views/output.vue'),
    'modules/dashboardBig/views/stopAnalysis': () => import('@/modules/dashboardBig/views/stopAnalysis.vue'),
    'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue')
  }
  return componentMap[path] || (() => import('@/modules/dashboardBig/views/index.vue'))
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}