refactor: 新媒体账号状态重构

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

@@ -88,11 +88,13 @@
       <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>
+          <span class="name !mb-0">{{ getErrorStatusText(item) }}</span>
         </div>
         <div class="flex items-center">
-          <a-button class="search-btn mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
-          <a-button class="search-btn" size="mini" @click="syncData(item)">重新更新</a-button>
+          <a-button type="outline" class="mr-8px" size="mini" @click="handleCancel(item)">取消</a-button>
+          <a-button type="outline" size="mini" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
+            getConfirmBtnText(item)
+          }}</a-button>
         </div>
       </div>
     </a-spin>
@@ -105,9 +107,13 @@
 <script setup>
 import { defineProps, ref, computed, inject } from 'vue';
 import { useRouter } from 'vue-router';
-import { EnumErrorStatus } from '@/views/property-marketing/media-account/components/status-select/status-box';
 import { deleteSyncStatus } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';
+import {
+  EnumErrorStatus,
+  errorStatusMap,
+  EnumStatus,
+} from '@/views/property-marketing/media-account/components/status-select/status-box';
 
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@@ -118,7 +124,6 @@ import FooterBtn from './footer-btn';
 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({
   dataSource: {
@@ -140,6 +145,7 @@ const props = defineProps({
 });
 
 const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete', 'updateSyncStatus']);
+const syncData = inject('handleSyncData');
 
 const router = useRouter();
 
@@ -161,12 +167,6 @@ const toggleSelect = (item) => {
   }
   emits('selectionChange', newSelected);
 };
-const isSyncing = (item) => {
-  if (!props.syncMediaAccounts.length) return false;
-
-  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
-  return target?.status === 0;
-};
 
 const openEdit = (item) => {
   emits('openEdit', item);
@@ -194,21 +194,22 @@ const isUnauthorizedStatus = (error_status) => {
   return [EnumErrorStatus.UNAUTHORIZED].includes(error_status);
 };
 
-const syncData = inject('handleSyncData');
-
 const goDetail = (item) => {
   router.push(`/media-account/detail/${item.id}`);
 };
-
-const onDeleteSyncStatus = async (item) => {
-  await deleteSyncStatus(item.id);
-  emits('updateSyncStatus', item);
-};
 const formatTime = (time) => {
   return exactFormatTime(time, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
 };
+
+const getSyncMediaAccount = (item) => {
+  return props.syncMediaAccounts.find((v) => v.id === item.id);
+};
+const isSyncing = (item) => {
+  if (!props.syncMediaAccounts.length) return false;
+  return getSyncMediaAccount(item)?.status === 0;
+};
 const getLastSyncedAt = (item) => {
-  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
+  const target = getSyncMediaAccount(item);
   if (props.isLoadingTaskStatus && target) {
     if (target?.status !== 0) {
       return formatTime(target.last_synced_at);
@@ -217,8 +218,42 @@ 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;
+  return getSyncMediaAccount(item)?.status === 2;
+};
+const getErrorStatusText = (item) => {
+  const error_status = getSyncMediaAccount(item)?.error_status;
+  return `异常（${errorStatusMap.get(error_status)?.text ?? ''}）`;
+};
+const handleCancel = async (item) => {
+  const error_status = getSyncMediaAccount(item)?.error_status;
+  await deleteSyncStatus(item.id);
+
+  item.status = EnumStatus.ABNORMAL;
+  item.error_status = error_status;
+
+  emits('updateSyncStatus', item);
+};
+const showConfirmBtn = (item) => {
+  const error_status = getSyncMediaAccount(item)?.error_status;
+  return [EnumErrorStatus.MISSING, EnumErrorStatus.LOGIN].includes(error_status);
+};
+const handleConfirm = (item) => {
+  const error_status = getSyncMediaAccount(item)?.error_status;
+  if (error_status === EnumErrorStatus.MISSING) {
+    syncData(item);
+  }
+  if (error_status === EnumErrorStatus.LOGIN) {
+    handleReauthorize(item);
+  }
+};
+const getConfirmBtnText = (item) => {
+  const error_status = getSyncMediaAccount(item)?.error_status;
+  if (error_status === EnumErrorStatus.MISSING) {
+    return '重新更新';
+  }
+  if (error_status === EnumErrorStatus.LOGIN) {
+    return '重新授权';
+  }
 };
 </script>