feat(projects): page manage_menu operateDrawer

src/constants/business.ts

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

src/locales/langs/en-us.ts

@@ -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',
+          icon: 'Please enter iconify name',
-          localIcon: 'Please select local icon',
+          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'
         }
       }
     }

src/locales/langs/zh-cn.ts

@@ -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: '本地图标'
         }
       }
     }

src/typings/api.d.ts

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

src/typings/app.d.ts

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

src/utils/icon.ts

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

src/views/manage/menu/index.vue

@@ -37,19 +37,15 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
       width: 48
     },
     {
-      key: 'index',
+      key: 'id',
-      title: $t('common.index'),
+      title: $t('page.manage.menu.id'),
-      width: 120,
-      render: (_, index) => {
-        return <span>{getIndex(index)}</span>;
-      },
       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>

src/views/manage/menu/modules/menu-operate-drawer.vue

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