b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
kk
2026-07-08 18:00:33 +08:00
commit e66b4a3680
312 changed files with 54718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/router/avue-router.js Normal file
View File

@@ -0,0 +1,232 @@
import website from '@/config/website';
import { getToken } from '@/utils/auth';
import store from '@/store';
import { generateIframePath, processUrlForQuery, isURL } from './router';
const modules = import.meta.glob('../**/**/*.vue');
// 将多级路由扁平化为二级路由，支持 keep-alive 跨层级缓存
function flattenRouteChildren(children) {
const result = [];
for (const child of children) {
if (child.children && child.children.length > 0) {
result.push(...flattenRouteChildren(child.children));
} else {
result.push(child);
}
}
return result;
}
let RouterPlugin = function () {
this.$router = null;
this.$store = null;
};
RouterPlugin.install = function (option = {}) {
this.$router = option.router;
this.$store = option.store;
let i18n = option.i18n.global;
this.$router.$avueRouter = {
safe: this,
// 设置标题
setTitle: title => {
const defaultTitle = i18n.t('title');
title = title ? `${title} | ${defaultTitle}` : defaultTitle;
document.title = title;
},
closeTag: value => {
let tag = value || this.$store.getters.tag;
if (typeof value === 'string') {
tag = this.$store.getters.tagList.find(ele => ele.fullPath === value);
}
this.$store.commit('DEL_TAG', tag);
},
generateTitle: (item, props = {}) => {
let query = item[props.query || 'query'] || {};
let title = query.name || item[props.label || 'label'];
let meta = item[props.meta || 'meta'] || {};
let key = meta.i18n;
if (key) {
const hasKey = i18n.te('route.' + key);
if (hasKey) return i18n.t('route.' + key);
}
return title ? title.split(',')[0] : title;
},
//动态路由
formatRoutes: function (aMenu = [], first) {
const aRouter = [];
const propsDefault = website.menu;
if (aMenu && aMenu.length === 0) return;
for (let i = 0; i < aMenu.length; i++) {
const oMenu = aMenu[i];
let path = oMenu[propsDefault.path],
isComponent = true,
component = oMenu.component,
name = oMenu[propsDefault.label] + ',' + oMenu.id,
icon = oMenu[propsDefault.icon],
children = oMenu[propsDefault.children],
query = oMenu[propsDefault.query],
meta = oMenu[propsDefault.meta];
// 处理iframe场景，如果path是URL且是一级路由，需要生成一个内部路径
const isUrlPath = isURL(path);
if (isUrlPath && first && !children?.length) {
// 保存原始URL到query中（如果formatPath还没处理）
if (!query || !query.url) {
query = { url: processUrlForQuery(path) };
}
// 生成一个内部路径用于路由
const generatedPath = generateIframePath(oMenu, propsDefault.path);
if (generatedPath !== path) {
path = generatedPath;
oMenu[propsDefault.path] = path;
}
// 确保使用iframe组件
if (!component || component.indexOf('iframe') === -1) {
component = 'components/iframe/main';
oMenu.component = component;
}
}
if (option.keepAlive) {
meta.keepAlive = option.keepAlive;
}
const isChild = !!(children && children.length !== 0);
const oRouter = {
path: path,
component: (() => {
// 判断是否为首路由
if (first) {
return modules[
option.store.getters.isMacOs || !website.setting.menu
? '../page/index/layout.vue'
: '../page/index/index.vue'
];
// 判断是否为多层路由
} else if (isChild && !first) {
return modules['../page/index/layout.vue'];
// 判断是否为最终的页面视图
} else {
let result = modules[`../${component}.vue`];
if (!result) {
isComponent = false;
}
return result;
}
})(),
name,
icon,
meta,
query,
redirect: (() => {
if (!isChild && first) return `${path}`;
else return '';
})(),
// 处理是否为一级路由
children: !isChild
? (() => {
if (first) {
oMenu[propsDefault.path] = `${path}`;
let componentPath = oMenu.component || component;
let result = modules[`../${componentPath}.vue`];
if (!result) {
isComponent = false;
}
let childName = name + '_index';
let childQuery = oMenu[propsDefault.query] || query;
return [
{
component: result,
icon: icon,
name: childName,
meta: meta,
query: childQuery,
path: '',
},
];
}
return [];
})()
: (() => {
return this.formatRoutes(children, false);
})(),
};
const isIframeRoute =
component === 'components/iframe/main' || oMenu.component === 'components/iframe/main';
if ((!isURL(path) || isIframeRoute) && isComponent) aRouter.push(oRouter);
}
if (first) {
aRouter.forEach(ele => {
// 将三级及更深路由扁平化为二级，确保所有叶子组件都由 index.vue 的 keep-alive 统一管理
if (ele.children && ele.children.length > 0) {
ele.children = flattenRouteChildren(ele.children);
}
this.safe.$router.addRoute(ele);
});
} else {
return aRouter;
}
},
};
};
export const formatPath = (ele, first) => {
const propsDefault = website.menu;
const icon = ele[propsDefault.icon];
ele[propsDefault.icon] = !icon ? propsDefault.iconDefault : icon;
ele.meta = {
keepAlive: ele.isOpen === 2,
};
const iframeComponent = 'components/iframe/main';
const iframeSrc = href => {
// 替换&为#
let processedHref = href.replace(/&/g, '#');
// 获取用户信息
const userInfo = store.getters.userInfo || {};
const userToken = getToken() || '';
// 定义替换参数映射
const replacements = {
token: userToken,
userId: userInfo.userId || '',
userName: userInfo.userName || '',
roleName: userInfo.roleName || '',
};
// 统一替换所有参数
Object.entries(replacements).forEach(([key, value]) => {
const pattern = new RegExp(`\\$\\{${key}\\}`, 'g');
processedHref = processedHref.replace(pattern, value);
});
return processedHref;
};
const isChild = !!(ele[propsDefault.children] && ele[propsDefault.children].length !== 0);
if (!isChild && first) {
ele.component = 'views' + ele[propsDefault.path];
if (isURL(ele[propsDefault.href])) {
let href = ele[propsDefault.href];
ele.component = iframeComponent;
ele[propsDefault.query] = {
url: iframeSrc(href),
};
}
} else {
ele[propsDefault.children] &&
ele[propsDefault.children].forEach(child => {
child.component = 'views' + child[propsDefault.path];
child.meta = {
keepAlive: child.isOpen === 2,
};
if (isURL(child[propsDefault.href])) {
let href = child[propsDefault.href];
child[propsDefault.path] = ele[propsDefault.path] + '/' + child.code;
child.component = iframeComponent;
child[propsDefault.query] = {
url: iframeSrc(href),
};
}
formatPath(child);
});
}
};
export default RouterPlugin;

1
src/router/ext/index.js Normal file
View File

@@ -0,0 +1 @@
export default [];

33
src/router/index.js Normal file
View File

@@ -0,0 +1,33 @@
import { createRouter, createWebHistory } from 'vue-router';
import ExtRouter from './ext/';
import PageRouter from './page/';
import ViewsRouter from './views/';
import AvueRouter from './avue-router';
import i18n from '@/lang';
import Store from '@/store/';
//创建路由
const Router = createRouter({
base: import.meta.env.VITE_APP_BASE,
history: createWebHistory(import.meta.env.VITE_APP_BASE),
routes: [...ExtRouter, ...PageRouter, ...ViewsRouter],
});
AvueRouter.install({
store: Store,
router: Router,
i18n: i18n,
});
Router.$avueRouter.formatRoutes(Store.getters.menuAll, true);
export function resetRouter() {
// 重置路由 比如用于身份验证失败，需要重新登录时 先清空当前的路有权限
const newRouter = createRouter();
Router.matcher = newRouter.matcher; // reset router
AvueRouter.install(Vue, {
router: Router,
store: Store,
i18n: i18n,
});
}
export default Router;

72
src/router/page/index.js Normal file
View File

@@ -0,0 +1,72 @@
import Store from '@/store/';
export default [
{
path: '/login',
name: '登录页',
component: () =>
Store.getters.isMacOs ? import('@/mac/login.vue') : import('@/page/login/index.vue'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false,
},
},
{
path: '/oauth/redirect/:source',
name: '第三方登录',
component: () =>
Store.getters.isMacOs ? import('@/mac/login.vue') : import('@/page/login/index.vue'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false,
},
},
{
path: '/lock',
name: '锁屏页',
component: () =>
Store.getters.isMacOs ? import('@/mac/lock.vue') : import('@/page/lock/index.vue'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false,
},
},
{
path: '/404',
component: () => import(/* webpackChunkName: "page" */ '@/components/error-page/404.vue'),
name: '404',
meta: {
keepAlive: true,
isTab: false,
isAuth: false,
},
},
{
path: '/403',
component: () => import(/* webpackChunkName: "page" */ '@/components/error-page/403.vue'),
name: '403',
meta: {
keepAlive: true,
isTab: false,
isAuth: false,
},
},
{
path: '/500',
component: () => import(/* webpackChunkName: "page" */ '@/components/error-page/500.vue'),
name: '500',
meta: {
keepAlive: true,
isTab: false,
isAuth: false,
},
},
{
path: '/',
name: '主页',
redirect: '/wel',
},
];

78
src/router/router.js Normal file
View File

@@ -0,0 +1,78 @@
/**
* 路由工具函数
*/
// 统一的URL正则表达式
export const URL_REGEX = /^https?:\/\//;
/**
* 生成iframe路径
* @param {Object} item - 菜单项
* @param {String} pathKey - 路径字段名
* @returns {String} 生成的路径
*/
export function generateIframePath(item, pathKey = 'path') {
const path = item[pathKey];
if (!path) return path;
// 如果是URL且有ID，生成iframe路径
if (URL_REGEX.test(path) && item.id) {
return `/iframe/${item.id}`;
}
return path;
}
/**
* 处理URL参数，将&替换为#以避免路由参数问题
* @param {String} url - 原始URL
* @returns {String} 处理后的URL
*/
export function processUrlForQuery(url) {
if (!url) return url;
return url.replace(/&/g, '#');
}
/**
* 生成iframe的query参数
* @param {Object} item - 菜单项
* @param {String} pathKey - 路径字段名
* @param {String} queryKey - query字段名
* @returns {Object} query参数
*/
export function generateIframeQuery(item, pathKey = 'path', queryKey = 'query') {
const originalPath = item[pathKey];
const existingQuery = item[queryKey] || {};
// 如果是URL且没有url参数，添加处理后的URL
if (URL_REGEX.test(originalPath)) {
// 保留现有query，只在没有url时添加
if (!existingQuery.url) {
return {
...existingQuery,
url: processUrlForQuery(originalPath)
};
}
}
return existingQuery;
}
/**
* 判断是否为iframe路由
* @param {String} path - 当前路径
* @param {String} originalPath - 原始路径
* @returns {Boolean} 是否为iframe路由
*/
export function isIframeRoute(path, originalPath) {
// 路径以/iframe/开头且原始路径是URL
return path && path.startsWith('/iframe/') && URL_REGEX.test(originalPath);
}
/**
* 判断路径是否为URL
* @param {String} path - 路径
* @returns {Boolean} 是否为URL
*/
export function isURL(path) {
return URL_REGEX.test(path);
}

132
src/router/tab.js Normal file
View File

@@ -0,0 +1,132 @@
import { h } from 'vue';
import store from '@/store';
import website from '@/config/website';
import { isURL } from './router';
import { formatPath } from './avue-router';
/**
* 标签页键控体系
*
* 三档键控语义：
* 1. 默认：以含参数的完整地址为键，地址不同（含参数不同）即独立标签、独立缓存
* 2. meta.tabKey = 'path'：以纯路径为键，同路径不同参数复用同一标签，参数原位刷新，
* 页面通过监听 $route.query 感知变化；菜单地址追加保留参数 _single=1 即启用
* 3. meta.isTab = false：不纳入标签体系，视图原样透传，由容器页自行管理
*/
/**
* 单标签模式的保留参数，仅作配置开关，不进入业务 query
*/
const SINGLE_TAB_PARAM = '_single';
/**
* 拆分地址中的参数部分
*/
export function parsePathQuery(fullPath) {
const splitIndex = fullPath.indexOf('?');
if (splitIndex === -1) return { path: fullPath, query: {} };
const query = {};
new URLSearchParams(fullPath.slice(splitIndex + 1)).forEach((value, key) => {
query[key] = value;
});
return { path: fullPath.slice(0, splitIndex), query };
}
/**
* 菜单树归一化：把配置在地址中的参数拆入 query 字段
* 组件解析与路由注册都依赖纯路径，须在 formatPath 之前执行
*/
export function normalizeMenu(menuList = []) {
const props = website.menu;
menuList.forEach(item => {
const rawPath = item[props.path];
if (rawPath && !isURL(rawPath) && rawPath.includes('?')) {
const { path, query } = parsePathQuery(rawPath);
item[props.path] = path;
item[props.query] = { ...query, ...(item[props.query] || {}) };
}
if (item[props.children] && item[props.children].length) {
normalizeMenu(item[props.children]);
}
});
}
/**
* 标签键控元数据落位：识别保留参数并写入 meta
* formatPath 会重建菜单的 meta 对象，须在其之后执行
*/
export function applyTabMeta(menuList = []) {
const props = website.menu;
menuList.forEach(item => {
const query = item[props.query];
if (query && query[SINGLE_TAB_PARAM] !== undefined) {
delete query[SINGLE_TAB_PARAM];
item.meta = item.meta || {};
item.meta.tabKey = 'path';
}
if (item[props.children] && item[props.children].length) {
applyTabMeta(item[props.children]);
}
});
}
/**
* 菜单格式化入口：归一化 → 框架格式化 → 键控元数据落位
*/
export function formatMenu(menuList = []) {
normalizeMenu(menuList);
menuList.forEach(ele => formatPath(ele, true));
applyTabMeta(menuList);
}
/**
* 路由的标签键：决定标签归属与缓存粒度，不纳入标签体系时返回 null
*/
export function tabKeyOf(route) {
const meta = route.meta || {};
if (meta.isTab === false) return null;
return meta.tabKey === 'path' ? route.path : route.fullPath;
}
/**
* 视图代理组件池：以标签键命名代理组件，使 keep-alive 的缓存实例与
* include 白名单都按标签粒度精确控制，同一页面组件开多个标签互不共享实例
*/
const wrapperMap = new Map();
let cleanupWatched = false;
/**
* 标签关闭后回收对应代理组件，避免长期驻留
*/
function watchTagCleanup() {
if (cleanupWatched) return;
cleanupWatched = true;
store.subscribe(mutation => {
if (['DEL_TAG', 'DEL_ALL_TAG', 'DEL_TAG_OTHER'].includes(mutation.type)) {
const alive = new Set(store.getters.tagList.map(tag => tag.fullPath));
wrapperMap.forEach((wrapper, key) => {
if (!alive.has(key)) wrapperMap.delete(key);
});
}
});
}
/**
* 主布局 router-view 的渲染入口
*/
export function tabView(route, Component) {
if (!Component) return Component;
const tabKey = tabKeyOf(route);
if (!tabKey) return Component;
watchTagCleanup();
let wrapper = wrapperMap.get(tabKey);
if (!wrapper) {
wrapper = {
name: tabKey,
render: () => h(Component),
};
wrapperMap.set(tabKey, wrapper);
}
return h(wrapper);
}

126
src/router/views/index.js Normal file
View File

@@ -0,0 +1,126 @@
import Layout from '@/page/index/index.vue';
import Store from '@/store/';
export default [
{
path: '/wel',
component: () =>
Store.getters.isMacOs ? import('@/mac/index.vue') : import('@/page/index/index.vue'),
redirect: '/wel/index',
children: [
{
path: 'index',
name: '首页',
meta: {
i18n: 'dashboard',
},
component: () => import(/* webpackChunkName: "views" */ '@/views/wel/index.vue'),
},
{
path: 'dashboard',
name: '控制台',
meta: {
i18n: 'dashboard',
menu: false,
},
component: () => import(/* webpackChunkName: "views" */ '@/views/wel/dashboard.vue'),
},
],
},
{
path: '/test',
component: Layout,
redirect: '/test/index',
children: [
{
path: 'index',
name: '测试页',
meta: {
i18n: 'test',
},
component: () => import(/* webpackChunkName: "views" */ '@/views/util/test.vue'),
},
],
},
{
path: '/dict-horizontal',
component: Layout,
redirect: '/dict-horizontal/index',
children: [
{
path: 'index',
name: '字典管理',
meta: {
i18n: 'dict',
},
component: () =>
import(/* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal.vue'),
},
],
},
{
path: '/dict-vertical',
component: Layout,
redirect: '/dict-vertical/index',
children: [
{
path: 'index',
name: '字典管理',
meta: {
i18n: 'dict',
},
component: () =>
import(/* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical.vue'),
},
],
},
{
path: '/info',
component: Layout,
redirect: '/info/index',
children: [
{
path: 'index',
name: '个人信息',
meta: {
i18n: 'info',
},
component: () => import(/* webpackChunkName: "views" */ '@/views/system/userinfo.vue'),
},
],
},
{
path: '/work/process/leave',
component: Layout,
redirect: '/work/process/leave/form',
children: [
{
path: 'form/:processDefinitionId',
name: '请假流程',
meta: {
i18n: 'work',
},
component: () =>
import(/* webpackChunkName: "views" */ '@/views/work/process/leave/form.vue'),
},
{
path: 'handle/:taskId/:processInstanceId/:businessId',
name: '处理请假流程',
meta: {
i18n: 'work',
},
component: () =>
import(/* webpackChunkName: "views" */ '@/views/work/process/leave/handle.vue'),
},
{
path: 'detail/:processInstanceId/:businessId',
name: '请假流程详情',
meta: {
i18n: 'work',
},
component: () =>
import(/* webpackChunkName: "views" */ '@/views/work/process/leave/detail.vue'),
},
],
},
];