From 27189088fed1893cd7dae98ccb6037fa384e5524 Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Tue, 15 Aug 2023 16:23:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=BB=84=E7=BB=87=E4=B8=8E=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E6=93=8D=E4=BD=9C=E5=A2=9E=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useModal.ts                |  4 +--
 frontend/src/locale/en-US/common.ts           |  1 +
 frontend/src/locale/zh-CN/common.ts           |  1 +
 .../components/addOrganizationModal.vue       | 28 +++++++++++++++++--
 .../components/addUserModal.vue               |  9 +++---
 .../components/systemOrganization.vue         |  4 +--
 .../organizationAndProject/locale/en-US.ts    |  1 +
 .../organizationAndProject/locale/zh-CN.ts    |  1 +
 8 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/src/hooks/useModal.ts b/frontend/src/hooks/useModal.ts
index 7a65b9287f..aebf73e731 100644
--- a/frontend/src/hooks/useModal.ts
+++ b/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,
       }),
   };
diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts
index 11fb6a71c5..97efe0e286 100644
--- a/frontend/src/locale/en-US/common.ts
+++ b/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',
diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts
index e53ec3ab77..5d339f8ec0 100644
--- a/frontend/src/locale/zh-CN/common.ts
+++ b/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': '启用成功',
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue b/frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue
index 7c2ab894d3..26135fcf5d 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue
+++ b/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>
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue b/frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue
index 8c63277a7d..9bc63e242f 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue
@@ -20,11 +20,11 @@
       </a-form>
     </div>
     <template #footer>
-      <a-button type="secondary" @click="handleCancel">
-        {{ t('system.organization.cancel') }}
+      <a-button type="secondary" :loading="loading" @click="handleCancel">
+        {{ 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
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
index 4165d400f1..216c638f21 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/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 () => {
diff --git a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
index 36bd0e046a..07092bedf6 100644
--- a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
+++ b/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',
 };
diff --git a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
index 207b8b336f..6a336729ed 100644
--- a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
+++ b/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': '更新组织成功',
 };