feat: 路由参数
This commit is contained in:
parent
fffe2d0db9
commit
60d513ce40
@ -85,6 +85,16 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
|
|||||||
path: menu.path,
|
path: menu.path,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 添加路由参数信息
|
||||||
|
if (menu.query) {
|
||||||
|
try {
|
||||||
|
const query = JSON.parse(menu.query);
|
||||||
|
vbenRoute.meta && (vbenRoute.meta.query = query);
|
||||||
|
} catch {
|
||||||
|
console.error('错误的路由参数类型, 必须为[json]格式');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理不同组件
|
* 处理不同组件
|
||||||
*/
|
*/
|
||||||
|
@ -325,11 +325,10 @@ export const drawerSchema: FormSchemaGetter = () => [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
componentProps: () => ({
|
componentProps: (model) => ({
|
||||||
// 为链接时组件disabled
|
// 为链接时组件disabled
|
||||||
// disabled: model.isFrame === '0',
|
disabled: model.isFrame === '0',
|
||||||
placeholder: '暂未实现功能',
|
placeholder: '必须为json字符串格式',
|
||||||
disabled: true,
|
|
||||||
}),
|
}),
|
||||||
dependencies: {
|
dependencies: {
|
||||||
// 类型为菜单时显示
|
// 类型为菜单时显示
|
||||||
|
17
apps/web-antd/src/views/演示使用自行删除/query/index.vue
Normal file
17
apps/web-antd/src/views/演示使用自行删除/query/index.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import { JsonPreview, Page } from '@vben/common-ui';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const query = route.query;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page>
|
||||||
|
<div class="bg-background rounded-lg p-4">
|
||||||
|
<span>当前参数:</span>
|
||||||
|
<JsonPreview :data="query" />
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
|
</template>
|
@ -102,6 +102,10 @@ interface RouteMeta {
|
|||||||
* 用于路由->菜单排序
|
* 用于路由->菜单排序
|
||||||
*/
|
*/
|
||||||
order?: number;
|
order?: number;
|
||||||
|
/**
|
||||||
|
* 路由参数 对象形式
|
||||||
|
*/
|
||||||
|
query?: Record<string, any>;
|
||||||
/**
|
/**
|
||||||
* 标题名称
|
* 标题名称
|
||||||
*/
|
*/
|
||||||
|
@ -10,6 +10,7 @@ import {
|
|||||||
generateRoutesByBackend,
|
generateRoutesByBackend,
|
||||||
generateRoutesByFrontend,
|
generateRoutesByFrontend,
|
||||||
mapTree,
|
mapTree,
|
||||||
|
setObjToUrlParams,
|
||||||
} from '@vben/utils';
|
} from '@vben/utils';
|
||||||
|
|
||||||
async function generateAccessible(
|
async function generateAccessible(
|
||||||
@ -82,7 +83,14 @@ async function generateRoutes(
|
|||||||
return route;
|
return route;
|
||||||
}
|
}
|
||||||
|
|
||||||
route.redirect = firstChild.path;
|
// 第一个路由如果有query参数 需要加上参数
|
||||||
|
const fistChildQuery = route.children[0]?.meta?.query;
|
||||||
|
// 根目录菜单固定只有一个children 且path为/ 不需要添加redirect
|
||||||
|
route.redirect =
|
||||||
|
fistChildQuery && route.children.length !== 1 && route.path !== '/'
|
||||||
|
? setObjToUrlParams(firstChild.path, fistChildQuery)
|
||||||
|
: firstChild.path;
|
||||||
|
|
||||||
return route;
|
return route;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,14 +1,21 @@
|
|||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
import { isHttpUrl, openWindow } from '@vben/utils';
|
import { isHttpUrl, isObject, openWindow } from '@vben/utils';
|
||||||
|
|
||||||
function useNavigation() {
|
function useNavigation() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const allRoutes = router.getRoutes();
|
||||||
|
|
||||||
const navigation = async (path: string) => {
|
const navigation = async (path: string) => {
|
||||||
if (isHttpUrl(path)) {
|
if (isHttpUrl(path)) {
|
||||||
openWindow(path, { target: '_blank' });
|
openWindow(path, { target: '_blank' });
|
||||||
} else {
|
} else {
|
||||||
|
// 带路由参数
|
||||||
|
const found = allRoutes.find((item) => item.path === path);
|
||||||
|
if (found && isObject(found.meta.query)) {
|
||||||
|
await router.push({ path, query: found.meta.query });
|
||||||
|
return;
|
||||||
|
}
|
||||||
await router.push(path);
|
await router.push(path);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -5,6 +5,7 @@ export * from './generate-routes-frontend';
|
|||||||
export * from './get-popup-container';
|
export * from './get-popup-container';
|
||||||
export * from './merge-route-modules';
|
export * from './merge-route-modules';
|
||||||
export * from './mitt';
|
export * from './mitt';
|
||||||
|
export * from './request';
|
||||||
export * from './reset-routes';
|
export * from './reset-routes';
|
||||||
export * from './safe';
|
export * from './safe';
|
||||||
export * from './tree';
|
export * from './tree';
|
||||||
|
72
packages/utils/src/helpers/request.ts
Normal file
72
packages/utils/src/helpers/request.ts
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
/**
|
||||||
|
* 一些发送请求 需要用到的工具
|
||||||
|
*/
|
||||||
|
import { isObject, isString } from '@vben-core/shared/utils';
|
||||||
|
|
||||||
|
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
|
||||||
|
|
||||||
|
export function joinTimestamp<T extends boolean>(
|
||||||
|
join: boolean,
|
||||||
|
restful: T,
|
||||||
|
): T extends true ? string : object;
|
||||||
|
|
||||||
|
export function joinTimestamp(join: boolean, restful = false): object | string {
|
||||||
|
if (!join) {
|
||||||
|
return restful ? '' : {};
|
||||||
|
}
|
||||||
|
const now = Date.now();
|
||||||
|
if (restful) {
|
||||||
|
return `?_t=${now}`;
|
||||||
|
}
|
||||||
|
return { _t: now };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: Format request parameter time
|
||||||
|
*/
|
||||||
|
export function formatRequestDate(params: Record<string, any>) {
|
||||||
|
if (Object.prototype.toString.call(params) !== '[object Object]') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const key in params) {
|
||||||
|
const format = params[key]?.format ?? null;
|
||||||
|
if (format && typeof format === 'function') {
|
||||||
|
params[key] = params[key].format(DATE_TIME_FORMAT);
|
||||||
|
}
|
||||||
|
if (isString(key)) {
|
||||||
|
const value = params[key];
|
||||||
|
if (value) {
|
||||||
|
try {
|
||||||
|
params[key] = isString(value) ? value.trim() : value;
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isObject(params[key])) {
|
||||||
|
formatRequestDate(params[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the object as a parameter to the URL
|
||||||
|
* @param baseUrl url
|
||||||
|
* @param obj
|
||||||
|
* @returns {string}
|
||||||
|
* eg:
|
||||||
|
* let obj = {a: '3', b: '4'}
|
||||||
|
* setObjToUrlParams('www.baidu.com', obj)
|
||||||
|
* ==>www.baidu.com?a=3&b=4
|
||||||
|
*/
|
||||||
|
export function setObjToUrlParams(baseUrl: string, obj: any): string {
|
||||||
|
let parameters = '';
|
||||||
|
for (const key in obj) {
|
||||||
|
parameters += `${key}=${encodeURIComponent(obj[key])}&`;
|
||||||
|
}
|
||||||
|
parameters = parameters.replace(/&$/, '');
|
||||||
|
return /\?$/.test(baseUrl)
|
||||||
|
? baseUrl + parameters
|
||||||
|
: baseUrl.replace(/\/?$/, '?') + parameters;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user