fix(系统设置): 系统组织与项目所有操作增加loading

frontend/src/hooks/useModal.ts

@@ -38,14 +38,14 @@ export default function useModal() {
           options.size || 'small'
         } ms-usemodal-${options.type}`,
       }),
-    deleteModal: (options: DeleteModalOptions) =>
+    openDeleteModal: (options: DeleteModalOptions) =>
       Modal.warning({
         okText: t('common.confirmDelete'),
         cancelText: t('common.cancel'),
         hideCancel: false,
         okButtonProps: { status: 'danger' },
         titleAlign: 'start',
-        modalClass: `ms-usemodal ms-usemodal-warning ms-usemodal-small ms-usemodal--warning`,
+        modalClass: `ms-usemodal ms-usemodal-warning ms-usemodal-small`,
         ...options,
       }),
   };

frontend/src/locale/en-US/common.ts

@@ -13,6 +13,7 @@ export default {
   'common.end': 'End',
   'common.enable': 'Enable',
   'common.close': 'Close',
+  'common.create': 'Create',
   'common.confirmEnable': 'Confirm enable',
   'common.confirmClose': 'Confirm close',
   'common.enableSuccess': 'Enable success',

frontend/src/locale/zh-CN/common.ts

@@ -13,6 +13,7 @@ export default {
   'common.end': '结束',
   'common.enable': '启用',
   'common.close': '关闭',
+  'common.create': '创建',
   'common.confirmEnable': '确认启用',
   'common.confirmClose': '确认关闭',
   'common.enableSuccess': '启用成功',

frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue

@@ -2,12 +2,20 @@
   <a-modal
     v-model:visible="currentVisible"
     width="680px"
+    class="ms-modal-form ms-modal-medium"
     :ok-text="t('system.organization.create')"
     unmount-on-close
-    :on-before-ok="handleBeforeOk"
     @cancel="handleCancel"
   >
-    <template #title> {{ t('system.organization.createOrganization') }} </template>
+    <template #title>
+      <span v-if="isEdit">
+        {{ t('system.organization.updateOrganization') }}
+        <span class="text-[var(--color-text-4)]">({{ props.currentOrganization?.name }})</span>
+      </span>
+      <span v-else>
+        {{ t('system.organization.createOrganization') }}
+      </span>
+    </template>
     <div class="form">
       <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
         <a-form-item
@@ -29,12 +37,20 @@
         </a-form-item>
       </a-form>
     </div>
+    <template #footer>
+      <a-button type="secondary" :loading="loading" @click="handleCancel">
+        {{ t('common.cancel') }}
+      </a-button>
+      <a-button type="primary" :loading="loading" @click="handleBeforeOk">
+        {{ isEdit ? t('common.confirm') : t('common.create') }}
+      </a-button>
+    </template>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
-  import { reactive, ref, watchEffect } from 'vue';
+  import { reactive, ref, watchEffect, computed } from 'vue';
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
   import MsUserSelector from '@/components/bussiness/ms-user-selector/index.vue';
   import { createOrUpdateOrg } from '@/api/modules/setting/system/organizationAndProject';
@@ -49,6 +65,8 @@
 
   const formRef = ref<FormInstance>();
 
+  const loading = ref(false);
+
   const emit = defineEmits<{
     (e: 'cancel'): void;
   }>();
@@ -74,6 +92,7 @@
         return false;
       }
       try {
+        loading.value = true;
         await createOrUpdateOrg({ id: props.currentOrganization?.id, ...form });
         Message.success(
           props.currentOrganization?.id
@@ -86,6 +105,8 @@
         // eslint-disable-next-line no-console
         console.error(error);
         return false;
+      } finally {
+        loading.value = false;
       }
     });
   };
@@ -96,4 +117,5 @@
       form.description = props.currentOrganization.description;
     }
   });
+  const isEdit = computed(() => !!props.currentOrganization?.id);
 </script>

frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue

@@ -20,11 +20,11 @@
       </a-form>
     </div>
     <template #footer>
-      <a-button type="secondary" @click="handleCancel">
+      <a-button type="secondary" :loading="loading" @click="handleCancel">
-        {{ t('system.organization.cancel') }}
+        {{ t('common.cancel') }}
       </a-button>
       <a-button type="primary" :loading="loading" :disabled="form.name.length === 0" @click="handleAddMember">
-        {{ t('system.organization.add') }}
+        {{ t('common.add') }}
       </a-button>
     </template>
   </a-modal>
@@ -69,15 +69,14 @@
 
   const handleAddMember = () => {
     formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
-      loading.value = true;
       if (errors) {
         loading.value = false;
       }
       const { organizationId, projectId } = props;
       try {
+        loading.value = true;
         await addUserToOrgOrProject({ memberIds: form.name, organizationId, projectId });
         Message.success(t('system.organization.addSuccess'));
-        loading.value = false;
         handleCancel();
       } catch (error) {
         // eslint-disable-next-line no-console

frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue

@@ -86,7 +86,7 @@
   const orgVisible = ref(false);
   const currentOrganizationId = ref('');
   const currentUpdateOrganization = ref<CreateOrUpdateSystemOrgParams>();
-  const { deleteModal, openModal } = useModal();
+  const { openDeleteModal, openModal } = useModal();
 
   const organizationColumns: MsTableColumn = [
     {
@@ -170,7 +170,7 @@
   ];
 
   const handleDelete = (record: TableData) => {
-    deleteModal({
+    openDeleteModal({
       title: t('system.organization.deleteName', { name: record.name }),
       content: t('system.organization.deleteTip'),
       onOk: async () => {

frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts

@@ -50,5 +50,6 @@ export default {
   'system.organization.enableContent': 'The organization after opening is displayed in the organization switching list',
   'system.organization.endContent':
     'The organization after closing is not displayed in the organization switching list',
+  'system.organization.updateOrganization': 'Update organization',
   'system.organization.updateOrganizationSuccess': 'Update organization success',
 };

frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts

@@ -46,5 +46,6 @@ export default {
   'system.organization.endTitle': '关闭组织',
   'system.organization.enableContent': '开启后的组织展示在组织切换列表',
   'system.organization.endContent': '关闭后的组织不展示在组织切换列表',
+  'system.organization.updateOrganization': '更新组织',
   'system.organization.updateOrganizationSuccess': '更新组织成功',
 };