Merge remote-tracking branch 'origin/main' into feature/v1.2灵机空间-项目管理_rxd

# Conflicts: # src/api/all/common.ts # src/components/_base/navbar/index.vue # src/hooks/useTableSelectionWithPagination.ts # src/router/routes/modules/propertyMarketing.ts # src/stores/modules/side-bar/constants.ts # src/views/property-marketing/media-account/account-manage/components/account-table/index.vue # src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue # src/views/property-marketing/put-account/account-data/components/filter-block/index.vue # src/views/property-marketing/put-account/account-manage/components/account-table/index.vue # src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue # src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue # src/views/property-marketing/put-account/components/status-select/constants.ts
2025-07-23 15:22:46 +08:00
parent 9e6082eb76 8dd4247e6b
commit b9a552bad8
66 changed files with 2144 additions and 673 deletions
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@ -65,7 +65,8 @@ import AccountTable from './components/account-table';
 import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
 import { formatNumberShow } from '@/utils/tools';
 import { INITIAL_QUERY, CARD_FIELDS } from './constants';
-import { downloadByUrl } from '@/utils/tools';
+// import { downloadByUrl } from '@/utils/tools';
+import { showExportNotification } from '@/utils/arcoD';

 import icon1 from '@/assets/img/icon-question.png';

@ -139,7 +140,7 @@ const handleExport = () => {
  }).then((res) => {
    const { code, data } = res;
    if (code === 200) {
-      downloadByUrl(data.download_url);
+      showExportNotification(`正在下载“${data.name}”，请稍后...`);
    }
  });
 };
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
@ -119,7 +119,7 @@
          </a-dropdown>
        </div>
      </div>
-      <div v-if="item.status === 2" class="mask">
+      <div v-if="isSyncFailed(item)" class="mask">
        <div class="flex items-center mb-16px box">
          <img :src="icon3" width="16" height="16" class="mr-8px" />
          <span class="name !mb-0">更新数据失败</span>
@ -172,7 +172,7 @@ const props = defineProps({
  },
 });

-const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete', 'updateSyncStatus']);

 const router = useRouter();

@ -198,9 +198,6 @@ const isSyncing = (item) => {
  if (!props.syncMediaAccounts.length) return false;

  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
-  if (target) {
-    return target?.status === 0;
-  }
  return target?.status === 0;
 };

@ -292,7 +289,7 @@ const goDetail = (item) => {

 const onDeleteSyncStatus = async (item) => {
  await deleteSyncStatus(item.id);
-  item.status = 1;
+  emits('updateSyncStatus', item);
 };
 const formatTime = (time) => {
  return exactFormatTime(time, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
@ -306,6 +303,10 @@ const getLastSyncedAt = (item) => {
  }
  return formatTime(item.last_synced_at);
 };
+const isSyncFailed = (item) => {
+  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
+  return target?.status === 2;
+};
 </script>

 <style scoped lang="scss">
--- 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
@ -20,17 +20,14 @@ import {
  Textarea,
 } from '@arco-design/web-vue';
 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 CommonSelect from '@/components/common-select';

-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 { genRandomId } from '@/utils/tools';
 import {
  fetchAccountTags,
  fetchAccountGroups,
@ -42,6 +39,13 @@ import {
  getProjectList,
 } 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',
@ -73,13 +77,12 @@ export default {
    const formRef = ref();
    const file = ref(null);
    const authorizedAccountModalRef = ref(null);
-    const importPromptModalRef = ref(null);
+    // const importPromptModalRef = ref(null);
    const uploadRef = ref(null);
    const isCustomCookie = ref(false);
    const form = ref(cloneDeep(INITIAL_FORM));
    const syncDataModalRef = ref(null);
    const importLoading = ref(false);
-    const CustomNotificationVisible = ref(false);

    const rules = {
      mobile: [
@ -140,6 +143,7 @@ export default {
    function removeFile() {
      fileName.value = '';
      file.value = null;
+      importLoading.value = false;
      uploadStatus.value = UploadStatus.DEFAULT;
    }
    const reset = () => {
@ -187,27 +191,27 @@ 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 = genRandomId();
+          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;
        }
      } catch (error) {
        uploadStatus.value = UploadStatus.ERROR;
+      } finally {
+        importLoading.value = false;
      }
    };
    const handleAddAccount = async () => {
@ -259,9 +263,6 @@ export default {
        window.open(data.download_url, '_blank');
      }
    };
-    const handleDownloadError = () => {
-      console.log('handleDownloadError');
-    };
    const renderLabel = (label, tooltipContent) => {
      return (
        <>
@ -272,31 +273,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 });

@ -437,28 +413,24 @@ export default {
                  auto-size={{ minRows: 3, maxRows: 5 }}
                />
              </FormItem>
-              {!isEdit.value && (
-                <>
-                  <FormItem
-                    label="Cookie值"
-                    v-slots={{
-                      label: () => renderLabel('Cookie值', 'Cookie，无需扫码授权'),
-                    }}
-                  >
-                    <Switch v-model={isCustomCookie.value} size="large" />
-                  </FormItem>
-                  {isCustomCookie.value && (
-                    <FormItem label="" field="cookie">
-                      <Textarea
-                        v-model={form.value.cookie}
-                        placeholder="请输入..."
-                        size="large"
-                        max-length={72}
-                        auto-size={{ minRows: 3, maxRows: 5 }}
-                      />
-                    </FormItem>
-                  )}
-                </>
+              <FormItem
+                label="Cookie值"
+                v-slots={{
+                  label: () => renderLabel('Cookie值', 'Cookie，无需扫码授权'),
+                }}
+              >
+                <Switch v-model={isCustomCookie.value} size="large" />
+              </FormItem>
+              {isCustomCookie.value && (
+                <FormItem label="" field="cookie">
+                  <Textarea
+                    v-model={form.value.cookie}
+                    placeholder="请输入..."
+                    size="large"
+                    max-length={500}
+                    auto-size={{ minRows: 5, maxRows: 8 }}
+                  />
+                </FormItem>
              )}
            </>
          )}
@ -473,7 +445,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
@ -70,7 +70,7 @@
      </template>
      <div v-else>
        <a-space v-if="isAbNormalStatus" class="flex items-center">
-          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
+          <a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
            <template #default>查看异常账号</template>
          </a-button>
        </a-space>
@ -87,6 +87,7 @@
        @delete="handleDelete"
        @openEdit="handleOpenEdit"
        @update="getData"
+        @updateSyncStatus="handleUpdateSyncStatus"
      />
      <NoData v-else />

@ -108,7 +109,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" />
@ -118,6 +119,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';
@ -127,10 +129,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 { showImportResultNotification } from '@/utils/arcoD';
 import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { getTaskStatus } from '@/api/all/common';
 import {
  getMediaAccounts,
  getMediaAccountsHealth,
@ -147,6 +150,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);
@ -294,6 +298,13 @@ const getAsyncStatus = async () => {
    }
  }
 };
+const handleUpdateSyncStatus = (item) => {
+  const target = syncMediaAccounts.value.find((v) => v.id === item.id);
+  // 点击取消，设置状态为成功
+  if (target) {
+    target.status = 1;
+  }
+};

 const startSyncDataPolling = () => {
  isLoadingTaskStatus.value = true;
@ -339,18 +350,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);
+      showImportResultNotification(data);
+      getData();
+    }
+  }
+};
+const handleGetImportTaskStatus = (id, notificationId) => {
+  clearQueryTaskTimer();
+  getSyncTaskStatus(id, notificationId);
+  queryTaskTimer = setInterval(() => getSyncTaskStatus(id, notificationId), 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/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@ -37,15 +37,6 @@
        color: #211f24;
      }
    }
-    .err-btn {
-      background-color: #f64b31 !important;
-      color: var(--BG-white, #fff);
-      font-family: 'PingFang SC';
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 166.667% */
-    }
    .operation-btn {
      padding: 0;
      cursor: pointer;
--- a/src/views/property-marketing/media-account/components/status-select/constants.ts
+++ b/src/views/property-marketing/media-account/components/status-select/constants.ts
@ -5,8 +5,8 @@
 export enum EnumStatus {
  UNAUTHORIZED = 0,
  NORMAL = 1,
-  ABNORMAL = 2,
-  PAUSE = 3,
+  ABNORMAL = 3,
+  PAUSE = 2,
  ABNORMAL_LOGIN = 4,
  ABNORMAL_REQUEST = 5,
  ABNORMAL_FREEZE = 6,
--- a/src/views/property-marketing/media-account/components/status-select/index.vue
+++ b/src/views/property-marketing/media-account/components/status-select/index.vue
@ -19,7 +19,7 @@

 <script setup>
 import { ref, watch } from 'vue';
-import { STATUS_LIST } from './constants';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';

 const props = defineProps({
  modelValue: {