feat(projects): page manage_menu operateDrawer

2024-01-30 00:33:26 +08:00 · 2024-01-30 00:33:26 +08:00 · db17c916ef
commit db17c916ef
parent e2085e058d
8 changed files with 130 additions and 22 deletions
--- a/src/constants/business.ts
+++ b/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);
--- a/src/locales/langs/en-us.ts
+++ b/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',
-          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'
        }
      }
    }
--- a/src/locales/langs/zh-cn.ts
+++ b/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: '本地图标'
        }
      }
    }
--- a/src/typings/api.d.ts
+++ b/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 */
--- a/src/typings/app.d.ts
+++ b/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;
+            };
          };
        };
      };
--- a/src/utils/icon.ts
+++ b/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;
+}
--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@ -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>
--- a/src/views/manage/menu/modules/menu-operate-drawer.vue
+++ b/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>