feat(projects): page manage_menu operateDrawer
This commit is contained in:
parent
e2085e058d
commit
db17c916ef
@ -20,3 +20,10 @@ export const menuTypeRecord: Record<Api.SystemManage.MenuType, App.I18n.I18nKey>
|
||||
};
|
||||
|
||||
export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
|
||||
|
||||
export const menuIconTypeRecord: Record<Api.SystemManage.IconType, App.I18n.I18nKey> = {
|
||||
'1': 'page.manage.menu.iconType.iconify',
|
||||
'2': 'page.manage.menu.iconType.local'
|
||||
};
|
||||
|
||||
export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord);
|
||||
|
@ -305,6 +305,8 @@ const local: App.I18n.Schema = {
|
||||
},
|
||||
menu: {
|
||||
title: 'Menu List',
|
||||
id: 'ID',
|
||||
parentId: 'Parent ID',
|
||||
menuType: 'Menu Type',
|
||||
menuName: 'Menu Name',
|
||||
routeName: 'Route Name',
|
||||
@ -314,6 +316,7 @@ const local: App.I18n.Schema = {
|
||||
i18nKey: 'I18n Key',
|
||||
icon: 'Icon',
|
||||
localIcon: 'Local Icon',
|
||||
iconTypeTitle: 'Icon Type',
|
||||
order: 'Order',
|
||||
keepAlive: 'Keep Alive',
|
||||
href: 'Href',
|
||||
@ -333,8 +336,8 @@ const local: App.I18n.Schema = {
|
||||
page: 'Please select page component',
|
||||
layout: 'Please select layout component',
|
||||
i18nKey: 'Please enter i18n key',
|
||||
icon: 'Please enter icon',
|
||||
localIcon: 'Please select local icon',
|
||||
icon: 'Please enter iconify name',
|
||||
localIcon: 'Please enter local icon name',
|
||||
order: 'Please enter order',
|
||||
keepAlive: 'Please select whether to cache route',
|
||||
href: 'Please enter href',
|
||||
@ -354,6 +357,10 @@ const local: App.I18n.Schema = {
|
||||
type: {
|
||||
directory: 'Directory',
|
||||
menu: 'Menu'
|
||||
},
|
||||
iconType: {
|
||||
iconify: 'Iconify Icon',
|
||||
local: 'Local Icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -305,6 +305,8 @@ const local: App.I18n.Schema = {
|
||||
},
|
||||
menu: {
|
||||
title: '菜单列表',
|
||||
id: 'ID',
|
||||
parentId: '父级菜单ID',
|
||||
menuType: '菜单类型',
|
||||
menuName: '菜单名称',
|
||||
routeName: '路由名称',
|
||||
@ -314,6 +316,7 @@ const local: App.I18n.Schema = {
|
||||
i18nKey: '国际化key',
|
||||
icon: '图标',
|
||||
localIcon: '本地图标',
|
||||
iconTypeTitle: '图标类型',
|
||||
order: '排序',
|
||||
keepAlive: '缓存路由',
|
||||
href: '外链',
|
||||
@ -354,6 +357,10 @@ const local: App.I18n.Schema = {
|
||||
type: {
|
||||
directory: '目录',
|
||||
menu: '菜单'
|
||||
},
|
||||
iconType: {
|
||||
iconify: 'iconify图标',
|
||||
local: '本地图标'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
2
src/typings/api.d.ts
vendored
2
src/typings/api.d.ts
vendored
@ -171,6 +171,8 @@ declare namespace Api {
|
||||
type IconType = '1' | '2';
|
||||
|
||||
type Menu = Common.CommonRecord<{
|
||||
/** parent menu id */
|
||||
parentId: number;
|
||||
/** menu type */
|
||||
menuType: MenuType;
|
||||
/** menu name */
|
||||
|
7
src/typings/app.d.ts
vendored
7
src/typings/app.d.ts
vendored
@ -492,6 +492,8 @@ declare namespace App {
|
||||
};
|
||||
menu: {
|
||||
title: string;
|
||||
id: string;
|
||||
parentId: string;
|
||||
menuType: string;
|
||||
menuName: string;
|
||||
routeName: string;
|
||||
@ -501,6 +503,7 @@ declare namespace App {
|
||||
i18nKey: string;
|
||||
icon: string;
|
||||
localIcon: string;
|
||||
iconTypeTitle: string;
|
||||
order: string;
|
||||
keepAlive: string;
|
||||
href: string;
|
||||
@ -542,6 +545,10 @@ declare namespace App {
|
||||
directory: string;
|
||||
menu: string;
|
||||
};
|
||||
iconType: {
|
||||
iconify: string;
|
||||
local: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
9
src/utils/icon.ts
Normal file
9
src/utils/icon.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export function getLocalIcons() {
|
||||
const svgIcons = import.meta.glob('/src/assets/svg-icon/*.svg');
|
||||
|
||||
const keys = Object.keys(svgIcons)
|
||||
.map(item => item.split('/').at(-1)?.replace('.svg', '') || '')
|
||||
.filter(Boolean);
|
||||
|
||||
return keys;
|
||||
}
|
@ -37,19 +37,15 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
width: 120,
|
||||
render: (_, index) => {
|
||||
return <span>{getIndex(index)}</span>;
|
||||
},
|
||||
key: 'id',
|
||||
title: $t('page.manage.menu.id'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'menuType',
|
||||
title: $t('page.manage.menu.menuType'),
|
||||
align: 'center',
|
||||
width: 120,
|
||||
width: 80,
|
||||
render: row => {
|
||||
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
|
||||
1: 'default',
|
||||
@ -107,7 +103,7 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
|
||||
key: 'status',
|
||||
title: $t('page.manage.menu.menuStatus'),
|
||||
align: 'center',
|
||||
width: 120,
|
||||
width: 80,
|
||||
render: row => {
|
||||
if (row.status === null) {
|
||||
return null;
|
||||
@ -127,7 +123,7 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
|
||||
key: 'hideInMenu',
|
||||
title: $t('page.manage.menu.hideInMenu'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
width: 80,
|
||||
render: row => {
|
||||
const hide: CommonType.YesOrNo = row.hideInMenu ? 'Y' : 'N';
|
||||
|
||||
@ -141,11 +137,17 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
|
||||
return <NTag type={tagMap[hide]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'parentId',
|
||||
title: $t('page.manage.menu.parentId'),
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'order',
|
||||
title: $t('page.manage.menu.order'),
|
||||
align: 'center',
|
||||
width: 80
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
@ -219,12 +221,6 @@ async function handleDelete(id: number) {
|
||||
|
||||
getData();
|
||||
}
|
||||
|
||||
function getIndex(index: number) {
|
||||
const { page = 0, pageSize = 10 } = pagination;
|
||||
|
||||
return String((page - 1) * pageSize + index + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -1,7 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
<script setup lang="tsx">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import type { SelectOption } from 'naive-ui';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
import { getLocalIcons } from '@/utils/icon';
|
||||
|
||||
defineOptions({
|
||||
name: 'MenuOperateDrawer'
|
||||
@ -45,7 +49,10 @@ const title = computed(() => {
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Pick<Api.SystemManage.Menu, 'menuType' | 'menuName' | 'routeName' | 'routePath'>;
|
||||
type Model = Pick<
|
||||
Api.SystemManage.Menu,
|
||||
'menuType' | 'menuName' | 'icon' | 'iconType' | 'routeName' | 'routePath' | 'status' | 'hideInMenu' | 'order'
|
||||
>;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
@ -53,8 +60,13 @@ function createDefaultModel(): Model {
|
||||
return {
|
||||
menuType: '1',
|
||||
menuName: '',
|
||||
icon: '',
|
||||
iconType: '1',
|
||||
routeName: '',
|
||||
routePath: ''
|
||||
routePath: '',
|
||||
status: null,
|
||||
hideInMenu: false,
|
||||
order: 0
|
||||
};
|
||||
}
|
||||
|
||||
@ -65,6 +77,17 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
userStatus: defaultRequiredRule
|
||||
};
|
||||
|
||||
const localIcons = getLocalIcons();
|
||||
const localIconOptions = localIcons.map<SelectOption>(item => ({
|
||||
label: () => (
|
||||
<div class="flex-y-center gap-16px">
|
||||
<SvgIcon localIcon={item} class="text-icon" />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
),
|
||||
value: item
|
||||
}));
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
@ -99,7 +122,57 @@ watch(visible, () => {
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules"></NForm>
|
||||
<NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
|
||||
<NFormItem :label="$t('page.manage.menu.menuType')" path="menuType">
|
||||
<NRadioGroup v-model:value="model.menuType">
|
||||
<NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.menu.menuName')" path="menuName">
|
||||
<NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
|
||||
<NRadioGroup v-model:value="model.iconType">
|
||||
<NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem :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>
|
||||
<SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
|
||||
</template>
|
||||
</NInput>
|
||||
</template>
|
||||
<template v-if="model.iconType === '2'">
|
||||
<NSelect
|
||||
v-model:value="model.icon"
|
||||
:placeholder="$t('page.manage.menu.form.localIcon')"
|
||||
:options="localIconOptions"
|
||||
/>
|
||||
</template>
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.menu.routeName')" path="routeName">
|
||||
<NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.menu.routePath')" path="routePath">
|
||||
<NInput v-model:value="model.routePath" :placeholder="$t('page.manage.menu.form.routePath')" />
|
||||
</NFormItem>
|
||||
<NFormItem :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>
|
||||
</NFormItem>
|
||||
<NFormItem :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>
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.menu.order')" path="order">
|
||||
<NInputNumber v-model:value="model.order" :placeholder="$t('page.manage.menu.form.order')" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
|
Loading…
Reference in New Issue
Block a user