feat(系统设置): 修改公共组件弹窗

frontend/src/hooks/useModal.ts

@@ -1,6 +1,7 @@
 import { Modal } from '@arco-design/web-vue';
 import type { ModalConfig } from '@arco-design/web-vue';
 import { useI18n } from '@/hooks/useI18n';
+import { ref } from 'vue';
 
 export type ModalType = 'info' | 'success' | 'warning' | 'error';
 
@@ -12,6 +13,7 @@ export interface ModalOptions extends ModalConfig {
   mode?: ModalMode;
   type: ModalType;
   size?: ModalSize;
+  onBeforeOk: () => Promise<void>;
 }
 
 export interface DeleteModalOptions extends ModalConfig {
@@ -20,6 +22,7 @@ export interface DeleteModalOptions extends ModalConfig {
 }
 const { t } = useI18n();
 export default function useModal() {
+  const enableLoading = ref<boolean>(false);
   return {
     openModal: (options: ModalOptions) =>
       // error 使用 warning的感叹号图标
@@ -30,9 +33,21 @@ export default function useModal() {
         },
         cancelButtonProps: {
           type: options.mode === 'weak' ? 'text' : 'secondary',
+          disabled: enableLoading.value,
         },
         simple: false,
+        okLoading: enableLoading.value,
         ...options,
+        onBeforeOk: (done: (closed: boolean) => void) => {
+          enableLoading.value = true;
+          options?.onBeforeOk().finally(() => {
+            enableLoading.value = false;
+            done(true);
+          });
+        },
+        onBeforeCancel: () => {
+          return !enableLoading.value;
+        },
         titleAlign: 'start',
         modalClass: `ms-usemodal ms-usemodal-${options.mode || 'default'} ms-usemodal-${
           options.size || 'small'

frontend/src/views/setting/organization/member/index.vue

@@ -101,16 +101,12 @@
       </template>
       <template #action="{ record }">
         <MsButton @click="addOrEditMember('edit', record)">{{ t('organization.member.edit') }}</MsButton>
-        <MsPopConfirm
-          type="error"
+        <MsRemoveButton
           position="br"
-          :ok-text="t('organization.member.remove')"
           :title="t('organization.member.deleteMemberTip', { name: characterLimit(record.name) })"
           :sub-title-tip="t('organization.member.subTitle')"
-          @confirm="deleteMember(record)"
-        >
-          <MsButton>{{ t('organization.member.remove') }}</MsButton>
-        </MsPopConfirm>
+          @ok="deleteMember(record)"
+        />
       </template>
     </ms-base-table>
   </MsCard>
@@ -143,7 +139,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import AddMemberModal from './components/addMemberModal.vue';
   import MsCard from '@/components/pure/ms-card/index.vue';
-  import MsPopConfirm from '@/components/pure/ms-popconfirm/index.vue';
+  import MsRemoveButton from '@/components/bussiness/ms-remove-button/MsRemoveButton.vue';
   import {
     getMemberList,
     deleteMemberReq,
@@ -232,7 +228,7 @@
   };
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getMemberList, {
     tableKey: TableKeyEnum.ORGANNATIONMEMBER,
-    scroll: { x: 1200 },
+    scroll: { x: 1600 },
     selectable: true,
   });
   const keyword = ref('');