Merge pull request #687 from colinin/upt-5.3.4

optimize modal window user experience

apps/vue/src/views/account/center/FileList.vue

@@ -31,27 +31,23 @@
         </template>
       </template>
     </BasicTable>
-    <BasicModal @register="registerShareModal" :title="L('Share')" @ok="handleShareFile">
-      <BasicForm @register="registershareForm" />
-    </BasicModal>
+    <FileShareModal @register="registerShareModal" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, watchEffect, nextTick } from 'vue';
+  import { computed, watchEffect } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { BasicModal, useModal } from '/@/components/Modal';
-
-  import { getDataColumns, getShareModalSchemas } from './data';
+  import { useModal } from '/@/components/Modal';
+  import { getDataColumns } from './data';
   import { ListResultDto } from '/@/api/model/baseModel';
   import { OssObject } from '/@/api/oss-management/model/ossModel';
-
-  import { getList as getPrivates, share } from '/@/api/oss-management/private';
+  import { getList as getPrivates } from '/@/api/oss-management/private';
   import { getList as getPublices } from '/@/api/oss-management/public';
   import { generateOssUrl, deleteObject } from '/@/api/oss-management/oss';
+  import FileShareModal from './FileShareModal.vue';
 
   const props = defineProps({
     selectGroup: {
@@ -111,13 +107,7 @@
     }
   });
 
-  const [registershareForm, { validate, setFieldsValue, resetFields }] = useForm({
-    labelAlign: 'left',
-    labelWidth: 120,
-    showActionButtonGroup: false,
-    schemas: getShareModalSchemas(),
-  });
-  const [registerShareModal, { openModal, closeModal }] = useModal();
+  const [registerShareModal, { openModal }] = useModal();
 
   watchEffect(() => {
     props.selectGroup === 'private' && _fetchFileList(getPrivates);
@@ -150,7 +140,7 @@
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       onOk: () => {
-        deleteObject({
+        return deleteObject({
           bucket: bucket.value,
           path: record.path,
           object: record.name,
@@ -165,19 +155,6 @@
   }
 
   function handleShare(record) {
-    openModal(true);
-    nextTick(() => {
-      setFieldsValue(record);
-    });
-  }
-
-  function handleShareFile() {
-    validate().then((input) => {
-      share(input).then(() => {
-        createMessage.success(L('Successful'));
-        resetFields();
-        closeModal();
-      });
-    });
+    openModal(true, record);
   }
 </script>

apps/vue/src/views/account/center/FileShareModal.vue

@@ -0,0 +1,46 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :title="L('Share')"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick } from 'vue';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getShareModalSchemas } from './data';
+  import { share } from '/@/api/oss-management/private';
+
+  const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
+  const { createMessage } = useMessage();
+  const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
+    labelAlign: 'left',
+    labelWidth: 120,
+    showActionButtonGroup: false,
+    schemas: getShareModalSchemas(),
+  });
+  const [registerModal, { changeOkLoading, closeModal }] = useModalInner((data) => {
+    nextTick(() => {
+      resetFields();
+      setFieldsValue(data);
+    });
+  });
+
+  function handleSubmit() {
+    validate().then((input) => {
+      changeOkLoading(true);
+      share(input).then(() => {
+        createMessage.success(L('Successful'));
+        closeModal();
+      }).finally(() => {
+        changeOkLoading(false);
+      });
+    });
+  }
+</script>

apps/vue/src/views/auditing/components/AuditLogTable.vue

@@ -86,7 +86,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity-server/api-resources/components/ApiResourceModal.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, shallowRef } from 'vue';
+  import { ref, shallowRef, nextTick } from 'vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { DownOutlined } from '@ant-design/icons-vue';
@@ -118,22 +118,23 @@
   const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const formElRef = ref<any>(null);
-  const resourceIdRef = ref('');
   const tabActivedKey = ref('basic');
   const advancedComponent = ref('ApiResourceSecret');
   const [registerModal, { changeOkLoading }] = useModalInner((val) => {
-    resourceIdRef.value = val.id;
+    nextTick(() => {
+      fetchResource(val.id);
+    });
   });
   const {
     isEdit,
     resourceRef,
     formRules,
     formTitle,
+    fetchResource,
     handleChangeTab,
     handleVisibleModal,
     handleSubmit,
   } = useModal({
-    resourceIdRef,
     formElRef,
     tabActivedKey,
   });

apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecret.vue

@@ -32,23 +32,18 @@
         </template>
       </template>
     </BasicTable>
-    <BasicModal v-bind="$attrs" @register="registerModal" @ok="handleSubmit" :title="title">
-      <BasicForm @register="registerForm" />
-    </BasicModal>
+    <ApiResourceSecretModal @register="registerModal" @change="handleChange" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Button } from 'ant-design-vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { BasicModal, useModal } from '/@/components/Modal';
+  import { useModal } from '/@/components/Modal';
   import { BasicTable, TableAction } from '/@/components/Table';
   import { ApiResourceSecret } from '/@/api/identity-server/model/apiResourcesModel';
   import { getSecretColumns } from '../datas/TableData';
-  import { getSecretFormSchemas } from '../datas/ModalData';
+  import ApiResourceSecretModal from './ApiResourceSecretModal.vue';
 
   const emits = defineEmits(['register', 'secrets-new', 'secrets-delete']);
   defineProps({
@@ -59,31 +54,18 @@
     },
   });
 
-  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
-  const title = ref('');
-  const [registerForm, { validate, resetFields }] = useForm({
-    labelWidth: 120,
-    showActionButtonGroup: false,
-    schemas: getSecretFormSchemas(),
-  });
-  const [registerModal, { openModal, closeModal }] = useModal();
+  const [registerModal, { openModal }] = useModal();
 
   function handleAddNew() {
-    title.value = L('Secret:New');
-    openModal(true);
+    openModal(true, {});
   }
 
   function handleDelete(record) {
     emits('secrets-delete', record);
   }
 
-  function handleSubmit() {
-    validate().then((input) => {
-      createMessage.success(L('Successful'));
-      emits('secrets-new', input);
-      resetFields();
-      closeModal();
-    });
+  function handleChange(input) {
+    emits('secrets-new', input);
   }
 </script>

apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecretModal.vue

@@ -0,0 +1,42 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    @ok="handleSubmit"
+    :title="L('Secret:New')"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getSecretFormSchemas } from '../datas/ModalData';
+
+  const emits = defineEmits(['register', 'change']);
+
+  const { createMessage } = useMessage();
+  const { L } = useLocalization('AbpIdentityServer');
+  const [registerForm, { validate, resetFields }] = useForm({
+    labelWidth: 120,
+    showActionButtonGroup: false,
+    schemas: getSecretFormSchemas(),
+  });
+  const [registerModal, { closeModal }] = useModalInner(() => {
+    nextTick(() => {
+      resetFields();
+    });
+  });
+
+  function handleSubmit() {
+    validate().then((input) => {
+      createMessage.success(L('Successful'));
+      emits('change', input);
+      closeModal();
+    });
+  }
+</script>

apps/vue/src/views/identity-server/api-resources/components/ApiResourceTable.vue

@@ -97,7 +97,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity-server/api-resources/hooks/useModal.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 
-import { computed, ref, reactive, unref, watch } from 'vue';
+import { computed, ref, reactive, unref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
@@ -10,12 +10,11 @@ import { get, create, update } from '/@/api/identity-server/apiResources';
 import { ApiResource } from '/@/api/identity-server/model/apiResourcesModel';
 
 interface UseModal {
-  resourceIdRef: Ref<string>;
   formElRef: Ref<any>;
   tabActivedKey: Ref<string>;
 }
 
-export function useModal({ resourceIdRef, formElRef, tabActivedKey }: UseModal) {
+export function useModal({ formElRef, tabActivedKey }: UseModal) {
   const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const { ruleCreator } = useValidation();
@@ -42,24 +41,19 @@ export function useModal({ resourceIdRef, formElRef, tabActivedKey }: UseModal)
     }),
   });
 
-  watch(
-    () => unref(resourceIdRef),
-    (id) => {
-      unref(formElRef)?.resetFields();
-      if (id) {
-        get(id).then((res) => {
-          resourceRef.value = res;
-        });
-      } else {
-        resourceRef.value = Object.assign({
-          secrets: [],
-          scopes: [],
-          userClaims: [],
-          properties: [],
-        });
-      }
-    },
-  );
+  function fetchResource(resourceId?: string) {
+    resourceRef.value = Object.assign({
+      secrets: [],
+      scopes: [],
+      userClaims: [],
+      properties: [],
+    });
+    if (resourceId) {
+      get(resourceId).then((res) => {
+        resourceRef.value = res;
+      });
+    }
+  }
 
   function handleChangeTab(activeKey) {
     tabActivedKey.value = activeKey;
@@ -102,5 +96,6 @@ export function useModal({ resourceIdRef, formElRef, tabActivedKey }: UseModal)
     handleChangeTab,
     handleVisibleModal,
     handleSubmit,
+    fetchResource,
   };
 }

apps/vue/src/views/identity-server/api-scopes/components/ApiScopeTable.vue

@@ -105,7 +105,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity-server/clients/components/ClientTable.vue

@@ -123,7 +123,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity-server/identity-resources/components/IdentityResourceTable.vue

@@ -105,7 +105,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity-server/persisted-grants/components/PersistedGrantTable.vue

@@ -75,7 +75,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity/claim-types/hooks/useClaimTable.ts

@@ -46,7 +46,7 @@ export function useClaimTable() {
       content: L('ItemWillBeDeletedMessageWithFormat', [role.name]),
       okCancel: true,
       onOk: () => {
-        deleteById(role.id).then(() => {
+        return deleteById(role.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reloadTable();
         });

apps/vue/src/views/identity/components/ClaimModal.vue

@@ -149,12 +149,17 @@
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessageWithFormat', claim.claimType),
       onOk: () => {
-        if (isFunction(props.deleteApi)) {
-          props.deleteApi(identityRef.value, claim).then(() => {
-            createMessage.success(L('SuccessfullyDeleted'));
-            reload();
-          });
-        }
+        return new Promise<void>((resolve, reject) => {
+          if (isFunction(props.deleteApi)) {
+            props.deleteApi(identityRef.value, claim).then(() => {
+              createMessage.success(L('SuccessfullyDeleted'));
+              reload();
+              resolve();
+            }).catch((error) => reject(error));
+          } else {
+            resolve();
+          }
+        });
       },
     });
   }

apps/vue/src/views/identity/organization-units/hooks/useMemberTable.ts

@@ -68,7 +68,7 @@ export function useMemberTable({ getProps }: UseMemberTable) {
       content: L('OrganizationUnit:AreYouSureRemoveUser', [user.userName] as Recordable),
       okCancel: true,
       onOk: () => {
-        removeOrganizationUnit(user.id, unref(getProps).ouId)
+        return removeOrganizationUnit(user.id, unref(getProps).ouId)
           .then(() => {
             createMessage.success(L('SuccessfullyDeleted'));
             reloadMembers();

apps/vue/src/views/identity/organization-units/hooks/useOuTree.ts

@@ -43,7 +43,7 @@ export function useOuTree({ emit, modalMethods, permissionModalMethods }:
               content: L('ItemWillBeDeletedMessage'),
               okCancel: true,
               onOk: () => {
-                deleteById(node.dataRef.id).then(() => {
+                return deleteById(node.dataRef.id).then(() => {
                   createMessage.success(L('SuccessfullyDeleted'));
                   loadOuTree();
                 });

apps/vue/src/views/identity/organization-units/hooks/useRoleTable.ts

@@ -47,7 +47,7 @@ export function useRoleTable({ getProps }: UseRoleTable) {
       content: L('OrganizationUnit:AreYouSureRemoveRole', [role.name] as Recordable),
       okCancel: true,
       onOk: () => {
-        removeOrganizationUnit(role.id, unref(getProps).ouId)
+        return removeOrganizationUnit(role.id, unref(getProps).ouId)
           .then(() => {
             createMessage.success(L('SuccessfullyDeleted'));
             reloadRoles();

apps/vue/src/views/identity/role/hooks/useClaim.ts

@@ -108,7 +108,7 @@ export function useClaim({ roleIdRef }: UseClaim) {
       content: L('ItemWillBeDeletedMessageWithFormat', [claim.claimValue] as Recordable),
       okCancel: true,
       onOk: () => {
-        deleteClaim(unref(roleIdRef), claim)
+        return deleteClaim(unref(roleIdRef), claim)
           .then(() => {
             createMessage.success(L('SuccessfullyDeleted'));
             reloadTable();

apps/vue/src/views/identity/role/hooks/useRoleTable.ts

@@ -39,7 +39,7 @@ export function useRoleTable() {
       content: L('ItemWillBeDeletedMessageWithFormat', [role.name] as Recordable),
       okCancel: true,
       onOk: () => {
-        deleteById(role.id).then(() => {
+        return deleteById(role.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reloadTable();
         });

apps/vue/src/views/identity/security-logs/components/SecurityLogTable.vue

@@ -60,7 +60,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/identity/user/components/PasswordModal.vue

@@ -23,7 +23,7 @@
   const userIdRef = ref('');
   const formElRef = ref<Nullable<FormActionType>>(null);
   const { formSchemas } = usePassword(formElRef);
-  const [registerModal, { closeModal }] = useModalInner((val) => {
+  const [registerModal, { changeOkLoading, closeModal }] = useModalInner((val) => {
     userIdRef.value = val;
   });
   const [registerForm, { validate }] = useForm({
@@ -38,11 +38,14 @@
     const userId = unref(userIdRef);
     if (userId) {
       validate().then((res) => {
+        changeOkLoading(true);
         changePassword(userId, {
           password: res.password,
         }).then(() => {
           createMessage.success(L('Successful'));
           closeModal();
+        }).finally(() => {
+          changeOkLoading(true);
         });
       });
     }

apps/vue/src/views/identity/user/hooks/useUserTable.ts

@@ -58,7 +58,7 @@ export function useUserTable() {
       content: L('ItemWillBeDeletedMessageWithFormat', [user.userName] as Recordable),
       okCancel: true,
       onOk: () => {
-        deleteById(user.id)
+        return deleteById(user.id)
           .then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
             reloadTable();

apps/vue/src/views/messages/notifications/components/NotificationTable.vue

@@ -170,7 +170,7 @@
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/openiddict/applications/components/ApplicationTable.vue

@@ -74,14 +74,9 @@
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       onOk: () => {
-        return new Promise((resolve, reject) => {
-          deleteById(record.key).then(() => {
-            createMessage.success(L('Successful'));
-            reload();
-            return resolve(record.key);
-          }).catch((error) => {
-            return reject(error);
-          });
+        return deleteById(record.key).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
+          reload();
         });
       },
     });

apps/vue/src/views/openiddict/authorizations/components/AuthorizationTable.vue

@@ -74,14 +74,9 @@
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       onOk: () => {
-        return new Promise((resolve, reject) => {
-          deleteById(record.key).then(() => {
-            createMessage.success(L('Successful'));
-            reload();
-            return resolve(record.key);
-          }).catch((error) => {
-            return reject(error);
-          });
+        return deleteById(record.key).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
+          reload();
         });
       },
     });

apps/vue/src/views/openiddict/tokens/components/TokenTable.vue

@@ -74,14 +74,9 @@
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       onOk: () => {
-        return new Promise((resolve, reject) => {
-          deleteById(record.id).then(() => {
-            createMessage.success(L('Successful'));
-            reload();
-            return resolve(record.id);
-          }).catch((error) => {
-            return reject(error);
-          });
+        return deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
+          reload();
         });
       },
     });

apps/vue/src/views/oss-management/containers/components/ContainerModal.vue

@@ -0,0 +1,52 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :title="L('Containers')"
+    :width="466"
+    :min-height="66"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { createContainer } from '/@/api/oss-management/oss';
+  import { getModalFormSchemas } from './ModalData';
+
+  const emits = defineEmits(['change', 'register']);
+
+  const { createMessage } = useMessage();
+  const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
+  const [registerForm, { validate, resetFields }] = useForm({
+    labelWidth: 120,
+    schemas: getModalFormSchemas(),
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const [registerModal, { changeOkLoading, closeModal }] = useModalInner(() => {
+    nextTick(() => {
+      resetFields();
+    });
+  });
+
+  function handleSubmit() {
+    validate().then((input) => {
+      changeOkLoading(true);
+      createContainer(input.name).then((res) => {
+        createMessage.success(L('Successful'));
+        emits('change', res);
+        closeModal();
+      }).finally(() => {
+        changeOkLoading(false);
+      });
+    });
+  }
+</script>

apps/vue/src/views/oss-management/containers/components/ContainerTable.vue

@@ -26,15 +26,7 @@
         </template>
       </template>
     </BasicTable>
-    <BasicModal
-      @register="registerModal"
-      :title="L('Containers')"
-      :width="466"
-      :min-height="66"
-      @ok="handleSubmit"
-    >
-      <BasicForm @register="registerForm" />
-    </BasicModal>
+    <ContainerModal @register="registerModal" @change="reload" />
   </div>
 </template>
 
@@ -42,26 +34,18 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
-  import { BasicModal, useModal } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form';
+  import { useModal } from '/@/components/Modal';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
-  import { createContainer, deleteContainer, getContainers } from '/@/api/oss-management/oss';
+  import { deleteContainer, getContainers } from '/@/api/oss-management/oss';
   import { getDataColumns } from './TableData';
-  import { getSearchFormSchemas, getModalFormSchemas } from './ModalData';
+  import { getSearchFormSchemas } from './ModalData';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
+  import ContainerModal from './ContainerModal.vue';
 
   const { createMessage, createConfirm } = useMessage();
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
   const { hasPermission } = usePermission();
-  const [registerModal, { openModal, closeModal }] = useModal();
-  const [registerForm, { validate, resetFields }] = useForm({
-    labelWidth: 120,
-    schemas: getModalFormSchemas(),
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 24,
-    },
-  });
+  const [registerModal, { openModal }] = useModal();
   const [registerTable, { reload }] = useTable({
     rowKey: 'name',
     title: L('Containers'),
@@ -92,7 +76,6 @@
   });
 
   function handleAddNew() {
-    resetFields();
     openModal(true, {});
   }
 
@@ -103,21 +86,11 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteContainer(record.name).then(() => {
+        return deleteContainer(record.name).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-  function handleSubmit() {
-    validate().then((input) => {
-      createContainer(input.name).then(() => {
-        createMessage.success(L('Successful'));
-        closeModal();
-        reload();
-      });
-    });
-  }
 </script>

apps/vue/src/views/oss-management/objects/components/FileList.vue

@@ -168,7 +168,7 @@
       content: L('Objects:WillBeBulkDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        bulkDeleteObject({
+        return bulkDeleteObject({
           bucket: props.bucket,
           path: props.path,
           objects: getSelectRowKeys(),
@@ -194,7 +194,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteObject({
+        return deleteObject({
           bucket: props.bucket,
           path: props.path,
           object: record.name,

apps/vue/src/views/oss-management/objects/components/OssFolderModal.vue

@@ -33,7 +33,7 @@
       span: 24,
     },
   });
-  const [registerModal, { closeModal }] = useModalInner((data) => {
+  const [registerModal, { changeOkLoading, closeModal }] = useModalInner((data) => {
     resetFields();
     path.value = data.path;
     bucket.value = data.bucket;
@@ -41,6 +41,7 @@
 
   function handleSubmit() {
     validate().then((input) => {
+      changeOkLoading(true);
       const name = input.name.endsWith('/') ? input.name : input.name + '/';
       createObject({
         bucket: unref(bucket),
@@ -51,6 +52,8 @@
         createMessage.success(L('Successful'));
         closeModal();
         emits('change', name);
+      }).finally(() => {
+        changeOkLoading(false);
       });
     });
   }

apps/vue/src/views/platform/dataDic/components/DataItemTable.vue

@@ -117,7 +117,7 @@
         L('ItemWillBeDeletedMessageWithFormat', [record.displayName] as Recordable),
       ),
       onOk: () => {
-        removeItem(props.dataId!, record.name)
+        return removeItem(props.dataId!, record.name)
           .then(() => {
             createMessage.success(L('SuccessfullyDeleted'));
             emits('reload');

apps/vue/src/views/platform/dataDic/components/DataTree.vue

@@ -78,7 +78,7 @@
             content: L('ItemWillBeDeletedMessage'),
             okCancel: true,
             onOk: () => {
-              remove(node.eventKey).then(() => {
+              return remove(node.eventKey).then(() => {
                 createMessage.success(L('SuccessfullyDeleted'));
                 onLoadAllDataDic();
               });

apps/vue/src/views/platform/layout/components/LayoutTable.vue

@@ -78,7 +78,7 @@
       content: L('ItemWillBeDeletedMessageWithFormat', [record.displayName]),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/platform/menu/components/MenuDrawer.vue

@@ -47,7 +47,7 @@
       framework: framework,
     });
 
-  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner((dataVal) => {
+  const [registerDrawer, { setDrawerProps, changeOkLoading, closeDrawer }] = useDrawerInner((dataVal) => {
     menu.value = dataVal;
     framework.value = props.framework;
     nextTick(() => {
@@ -57,10 +57,13 @@
   });
 
   function handleSubmit() {
+    changeOkLoading(true);
     handleFormSubmit()?.then(() => {
       createMessage.success(L('Successful'));
       closeDrawer();
       emits('change');
+    }).finally(() => {
+      changeOkLoading(false);
     });
   }
 </script>

apps/vue/src/views/platform/menu/components/MenuTable.vue

@@ -95,7 +95,7 @@
       content: L('ItemWillBeDeletedMessageWithFormat', [record.displayName]),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/saas/editions/components/EditionTable.vue

@@ -100,7 +100,7 @@
       content: L('ItemWillBeDeletedMessageWithFormat', record.displayName),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });

apps/vue/src/views/saas/tenant/components/ConnectionEditModal.vue

@@ -17,7 +17,7 @@
   import { setConnectionString } from '/@/api/saas/tenant';
   import { getConnectionFormSchemas } from '../datas//ModalData';
 
-  const emits = defineEmits(['change']);
+  const emits = defineEmits(['change', 'register']);
 
   const { createMessage } = useMessage();
   const { L } = useLocalization(['AbpSaas']);
@@ -29,7 +29,7 @@
     schemas: getConnectionFormSchemas(),
     showActionButtonGroup: false,
   });
-  const [registerModal, { closeModal }] = useModalInner((data) => {
+  const [registerModal, { closeModal, changeOkLoading }] = useModalInner((data) => {
     nextTick(() => {
       resetFields();
       setFieldsValue(data);
@@ -38,11 +38,12 @@
 
   function handleSubmit() {
     validate().then((input) => {
+      changeOkLoading(true);
       setConnectionString(input.id, input).then(() => {
         createMessage.success(L('Successful'));
         closeModal();
         emits('change');
-      });
+      }).finally(() => changeOkLoading(false));
     });
   }
 </script>

apps/vue/src/views/saas/tenant/components/ConnectionTableModal.vue

@@ -47,6 +47,7 @@
   import { deleteConnectionString, getConnectionStrings } from '/@/api/saas/tenant';
   import ConnectionEditModal from './ConnectionEditModal.vue';
 
+  defineEmits(['register']);
   const { createMessage, createConfirm } = useMessage();
   const { L } = useLocalization(['AbpSaas']);
   const tenantIdRef = ref('');
@@ -85,7 +86,7 @@
       content: L('TenantDeletionConfirmationMessage', [record.name]),
       okCancel: true,
       onOk: () => {
-        deleteConnectionString(unref(tenantIdRef), record.name).then(() => {
+        return deleteConnectionString(unref(tenantIdRef), record.name).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           handleReloadTable();
         });

apps/vue/src/views/saas/tenant/datas/ModalData.ts

@@ -151,6 +151,14 @@ export function getModalFormSchemas(): FormSchema[] {
 
 export function getConnectionFormSchemas(): FormSchema[] {
   return [
+    {
+      field: 'id',
+      component: 'Input',
+      label: 'id',
+      colProps: { span: 24 },
+      show: false,
+      dynamicDisabled: true,
+    },
     {
       field: 'name',
       component: 'Input',

apps/vue/src/views/saas/tenant/hooks/useTenantTable.ts

@@ -46,7 +46,7 @@ export function useTenantTable({ tableElRef }: UseTenantTable) {
       content: L('ItemWillBeDeletedMessageWithFormat', [record.name]),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           createMessage.success(L('SuccessfullyDeleted'));
           handleReload();
         });

apps/vue/src/views/webhooks/send-attempts/components/SendAttemptTable.vue

@@ -90,7 +90,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           reload();
           createMessage.success(L('Successful'));
         });

apps/vue/src/views/webhooks/subscriptions/components/SubscriptionTable.vue

@@ -97,7 +97,7 @@
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
-        deleteById(record.id).then(() => {
+        return deleteById(record.id).then(() => {
           reload();
         });
       },