feat: 路由参数

apps/web-antd/src/router/access.ts

@@ -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]格式');
+        }
+      }
+
       /**
        * 处理不同组件
        */

apps/web-antd/src/views/system/menu/data.tsx

@@ -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: {
       // 类型为菜单时显示

apps/web-antd/src/views/演示使用自行删除/query/index.vue

@@ -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>

packages/@core/base/typings/src/vue-router.d.ts

@@ -102,6 +102,10 @@ interface RouteMeta {
    * 用于路由->菜单排序
    */
   order?: number;
+  /**
+   * 路由参数 对象形式
+   */
+  query?: Record<string, any>;
   /**
    * 标题名称
    */

packages/effects/access/src/accessible.ts

@@ -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;
   });
 

packages/effects/layouts/src/basic/menu/use-navigation.ts

@@ -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);
     }
   };

packages/utils/src/helpers/index.ts

@@ -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';

packages/utils/src/helpers/request.ts

@@ -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;
+}