feat: 路由参数
This commit is contained in:
parent
fffe2d0db9
commit
60d513ce40
@ -85,6 +85,16 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
|
||||
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',
|
||||
componentProps: () => ({
|
||||
componentProps: (model) => ({
|
||||
// 为链接时组件disabled
|
||||
// disabled: model.isFrame === '0',
|
||||
placeholder: '暂未实现功能',
|
||||
disabled: true,
|
||||
disabled: model.isFrame === '0',
|
||||
placeholder: '必须为json字符串格式',
|
||||
}),
|
||||
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;
|
||||
/**
|
||||
* 路由参数 对象形式
|
||||
*/
|
||||
query?: Record<string, any>;
|
||||
/**
|
||||
* 标题名称
|
||||
*/
|
||||
|
@ -10,6 +10,7 @@ import {
|
||||
generateRoutesByBackend,
|
||||
generateRoutesByFrontend,
|
||||
mapTree,
|
||||
setObjToUrlParams,
|
||||
} from '@vben/utils';
|
||||
|
||||
async function generateAccessible(
|
||||
@ -82,7 +83,14 @@ async function generateRoutes(
|
||||
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;
|
||||
});
|
||||
|
||||
|
@ -1,14 +1,21 @@
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { isHttpUrl, openWindow } from '@vben/utils';
|
||||
import { isHttpUrl, isObject, openWindow } from '@vben/utils';
|
||||
|
||||
function useNavigation() {
|
||||
const router = useRouter();
|
||||
const allRoutes = router.getRoutes();
|
||||
|
||||
const navigation = async (path: string) => {
|
||||
if (isHttpUrl(path)) {
|
||||
openWindow(path, { target: '_blank' });
|
||||
} 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);
|
||||
}
|
||||
};
|
||||
|
@ -5,6 +5,7 @@ export * from './generate-routes-frontend';
|
||||
export * from './get-popup-container';
|
||||
export * from './merge-route-modules';
|
||||
export * from './mitt';
|
||||
export * from './request';
|
||||
export * from './reset-routes';
|
||||
export * from './safe';
|
||||
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