feat: 移除同步状态

src/api/all/propertyMarketing.ts

@@ -346,3 +346,8 @@ export const postBatchSyncMediaAccountData = (params: {}) => {
 export const getMediaAccountSyncStatus = (params = {}) => {
   return Http.get('/v1/media-accounts/sync-status', params);
 };
+
+// 媒体账号-移除同步状态
+export const deleteSyncStatus = (id: string) => {
+  return Http.delete(`/v1/media-accounts/${id}/sync-status`);
+};

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

@@ -4,8 +4,6 @@
 -->
 <template>
   <div class="card-container">
-    <!-- <a-spin class="w-100% h-100%"> -->
-
     <a-spin
       v-for="(item, index) in dataSource"
       :key="index"
@@ -89,34 +87,19 @@
               <template #default>{{ getBtnText(item) }}</template>
             </a-button>
           </a-dropdown>
-
+        </div>
-          <!-- <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
+      </div>
-          <a-button
+      <div v-if="item.status === 2" class="mask">
-            v-if="showPauseButton(item.status)"
+        <div class="flex items-center mb-16px box">
-            class="w-64px search-btn mr-8px"
+          <img :src="icon3" width="16" height="16" class="mr-8px" />
-            size="mini"
+          <span class="name !mb-0">更新数据失败</span>
-            @click="handlePause(item)"
+        </div>
-          >
+        <div class="flex items-center">
-            <template #default>暂停同步</template>
+          <a-button class="search-btn mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
-          </a-button>
+          <a-button class="search-btn" size="mini" @click="syncData(item)">重新更新</a-button>
-          <a-tooltip v-if="isAbnormalStatus(item.status)" :content="getTooltipText(item.status)">
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-              <template #default>重新授权</template>
-            </a-button>
-          </a-tooltip>
-          <template v-else>
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-              <template #default>{{ isUnauthorizedStatus(item.status) ? '去授权' : '重新授权' }}</template>
-            </a-button>
-          </template>
-
-          <a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
-            <template #default>编辑</template>
-          </a-button> -->
         </div>
       </div>
     </a-spin>
-    <!-- </div> -->
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
     <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
     <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@@ -127,6 +110,7 @@
 import { defineProps, ref, computed, inject } from 'vue';
 import { useRouter } from 'vue-router';
 import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { deleteSyncStatus } from '@/api/all/propertyMarketing';
 
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';
@@ -135,6 +119,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
 
 import icon1 from '@/assets/img/media-account/icon-dy.png';
 import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon3 from '@/assets/img/media-account/icon-warn.png';
 // import icon3 from '@/assets/img/media-account/icon-delete.png';
 
 const props = defineProps({
@@ -266,6 +251,11 @@ const getBtnText = (item) => {
 const goDetail = (item) => {
   router.push(`/media-account/detail/${item.id}`);
 };
+
+const onDeleteSyncStatus = async (item) => {
+  await deleteSyncStatus(item.id);
+  item.status = 1;
+};
 </script>
 
 <style scoped lang="scss">

src/views/property-marketing/media-account/account-manage/components/account-table/style.scss

@@ -17,6 +17,7 @@
     padding: 12px 16px 16px;
     display: flex;
     align-items: flex-start;
+    position: relative;
     .name {
       color: var(--Text-1, #211f24);
       font-family: $font-family-medium;
@@ -78,6 +79,23 @@
         margin-bottom: 8px;
       }
     }
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      background-color: rgba(255, 255, 255, 0.8);
+      transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .name {
+        font-family: $font-family-regular;
+      }
+    }
 
     .operate-row {
       display: flex;
@@ -85,8 +103,8 @@
       justify-content: flex-end;
       padding-top: 8px;
     }
-    &.checked { 
+    &.checked {
-      border: 1px solid var(--Brand-6, #6D4CFE);
+      border: 1px solid var(--Brand-6, #6d4cfe);
     }
   }
 }

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

@@ -278,27 +278,28 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
+// 先立即执行一次
+const getAsyncStatus = async () => {
+  const { code, data } = await getMediaAccountSyncStatus();
+  if (code === 200) {
+    syncMediaAccounts.value = data;
+
+    // 所有任务都结束了，才停止轮询，刷新页面
+    const isEnd = data.every((item) => item.status !== 0);
+    if (isEnd) {
+      clearSyncDataTimer();
+      startSyncData.value = false;
+      getData();
+    }
+  }
+};
+
 const startSyncDataPolling = () => {
   startSyncData.value = true;
   clearSyncDataTimer();
 
-  // 先立即执行一次
+  getAsyncStatus();
-  const poll = async () => {
+  syncDataTimer = setInterval(getAsyncStatus, 3000);
-    const { code, data } = await getMediaAccountSyncStatus();
-    if (code === 200) {
-      syncMediaAccounts.value = data;
-
-      // 所有任务都结束了，才停止轮询，刷新页面
-      const isEnd = data.every((item) => item.status !== 0);
-      if (isEnd) {
-        clearSyncDataTimer();
-        startSyncData.value = false;
-        getData();
-      }
-    }
-  };
-  poll();
-  syncDataTimer = setInterval(poll, 3000);
 };
 
 const handleSyncData = async (item) => {