GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): page: support manage_menu more options. close #366

Browse Source
This commit is contained in:
Soybean 2024-05-07 01:36:22 +08:00
parent ebe55af7d5
commit c4b5c65625
9 changed files with 286 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/modules/global-menu/base-menu.vue
View File

@ -57,7 +57,7 @@ function updateExpandedKeys() {
}
function handleClickMenu(key: RouteKey) {
const { query } = routeStore.getSelectedMenuMetaByKey(key) || {};
const query = routeStore.getRouteQueryOfMetaByKey(key);
routerPushByKey(key, { query });
}

5
src/locales/langs/en-us.ts
View File

@ -362,7 +362,7 @@ const local: App.I18n.Schema = {
menuName: 'Menu Name',
routeName: 'Route Name',
routePath: 'Route Path',
routeParams: 'Route Params',
pathParam: 'Path Param',
layout: 'Layout Component',
page: 'Page Component',
i18nKey: 'I18n Key',
@ -377,7 +377,6 @@ const local: App.I18n.Schema = {
activeMenu: 'Active Menu',
multiTab: 'Multi Tab',
fixedIndexInTab: 'Fixed Index In Tab',
roles: 'Roles',
query: 'Query Params',
button: 'Button',
buttonCode: 'Button Code',
@ -389,6 +388,7 @@ const local: App.I18n.Schema = {
menuName: 'Please enter menu name',
routeName: 'Please enter route name',
routePath: 'Please enter route path',
pathParam: 'Please enter path param',
page: 'Please select page component',
layout: 'Please select layout component',
i18nKey: 'Please enter i18n key',
@ -402,7 +402,6 @@ const local: App.I18n.Schema = {
multiTab: 'Please select whether to support multiple tabs',
fixedInTab: 'Please select whether to fix in the tab',
fixedIndexInTab: 'Please enter the index fixed in the tab',
roles: 'Please select roles',
queryKey: 'Please enter route parameter Key',
queryValue: 'Please enter route parameter Value',
button: 'Please select whether it is a button',

5
src/locales/langs/zh-cn.ts
View File

@ -362,7 +362,7 @@ const local: App.I18n.Schema = {
menuName: '菜单名称',
routeName: '路由名称',
routePath: '路由路径',
routeParams: '路由参数',
pathParam: '路径参数',
layout: '布局',
page: '页面组件',
i18nKey: '国际化key',
@ -377,7 +377,6 @@ const local: App.I18n.Schema = {
activeMenu: '高亮的菜单',
multiTab: '支持多页签',
fixedIndexInTab: '固定在页签中的序号',
roles: '角色',
query: '路由参数',
button: '按钮',
buttonCode: '按钮编码',
@ -389,6 +388,7 @@ const local: App.I18n.Schema = {
menuName: '请输入菜单名称',
routeName: '请输入路由名称',
routePath: '请输入路由路径',
pathParam: '请输入路径参数',
page: '请选择页面组件',
layout: '请选择布局组件',
i18nKey: '请输入国际化key',
@ -402,7 +402,6 @@ const local: App.I18n.Schema = {
multiTab: '请选择是否支持多标签',
fixedInTab: '请选择是否固定在页签中',
fixedIndexInTab: '请输入固定在页签中的序号',
roles: '请选择角色',
queryKey: '请输入路由参数Key',
queryValue: '请输入路由参数Value',
button: '请选择是否按钮',

28
src/store/modules/route/index.ts
View File

@ -332,15 +332,31 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
}
/**
* Get selected menu meta by key
* Get route meta by key
*
* @param selectedKey Selected menu key
* @param key Route key
*/
function getSelectedMenuMetaByKey(selectedKey: string) {
// The routes in router.options.routes are static, you need to use router.getRoutes() to get all the routes.
function getRouteMetaByKey(key: string) {
const allRoutes = router.getRoutes();
return allRoutes.find(route => route.name === selectedKey)?.meta || null;
return allRoutes.find(route => route.name === key)?.meta || null;
}
/**
* Get route query of meta by key
*
* @param key
*/
function getRouteQueryOfMetaByKey(key: string) {
const meta = getRouteMetaByKey(key);
const query: Record<string, string> = {};
meta?.query?.forEach(item => {
query[item.key] = item.value;
});
return query;
}
return {
@ -360,6 +376,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
setIsInitAuthRoute,
getIsAuthRouteExist,
getSelectedMenuKeyPath,
getSelectedMenuMetaByKey
getRouteQueryOfMetaByKey
};
});

64
src/typings/api.d.ts vendored
View File

@ -171,6 +171,20 @@ declare namespace Api {
*/
type IconType = '1' | '2';
type MenuPropsOfRoute = Pick<
import('vue-router').RouteMeta,
| 'i18nKey'
| 'keepAlive'
| 'constant'
| 'order'
| 'href'
| 'hideInMenu'
| 'activeMenu'
| 'multiTab'
| 'fixedIndexInTab'
| 'query'
>;
type Menu = Common.CommonRecord<{
/** parent menu id */
parentId: number;
@ -184,56 +198,16 @@ declare namespace Api {
routePath: string;
/** component */
component?: string;
/**
* i18n key
*
* it is for internationalization
*/
i18nKey?: App.I18n.I18nKey;
/** iconify icon name or local icon name */
icon: string;
/** icon type */
iconType: IconType;
/** menu order */
order: number;
/** whether to cache the route */
keepAlive?: boolean;
/**
* Is constant route
*
* Does not need to login, and the route is defined in the front-end
*/
constant?: boolean;
/** outer link */
href?: string;
/** whether to hide the route in the menu */
hideInMenu?: boolean;
/**
* The menu key will be activated when entering the route
*
* The route is not in the menu
*
* @example
* the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
*/
activeMenu?: import('@elegant-router/types').LastLevelRouteKey;
/** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
multiTab?: boolean;
/** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
fixedIndexInTab?: number | null;
/** if set query parameters, it will be automatically carried when entering the route */
query: Record<string, string>;
/** menu buttons */
buttons?: MenuButton[];
/**
* Roles of the route
*
* Route can be accessed if the current user has at least one of the roles
*/
roles?: string[];
/** buttons */
buttons?: MenuButton[] | null;
/** children menu */
children?: Menu[];
}>;
children?: Menu[] | null;
}> &
MenuPropsOfRoute;
/** menu list */
type MenuList = Common.PaginatingQueryRecord<Menu>;

9
src/typings/app.d.ts vendored
View File

@ -158,7 +158,7 @@ declare namespace App {
/** The menu label */
label: string;
/** The menu i18n key */
i18nKey?: I18n.I18nKey;
i18nKey?: I18n.I18nKey | null;
/** The route key */
routeKey: RouteKey;
/** The route path */
@ -216,7 +216,7 @@ declare namespace App {
*/
localIcon?: string;
/** I18n key */
i18nKey?: I18n.I18nKey;
i18nKey?: I18n.I18nKey | null;
};
/** Form rule */
@ -537,7 +537,7 @@ declare namespace App {
menuName: string;
routeName: string;
routePath: string;
routeParams: string;
pathParam: string;
layout: string;
page: string;
i18nKey: string;
@ -552,7 +552,6 @@ declare namespace App {
activeMenu: string;
multiTab: string;
fixedIndexInTab: string;
roles: string;
query: string;
button: string;
buttonCode: string;
@ -564,6 +563,7 @@ declare namespace App {
menuName: string;
routeName: string;
routePath: string;
pathParam: string;
layout: string;
page: string;
i18nKey: string;
@ -577,7 +577,6 @@ declare namespace App {
multiTab: string;
fixedInTab: string;
fixedIndexInTab: string;
roles: string;
queryKey: string;
queryValue: string;
button: string;

20
src/typings/router.d.ts vendored
View File

@ -13,21 +13,23 @@ declare module 'vue-router' {
*
* It's used in i18n, if it is set, the title will be ignored
*/
i18nKey?: App.I18n.I18nKey;
i18nKey?: App.I18n.I18nKey | null;
/**
* Roles of the route
*
* Route can be accessed if the current user has at least one of the roles
*
* It only works when the route mode is "static", if the route mode is "dynamic", it will be ignored
*/
roles?: string[];
/** Whether to cache the route */
keepAlive?: boolean;
keepAlive?: boolean | null;
/**
* Is constant route
*
* Does not need to login, and the route is defined in the front-end
*/
constant?: boolean;
constant?: boolean | null;
/**
* Iconify icon
*
@ -41,11 +43,11 @@ declare module 'vue-router' {
*/
localIcon?: string;
/** Router order */
order?: number;
order?: number | null;
/** The outer link of the route */
href?: string;
href?: string | null;
/** Whether to hide the route in the menu */
hideInMenu?: boolean;
hideInMenu?: boolean | null;
/**
* The menu key will be activated when entering the route
*
@ -54,12 +56,12 @@ declare module 'vue-router' {
* @example
* the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
*/
activeMenu?: import('@elegant-router/types').RouteKey;
activeMenu?: import('@elegant-router/types').RouteKey | null;
/** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
multiTab?: boolean;
multiTab?: boolean | null;
/** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
fixedIndexInTab?: number | null;
/** if set query parameters, it will be automatically carried when entering the route */
query?: Record<string, string>;
query?: { key: string; value: string }[] | null;
}
}

311
src/views/manage/menu/modules/menu-operate-drawer.vue
View File

@ -1,8 +1,6 @@
<script setup lang="tsx">
import type { Ref } from 'vue';
import { computed, reactive, ref, watch } from 'vue';
import type { SelectOption } from 'naive-ui';
import type { LastLevelRouteKey } from '@elegant-router/types';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
@ -11,9 +9,10 @@ import { getLocalIcons } from '@/utils/icon';
import { fetchGetAllRoles } from '@/service/api';
import {
getLayoutAndPage,
transformLayoutAndPageToComponent,
transformToKeyValuePairs,
transformToQueryObject
getPathParamFromRoutePath,
getRoutePathByRouteName,
getRoutePathWithParam,
transformLayoutAndPageToComponent
} from './shared';
defineOptions({
@ -59,28 +58,28 @@ type Model = Pick<
Api.SystemManage.Menu,
| 'menuType'
| 'menuName'
| 'i18nKey'
| 'icon'
| 'iconType'
| 'routeName'
| 'routePath'
| 'component'
| 'order'
| 'i18nKey'
| 'icon'
| 'iconType'
| 'status'
| 'parentId'
| 'keepAlive'
| 'constant'
| 'href'
| 'hideInMenu'
| 'activeMenu'
| 'order'
| 'parentId'
| 'constant'
| 'keepAlive'
| 'href'
| 'multiTab'
| 'fixedIndexInTab'
| 'roles'
| 'buttons'
| 'query'
> & {
query: NonNullable<Api.SystemManage.Menu['query']>;
buttons: NonNullable<Api.SystemManage.Menu['buttons']>;
layout: string;
page: string;
pathParam: string;
};
const model: Model = reactive(createDefaultModel());
@ -89,26 +88,27 @@ function createDefaultModel(): Model {
return {
menuType: '1',
menuName: '',
i18nKey: '' as App.I18n.I18nKey,
icon: '',
iconType: '1',
routeName: '',
routePath: '',
pathParam: '',
component: '',
layout: '',
page: '',
status: '1',
hideInMenu: false,
activeMenu: '' as LastLevelRouteKey,
order: 0,
i18nKey: null,
icon: '',
iconType: '1',
parentId: 0,
constant: false,
status: '1',
keepAlive: false,
href: '',
constant: false,
order: 0,
href: null,
hideInMenu: false,
activeMenu: null,
multiTab: false,
fixedIndexInTab: null,
roles: [],
buttons: [],
query: {}
query: [],
buttons: []
};
}
@ -164,13 +164,6 @@ const layoutOptions: CommonType.Option[] = [
}
];
const dynamicQueryKeyValuePairs: Ref<Record<string, string>[]> = ref([
{
key: '',
value: ''
}
]);
/** the enabled role options */
const roleOptions = ref<CommonType.Option<string>[]>([]);
@ -199,12 +192,19 @@ function handleInitModel() {
}
if (props.operateType === 'edit') {
const { component, query, ...rest } = props.rowData;
const { component, ...rest } = props.rowData;
const { layout, page } = getLayoutAndPage(component);
const { path, param } = getPathParamFromRoutePath(rest.routePath);
Object.assign(model, rest, { layout, page });
dynamicQueryKeyValuePairs.value = transformToKeyValuePairs(query);
Object.assign(model, rest, { layout, page, routePath: path, pathParam: param });
}
if (!model.query) {
model.query = [];
}
if (!model.buttons) {
model.buttons = [];
}
}
@ -212,16 +212,49 @@ function closeDrawer() {
visible.value = false;
}
function handleUpdateRoutePathByRouteName() {
if (model.routeName) {
model.routePath = getRoutePathByRouteName(model.routeName);
} else {
model.routePath = '';
}
}
function handleUpdateI18nKeyByRouteName() {
if (model.routeName) {
model.i18nKey = `route.${model.routeName}` as App.I18n.I18nKey;
} else {
model.i18nKey = null;
}
}
function handleCreateButton() {
const buttonItem: Api.SystemManage.MenuButton = {
code: '',
desc: ''
};
return buttonItem;
}
function getSubmitParams() {
const { layout, page, pathParam, ...params } = model;
const component = transformLayoutAndPageToComponent(layout, page);
const routePath = getRoutePathWithParam(model.routePath, pathParam);
params.component = component;
params.routePath = routePath;
return params;
}
async function handleSubmit() {
await validate();
model.component = transformLayoutAndPageToComponent(model.layout, model.page);
model.query = transformToQueryObject(dynamicQueryKeyValuePairs.value);
const params = getSubmitParams();
// model.buttons = [];
// Need: Get buttons based on roles
console.log('model:', model);
console.log('params: ', params);
// request
window.$message?.success($t('common.updateSuccess'));
@ -236,68 +269,59 @@ watch(visible, () => {
getRoleOptions();
}
});
watch(
() => model.routeName,
() => {
handleUpdateRoutePathByRouteName();
handleUpdateI18nKeyByRouteName();
}
);
</script>
<template>
<NModal v-model:show="visible" :title="title" preset="card" class="w-720px">
<NScrollbar class="h-400px">
<NModal v-model:show="visible" :title="title" preset="card" class="w-800px">
<NScrollbar class="h-480px">
<NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="100">
<NGrid>
<NFormItemGi span="12" :label="$t('page.manage.menu.menuType')" path="menuType">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuType')" path="menuType">
<NRadioGroup v-model:value="model.menuType" :disabled="disabledMenuType">
<NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.order')" path="order">
<NInputNumber v-model:value="model.order" :placeholder="$t('page.manage.menu.form.order')" />
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.menuName')" path="menuName">
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuName')" path="menuName">
<NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.i18nKey')" path="i18nKey">
<NInput v-model:value="model.i18nKey" :placeholder="$t('page.manage.menu.form.i18nKey')" />
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.routeName')" path="routeName">
<NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.menuStatus')" path="status">
<NRadioGroup v-model:value="model.status">
<NRadio
v-for="item in enableStatusOptions"
:key="item.value"
:value="item.value"
:label="$t(item.label)"
/>
</NRadioGroup>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.routePath')" path="routePath">
<NInput v-model:value="model.routePath" disabled :placeholder="$t('page.manage.menu.form.routePath')" />
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
<NRadioGroup v-model:value="model.hideInMenu">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.pathParam')" path="pathParam">
<NInput v-model:value="model.pathParam" :placeholder="$t('page.manage.menu.form.pathParam')" />
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.keepAlive')" path="keepAlive">
<NRadioGroup v-model:value="model.keepAlive">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.constant')" path="constant">
<NRadioGroup v-model:value="model.constant">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.multiTab')" path="multiTab">
<NRadioGroup v-model:value="model.multiTab">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="12" :label="$t('page.manage.menu.fixedIndexInTab')" path="fixedIndexInTab">
<NInputNumber
v-model:value="model.fixedIndexInTab"
:placeholder="$t('page.manage.menu.form.fixedIndexInTab')"
<NFormItemGi v-if="showLayout" span="24 m:12" :label="$t('page.manage.menu.layout')" path="layout">
<NSelect
v-model:value="model.layout"
:options="layoutOptions"
:placeholder="$t('page.manage.menu.form.layout')"
/>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
<NFormItemGi v-if="showPage" span="24 m:12" :label="$t('page.manage.menu.page')" path="page">
<NSelect
v-model:value="model.page"
:options="pageOptions"
:placeholder="$t('page.manage.menu.form.page')"
/>
</NFormItemGi>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.i18nKey')" path="i18nKey">
<NInput v-model:value="model.i18nKey" :placeholder="$t('page.manage.menu.form.i18nKey')" />
</NFormItemGi>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.order')" path="order">
<NInputNumber v-model:value="model.order" class="w-full" :placeholder="$t('page.manage.menu.form.order')" />
</NFormItemGi>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
<NRadioGroup v-model:value="model.iconType">
<NRadio
v-for="item in menuIconTypeOptions"
@ -307,7 +331,7 @@ watch(visible, () => {
/>
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.icon')" path="icon">
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.icon')" path="icon">
<template v-if="model.iconType === '1'">
<NInput v-model:value="model.icon" :placeholder="$t('page.manage.menu.form.icon')" class="flex-1">
<template #suffix>
@ -323,53 +347,102 @@ watch(visible, () => {
/>
</template>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.routeName')" path="routeName">
<NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuStatus')" path="status">
<NRadioGroup v-model:value="model.status">
<NRadio
v-for="item in enableStatusOptions"
:key="item.value"
:value="item.value"
:label="$t(item.label)"
/>
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.routePath')" path="routePath">
<NInput v-model:value="model.routePath" :placeholder="$t('page.manage.menu.form.routePath')" />
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.keepAlive')" path="keepAlive">
<NRadioGroup v-model:value="model.keepAlive">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi v-if="showLayout" span="24" :label="$t('page.manage.menu.layout')" path="layout">
<NSelect
v-model:value="model.layout"
:options="layoutOptions"
:placeholder="$t('page.manage.menu.form.layout')"
/>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.constant')" path="constant">
<NRadioGroup v-model:value="model.constant">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi v-if="showPage" span="24" :label="$t('page.manage.menu.page')" path="page">
<NSelect
v-model:value="model.page"
:options="pageOptions"
:placeholder="$t('page.manage.menu.form.page')"
/>
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.href')" path="href">
<NInput v-model:value="model.href" :placeholder="$t('page.manage.menu.form.href')" />
</NFormItemGi>
<NFormItemGi v-if="showPage" span="24" :label="$t('page.manage.menu.activeMenu')" path="activeMenu">
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
<NRadioGroup v-model:value="model.hideInMenu">
<!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
<NRadio :value="true" :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi
v-if="model.hideInMenu"
span="24 m:12"
:label="$t('page.manage.menu.activeMenu')"
path="activeMenu"
>
<NSelect
v-model:value="model.activeMenu"
:options="pageOptions"
clearable
:placeholder="$t('page.manage.menu.form.activeMenu')"
/>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.href')" path="href">
<NInput v-model:value="model.href" :placeholder="$t('page.manage.menu.form.href')" />
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.multiTab')" path="multiTab">
<NRadioGroup v-model:value="model.multiTab">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.roles')" path="roles">
<NSelect
v-model:value="model.roles"
multiple
:options="roleOptions"
:placeholder="$t('page.manage.menu.form.roles')"
<NFormItemGi span="24 m:12" :label="$t('page.manage.menu.fixedIndexInTab')" path="fixedIndexInTab">
<NInputNumber
v-model:value="model.fixedIndexInTab"
class="w-full"
clearable
:placeholder="$t('page.manage.menu.form.fixedIndexInTab')"
/>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.query')">
<NDynamicInput
v-model:value="dynamicQueryKeyValuePairs"
v-model:value="model.query"
preset="pair"
:key-placeholder="$t('page.manage.menu.form.queryKey')"
:value-placeholder="$t('page.manage.menu.form.queryValue')"
>
<template #action="{ index, create, remove }">
<NSpace class="ml-2">
<NSpace class="ml-12px">
<NButton size="medium" @click="() => create(index)">
<icon-ic:round-plus class="text-icon" />
</NButton>
<NButton size="medium" @click="() => remove(index)">
<icon-ic-round-remove class="text-icon" />
</NButton>
</NSpace>
</template>
</NDynamicInput>
</NFormItemGi>
<NFormItemGi span="24" :label="$t('page.manage.menu.button')">
<NDynamicInput v-model:value="model.buttons" :on-create="handleCreateButton">
<template #default="{ value }">
<div class="ml-8px flex-y-center flex-1 gap-12px">
<NInput
v-model:value="value.code"
:placeholder="$t('page.manage.menu.form.buttonCode')"
class="flex-1"
/>
<NInput
v-model:value="value.desc"
:placeholder="$t('page.manage.menu.form.buttonDesc')"
class="flex-1"
/>
</div>
</template>
<template #action="{ index, create, remove }">
<NSpace class="ml-12px">
<NButton size="medium" @click="() => create(index)">
<icon-ic:round-plus class="text-icon" />
</NButton>

47
src/views/manage/menu/modules/shared.ts
View File

@ -41,20 +41,39 @@ export function transformLayoutAndPageToComponent(layout: string, page: string)
return '';
}
export function transformToQueryObject(data: Record<string, string>[]) {
const query: Record<string, string> = {};
data.forEach(pair => {
if (pair.key && pair.value) {
query[pair.key] = pair.value;
}
});
return query;
/**
* Get route name by route path
*
* @param routeName
*/
export function getRoutePathByRouteName(routeName: string) {
return `/${routeName.replace(/_/g, '/')}`;
}
export function transformToKeyValuePairs(query?: Record<string, string>) {
const safeQuery = query || {};
return Object.entries(safeQuery).map(([key, value]) => ({
key,
value
}));
/**
* Get path param from route path
*
* @param routePath route path
*/
export function getPathParamFromRoutePath(routePath: string) {
const [path, param = ''] = routePath.split('/:');
return {
path,
param
};
}
/**
* Get route path with param
*
* @param routePath route path
* @param param path param
*/
export function getRoutePathWithParam(routePath: string, param: string) {
if (param.trim()) {
return `${routePath}/:${param}`;
}
return routePath;
}