feat: 导入投放账户修改为异步逻辑

src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue

@@ -132,7 +132,7 @@
     </a-form>
     <template #footer>
       <a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">
+      <a-button type="primary" size="large" @click="onSubmit" :loading="importLoading">
         {{ confirmBtnText }}
       </a-button>
     </template>
@@ -150,6 +150,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
 import StatusBox from '../status-box';
 import { PLATFORM_LIST, ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
 
+import { showExportNotification } from '@/utils/arcoD';
 import {
   postPlacementAccounts,
   getPlacementAccountsDetail,
@@ -162,6 +163,7 @@ import icon1 from '@/assets/img/media-account/icon-download.png';
 import icon2 from '@/assets/img/media-account/icon-delete.png';
 
 const update = inject('update');
+const emits = defineEmits(['startQueryTaskStatus']);
 
 const UploadStatus = {
   DEFAULT: 'default',
@@ -188,6 +190,7 @@ const authorizedAccountModalRef = ref(null);
 const uploadRef = ref(null);
 const file = ref(null);
 const form = ref(cloneDeep(INITIAL_FORM));
+const importLoading = ref(false);
 
 const rules = {
   mobile: [
@@ -213,7 +216,7 @@ const rules = {
 
 const isBatchImport = computed(() => uploadType.value === 'batch');
 const confirmBtnText = computed(() => {
-  if (isBatchImport.value) return '确定导入';
+  if (isBatchImport.value) return importLoading.value ? '导入中' : '确定导入';
   return isEdit.value ? '确定' : '下一步';
 });
 
@@ -229,6 +232,7 @@ const handleUpload = async (option) => {
 function removeFile() {
   fileName.value = '';
   file.value = null;
+  importLoading.value = false;
   uploadStatus.value = UploadStatus.DEFAULT;
 }
 
@@ -240,6 +244,7 @@ const reset = () => {
   fileName.value = '';
   file.value = null;
   isEdit.value = false;
+  importLoading.value = false;
   uploadStatus.value = UploadStatus.DEFAULT;
   uploadType.value = 'manual';
 };
@@ -273,23 +278,28 @@ const handleBatchImport = async () => {
       return;
     }
 
+    importLoading.value = true;
     const formData = new FormData();
     formData.append('file', file.value);
 
-    const { code } = await batchPlacementAccounts(formData, {
+    const { code, data } = await batchPlacementAccounts(formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
       },
     });
+    
     if (code === 200) {
-      AMessage.success('导入成功');
-      update();
+      const ID = 'IMPORT-PUT-ACCOUNT';
+      showExportNotification(`正在导入“${file.value.name}”，请稍后...`, ID);
+      emits('startQueryTaskStatus', data.id, ID);
       onClose();
     } else {
       uploadStatus.value = UploadStatus.ERROR;
     }
   } catch (error) {
     uploadStatus.value = UploadStatus.ERROR;
+  } finally {
+    importLoading.value = false;
   }
 
   // importPromptModalRef.value.open();

src/views/property-marketing/put-account/account-manage/index.vue

@@ -86,7 +86,7 @@
       </div>
     </div>
 
-    <AddAccountModal ref="addAccountModalRef" />
+    <AddPutAccountModal ref="addAccountModalRef" @startQueryTaskStatus="handleGetImportTaskStatus" />
     <DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
   </div>
 </template>
@@ -96,11 +96,13 @@ import { ref } from 'vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
-import AddAccountModal from './components/add-account-modal';
+import AddPutAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
 import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
+import { getTaskStatus } from '@/api/all/common';
+import { showImportResultNotification } from '@/utils/arcoD';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
@@ -111,6 +113,8 @@ const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
+let queryTaskTimer = null;
+
 
 const pageInfo = ref({
   page: 1,
@@ -158,10 +162,6 @@ const tipLabel = computed(() => {
   return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
-onMounted(() => {
-  getData();
-});
-
 const getData = () => {
   getHealthData();
   getAccountData();
@@ -257,6 +257,37 @@ const handleOpenAbnormalAccount = () => {
   reload();
 };
 
+// 查询导入账号任务状态
+const getSyncTaskStatus = async (id, notificationId) => {
+  const { code, data } = await getTaskStatus(id);
+  if (code === 200) {
+    if (data?.status !== 0) {
+      clearQueryTaskTimer();
+      notificationId && Notification.remove(notificationId);
+      showImportResultNotification(data);
+      getData();
+    }
+  }
+};
+const handleGetImportTaskStatus = (id, notificationId) => {
+  clearQueryTaskTimer();
+  getSyncTaskStatus(id, notificationId);
+  queryTaskTimer = setInterval(getSyncTaskStatus, 3000);
+};
+const clearQueryTaskTimer = () => {
+  if (queryTaskTimer) {
+    clearInterval(queryTaskTimer);
+    queryTaskTimer = null;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+onUnmounted(() => {
+  clearQueryTaskTimer();
+});
+
 provide('update', getData);
 </script>