feat: 导入账号后轮询任务状态

src/api/all/common.ts

@@ -28,3 +28,8 @@ export const deleteBatchTasks = (params = {}) => {
 export const deleteTask = (id: string) => {
   return Http.delete(`/v1/tasks/${id}`);
 };
+
+// 任务中心-查询任务状态
+export const getTaskStatus = (id: string) => {
+  return Http.get(`/v1/tasks/${id}/status`);
+};

src/components/_base/navbar/components/download-center-modal/components/export-task/index.vue

@@ -107,8 +107,8 @@ export default {
     };
 
     const handleDownload = (record) => {
-      showExportNotification(record.name)
+      showExportNotification(`正在下载“${record.name}”，请稍后...`)
-      record.file && downloadByUrl(record.file);
+      // record.file && downloadByUrl(record.file);
     };
     const handleBatchDownload = () => {
       // 批量下载逻辑

src/components/_base/navbar/components/download-center-modal/components/import-task/index.vue

@@ -107,7 +107,7 @@ export default {
     };
 
     const handleDownload = (record) => {
-      showExportNotification(record.name)
+      showExportNotification(`正在下载“${record.name}”，请稍后...`)
     };
     const handleBatchDownload = () => {
       // 批量下载逻辑

src/utils/arcoD.tsx

@@ -1,14 +1,15 @@
 import { Notification } from '@arco-design/web-vue';
 import { IconLoading } from '@arco-design/web-vue/es/icon';
 
-export function showExportNotification(name: string) {
+export function showExportNotification(label: string, id: '') {
   Notification.warning({
+    id,
     showIcon: false,
     closable: true,
     content: () => (
       <div class="flex items-center">
         <IconLoading size={16} class="color-#6D4CFE mr-8px" />
-        <p class="text-14px lh-22px font-400 color-#211F24">{`正在下载“${name}”，请稍后...`}</p>
+        <p class="text-14px lh-22px font-400 color-#211F24">{label}</p>
       </div>
     ),
     duration: 3000,

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

@@ -22,16 +22,12 @@ import {
 import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
 import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
 import AuthorizedAccountModal from '../authorized-account-modal';
-import ImportPromptModal from '../import-prompt-modal';
+// import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
 import SyncDataModal from '../sync-data-modal';
 
-import icon1 from '@/assets/img/media-account/icon-download.png';
+import { downloadByUrl } from '@/utils/tools';
-import icon2 from '@/assets/img/media-account/icon-delete.png';
+import { showExportNotification } from '@/utils/arcoD';
-import icon3 from '@/assets/img/media-account/icon-dy.png';
-import icon4 from '@/assets/img/media-account/icon-xhs.png';
-import icon5 from '@/assets/img/media-account/icon-warn-1.png';
-import icon6 from '@/assets/img/media-account/icon-success.png';
 import {
   fetchAccountTags,
   fetchAccountGroups,
@@ -42,6 +38,13 @@ import {
   batchMediaAccounts,
 } from '@/api/all/propertyMarketing';
 
+import icon1 from '@/assets/img/media-account/icon-download.png';
+import icon2 from '@/assets/img/media-account/icon-delete.png';
+import icon3 from '@/assets/img/media-account/icon-dy.png';
+import icon4 from '@/assets/img/media-account/icon-xhs.png';
+import icon5 from '@/assets/img/media-account/icon-warn-1.png';
+import icon6 from '@/assets/img/media-account/icon-success.png';
+
 const UploadStatus = {
   DEFAULT: 'default',
   WAITING: 'waiting',
@@ -77,7 +80,6 @@ export default {
     const form = ref({ ...INITIAL_FORM });
     const syncDataModalRef = ref(null);
     const importLoading = ref(false);
-    const CustomNotificationVisible = ref(false);
 
     const rules = {
       mobile: [
@@ -132,6 +134,7 @@ export default {
     function removeFile() {
       fileName.value = '';
       file.value = null;
+      importLoading.value = false;
       uploadStatus.value = UploadStatus.DEFAULT;
     }
     const reset = () => {
@@ -175,22 +178,20 @@ export default {
           AMessage.warning('请上传要导入的文件');
           return;
         }
+
         importLoading.value = true;
         const formData = new FormData();
         formData.append('file', file.value);
-        const { code } = await batchMediaAccounts(formData, {
+        const { code, data } = await batchMediaAccounts(formData, {
           headers: {
             'Content-Type': 'multipart/form-data',
           },
         });
         if (code === 200) {
-          AMessage.success('导入成功');
+          const ID = 'IMPORT-ACCOUNT';
-          emit('update');
+          showExportNotification(`正在导入“${file.value.name}”，请稍后...`, ID);
+          emit('startQueryTaskStatus', data.id, ID);
           onClose();
-
-          // const ID = 'IMPORT-ACCOUNT';
-          // renderNotification(ID);
-          importPromptModalRef.value.open();
         } else {
           uploadStatus.value = UploadStatus.ERROR;
         }
@@ -247,9 +248,6 @@ export default {
         window.open(data.download_url, '_blank');
       }
     };
-    const handleDownloadError = () => {
-      console.log('handleDownloadError');
-    };
     const renderLabel = (label, tooltipContent) => {
       return (
         <>
@@ -260,31 +258,6 @@ export default {
         </>
       );
     };
-    const renderNotification = (id, hasError) => {
-      Notification.warning({
-        id,
-        showIcon: false,
-        closable: true,
-        content: (
-          <div>
-            <div class="flex items-center mb-4px">
-              <img src={hasError ? icon5 : icon6} width="16" height="16" class="mr-8px" />
-              <span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
-            </div>
-            <p class="text-14px lh-22px font-400 color-#211F24">
-              共导入 37 个账号，导入成功 32 个{hasError ? `，失败 <span class="color-#F64B31">5</span> 个` : ''}
-            </p>
-            {hasError && (
-              <div class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={handleDownloadError}>
-                下载问题表格
-              </div>
-            )}
-          </div>
-        ),
-        duration: 3000,
-        class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
-      });
-    };
 
     expose({ open });
 
@@ -452,7 +425,7 @@ export default {
         </div>
 
         <AuthorizedAccountModal ref={authorizedAccountModalRef} onUpdate={() => emit('update')} />
-        <ImportPromptModal ref={importPromptModalRef} />
+        {/* <ImportPromptModal ref={importPromptModalRef} /> */}
         <SyncDataModal ref={syncDataModalRef} />
       </Modal>
     );

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

@@ -107,7 +107,7 @@
 
     <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
     <TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
-    <AddAccountModal ref="addAccountModalRef" @update="getData" />
+    <AddAccountModal ref="addAccountModalRef" @update="getData" @startQueryTaskStatus="handleGetImportTaskStatus" />
 
     <DeleteAccountModal ref="deleteAccountRef" @update="getData" @batchUpdate="onBatchSuccess" />
     <BatchTagModal ref="batchTagModalRef" @update="onBatchSuccess" />
@@ -117,6 +117,7 @@
 
 <script setup>
 import { ref, provide } from 'vue';
+import { Notification } from '@arco-design/web-vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@@ -126,10 +127,11 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 import BatchTagModal from './components/batch-tag-modal';
 import BatchGroupModal from './components/batch-group-modal';
-import { Notification } from '@arco-design/web-vue';
 
 import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
+import {renderNotification} from "./renderComp"
 import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { getTaskStatus } from '@/api/all/common';
 import {
   getMediaAccounts,
   getMediaAccountsHealth,
@@ -146,6 +148,7 @@ import icon5 from '@/assets/img/media-account/icon-warn.png';
 import icon6 from '@/assets/img/media-account/icon-close.png';
 
 let syncDataTimer = null;
+let queryTaskTimer = null;
 
 const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
@@ -338,18 +341,43 @@ const handleOpenAbnormalAccount = () => {
   query.value.status = 2;
   reload();
 };
+
+// 查询导入账号任务状态
+const getSyncTaskStatus = async (id, notificationId) => {
+  const { code, data } = await getTaskStatus(id);
+  if (code === 200) {
+    if (data?.status !== 0) {
+      clearQueryTaskTimer();
+      notificationId && Notification.remove(notificationId);
+      renderNotification(data)
+      getData();
+    }
+  }
+};
+const handleGetImportTaskStatus = (id, notificationId) => {
+  clearQueryTaskTimer();
+  getSyncTaskStatus(id, notificationId);
+  queryTaskTimer = setInterval(getSyncTaskStatus, 3000);
+};
 const clearSyncDataTimer = () => {
   if (syncDataTimer) {
     clearInterval(syncDataTimer);
     syncDataTimer = null;
   }
 };
+const clearQueryTaskTimer = () => {
+  if (queryTaskTimer) {
+    clearInterval(queryTaskTimer);
+    queryTaskTimer = null;
+  }
+};
 
 onMounted(() => {
   getData();
 });
 onUnmounted(() => {
   clearSyncDataTimer();
+  clearQueryTaskTimer();
 });
 
 provide('handleSyncData', handleSyncData);

src/views/property-marketing/media-account/account-manage/renderComp.jsx

@@ -0,0 +1,40 @@
+import { downloadByUrl } from '@/utils/tools';
+
+const handleDownloadError = (file) => {
+  file && downloadByUrl(file);
+};
+export const renderNotification = (data) => {
+  const { total_number, success_number, fail_number, file } = data;
+  const hasError = fail_number > 0;
+  Notification.warning({
+    id,
+    showIcon: false,
+    closable: true,
+    content: (
+      <div>
+        <div class="flex items-center mb-4px">
+          <img src={hasError ? icon5 : icon6} width="16" height="16" class="mr-8px" />
+          <span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
+        </div>
+        <p class="text-14px lh-22px font-400 color-#211F24">
+          共导入 {total_number} 个账号，导入成功 {success_number} 个
+          {hasError && (
+            <span>
+              ，失败 <span class="color-#F64B31">{fail_number}</span> 个
+            </span>
+          )}
+        </p>
+        {hasError && (
+          <div
+            class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer"
+            onClick={() => handleDownloadError(file)}
+          >
+            下载问题表格
+          </div>
+        )}
+      </div>
+    ),
+    duration: 3000,
+    class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
+  });
+};

vite.config.ts

@@ -40,7 +40,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'https://lingjiapi.lvfunai.com/api',
+          // target: 'https://lingjiapi.lvfunai.com/api',
+          target: 'http://192.168.40.3/api',
         },
       },
     },