epmet-oper-gov/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",
    },
  },
  {
    path: "/caiji/:id",
    props: true,
    name: "caiji",
    component: () => import("@/views/pages/caiji"),
    meta: {
      title: "居民信息填报",
    },
  },
  {
    path: "/caijisuccess",
    props: true,
    name: "caijisuccess",
    component: () => import("@/views/pages/caijisuccess"),
    meta: {
      title: "居民信息填报",
    },
  },
  {
    path: "/staffRegister",
    props: true,
    name: "staffRegister",
    component: () => import("@/views/pages/staffRegister"),
    meta: {
      title: "员工登记",
    },
  },
];

// 模块路由(基于主入口布局页面)
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,
      },
    },
    {
      path: "unopen",
      component: () => import("@/views/modules/unopen"),
      name: "unopen",
      meta: {
        title: "未开放功能",
        isTab: true,
      },
    },
    {
      path: "404",
      props: true,
      component: () => import("@/views/modules/404"),
      name: "main-404",
      meta: {
        title: "页面未找到或无权访问",
        isTab: false,
      },
    },
  ],
};

// pc端菜单的 如果没有配置 默认的 或者配置了默认的 但没有权限 默认选中第一
function cookApiDataItem(item) {
  function n2one(v) {
    let ret = [];
    for (let i = 0; i < v.length; i++) {
      // console.log("xxxxx", v[i]);
      ret.push(v[i]);
      if (Array.isArray(v[i].children) && v[i].children.length > 0) {
        ret.push(...n2one(v[i].children));
      }
    }
    // console.log("aaaa", ret);
    return ret;
  }

  let allChildrenUrl = n2one(item.children)
    .filter((i) => i.url != "" && i.showFlag == 1)
    .map((i) => i.url);
  // console.log("))))))))))))", allChildrenUrl);

  if (item.children.length > 0) {
    if (item.url == "" || !allChildrenUrl.find((i) => i.url == item.url)) {
      item.url = allChildrenUrl[0];
    }
  }
  // item.children.forEach((item) => {
  //   item.color = "#f00";
  //   return item;
  // });
  return item;
}

// 模块路由(基于主入口布局页面) 可视化数据
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: "/main-shuju/visual-basicinfo-people/:uid",
      props: true,
      component: () => import("@/views/modules/visual/basicinfo/people"),
      name: "visual-basicinfo-people",
      meta: {
        title: "个人详情",
        isTab: false,
      },
    },
    {
      path: "/main-shuju/visual-basicinfo-people-list",
      props: true,
      component: () => import("@/views/modules/visual/basicinfo/peopleList"),
      name: "visual-basicinfo-people-list",
      meta: {
        title: "人员列表",
        isTab: false,
      },
    },
    {
      path: "404",
      props: true,
      component: () => import("@/views/modules/visual/404"),
      name: "main-shuju-404",
      meta: {
        title: "页面未找到或无权访问",
        isTab: false,
      },
    },
  ],
};

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 (to.name === "caiji") {
    return 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/navDigitalCommunity?tableName=data_menu")
    .then(({ data: res }) => {
      if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
        // 10005 token为空  10006登陆超时 10007别处登录
        console.log("登录失效");
        Vue.prototype.$message.error(res.msg);
        return next({
          name: "login",
        });
      }

      window.SITE_CONFIG["menuShujuList"] = res.data;
      fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);

      next({
        ...to,
        replace: true,
      });
    })
    .catch(() => {
      next({
        name: "login",
      });
    });

  http
    .get("gov/access/menu/navDigitalCommunity")
    .then(({ data: res }) => {
      if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
        // 10005 token为空  10006登陆超时 10007别处登录
        console.log("登录失效");
        Vue.prototype.$message.error(res.msg);
        return next({
          name: "login",
        });
      }
      window.SITE_CONFIG["menuList"] = res.data.map((item) =>
        cookApiDataItem(item)
      );
      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)) {
      if (menuList[i].children && menuList[i].children.length >= 1) {
        let item = menuList[i].children.find(
          (subMenu) => subMenu.url == menuList[i].url
        );
        if (item) {
          route["path"] = route["name"] = `i-${menuList[i].id}`;
          route["redirect"] = `i-${item.id}`;
        } else {
          route["path"] = route["name"] = `i-${menuList[i].id}`;
          route["meta"]["iframeURL"] = URL;
        }
      } else {
        route["path"] = route["name"] = `i-${menuList[i].id}`;
        route["meta"]["iframeURL"] = URL;
      }
    } else {
      URL = URL.replace(/^\//, "").replace(/_/g, "-");
      if (URL.startsWith("unopen")) {
        route["path"] = route["name"] = URL.replace(/\//g, "-");
        route["component"] = () => import(`@/views/modules/unopen`);
      } else if (menuList[i].children && menuList[i].children.length >= 1) {
        route["path"] = route["name"] = URL;
        route["redirect"] = URL.replace(/\//g, "-");
      } else {
        route["path"] = route["name"] = URL.replace(/\//g, "-");
        route["component"] = () => import(`@/views/modules/${URL}`);
      }
    }
    routes.push(route);
  }
  if (temp.length >= 1) {
    return fnAddDynamicMenuRoutes(temp, routes);
  }
  // routers.reverse();
  // 添加路由
  router.addRoutes([
    {
      ...moduleRoutes,
      name: "main-dynamic-menu",
      children: routes,
    },
    {
      path: "/main/*",
      redirect: {
        path: "/main/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)) {
      if (menuList[i].children && menuList[i].children.length >= 1) {
        let item = menuList[i].children.find(
          (subMenu) => subMenu.url == menuList[i].url
        );
        if (item) {
          route["path"] = route["name"] = `i-${menuList[i].id}`;
          route["redirect"] = `i-${item.id}`;
        } else {
          route["path"] = route["name"] = `i-${menuList[i].id}`;
          route["meta"]["iframeURL"] = URL;
        }
      } else {
        route["path"] = route["name"] = `i-${menuList[i].id}`;
        route["meta"]["iframeURL"] = URL;
      }
    } else {
      URL = URL.replace(/^\//, "").replace(/_/g, "-");
      if (URL.startsWith("unopen")) {
        route["path"] = route["name"] = URL.replace(/\//g, "-");
        route["component"] = () => import(`@/views/modules/unopen`);
      } else if (menuList[i].children && menuList[i].children.length >= 1) {
        route["path"] = route["name"] = URL;
        route["redirect"] = URL.replace(/\//g, "-");
      } else {
        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: "/main-shuju/*",
      redirect: {
        path: "/main-shuju/404",
      },
    },
  ]);
  window.SITE_CONFIG["dynamicMenuRoutesShuju"] = routes;
  window.SITE_CONFIG["dynamicMenuRoutesShujuHasAdded"] = true;
}

export default router;