!3 perf: menu add i18n
Merge pull request !3 from small monkey/menu-i18n
This commit is contained in:
commit
c53f320fef
@ -551,19 +551,40 @@ const local: App.I18n.Schema = {
|
||||
},
|
||||
menu: {
|
||||
title: 'Menu List',
|
||||
parentId: 'Parent Menu',
|
||||
iconType: 'Icon Type',
|
||||
menuName: 'Menu Name',
|
||||
icon: 'Menu Icon',
|
||||
sort: 'Sort',
|
||||
permission: 'Permission',
|
||||
orderNum: 'Sort',
|
||||
perms: 'Permission Code',
|
||||
component: 'Component Path',
|
||||
path: 'Route Path',
|
||||
externalPath: 'External Path',
|
||||
query: 'Route Parameters',
|
||||
iframeQuery: 'Iframe Address',
|
||||
isFrame: 'External Link',
|
||||
isCache: 'Cache',
|
||||
menuType: 'Menu Type',
|
||||
visible: 'Visible',
|
||||
status: 'Status',
|
||||
createTime: 'Create Time',
|
||||
cache: 'cache',
|
||||
noCache: 'No Cache',
|
||||
rootName: 'Root',
|
||||
buttonPermissionList: 'Button Permission List',
|
||||
emptyMenu: 'Empty Menu',
|
||||
menuDetail: 'Menu Detail',
|
||||
iconifyTip: 'iconify address:`https://icones.js.org`',
|
||||
isFrameTip: 'If you choose External Link, the routing address needs to start with `http(s)://`',
|
||||
isCacheTip:
|
||||
'If you select yes, it will be cached by `keep-alive`, and the `name` and address of the matching component must be consistent',
|
||||
visibleTip: 'If you choose Hide, the route will not appear in the sidebar, but it can still be accessed.',
|
||||
statusTip: 'If you choose to disable, the route will not appear in the sidebar and cannot be accessed.',
|
||||
permsTip: "Permission string defined in the controller, such as: @SaCheckPermission('system:user:list')",
|
||||
componentTip:
|
||||
'The component path to access, such as: `system/user/index`, which is in the `views` directory by default',
|
||||
pathTip:
|
||||
'Router path,Example:`user`,If the external network address needs to be accessed in the internal link,then `http(s)://` beginning',
|
||||
form: {
|
||||
parentId: {
|
||||
required: 'Please select Parent Menu',
|
||||
@ -581,9 +602,13 @@ const local: App.I18n.Schema = {
|
||||
required: 'Please enter Menu Name',
|
||||
invalid: 'Menu Name cannot be empty'
|
||||
},
|
||||
sort: {
|
||||
required: 'Please enter Sort',
|
||||
invalid: 'Sort cannot be empty'
|
||||
perms: {
|
||||
required: 'Please enter permission code',
|
||||
invalid: 'Permission code cannot be empty'
|
||||
},
|
||||
orderNum: {
|
||||
required: 'Please enter order num',
|
||||
invalid: 'Order num cannot be empty'
|
||||
},
|
||||
isFrame: {
|
||||
required: 'Please select External Link',
|
||||
@ -618,10 +643,18 @@ const local: App.I18n.Schema = {
|
||||
invalid: 'Permission cannot be empty'
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
iconifyIconPlaceholder: 'Please enter an icon',
|
||||
localIconPlaceholder: 'Please select the local icon',
|
||||
queryKey: 'Please enter a key',
|
||||
queryValue: 'Please enter a value',
|
||||
queryIframe: 'Please enter a iframe address'
|
||||
},
|
||||
directory: 'Directory',
|
||||
menu: 'Menu',
|
||||
button: 'Button',
|
||||
addMenu: 'Add Menu',
|
||||
addChildMenu: 'Add Child Menu',
|
||||
editMenu: 'Edit Menu'
|
||||
},
|
||||
notice: {
|
||||
|
@ -551,19 +551,38 @@ const local: App.I18n.Schema = {
|
||||
},
|
||||
menu: {
|
||||
title: '菜单列表',
|
||||
parentId: '上级菜单',
|
||||
iconType: '图标类型',
|
||||
menuName: '菜单名称',
|
||||
icon: '菜单图标',
|
||||
sort: '排序',
|
||||
permission: '权限标识',
|
||||
orderNum: '排序',
|
||||
perms: '权限字符',
|
||||
component: '组件路径',
|
||||
path: '路由地址',
|
||||
externalPath: '外链地址',
|
||||
query: '路由参数',
|
||||
iframeQuery: 'iframe 地址',
|
||||
isFrame: '是否外链',
|
||||
isCache: '是否缓存',
|
||||
menuType: '菜单类型',
|
||||
visible: '显示状态',
|
||||
status: '菜单状态',
|
||||
createTime: '创建时间',
|
||||
cache: '缓存',
|
||||
noCache: '不缓存',
|
||||
rootName: '根目录',
|
||||
buttonPermissionList: '按钮权限列表',
|
||||
emptyMenu: '暂无菜单',
|
||||
menuDetail: '菜单详情',
|
||||
iconifyTip: 'iconify 地址:https://icones.js.org',
|
||||
isFrameTip: '选择是外链则路由地址需要以`http(s)://`开头',
|
||||
isCacheTip: '选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致',
|
||||
visibleTip: '选择隐藏则路由将不会出现在侧边栏,但仍然可以访问',
|
||||
statusTip: '选择停用则路由将不会出现在侧边栏,也不能被访问',
|
||||
permsTip: "控制器中定义的权限字符,如:`@SaCheckPermission('system:user:list')`",
|
||||
componentTip: '访问的组件路径,如:`system/user/index`,默认在`views`目录下',
|
||||
pathTip:
|
||||
'Router path,Example:`user`,If the external network address needs to be accessed in the internal link,then `http(s)://` beginning',
|
||||
form: {
|
||||
parentId: {
|
||||
required: '请选择上级菜单',
|
||||
@ -581,10 +600,14 @@ const local: App.I18n.Schema = {
|
||||
required: '请输入菜单名称',
|
||||
invalid: '菜单名称不能为空'
|
||||
},
|
||||
sort: {
|
||||
orderNum: {
|
||||
required: '请输入排序',
|
||||
invalid: '排序不能为空'
|
||||
},
|
||||
perms: {
|
||||
required: '请输入权限字符',
|
||||
invalid: '权限字符不能为空'
|
||||
},
|
||||
isFrame: {
|
||||
required: '请选择是否外链',
|
||||
invalid: '是否外链不能为空'
|
||||
@ -618,10 +641,18 @@ const local: App.I18n.Schema = {
|
||||
invalid: '权限标识不能为空'
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
iconifyIconPlaceholder: '请输入图标',
|
||||
localIconPlaceholder: '请选择本地图标',
|
||||
queryKey: '请输入 Key',
|
||||
queryValue: '请输入 Value',
|
||||
queryIframe: '请输入 iframe 地址'
|
||||
},
|
||||
directory: '目录',
|
||||
menu: '菜单',
|
||||
button: '按钮',
|
||||
addMenu: '新增菜单',
|
||||
addChildMenu: '新增子菜单',
|
||||
editMenu: '编辑菜单'
|
||||
},
|
||||
notice: {
|
||||
|
33
src/typings/app.d.ts
vendored
33
src/typings/app.d.ts
vendored
@ -657,25 +657,44 @@ declare namespace App {
|
||||
};
|
||||
menu: {
|
||||
title: string;
|
||||
parentId: string;
|
||||
iconType: string;
|
||||
menuName: string;
|
||||
icon: string;
|
||||
sort: string;
|
||||
permission: string;
|
||||
orderNum: string;
|
||||
perms: string;
|
||||
component: string;
|
||||
path: string;
|
||||
externalPath: string;
|
||||
query: string;
|
||||
iframeQuery: string;
|
||||
isFrame: string;
|
||||
isCache: string;
|
||||
menuType: string;
|
||||
visible: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
cache: string;
|
||||
noCache: string;
|
||||
rootName: string;
|
||||
buttonPermissionList: string;
|
||||
emptyMenu: string;
|
||||
menuDetail: string;
|
||||
iconifyTip: string;
|
||||
isFrameTip: string;
|
||||
isCacheTip: string;
|
||||
visibleTip: string;
|
||||
statusTip: string;
|
||||
permsTip: string;
|
||||
componentTip: string;
|
||||
pathTip: string;
|
||||
form: {
|
||||
parentId: FormMsg;
|
||||
menuType: FormMsg;
|
||||
icon: FormMsg;
|
||||
menuName: FormMsg;
|
||||
sort: FormMsg;
|
||||
orderNum: FormMsg;
|
||||
perms: FormMsg;
|
||||
isFrame: FormMsg;
|
||||
path: FormMsg;
|
||||
component: FormMsg;
|
||||
@ -685,10 +704,18 @@ declare namespace App {
|
||||
status: FormMsg;
|
||||
permission: FormMsg;
|
||||
};
|
||||
placeholder: {
|
||||
iconifyIconPlaceholder: string;
|
||||
localIconPlaceholder: string;
|
||||
queryKey: string;
|
||||
queryValue: string;
|
||||
queryIframe: string;
|
||||
};
|
||||
directory: string;
|
||||
menu: string;
|
||||
button: string;
|
||||
addMenu: string;
|
||||
addChildMenu: string;
|
||||
editMenu: string;
|
||||
};
|
||||
notice: {
|
||||
|
@ -46,7 +46,7 @@ const getMeunTree = async () => {
|
||||
treeData.value = [
|
||||
{
|
||||
menuId: 0,
|
||||
menuName: '根目录',
|
||||
menuName: $t('page.system.menu.rootName'),
|
||||
icon: 'material-symbols:home-outline-rounded',
|
||||
children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
|
||||
}
|
||||
@ -112,7 +112,7 @@ function renderSuffix({ option }: { option: TreeOption }) {
|
||||
text
|
||||
class="h-18px"
|
||||
icon="ic-round-plus"
|
||||
tooltip-content="新增子菜单"
|
||||
tooltip-content={$t('page.system.menu.addChildMenu')}
|
||||
onClick={(event: Event) => {
|
||||
event.stopPropagation();
|
||||
handleAddMenu(option.menuId as CommonType.IdType);
|
||||
@ -203,18 +203,18 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '权限名称',
|
||||
title: $t('page.system.menu.menuName'),
|
||||
key: 'menuName',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
title: $t('page.system.menu.perms'),
|
||||
key: 'perms',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
title: $t('page.system.menu.status'),
|
||||
key: 'status',
|
||||
minWidth: 80,
|
||||
align: 'center',
|
||||
@ -223,13 +223,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
title: $t('page.system.menu.createTime'),
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
title: $t('common.action'),
|
||||
key: 'actions',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
@ -286,27 +286,27 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
|
||||
<template>
|
||||
<TableSiderLayout default-expanded>
|
||||
<template #header>菜单列表</template>
|
||||
<template #header>{{ $t('page.system.menu.title') }}</template>
|
||||
<template #header-extra>
|
||||
<ButtonIcon
|
||||
v-if="hasAuth('system:menu:add')"
|
||||
size="small"
|
||||
icon="material-symbols:add-rounded"
|
||||
class="h-28px text-icon"
|
||||
tooltip-content="新增菜单"
|
||||
:tooltip-content="$t('page.system.menu.addMenu')"
|
||||
@click.stop="handleAddMenu(0)"
|
||||
/>
|
||||
<ButtonIcon
|
||||
size="small"
|
||||
icon="material-symbols:refresh-rounded"
|
||||
class="h-28px text-icon"
|
||||
tooltip-content="刷新"
|
||||
:tooltip-content="$t('common.refresh')"
|
||||
@click.stop="reset"
|
||||
/>
|
||||
</template>
|
||||
<template #sider>
|
||||
<div class="flex gap-6px">
|
||||
<NInput v-model:value="name" size="small" placeholder="请输入菜单名称" />
|
||||
<NInput v-model:value="name" size="small" :placeholder="$t('page.system.menu.form.menuName.required')" />
|
||||
</div>
|
||||
<NSpin :show="loading" class="infinite-scroll">
|
||||
<NTree
|
||||
@ -330,7 +330,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
@update:selected-keys="(_: Array<string & number>, option: Array<TreeOption | null>) => handleClickTree(option)"
|
||||
>
|
||||
<template #empty>
|
||||
<NEmpty description="暂无菜单" class="h-full min-h-200px justify-center" />
|
||||
<NEmpty :description="$t('page.system.menu.emptyMenu')" class="h-full min-h-200px justify-center" />
|
||||
</template>
|
||||
</NTree>
|
||||
</NSpin>
|
||||
@ -338,7 +338,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
<div class="h-full flex-col-stretch gap-16px">
|
||||
<template v-if="currentMenu">
|
||||
<NCard
|
||||
title="菜单详情"
|
||||
:title="$t('page.system.menu.menuDetail')"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
class="max-h-50% card-wrapper"
|
||||
@ -356,13 +356,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
<template #icon>
|
||||
<icon-material-symbols-add-rounded />
|
||||
</template>
|
||||
新增子菜单
|
||||
{{ $t('page.system.menu.addChildMenu') }}
|
||||
</NButton>
|
||||
<NButton v-if="hasAuth('system:menu:edit')" size="small" ghost type="primary" @click="handleUpdateMenu">
|
||||
<template #icon>
|
||||
<icon-material-symbols-drive-file-rename-outline-outline />
|
||||
</template>
|
||||
编辑
|
||||
{{ $t('common.edit') }}
|
||||
</NButton>
|
||||
<NPopconfirm @positive-click="() => handleDeleteMenu()">
|
||||
<template #trigger>
|
||||
@ -391,46 +391,50 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
label-class="w-20% min-w-88px"
|
||||
content-class="w-100px"
|
||||
>
|
||||
<NDescriptionsItem label="菜单类型">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.menuName')">
|
||||
<NTag class="m-1" size="small" type="primary">{{ menuTypeRecord[currentMenu.menuType!] }}</NTag>
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="菜单状态">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.status')">
|
||||
<DictTag size="small" :value="currentMenu.status" dict-code="sys_normal_disable" />
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="菜单名称">{{ currentMenu.menuName }}</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="组件路径">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.addChildMenu')">
|
||||
{{ currentMenu.menuName }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" :label="$t('page.system.menu.component')">
|
||||
{{ currentMenu.component }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem :label="currentMenu.isFrame !== '0' ? '路由地址' : '外链地址'">
|
||||
<NDescriptionsItem
|
||||
:label="currentMenu.isFrame !== '0' ? $t('page.system.menu.path') : $t('page.system.menu.externalPath')"
|
||||
>
|
||||
{{ currentMenu.path }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem
|
||||
v-if="currentMenu.menuType === 'C'"
|
||||
:label="currentMenu.isFrame !== '2' ? '路由参数' : 'iframe 地址'"
|
||||
:label="currentMenu.isFrame !== '2' ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
|
||||
>
|
||||
{{ currentMenu.queryParam }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType !== 'M'" label="权限标识">
|
||||
<NDescriptionsItem v-if="currentMenu.menuType !== 'M'" :label="$t('page.system.menu.perms')">
|
||||
{{ currentMenu.perms }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="是否外链">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.isFrame')">
|
||||
<NTag v-if="currentMenu.isFrame" class="m-1" size="small" :type="tagMap[currentMenu.isFrame]">
|
||||
{{ menuIsFrameRecord[currentMenu.isFrame] }}
|
||||
</NTag>
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="显示状态">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.visible')">
|
||||
<DictTag size="small" :value="currentMenu.visible" dict-code="sys_show_hide" />
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="是否缓存">
|
||||
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" :label="$t('page.system.menu.isCache')">
|
||||
<NTag v-if="currentMenu.isCache" class="m-1" size="small" :type="tagMap[currentMenu.isCache]">
|
||||
{{ currentMenu.isCache === '0' ? '缓存' : '不缓存' }}
|
||||
{{ currentMenu.isCache === '0' ? $t('page.system.menu.cache') : $t('page.system.menu.noCache') }}
|
||||
</NTag>
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NCard>
|
||||
|
||||
<NCard
|
||||
title="按钮权限列表"
|
||||
:title="$t('page.system.menu.buttonPermissionList')"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
class="h-full overflow-auto card-wrapper"
|
||||
@ -441,7 +445,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
size="small"
|
||||
icon="ic-round-refresh"
|
||||
class="h-28px text-icon"
|
||||
tooltip-content="刷新"
|
||||
:tooltip-content="$t('common.refresh')"
|
||||
@click.stop="getBtnMenuList"
|
||||
/>
|
||||
</template>
|
||||
|
@ -45,8 +45,8 @@ const queryList = ref<{ key: string; value: string }[]>([]);
|
||||
|
||||
const drawerTitle = computed(() => {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: '新增菜单',
|
||||
edit: '编辑菜单'
|
||||
add: $t('page.system.menu.addMenu'),
|
||||
edit: $t('page.system.menu.editMenu')
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
@ -69,7 +69,7 @@ function createDefaultModel(): Model {
|
||||
visible: '0',
|
||||
status: '0',
|
||||
perms: '',
|
||||
icon: '',
|
||||
icon: undefined,
|
||||
remark: ''
|
||||
};
|
||||
}
|
||||
@ -77,10 +77,10 @@ function createDefaultModel(): Model {
|
||||
type RuleKey = Extract<keyof Model, 'menuName' | 'orderNum' | 'path' | 'component'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
menuName: createRequiredRule('菜单名称不能为空'),
|
||||
orderNum: createNumberRequiredRule('菜单排序不能为空'),
|
||||
path: createRequiredRule('路由地址不能为空'),
|
||||
component: createRequiredRule('组件路径不能为空')
|
||||
menuName: createRequiredRule($t('page.system.menu.form.menuName.invalid')),
|
||||
orderNum: createNumberRequiredRule($t('page.system.menu.form.orderNum.invalid')),
|
||||
path: createRequiredRule($t('page.system.menu.form.path.invalid')),
|
||||
component: createRequiredRule($t('page.system.menu.form.component.invalid'))
|
||||
};
|
||||
|
||||
const isBtn = computed(() => model.menuType === 'F');
|
||||
@ -228,17 +228,22 @@ function onCreate() {
|
||||
<NDrawerContent :title="drawerTitle" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NGrid responsive="screen" item-responsive>
|
||||
<NFormItemGi :span="24" label="上级菜单" path="pid">
|
||||
<NFormItemGi :span="24" :label="$t('page.system.menu.parentId')" path="pid">
|
||||
<NTreeSelect
|
||||
v-model:value="model.parentId"
|
||||
:options="treeData as []"
|
||||
label-field="menuName"
|
||||
key-field="menuId"
|
||||
:default-expanded-keys="[0]"
|
||||
placeholder="请选择上级菜单"
|
||||
:placeholder="$t('page.system.menu.form.parentId.required')"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="model.menuType !== 'F'" :span="24" label="菜单类型" path="menuType">
|
||||
<NFormItemGi
|
||||
v-if="model.menuType !== 'F'"
|
||||
:span="24"
|
||||
:label="$t('page.system.menu.menuType')"
|
||||
path="menuType"
|
||||
>
|
||||
<NRadioGroup v-model:value="model.menuType">
|
||||
<NRadioButton
|
||||
v-for="item in menuTypeOptions.filter(item => item.value !== 'F')"
|
||||
@ -248,10 +253,10 @@ function onCreate() {
|
||||
/>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="24" label="菜单名称" path="menuName">
|
||||
<NInput v-model:value="model.menuName" placeholder="请输入菜单名称" />
|
||||
<NFormItemGi :span="24" :label="$t('page.system.menu.menuName')" path="menuName">
|
||||
<NInput v-model:value="model.menuName" :placeholder="$t('page.system.menu.form.menuName.required')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" span="24" label="图标类型">
|
||||
<NFormItemGi v-if="!isBtn" span="24" :label="$t('page.system.menu.iconType')">
|
||||
<NRadioGroup v-model:value="iconType">
|
||||
<NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
||||
</NRadioGroup>
|
||||
@ -259,40 +264,51 @@ function onCreate() {
|
||||
<NFormItemGi v-if="!isBtn" span="24" path="icon">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="iconify 地址:`https://icones.js.org`" />
|
||||
<span class="pl-3px">菜单图标</span>
|
||||
<FormTip :content="$t('page.system.menu.iconifyTip')" />
|
||||
<span class="pl-3px">{{ $t('page.system.menu.icon') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="iconType === '1'">
|
||||
<NInput v-model:value="model.icon" placeholder="请输入图标" class="flex-1">
|
||||
<NInput
|
||||
v-model:value="model.icon"
|
||||
:placeholder="$t('page.system.menu.placeholder.iconifyIconPlaceholder')"
|
||||
class="flex-1"
|
||||
>
|
||||
<template #suffix>
|
||||
<SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
|
||||
</template>
|
||||
</NInput>
|
||||
</template>
|
||||
<template v-if="iconType === '2'">
|
||||
<NSelect v-model:value="model.icon" placeholder="请选择本地图标" filterable :options="localIconOptions" />
|
||||
<NSelect
|
||||
v-model:value="model.icon"
|
||||
:placeholder="$t('page.system.menu.placeholder.localIconPlaceholder')"
|
||||
filterable
|
||||
:options="localIconOptions"
|
||||
/>
|
||||
</template>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" :span="24" path="path">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="访问的路由地址,如:`user`,如外网地址需内链访问则以 `http(s)://` 开头" />
|
||||
<span>{{ model.isFrame !== '0' ? '路由地址' : '外链地址' }}</span>
|
||||
<FormTip :content="$t('page.system.menu.pathTip')" />
|
||||
<span>
|
||||
{{ model.isFrame !== '0' ? $t('page.system.menu.path') : $t('page.system.menu.externalPath') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<NInput v-model:value="model.path" placeholder="请输入路由地址" />
|
||||
<NInput v-model:value="model.path" :placeholder="$t('page.system.menu.form.path.required')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="isMenu && model.isFrame === '1'" :span="24" path="component">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="访问的组件路径,如:`system/user/index`,默认在`views`目录下" />
|
||||
<span>组件路径</span>
|
||||
<FormTip :content="$t('page.system.menu.componentTip')" />
|
||||
<span>{{ $t('page.system.menu.component') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NInputGroup>
|
||||
<NInputGroupLabel>views/</NInputGroupLabel>
|
||||
<NInput v-model:value="model.component" placeholder="请输入组件地址" />
|
||||
<NInput v-model:value="model.component" :placeholder="$t('page.system.menu.form.path.required')" />
|
||||
<NInputGroupLabel>/index.vue</NInputGroupLabel>
|
||||
</NInputGroup>
|
||||
</NFormItemGi>
|
||||
@ -300,7 +316,7 @@ function onCreate() {
|
||||
v-if="isMenu && model.isFrame !== '0'"
|
||||
span="24"
|
||||
:show-feedback="!queryList.length"
|
||||
:label="model.isFrame !== '2' ? '路由参数' : 'iframe 地址'"
|
||||
:label="model.isFrame !== '2' ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
|
||||
>
|
||||
<NDynamicInput
|
||||
v-if="model.isFrame !== '2'"
|
||||
@ -315,7 +331,10 @@ function onCreate() {
|
||||
ignore-path-change
|
||||
:show-label="false"
|
||||
:path="`query[${index}].key`"
|
||||
:rule="{ ...createRequiredRule('请输入 Key'), validator: value => isNotNull(value) }"
|
||||
:rule="{
|
||||
...createRequiredRule($t('page.system.menu.placeholder.queryKey')),
|
||||
validator: value => isNotNull(value)
|
||||
}"
|
||||
>
|
||||
<NInput v-model:value="queryList[index].key" placeholder="Key" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
@ -325,29 +344,36 @@ function onCreate() {
|
||||
ignore-path-change
|
||||
:show-label="false"
|
||||
:path="`query[${index}].value`"
|
||||
:rule="{ ...createRequiredRule('请输入 Value'), validator: value => isNotNull(value) }"
|
||||
:rule="{
|
||||
...createRequiredRule($t('page.system.menu.placeholder.queryValue')),
|
||||
validator: value => isNotNull(value)
|
||||
}"
|
||||
>
|
||||
<NInput v-model:value="queryList[index].value" placeholder="Value" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
</div>
|
||||
</template>
|
||||
</NDynamicInput>
|
||||
<NInput v-else v-model:value="model.queryParam" placeholder="请输入 iframe 地址" />
|
||||
<NInput
|
||||
v-else
|
||||
v-model:value="model.queryParam"
|
||||
:placeholder="$t('page.system.menu.placeholder.queryIframe')"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="24" path="perms">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="控制器中定义的权限字符,如:@SaCheckPermission('system:user:list')" />
|
||||
<span>权限字符</span>
|
||||
<FormTip :content="$t('page.system.menu.permsTip')" />
|
||||
<span>{{ $t('page.system.menu.perms') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NInput v-model:value="model.perms" placeholder="请输入菜单名称" />
|
||||
<NInput v-model:value="model.perms" :placeholder="$t('page.system.menu.form.perms.required')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" :span="12" path="isFrame">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="选择是外链则路由地址需要以`http(s)://`开头" />
|
||||
<span>是否外链</span>
|
||||
<FormTip :content="$t('page.system.menu.isFrameTip')" />
|
||||
<span>{{ $t('page.system.menu.isFrame') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NRadioGroup v-model:value="model.isFrame">
|
||||
@ -364,8 +390,8 @@ function onCreate() {
|
||||
<NFormItemGi v-if="isMenu" :span="12" path="isCache">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致" />
|
||||
<span>是否缓存</span>
|
||||
<FormTip :content="$t('page.system.menu.isCacheTip')" />
|
||||
<span>{{ $t('page.system.menu.isCache') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NRadioGroup v-model:value="model.isCache">
|
||||
@ -375,11 +401,11 @@ function onCreate() {
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" :span="12" label="显示状态" path="visible">
|
||||
<NFormItemGi v-if="!isBtn" :span="12" :label="$t('page.system.menu.visible')" path="visible">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="选择隐藏则路由将不会出现在侧边栏,但仍然可以访问" />
|
||||
<span>显示状态</span>
|
||||
<FormTip :content="$t('page.system.menu.visibleTip')" />
|
||||
<span>{{ $t('page.system.menu.visible') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<DictRadio v-model:value="model.visible" dict-code="sys_show_hide" />
|
||||
@ -387,14 +413,14 @@ function onCreate() {
|
||||
<NFormItemGi :span="12" path="status">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="选择停用则路由将不会出现在侧边栏,也不能被访问" />
|
||||
<span>菜单状态</span>
|
||||
<FormTip :content="$t('page.system.menu.statusTip')" />
|
||||
<span>{{ $t('page.system.menu.status') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="12" label="显示排序" path="orderNum">
|
||||
<NInputNumber v-model:value="model.orderNum" placeholder="请输入排序" />
|
||||
<NFormItemGi :span="12" :label="$t('page.system.menu.orderNum')" path="orderNum">
|
||||
<NInputNumber v-model:value="model.orderNum" :placeholder="$t('page.system.menu.form.orderNum.required')" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
|
Loading…
Reference in New Issue
Block a user