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

2025-07-18 14:43:19 +08:00
parent 69c7415aea
commit 5063cd50f8
8 changed files with 100 additions and 52 deletions
--- a/src/api/all/common.ts
+++ b/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`);
+};
--- a/src/components/_base/navbar/components/download-center-modal/components/export-task/index.vue
+++ b/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)
-      record.file && downloadByUrl(record.file);
+      showExportNotification(`正在下载“${record.name}”，请稍后...`)
+      // record.file && downloadByUrl(record.file);
    };
    const handleBatchDownload = () => {
      // 批量下载逻辑
--- a/src/components/_base/navbar/components/download-center-modal/components/import-task/index.vue
+++ b/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 = () => {
      // 批量下载逻辑
--- a/src/utils/arcoD.tsx
+++ b/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,
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/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 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';
+import { downloadByUrl } from '@/utils/tools';
+import { showExportNotification } from '@/utils/arcoD';
 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('导入成功');
-          emit('update');
+          const ID = 'IMPORT-ACCOUNT';
+          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>
    );
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/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);
--- a/src/views/property-marketing/media-account/account-manage/renderComp.jsx
+++ b/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'}`,
+  });
+};
--- a/vite.config.ts
+++ b/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',
        },
      },
    },