feat: 同步数据/批量同步

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

@@ -51,6 +51,9 @@
               个账号
             </span>
 
+            <span class="operation-btn" :class="{ disabled: isDisabledBatchSyncData }" @click="handleBatchSyncData"
+              >批量更新数据</span
+            >
             <span class="operation-btn" @click="handleBatchTag">批量标签</span>
             <span class="operation-btn" @click="handleBatchGroup">批量分组</span>
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
@@ -111,7 +114,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, provide } from 'vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@@ -121,9 +124,17 @@ 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 { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
+import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import {
+  getMediaAccounts,
+  getMediaAccountsHealth,
+  postSyncMediaAccountData,
+  postBatchSyncMediaAccountData,
+  getMediaAccountSyncStatus,
+} from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon2 from '@/assets/img/media-account/icon-group.png';
@@ -132,6 +143,8 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
 import icon5 from '@/assets/img/media-account/icon-warn.png';
 import icon6 from '@/assets/img/media-account/icon-close.png';
 
+let syncDataTimer = null;
+
 const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
@@ -145,8 +158,10 @@ const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
 const healthData = ref({});
+const startSyncData = ref(false);
 
 const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
+const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
@@ -180,10 +195,6 @@ const tipLabel = computed(() => {
   return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
-onMounted(() => {
-  getData();
-});
-
 const getData = () => {
   getHealthData();
   getAccountData();
@@ -262,10 +273,54 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
+const startSyncDataPolling = () => {
+  startSyncData.value = true;
+  clearSyncDataTimer();
+
+  syncDataTimer = setInterval(async () => {
+    const { code, data } = await getMediaAccountSyncStatus();
+    if (code === 200) {
+      // 所有任务都结束了，才停止轮询，刷新页面
+      const isEnd = data.every((item) => item.status !== 0);
+      if (isEnd) {
+        clearSyncDataTimer();
+        startSyncData.value = false;
+
+        getData();
+      }
+    }
+  }, 5000);
+};
+
+const handleSyncData = async (item) => {
+  Notification.info({
+    title: '账号正在同步数据。',
+  });
+
+  const { code } = await postSyncMediaAccountData(item.id);
+  if (code === 200) {
+    if (!startSyncData.value) {
+      startSyncDataPolling();
+    }
+  }
+};
 
 const handleBatchTag = () => {
   batchTagModalRef.value?.open(selectedItems.value);
 };
+const handleBatchSyncData = async () => {
+  if (isDisabledBatchSyncData.value) {
+    return;
+  }
+
+  const ids = selectedItems.value.map((item) => item.id);
+  const { code } = await postBatchSyncMediaAccountData({ ids });
+  if (code === 200) {
+    if (!startSyncData.value) {
+      startSyncDataPolling();
+    }
+  }
+};
 const handleBatchGroup = () => {
   batchGroupModalRef.value?.open(selectedItems.value);
 };
@@ -277,6 +332,21 @@ const handleOpenAbnormalAccount = () => {
   query.value.status = 2;
   reload();
 };
+const clearSyncDataTimer = () => {
+  if (syncDataTimer) {
+    clearInterval(syncDataTimer);
+    syncDataTimer = null;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+onUnmounted(() => {
+  clearSyncDataTimer();
+});
+
+provide('handleSyncData', handleSyncData);
 </script>
 
 <style scoped lang="scss">