shuili-vue/src/store/modules/permission.js

import { constantRoutes, resetRouter } from '@/router';
import { getRouters } from '@/api/menu';
import Layout from '@/layout/index';

/**
 * selectTab = 'reservoir',  //水库运行管理
 * selectTab = 'sluice',  //水闸运行管理
 * selectTab = 'dike', // 堤防运行管理
 */
// 提取路由
const pickRoutes = ['/reservoir', '/dike', '/sluice', '/aiSupervision'];

const permission = {
  state: {
    topTabList: [],
    routes: [],
    addRoutes: [],
    originRoutes: [],
    selectTab: sessionStorage.getItem('topTab') || 'dike'
  },
  mutations: {
    SET_ROUTES: (state, { routes, originRoutes }) => {
      state.addRoutes = routes;
      if (originRoutes) state.originRoutes = originRoutes;
      state.routes = constantRoutes.concat(routes);
    },
    SET_TAB_LIST: (state, payload) => {
      state.topTabList = payload;
    },
    SET_SELECT_TAB: (state, select) => {
      state.selectTab = select;
    }
  },
  actions: {
    // 生成路由
    GenerateRoutes({ commit }) {
      console.log('生成路由 >>>>> ');
      return new Promise((resolve) => {
        // 向后端请求路由数据
        getRouters().then((res) => {
          // 临时手动添加路由
          // res.data.push(
          //   {
          //     component: "Layout",
          //     alwaysShow: true,
          //     hidden: false,
          //     meta: { title: "运行管护", icon: "icon-yxgh" },
          //     name: "RunManage",
          //     path: "/runManage",
          //     redirect: "noRedirect",
          //     children: [
          //       {
          //         component: "runManage/engineering",
          //         alwaysShow: true,
          //         hidden: false,
          //         meta: { title: "工程巡查", icon: "icon-gcxc" },
          //         name: "Engineering",
          //         path: "/engineering",
          //         children: [
          //           {
          //             component: "runManage/engineering/inspectionItems",
          //             hidden: false,
          //             meta: { title: "巡查项目管理", icon: "icon-xcxmgl" },
          //             name: "InspectionItems",
          //             path: "/inspectionItems"
          //           },
          //           {
          //             component: "runManage/engineering/inspectionPlan",
          //             hidden: false,
          //             meta: { title: "巡查计划管理", icon: "icon-xcjhgl" },
          //             name: "InspectionPlan",
          //             path: "/inspectionPlan"
          //           },
          //           {
          //             component: "runManage/engineering/patrolRouteSettings",
          //             hidden: true,
          //             meta: { title: "巡查路线设置", icon: "" },
          //             name: "PatrolRouteSettings",
          //             path: "/patrolRouteSettings"
          //           },
          //           {
          //             component: "runManage/engineering/inspectionRecords",
          //             hidden: false,
          //             meta: { title: "巡查记录", icon: "icon-xcjl" },
          //             name: "InspectionRecords",
          //             path: "/inspectionRecords"
          //           },
          //         ],
          //       },
          //       {
          //         component: "runManage/maintenance",
          //         alwaysShow: true,
          //         hidden: false,
          //         meta: { title: "维修养护", icon: "icon-wxyh" },
          //         name: "Maintenance",
          //         path: "/maintenance",
          //         children: [
          //           {
          //             component: "runManage/maintenance/maintenancePlan",
          //             hidden: false,
          //             meta: { title: "维养计划管理", icon: "icon-wxjhgl" },
          //             name: "MaintenancePlan",
          //             path: "/maintenancePlan"
          //           },
          //           {
          //             component: "runManage/maintenance/maintenanceRecords",
          //             hidden: false,
          //             meta: { title: "维养记录", icon: "icon-wxjl" },
          //             name: "MaintenanceRecords",
          //             path: "/maintenanceRecords"
          //           },
          //         ]
          //       },
          //       {
          //         component: "runManage/pestAnimalControl",
          //         alwaysShow: true,
          //         hidden: false,
          //         meta: { title: "害堤动物防治", icon: "icon-hddwfz" },
          //         name: "PestAnimalControl",
          //         path: "/pestAnimalControl",
          //         children: [
          //           {
          //             component: "runManage/pestAnimalControl/planManagement",
          //             hidden: false,
          //             meta: { title: "害堤动物防治计划管理", icon: "icon-hddwfzjhgl" },
          //             name: "PlanManagement",
          //             path: "/planManagement"
          //           },
          //           {
          //             component: "runManage/pestAnimalControl/governanceRecords",
          //             hidden: false,
          //             meta: { title: "害堤动物防治记录", icon: "icon-hddwfzjl" },
          //             name: "GovernanceRecords",
          //             path: "/governanceRecords"
          //           },
          //         ]
          //       }
          //     ]
          //   }
          // )
          const accessedRoutes = filterAsyncRouter(res.data);
          accessedRoutes.push({ path: '*', redirect: '/404', hidden: true });
          const { newRoutes: dealAccessedRoutes, topTabList } = resolveChildrenRoutes(accessedRoutes);
          commit('SET_ROUTES', { routes: dealAccessedRoutes, originRoutes: accessedRoutes });
          commit('SET_TAB_LIST', topTabList);
          resolve(dealAccessedRoutes);
        });
      });
    },

    // 根据顶部tab切换路由
    changeRoutes({ commit }) {
      commit('SET_ROUTES', { routes: [] });
      resetRouter();
    },

    // 切换tab
    changeTopTab({ commit, dispatch }, payload) {
      commit('SET_SELECT_TAB', payload);
      dispatch('changeRoutes');
    }
  }
};

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  return asyncRouterMap.filter((route) => {
    if (route.component) {
      // Layout组件特殊处理
      if ( route.component === 'Layout') {
        route.component = Layout;
      } else {
        route.component = loadView(route.component);
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children);
    }
    return true;
  });
}

// 处理提取路由
function resolveChildrenRoutes(routes, pickRoute = permission.state.selectTab) {
  if (!routes?.length) return;
  let pickRoutePath = `/${pickRoute}`;
  let tempRoutesArr = [];
  let newChildrenRoutes = [];
  let newRoutes = routes.filter((v) => {
    if (pickRoutes.includes(v.path)) {
      tempRoutesArr.push(v);
    }
    return !pickRoutes.includes(v.path);
  });
  if (tempRoutesArr.length) {
    let parentRoute = tempRoutesArr.filter((v) => v.path === pickRoutePath)?.[0];
    if (parentRoute) {
      newChildrenRoutes =
        parentRoute.children?.map((v) => {
          return {
            ...v,
            path: `${parentRoute.path}/${v.path}`
          };
        }) || [];

        newChildrenRoutes = newChildrenRoutes.map(v=> {
          if(v.path && v.path != '/' && (!v.children || !v.children.length)){
            // 为了让非目录的一级菜单正常展示
            return {
              path: '/',
              orderNum: v.orderNum,
              meta: v.meta,
              component: Layout,
              hidden: v.hidden,
              children: [
                v
              ]
            }
          } else {
            return v
          }
        })
    }
  }
  return {
    topTabList: tempRoutesArr.map((v) => {
      return {
        label: v.meta.title,
        value: v.path.slice(1)
      };
    }),
    newRoutes: [...newChildrenRoutes, ...newRoutes]
  };
}

export const loadView = (view) => {
  // 路由懒加载
  return (resolve) => require([`@/views/${view}`], resolve);
};

export default permission;