From 9b67e8bdf20309a723723eb8b7a20d2c2e771a76 Mon Sep 17 00:00:00 2001 From: cKey <35512826+colinin@users.noreply.github.com> Date: Mon, 5 Sep 2022 20:01:53 +0800 Subject: [PATCH] optimize modal window user experience --- .../vue/src/views/account/center/FileList.vue | 41 ++++----------- .../views/account/center/FileShareModal.vue | 46 ++++++++++++++++ .../auditing/components/AuditLogTable.vue | 2 +- .../components/ApiResourceModal.vue | 9 ++-- .../components/ApiResourceSecret.vue | 32 +++--------- .../components/ApiResourceSecretModal.vue | 42 +++++++++++++++ .../components/ApiResourceTable.vue | 2 +- .../api-resources/hooks/useModal.ts | 37 ++++++------- .../api-scopes/components/ApiScopeTable.vue | 2 +- .../clients/components/ClientTable.vue | 2 +- .../components/IdentityResourceTable.vue | 2 +- .../components/PersistedGrantTable.vue | 2 +- .../claim-types/hooks/useClaimTable.ts | 2 +- .../views/identity/components/ClaimModal.vue | 17 +++--- .../hooks/useMemberTable.ts | 2 +- .../organization-units/hooks/useOuTree.ts | 2 +- .../organization-units/hooks/useRoleTable.ts | 2 +- .../src/views/identity/role/hooks/useClaim.ts | 2 +- .../views/identity/role/hooks/useRoleTable.ts | 2 +- .../components/SecurityLogTable.vue | 2 +- .../user/components/PasswordModal.vue | 5 +- .../views/identity/user/hooks/useUserTable.ts | 2 +- .../components/NotificationTable.vue | 2 +- .../components/ApplicationTable.vue | 11 ++-- .../components/AuthorizationTable.vue | 11 ++-- .../tokens/components/TokenTable.vue | 11 ++-- .../containers/components/ContainerModal.vue | 52 +++++++++++++++++++ .../containers/components/ContainerTable.vue | 41 +++------------ .../objects/components/FileList.vue | 4 +- .../objects/components/OssFolderModal.vue | 5 +- .../dataDic/components/DataItemTable.vue | 2 +- .../platform/dataDic/components/DataTree.vue | 2 +- .../layout/components/LayoutTable.vue | 2 +- .../platform/menu/components/MenuDrawer.vue | 5 +- .../platform/menu/components/MenuTable.vue | 2 +- .../saas/editions/components/EditionTable.vue | 2 +- .../tenant/components/ConnectionEditModal.vue | 7 +-- .../components/ConnectionTableModal.vue | 3 +- .../src/views/saas/tenant/datas/ModalData.ts | 8 +++ .../views/saas/tenant/hooks/useTenantTable.ts | 2 +- .../components/SendAttemptTable.vue | 2 +- .../components/SubscriptionTable.vue | 2 +- 42 files changed, 255 insertions(+), 178 deletions(-) create mode 100644 apps/vue/src/views/account/center/FileShareModal.vue create mode 100644 apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecretModal.vue create mode 100644 apps/vue/src/views/oss-management/containers/components/ContainerModal.vue diff --git a/apps/vue/src/views/account/center/FileList.vue b/apps/vue/src/views/account/center/FileList.vue index 6c3e6bd4e..2ddd59dc0 100644 --- a/apps/vue/src/views/account/center/FileList.vue +++ b/apps/vue/src/views/account/center/FileList.vue @@ -31,27 +31,23 @@ - - - + diff --git a/apps/vue/src/views/account/center/FileShareModal.vue b/apps/vue/src/views/account/center/FileShareModal.vue new file mode 100644 index 000000000..5850bd8f0 --- /dev/null +++ b/apps/vue/src/views/account/center/FileShareModal.vue @@ -0,0 +1,46 @@ + + + diff --git a/apps/vue/src/views/auditing/components/AuditLogTable.vue b/apps/vue/src/views/auditing/components/AuditLogTable.vue index ab39ecab9..08539aefc 100644 --- a/apps/vue/src/views/auditing/components/AuditLogTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity-server/api-resources/components/ApiResourceModal.vue b/apps/vue/src/views/identity-server/api-resources/components/ApiResourceModal.vue index 0fbdacd20..c5c5af50c 100644 --- a/apps/vue/src/views/identity-server/api-resources/components/ApiResourceModal.vue +++ b/apps/vue/src/views/identity-server/api-resources/components/ApiResourceModal.vue @@ -86,7 +86,7 @@ diff --git a/apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecretModal.vue b/apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecretModal.vue new file mode 100644 index 000000000..0cd899bf7 --- /dev/null +++ b/apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecretModal.vue @@ -0,0 +1,42 @@ + + + diff --git a/apps/vue/src/views/identity-server/api-resources/components/ApiResourceTable.vue b/apps/vue/src/views/identity-server/api-resources/components/ApiResourceTable.vue index cf548fb1e..c59f455ff 100644 --- a/apps/vue/src/views/identity-server/api-resources/components/ApiResourceTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity-server/api-resources/hooks/useModal.ts b/apps/vue/src/views/identity-server/api-resources/hooks/useModal.ts index 633812df2..a0ee64c64 100644 --- a/apps/vue/src/views/identity-server/api-resources/hooks/useModal.ts +++ b/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; formElRef: Ref; tabActivedKey: Ref; } -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, }; } diff --git a/apps/vue/src/views/identity-server/api-scopes/components/ApiScopeTable.vue b/apps/vue/src/views/identity-server/api-scopes/components/ApiScopeTable.vue index c99990190..a1a730eb9 100644 --- a/apps/vue/src/views/identity-server/api-scopes/components/ApiScopeTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity-server/clients/components/ClientTable.vue b/apps/vue/src/views/identity-server/clients/components/ClientTable.vue index 9905fdd53..50e9ac6a6 100644 --- a/apps/vue/src/views/identity-server/clients/components/ClientTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity-server/identity-resources/components/IdentityResourceTable.vue b/apps/vue/src/views/identity-server/identity-resources/components/IdentityResourceTable.vue index 15601f66b..5b6dbff13 100644 --- a/apps/vue/src/views/identity-server/identity-resources/components/IdentityResourceTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity-server/persisted-grants/components/PersistedGrantTable.vue b/apps/vue/src/views/identity-server/persisted-grants/components/PersistedGrantTable.vue index be487129a..7df5acd20 100644 --- a/apps/vue/src/views/identity-server/persisted-grants/components/PersistedGrantTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity/claim-types/hooks/useClaimTable.ts b/apps/vue/src/views/identity/claim-types/hooks/useClaimTable.ts index 8959adbd7..560aa49ab 100644 --- a/apps/vue/src/views/identity/claim-types/hooks/useClaimTable.ts +++ b/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(); }); diff --git a/apps/vue/src/views/identity/components/ClaimModal.vue b/apps/vue/src/views/identity/components/ClaimModal.vue index b793287e7..be06500c8 100644 --- a/apps/vue/src/views/identity/components/ClaimModal.vue +++ b/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((resolve, reject) => { + if (isFunction(props.deleteApi)) { + props.deleteApi(identityRef.value, claim).then(() => { + createMessage.success(L('SuccessfullyDeleted')); + reload(); + resolve(); + }).catch((error) => reject(error)); + } else { + resolve(); + } + }); }, }); } diff --git a/apps/vue/src/views/identity/organization-units/hooks/useMemberTable.ts b/apps/vue/src/views/identity/organization-units/hooks/useMemberTable.ts index 43b608ab9..d85434aec 100644 --- a/apps/vue/src/views/identity/organization-units/hooks/useMemberTable.ts +++ b/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(); diff --git a/apps/vue/src/views/identity/organization-units/hooks/useOuTree.ts b/apps/vue/src/views/identity/organization-units/hooks/useOuTree.ts index aaf74d15c..0d0165d3c 100644 --- a/apps/vue/src/views/identity/organization-units/hooks/useOuTree.ts +++ b/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(); }); diff --git a/apps/vue/src/views/identity/organization-units/hooks/useRoleTable.ts b/apps/vue/src/views/identity/organization-units/hooks/useRoleTable.ts index 902e8f451..5ceb55068 100644 --- a/apps/vue/src/views/identity/organization-units/hooks/useRoleTable.ts +++ b/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(); diff --git a/apps/vue/src/views/identity/role/hooks/useClaim.ts b/apps/vue/src/views/identity/role/hooks/useClaim.ts index 7d48c64c0..0a2cfe165 100644 --- a/apps/vue/src/views/identity/role/hooks/useClaim.ts +++ b/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(); diff --git a/apps/vue/src/views/identity/role/hooks/useRoleTable.ts b/apps/vue/src/views/identity/role/hooks/useRoleTable.ts index 780726aa0..c6c50e020 100644 --- a/apps/vue/src/views/identity/role/hooks/useRoleTable.ts +++ b/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(); }); diff --git a/apps/vue/src/views/identity/security-logs/components/SecurityLogTable.vue b/apps/vue/src/views/identity/security-logs/components/SecurityLogTable.vue index 5123a9fb0..de9951642 100644 --- a/apps/vue/src/views/identity/security-logs/components/SecurityLogTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/identity/user/components/PasswordModal.vue b/apps/vue/src/views/identity/user/components/PasswordModal.vue index acb4beecf..b5faf98f6 100644 --- a/apps/vue/src/views/identity/user/components/PasswordModal.vue +++ b/apps/vue/src/views/identity/user/components/PasswordModal.vue @@ -23,7 +23,7 @@ const userIdRef = ref(''); const formElRef = ref>(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); }); }); } diff --git a/apps/vue/src/views/identity/user/hooks/useUserTable.ts b/apps/vue/src/views/identity/user/hooks/useUserTable.ts index 77444b597..0756a880b 100644 --- a/apps/vue/src/views/identity/user/hooks/useUserTable.ts +++ b/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(); diff --git a/apps/vue/src/views/messages/notifications/components/NotificationTable.vue b/apps/vue/src/views/messages/notifications/components/NotificationTable.vue index 3f4572c22..1eda6c394 100644 --- a/apps/vue/src/views/messages/notifications/components/NotificationTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/openiddict/applications/components/ApplicationTable.vue b/apps/vue/src/views/openiddict/applications/components/ApplicationTable.vue index b4718ca48..e644e72d0 100644 --- a/apps/vue/src/views/openiddict/applications/components/ApplicationTable.vue +++ b/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(); }); }, }); diff --git a/apps/vue/src/views/openiddict/authorizations/components/AuthorizationTable.vue b/apps/vue/src/views/openiddict/authorizations/components/AuthorizationTable.vue index 43d0d51d0..625a23aee 100644 --- a/apps/vue/src/views/openiddict/authorizations/components/AuthorizationTable.vue +++ b/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(); }); }, }); diff --git a/apps/vue/src/views/openiddict/tokens/components/TokenTable.vue b/apps/vue/src/views/openiddict/tokens/components/TokenTable.vue index ba2554eb6..107ee795e 100644 --- a/apps/vue/src/views/openiddict/tokens/components/TokenTable.vue +++ b/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(); }); }, }); diff --git a/apps/vue/src/views/oss-management/containers/components/ContainerModal.vue b/apps/vue/src/views/oss-management/containers/components/ContainerModal.vue new file mode 100644 index 000000000..3efa69589 --- /dev/null +++ b/apps/vue/src/views/oss-management/containers/components/ContainerModal.vue @@ -0,0 +1,52 @@ + + + diff --git a/apps/vue/src/views/oss-management/containers/components/ContainerTable.vue b/apps/vue/src/views/oss-management/containers/components/ContainerTable.vue index 396775b86..ca9a629f8 100644 --- a/apps/vue/src/views/oss-management/containers/components/ContainerTable.vue +++ b/apps/vue/src/views/oss-management/containers/components/ContainerTable.vue @@ -26,15 +26,7 @@ - - - + @@ -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(); - }); - }); - } diff --git a/apps/vue/src/views/oss-management/objects/components/FileList.vue b/apps/vue/src/views/oss-management/objects/components/FileList.vue index 301f186ca..edf57e5ea 100644 --- a/apps/vue/src/views/oss-management/objects/components/FileList.vue +++ b/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, diff --git a/apps/vue/src/views/oss-management/objects/components/OssFolderModal.vue b/apps/vue/src/views/oss-management/objects/components/OssFolderModal.vue index 7ed78c3d7..b46617a92 100644 --- a/apps/vue/src/views/oss-management/objects/components/OssFolderModal.vue +++ b/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); }); }); } diff --git a/apps/vue/src/views/platform/dataDic/components/DataItemTable.vue b/apps/vue/src/views/platform/dataDic/components/DataItemTable.vue index b87641686..f6ffa0f5a 100644 --- a/apps/vue/src/views/platform/dataDic/components/DataItemTable.vue +++ b/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'); diff --git a/apps/vue/src/views/platform/dataDic/components/DataTree.vue b/apps/vue/src/views/platform/dataDic/components/DataTree.vue index 0c45647ca..21a5c3d3a 100644 --- a/apps/vue/src/views/platform/dataDic/components/DataTree.vue +++ b/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(); }); diff --git a/apps/vue/src/views/platform/layout/components/LayoutTable.vue b/apps/vue/src/views/platform/layout/components/LayoutTable.vue index 701662a74..8ff200fa8 100644 --- a/apps/vue/src/views/platform/layout/components/LayoutTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/platform/menu/components/MenuDrawer.vue b/apps/vue/src/views/platform/menu/components/MenuDrawer.vue index 7a6701666..1ea88a252 100644 --- a/apps/vue/src/views/platform/menu/components/MenuDrawer.vue +++ b/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); }); } diff --git a/apps/vue/src/views/platform/menu/components/MenuTable.vue b/apps/vue/src/views/platform/menu/components/MenuTable.vue index 49e185cea..0ed5c3892 100644 --- a/apps/vue/src/views/platform/menu/components/MenuTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/saas/editions/components/EditionTable.vue b/apps/vue/src/views/saas/editions/components/EditionTable.vue index 93998352b..85a72640c 100644 --- a/apps/vue/src/views/saas/editions/components/EditionTable.vue +++ b/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(); }); diff --git a/apps/vue/src/views/saas/tenant/components/ConnectionEditModal.vue b/apps/vue/src/views/saas/tenant/components/ConnectionEditModal.vue index ef565a681..5e19ef868 100644 --- a/apps/vue/src/views/saas/tenant/components/ConnectionEditModal.vue +++ b/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)); }); } diff --git a/apps/vue/src/views/saas/tenant/components/ConnectionTableModal.vue b/apps/vue/src/views/saas/tenant/components/ConnectionTableModal.vue index c6d18a513..45525cbba 100644 --- a/apps/vue/src/views/saas/tenant/components/ConnectionTableModal.vue +++ b/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(); }); diff --git a/apps/vue/src/views/saas/tenant/datas/ModalData.ts b/apps/vue/src/views/saas/tenant/datas/ModalData.ts index e352b1292..f2440a223 100644 --- a/apps/vue/src/views/saas/tenant/datas/ModalData.ts +++ b/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', diff --git a/apps/vue/src/views/saas/tenant/hooks/useTenantTable.ts b/apps/vue/src/views/saas/tenant/hooks/useTenantTable.ts index 6c97c3d70..7995b4c96 100644 --- a/apps/vue/src/views/saas/tenant/hooks/useTenantTable.ts +++ b/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(); }); diff --git a/apps/vue/src/views/webhooks/send-attempts/components/SendAttemptTable.vue b/apps/vue/src/views/webhooks/send-attempts/components/SendAttemptTable.vue index 376df676d..49e544f73 100644 --- a/apps/vue/src/views/webhooks/send-attempts/components/SendAttemptTable.vue +++ b/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')); }); diff --git a/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionTable.vue b/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionTable.vue index 4aa1edef9..586f8933c 100644 --- a/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionTable.vue +++ b/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(); }); },