ShibeiWorkPlatform_Frontend/src/router/index.js

import Vue from "vue";
import Router from "vue-router";
import http from "@/utils/request";
import { isURL } from "@/utils/validate";
import store from "@/js/store";

Vue.use(Router);

// 页面路由(独立页面)
export const pageRoutes = [
  {
    path: "/404",
    component: () => import("@/views/pages/404"),
    name: "404",
    meta: {
      title: "404未找到",
    },
    beforeEnter(to, from, next) {
      // 拦截处理特殊业务场景
      // 如果, 重定向路由包含__双下划线, 为临时添加路由
      if (/__.*/.test(to.redirectedFrom)) {
        return next(to.redirectedFrom.replace(/__.*/, ""));
      }
      next();
    },
  },
  {
    path: "/login",
    component: () => import("@/views/pages/login"),
    name: "login",
    meta: {
      title: "登录",
    },
  },
  {
    path: "/",
    name: "index",
    component: () => import("@/views/pages/index"),
  },
  {
    path: "/indexWork",
    name: "indexWork",
    redirect: {
      name: "index",
    },
  },
];

// 模块路由(基于主入口布局页面)
export const moduleRoutes = {
  path: "/main",
  component: () => import("@/views/main"),
  name: "main",
  redirect: {
    path: "/main/shequ-index",
  },
  meta: {
    title: "主入口布局",
  },
  children: [
    {
      path: "/home",
      component: () => import("@/views/modules/home"),
      name: "home",
      meta: {
        title: "主页",
        isTab: true,
      },
    },
  ],
};

// 模块路由(基于主入口布局页面) 可视化数据
export const moduleShujuRoutes = {
  path: "/main-shuju",
  component: () => import("@/views/main-shuju/main"),
  name: "main-shuju",
  redirect: {
    path: "/main-shuju/visual-basicinfo-basicInfoMain",
  },
  meta: {
    title: "主入口布局",
  },
  children: [
    {
      path: "/home2",
      component: () => import("@/views/modules/home"),
      name: "home2",
      meta: {
        title: "主页2",
        isTab: true,
      },
    },
    {
      path: "/main-shuju/visual-basicinfo-people/:uid",
      props: true,
      component: () => import("@/views/modules/visual/basicinfo/people"),
      name: "visual-basicinfo-people",
      meta: {
        title: "个人详情",
        isTab: true,
      },
    },
  ],
};

export function addDynamicRoute(routeParams, router) {
  // 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
  var routeName = routeParams.routeName;
  var dynamicRoute = window.SITE_CONFIG["dynamicRoutes"].filter(
    (item) => item.name === routeName
  )[0];
  if (dynamicRoute) {
    return router.push({
      name: routeName,
      params: routeParams.params,
    });
  }
  // 否则: 添加并全局变量保存, 再跳转
  dynamicRoute = {
    path: routeName,
    component: () => import(`@/views/modules/${routeParams.path}`),
    name: routeName,
    meta: {
      ...window.SITE_CONFIG["contentTabDefault"],
      menuId: routeParams.menuId,
      title: `${routeParams.title}`,
    },
  };
  router.addRoutes([
    {
      ...moduleRoutes,
      name: `main-dynamic__${dynamicRoute.name}`,
      children: [dynamicRoute],
    },
  ]);
  window.SITE_CONFIG["dynamicRoutes"].push(dynamicRoute);
  router.push({
    name: dynamicRoute.name,
    params: routeParams.params,
  });
}

const router = new Router({
  mode: "hash",
  scrollBehavior: () => ({
    y: 0,
  }),
  routes: pageRoutes.concat(moduleRoutes, moduleShujuRoutes),
});

router.beforeEach((to, from, next) => {
  // 添加动态(菜单)路由
  // 已添加或者当前路由为页面路由, 可直接访问
  if (
    window.SITE_CONFIG["dynamicMenuRoutesHasAdded"] ||
    fnCurrentRouteIsPageRoute(to, pageRoutes)
  ) {
    return next();
  }

  const customerId = localStorage.getItem("customerId");
  console.log("customerId：", customerId);

  // http
  //   .get("/gov/access/menu/nav")
  //   .then(({ data: res }) => {
  //     if (res.code !== 0) {
  //       // Vue.prototype.$message.error(res.msg)
  //       return next({
  //         name: "login",
  //       });
  //     }

  //     next({
  //       ...to,
  //       replace: true,
  //     });
  //   })
  //   .catch(() => {
  //     next({
  //       name: "login",
  //     });
  //   });
  window.SITE_CONFIG["menuShujuList"] = [
    {
      icon: "icon-setting",
      id: "22213213",
      name: "基础信息",
      // url: "visual/basicinfo/basicInfoMain",
      children: [
        {
          url: "/visual/basicinfo/basicInfoMain",
          name: "基础信息",
          id: "5feawfwaefwa5",
        },
        {
          url: "/visual/basicinfo/personCategory/index",
          name: "人员类别分析",
          id: "5fwaefwaefawef5",
        },
      ],
    },
    {
      icon: "icon-setting",
      id: "3",
      name: "人员预警",
      url: "visual/warning/index",
    },
    {
      icon: "icon-setting",
      id: "6",
      name: "社区治理",
      children: [
        {
          url: "visual/communityGovern/processAnalyze",
          name: "项目处理分析",
          id: "processAnalyze",
        },
        {
          url: "/visual/communityGovern/typeAnalyze",
          name: "项目分类分析",
          id: "typeAnalyze",
        },
        {
          url: "/visual/communityGovern/resibuzz",
          name: "居民热议",
          id: "resibuzz",
        },
        {
          url: "/visual/communityGovern/distributionAnalyze",
          name: "项目分布分析",
          id: "distributionAnalyze",
        },
      ],
    },
    {
      icon: "icon-setting",
      id: "2221321001",
      name: "社区党建",
      // url: "visual/basicinfo/basicInfoMain",
      children: [
        {
          url: "/visual/communityParty/party",
          name: "党员信息统计",
          id: "5feawfwaefwa578",
        },
        {
          url: "/visual/communityParty/community",
          name: "区域化党建",
          id: "5fwaefwaefawef588",
        },
        {
          url: "/visual/communityParty/elegant",
          name: "党员风采",
          id: "5fwaefwaefawef589",
        },
      ],
    },
    {
      icon: "icon-setting",
      id: "2221321123",
      name: "措施清单",
      // url: "visual/basicinfo/basicInfoMain",
      children: [
        {
          url: "/visual/measure/service",
          name: "服务措施分析",
          id: "5feawfwaefwa57",
        },
        {
          url: "/visual/measure/volunteer",
          name: "志愿者服务分析",
          id: "5fwaefwaefawef58",
        },
      ],
    },
    {
      icon: "icon-setting",
      id: "2221321fefefaewfa123",
      name: "初心互助",
      url: "visual/heart/index",
      children: [],
    },
    // {
    //   icon: "icon-setting",
    //   id: "44rq22222q2222",
    //   name: "AI安防",
    //   // url: "visual/basicinfo/basicInfoMain",
    //   children: [
    //     {
    //       url: "/visual/ai/index",
    //       name: "AI安防",
    //       id: "5feawfwa111111efwa57",
    //     },
    //     {
    //       url: "/visual/ai/renliu",
    //       name: "人流数据",
    //       id: "5fwaefwae222112fawef58",
    //     },
    //     {
    //       url: "/visual/ai/cheliu",
    //       name: "车流数据",
    //       id: "erawerwecsxefwaw",
    //     },
    //     {
    //       url: "/visual/ai/shebei",
    //       name: "设备数据",
    //       id: "zfzffewaf",
    //     },
    //     {
    //       url: "/visual/ai/gongdan",
    //       name: "工单数据",
    //       id: "fewafwafewaefddd",
    //     },
    //     {
    //       url: "/visual/ai/yujing",
    //       name: "预警事件",
    //       id: "545345fdsfs",
    //     },
    //   ],
    // },
  ];
  fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);

  http
    .get("/gov/access/menu/nav")
    .then(({ data: res }) => {
      if (res.code !== 0) {
        // Vue.prototype.$message.error(res.msg)
        return next({
          name: "login",
        });
      }
      window.SITE_CONFIG["menuList"] = res.data;
      fnAddDynamicMenuRoutes(window.SITE_CONFIG["menuList"]);
      // next({ ...to, replace: true })
      next({
        ...to,
        replace: true,
      });
    })
    .catch(() => {
      next({
        name: "login",
      });
    });
});

/**
 * 判断当前路由是否为页面路由
 * @param {*} route 当前路由
 * @param {*} pageRoutes 页面路由
 */
function fnCurrentRouteIsPageRoute(route, pageRoutes = []) {
  var temp = [];
  for (var i = 0; i < pageRoutes.length; i++) {
    if (route.path === pageRoutes[i].path) {
      return true;
    }
    if (pageRoutes[i].children && pageRoutes[i].children.length >= 1) {
      temp = temp.concat(pageRoutes[i].children);
    }
  }
  return temp.length >= 1 ? fnCurrentRouteIsPageRoute(route, temp) : false;
}

/**
 * 添加动态(菜单)路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
  var temp = [];
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].children && menuList[i].children.length >= 1) {
      temp = temp.concat(menuList[i].children);
      continue;
    }
    // 组装路由
    var route = {
      path: "",
      component: null,
      name: "",
      meta: {
        ...window.SITE_CONFIG["contentTabDefault"],
        menuId: menuList[i].id,
        title: menuList[i].name,
      },
    };
    // eslint-disable-next-line
    let URL = (menuList[i].url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) =>
      eval(s2)
    ); // URL支持{{ window.xxx }}占位符变量
    if (isURL(URL)) {
      route["path"] = route["name"] = `i-${menuList[i].id}`;
      route["meta"]["iframeURL"] = URL;
    } else {
      URL = URL.replace(/^\//, "").replace(/_/g, "-");
      route["path"] = route["name"] = URL.replace(/\//g, "-");
      route["component"] = () => import(`@/views/modules/${URL}`);
    }
    routes.push(route);
  }
  if (temp.length >= 1) {
    return fnAddDynamicMenuRoutes(temp, routes);
  }
  // 添加路由
  router.addRoutes([
    {
      ...moduleRoutes,
      name: "main-dynamic-menu",
      children: routes,
    },
    {
      path: "*",
      // redirect: {
      //   name: "404",
      // },
    },
  ]);
  window.SITE_CONFIG["dynamicMenuRoutes"] = routes;
  window.SITE_CONFIG["dynamicMenuRoutesHasAdded"] = true;
}

function fnAddDynamicMenuRoutes2(menuList = [], routes = []) {
  var temp = [];
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].children && menuList[i].children.length >= 1) {
      temp = temp.concat(menuList[i].children);
      continue;
    }
    // 组装路由
    var route = {
      path: "",
      component: null,
      name: "",
      meta: {
        // ...window.SITE_CONFIG["contentTabDefault"],
        menuId: menuList[i].id,
        title: menuList[i].name,
      },
    };
    // eslint-disable-next-line
    let URL = (menuList[i].url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) =>
      eval(s2)
    ); // URL支持{{ window.xxx }}占位符变量
    if (isURL(URL)) {
      route["path"] = route["name"] = `i-${menuList[i].id}`;
      route["meta"]["iframeURL"] = URL;
    } else {
      URL = URL.replace(/^\//, "").replace(/_/g, "-");
      route["path"] = route["name"] = URL.replace(/\//g, "-");
      route["component"] = () => import(`@/views/modules/${URL}`);
    }
    routes.push(route);
  }
  if (temp.length >= 1) {
    return fnAddDynamicMenuRoutes2(temp, routes);
  }
  // 添加路由
  router.addRoutes([
    {
      ...moduleShujuRoutes,
      name: "main-dynamic-menu-shuju",
      children: routes,
    },
    {
      path: "*",
      // redirect: {
      //   name: "404",
      // },
    },
  ]);
  window.SITE_CONFIG["dynamicMenuRoutesShuju"] = routes;
  window.SITE_CONFIG["dynamicMenuRoutesShujuHasAdded"] = true;
}

export default router;