feat(web): update menu operate loading

jzero-io · Nov 29, 2024 · 4863745 · 4863745
1 parent 4ace66c
commit 4863745
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/web/src/locales/langs/en-us.ts b/web/src/locales/langs/en-us.ts
@@ -23,6 +23,7 @@ const local: App.I18n.Schema = {
     deleteSuccess: 'Delete Success',
     confirmDelete: 'Are you sure you want to delete?',
     edit: 'Edit',
+    editSuccess: 'Edit Success',
     warning: 'Warning',
     error: 'Error',
     index: 'Index',
@@ -181,19 +182,19 @@ const local: App.I18n.Schema = {
         list: 'User List',
         add: 'Add User',
         edit: 'Edit User',
-        delete: 'Delete User',
+        delete: 'Delete User'
       },
       menu: {
         list: 'Menu List',
         add: 'Add Menu',
         edit: 'Edit Menu',
-        delete: 'Delete Menu',
+        delete: 'Delete Menu'
       },
       role: {
         list: 'Role List',
         add: 'Add Role',
         edit: 'Edit Role',
-        delete: 'Delete Role',
+        delete: 'Delete Role'
       }
     }
   },

diff --git a/web/src/locales/langs/zh-cn.ts b/web/src/locales/langs/zh-cn.ts
@@ -23,6 +23,7 @@ const local: App.I18n.Schema = {
     deleteSuccess: '删除成功',
     confirmDelete: '确认删除吗？',
     edit: '编辑',
+    editSuccess: '编辑成功',
     warning: '警告',
     error: '错误',
     index: '序号',

diff --git a/web/src/typings/app.d.ts b/web/src/typings/app.d.ts
@@ -304,6 +304,7 @@ declare namespace App {
         deleteSuccess: string;
         confirmDelete: string;
         edit: string;
+        editSuccess: string;
         warning: string;
         error: string;
         index: string;

diff --git a/web/src/views/manage/menu/modules/menu-operate-modal.vue b/web/src/views/manage/menu/modules/menu-operate-modal.vue
@@ -1,6 +1,7 @@
 <script setup lang="tsx">
 import { computed, reactive, ref, watch } from 'vue';
 import type { SelectOption } from 'naive-ui';
+import { useLoading } from '@sa/hooks';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
 import { AddMenu, EditMenu, GetAllRoles } from '@/service/api';
@@ -44,6 +45,7 @@ const visible = defineModel<boolean>('visible', {
 
 const { formRef, validate, restoreValidation } = useNaiveForm();
 const { defaultRequiredRule } = useFormRules();
+const { loading: confirmLoading, startLoading: confirmStartLoding, endLoading: confirmEndLoading } = useLoading();
 
 const title = computed(() => {
   const titles: Record<OperateType, string> = {
@@ -282,7 +284,9 @@ async function handleSubmit() {
       permissions: params.permissions,
       i18nKey: params.i18nKey
     };
+    confirmStartLoding();
     const { error } = await AddMenu(addMenuData);
+    confirmEndLoading();
     if (!error) {
       window.$message?.success($t('common.addSuccess'));
       closeDrawer();
@@ -317,9 +321,11 @@ async function handleSubmit() {
       permissions: params.permissions,
       i18nKey: params.i18nKey
     };
+    confirmStartLoding();
     const { error } = await EditMenu(editMenuData);
+    confirmEndLoading();
     if (!error) {
-      window.$message?.success($t('common.addSuccess'));
+      window.$message?.success($t('common.editSuccess'));
       closeDrawer();
       emit('submitted');
     }
@@ -530,7 +536,7 @@ watch(
     <template #footer>
       <NSpace justify="end" :size="16">
         <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
-        <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        <NButton :loading="confirmLoading" type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
       </NSpace>
     </template>
   </NModal>