feat(projects): page manage_menu

src/views/manage/menu/index.vue

@@ -1,7 +1,258 @@
-<script setup lang="ts"></script>
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetMenuList } from '@/service/api';
+import { useAppStore } from '@/store/modules/app';
+import { useTable } from '@/hooks/common/table';
+import { $t } from '@/locales';
+import { yesOrNoRecord } from '@/constants/common';
+import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';
+
+const appStore = useAppStore();
+const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
+
+const { columns, filteredColumns, data, loading, pagination, getData } = useTable<
+  Api.SystemManage.Menu,
+  typeof fetchGetMenuList,
+  'index' | 'operate'
+>({
+  apiFn: fetchGetMenuList,
+  transformer: res => {
+    const menus = res.data || [];
+
+    return {
+      data: menus,
+      pageNum: 1,
+      pageSize: 10,
+      total: menus.length
+    };
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      render: (_, index) => {
+        return <span>{getIndex(index)}</span>;
+      },
+      align: 'center'
+    },
+    {
+      key: 'menuType',
+      title: $t('page.manage.menu.menuType'),
+      align: 'center',
+      width: 100,
+      render: row => {
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+          1: 'default',
+          2: 'primary'
+        };
+
+        const label = $t(menuTypeRecord[row.menuType]);
+
+        return <NTag type={tagMap[row.menuType]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'menuName',
+      title: $t('page.manage.menu.menuName'),
+      render: row => {
+        const { i18nKey, menuName } = row;
+
+        const label = i18nKey ? $t(i18nKey) : menuName;
+
+        return <span>{label}</span>;
+      }
+    },
+    {
+      key: 'icon',
+      title: $t('page.manage.menu.icon'),
+      align: 'center',
+      width: 60,
+      render: row => {
+        const icon = row.iconType === '1' ? row.icon : undefined;
+
+        const localIcon = row.iconType === '2' ? row.icon : undefined;
+
+        return (
+          <div class="flex-center">
+            <SvgIcon icon={icon} localIcon={localIcon} class="text-icon" />
+          </div>
+        );
+      }
+    },
+    {
+      key: 'routeName',
+      title: $t('page.manage.menu.routeName')
+    },
+    {
+      key: 'routePath',
+      title: $t('page.manage.menu.routePath')
+    },
+    {
+      key: 'status',
+      title: $t('page.manage.menu.menuStatus'),
+      align: 'center',
+      width: 100,
+      render: row => {
+        if (row.status === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+          1: 'success',
+          2: 'warning'
+        };
+
+        const label = $t(enableStatusRecord[row.status]);
+
+        return <NTag type={tagMap[row.status]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'hideInMenu',
+      title: $t('page.manage.menu.hideInMenu'),
+      align: 'center',
+      width: 100,
+      render: row => {
+        const hide: CommonType.YesOrNo = row.hideInMenu ? 'Y' : 'N';
+
+        const tagMap: Record<CommonType.YesOrNo, NaiveUI.ThemeColor> = {
+          Y: 'error',
+          N: 'default'
+        };
+
+        const label = $t(yesOrNoRecord[hide]);
+
+        return <NTag type={tagMap[hide]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'order',
+      title: $t('page.manage.menu.order'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 230,
+      render: row => (
+        <div class="flex-center justify-end gap-8px">
+          {row.menuType === '1' && (
+            <NButton type="primary" ghost size="small" onClick={() => handleAddChildMenu(row.id)}>
+              {$t('page.manage.menu.addChildMenu')}
+            </NButton>
+          )}
+          <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
+            {$t('common.edit')}
+          </NButton>
+          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
+            {{
+              default: () => $t('common.confirmDelete'),
+              trigger: () => (
+                <NButton type="error" ghost size="small">
+                  {$t('common.delete')}
+                </NButton>
+              )
+            }}
+          </NPopconfirm>
+        </div>
+      )
+    }
+  ]
+});
+
+const operateType = ref<OperateType>('add');
+
+function handleAdd() {
+  operateType.value = 'add';
+  openDrawer();
+}
+
+const checkedRowKeys = ref<string[]>([]);
+
+async function handleBatchDelete() {
+  // request
+  console.log(checkedRowKeys.value);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  checkedRowKeys.value = [];
+
+  getData();
+}
+
+function handleAddChildMenu(id: number) {
+  console.log('id: ', id);
+  operateType.value = 'add';
+  openDrawer();
+}
+
+/** the editing row data */
+const editingData = ref<Api.SystemManage.Menu | null>(null);
+
+function handleEdit(id: number) {
+  operateType.value = 'edit';
+  editingData.value = data.value.find(item => item.id === id) || null;
+  openDrawer();
+}
+
+async function handleDelete(id: number) {
+  // request
+  console.log(id);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  getData();
+}
+
+function getIndex(index: number) {
+  const { page = 0, pageSize = 10 } = pagination;
+
+  return String((page - 1) * pageSize + index + 1);
+}
+</script>
 
 <template>
-  <div>manage_menu</div>
+  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+    <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="filteredColumns"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="640"
+        :loading="loading"
+        :pagination="pagination"
+        :row-key="item => item.id"
+        class="sm:h-full"
+      />
+      <MenuOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+    </NCard>
+  </div>
 </template>
 
 <style scoped></style>

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'MenuOperateDrawer'
+});
+
+/**
+ * the type of operation
+ *
+ * - add: add user
+ * - edit: edit user
+ */
+export type OperateType = 'add' | 'edit';
+
+interface Props {
+  /** the type of operation */
+  operateType: OperateType;
+  /** the edit row data */
+  rowData?: Api.SystemManage.Menu | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<OperateType, string> = {
+    add: $t('page.manage.menu.addMenu'),
+    edit: $t('page.manage.menu.editMenu')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<Api.SystemManage.Menu, 'menuType' | 'menuName' | 'routeName' | 'routePath'>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    menuType: '1',
+    menuName: '',
+    routeName: '',
+    routePath: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  userName: defaultRequiredRule,
+  userStatus: defaultRequiredRule
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<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>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

src/views/manage/role/index.vue

@@ -6,7 +6,7 @@ import { fetchGetRoleList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { $t } from '@/locales';
-import { roleStatusRecord } from '@/constants/business';
+import { enableStatusRecord } from '@/constants/business';
 import RoleOperateDrawer, { type OperateType } from './modules/role-operate-drawer.vue';
 import RoleSearch from './modules/role-search.vue';
 
@@ -24,9 +24,9 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
     size: 10,
     // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
     // the value can not be undefined, otherwise the property in Form will not be reactive
+    status: null,
     roleName: null,
-    roleCode: null,
-    roleStatus: null
+    roleCode: null
   },
   transformer: res => {
     const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
@@ -69,23 +69,23 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
       minWidth: 120
     },
     {
-      key: 'roleStatus',
+      key: 'status',
       title: $t('page.manage.role.roleStatus'),
       align: 'center',
       width: 100,
       render: row => {
-        if (row.roleStatus === null) {
+        if (row.status === null) {
           return null;
         }
 
-        const tagMap: Record<Api.SystemManage.RoleStatus, NaiveUI.ThemeColor> = {
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
           1: 'success',
           2: 'warning'
         };
 
-        const label = $t(roleStatusRecord[row.roleStatus]);
+        const label = $t(enableStatusRecord[row.status]);
 
-        return <NTag type={tagMap[row.roleStatus]}>{label}</NTag>;
+        return <NTag type={tagMap[row.status]}>{label}</NTag>;
       }
     },
     {

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

@@ -2,7 +2,7 @@
 import { computed, reactive, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
-import { roleStatusOptions } from '@/constants/business';
+import { enableStatusOptions } from '@/constants/business';
 
 defineOptions({
   name: 'RoleOperateDrawer'
@@ -46,7 +46,7 @@ const title = computed(() => {
   return titles[props.operateType];
 });
 
-type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'roleStatus'>;
+type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'status'>;
 
 const model: Model = reactive(createDefaultModel());
 
@@ -55,7 +55,7 @@ function createDefaultModel(): Model {
     roleName: '',
     roleCode: '',
     roleDesc: '',
-    roleStatus: null
+    status: null
   };
 }
 
@@ -64,7 +64,7 @@ type RuleKey = Exclude<keyof Model, 'roleDesc'>;
 const rules: Record<RuleKey, App.Global.FormRule> = {
   roleName: defaultRequiredRule,
   roleCode: defaultRequiredRule,
-  roleStatus: defaultRequiredRule
+  status: defaultRequiredRule
 };
 
 function handleUpdateModelWhenEdit() {
@@ -108,9 +108,9 @@ watch(visible, () => {
         <NFormItem :label="$t('page.manage.role.roleCode')" path="roleCode">
           <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
         </NFormItem>
-        <NFormItem :label="$t('page.manage.role.roleStatus')" path="roleStatus">
-          <NRadioGroup v-model:value="model.roleStatus">
-            <NRadio v-for="item in roleStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+        <NFormItem :label="$t('page.manage.role.roleStatus')" 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.role.roleDesc')" path="roleDesc">

src/views/manage/role/modules/role-search.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
-import { roleStatusOptions } from '@/constants/business';
+import { enableStatusOptions } from '@/constants/business';
 import { translateOptions } from '@/utils/common';
 
 defineOptions({
@@ -35,11 +35,11 @@ function search() {
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
           <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
         </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="roleStatus" class="pr-24px">
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="status" class="pr-24px">
           <NSelect
-            v-model:value="model.roleStatus"
+            v-model:value="model.status"
             :placeholder="$t('page.manage.role.form.roleStatus')"
-            :options="translateOptions(roleStatusOptions)"
+            :options="translateOptions(enableStatusOptions)"
             clearable
           />
         </NFormItemGi>

src/views/manage/user/index.vue

@@ -6,7 +6,7 @@ import { fetchGetUserList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { $t } from '@/locales';
-import { userGenderRecord, userStatusRecord } from '@/constants/business';
+import { enableStatusRecord, userGenderRecord } from '@/constants/business';
 import UserOperateDrawer, { type OperateType } from './modules/user-operate-drawer.vue';
 import UserSearch from './modules/user-search.vue';
 
@@ -24,12 +24,12 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
     size: 10,
     // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
     // the value can not be undefined, otherwise the property in Form will not be reactive
+    status: null,
     userName: null,
     userGender: null,
     nickName: null,
     userPhone: null,
-    userEmail: null,
-    userStatus: null
+    userEmail: null
   },
   transformer: res => {
     const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
@@ -99,23 +99,23 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
       minWidth: 200
     },
     {
-      key: 'userStatus',
+      key: 'status',
       title: $t('page.manage.user.userStatus'),
       align: 'center',
       width: 100,
       render: row => {
-        if (row.userStatus === null) {
+        if (row.status === null) {
           return null;
         }
 
-        const tagMap: Record<Api.SystemManage.UserStatus, NaiveUI.ThemeColor> = {
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
           1: 'success',
           2: 'warning'
         };
 
-        const label = $t(userStatusRecord[row.userStatus]);
+        const label = $t(enableStatusRecord[row.status]);
 
-        return <NTag type={tagMap[row.userStatus]}>{label}</NTag>;
+        return <NTag type={tagMap[row.status]}>{label}</NTag>;
       }
     },
     {

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

@@ -3,7 +3,7 @@ import { computed, reactive, ref, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { fetchGetAllRoles } from '@/service/api';
 import { $t } from '@/locales';
-import { userGenderOptions, userStatusOptions } from '@/constants/business';
+import { enableStatusOptions, userGenderOptions } from '@/constants/business';
 
 defineOptions({
   name: 'UserOperateDrawer'
@@ -49,7 +49,7 @@ const title = computed(() => {
 
 type Model = Pick<
   Api.SystemManage.User,
-  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'userStatus'
+  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
 >;
 
 const model: Model = reactive(createDefaultModel());
@@ -62,15 +62,15 @@ function createDefaultModel(): Model {
     userPhone: '',
     userEmail: '',
     userRoles: [],
-    userStatus: null
+    status: null
   };
 }
 
-type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
+type RuleKey = Extract<keyof Model, 'userName' | 'status'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   userName: defaultRequiredRule,
-  userStatus: defaultRequiredRule
+  status: defaultRequiredRule
 };
 
 /** the enabled role options */
@@ -150,9 +150,9 @@ watch(visible, () => {
         <NFormItem :label="$t('page.manage.user.userEmail')" path="email">
           <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
         </NFormItem>
-        <NFormItem :label="$t('page.manage.user.userStatus')" path="userStatus">
-          <NRadioGroup v-model:value="model.userStatus">
-            <NRadio v-for="item in userStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+        <NFormItem :label="$t('page.manage.user.userStatus')" 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.user.userRole')" path="roles">

src/views/manage/user/modules/user-search.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { $t } from '@/locales';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { userGenderOptions, userStatusOptions } from '@/constants/business';
+import { enableStatusOptions, userGenderOptions } from '@/constants/business';
 import { translateOptions } from '@/utils/common';
 
 defineOptions({
@@ -68,9 +68,9 @@ async function search() {
         </NFormItemGi>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userStatus')" path="userStatus" class="pr-24px">
           <NSelect
-            v-model:value="model.userStatus"
+            v-model:value="model.status"
             :placeholder="$t('page.manage.user.form.userStatus')"
-            :options="translateOptions(userStatusOptions)"
+            :options="translateOptions(enableStatusOptions)"
             clearable
           />
         </NFormItemGi>