feat: 同步数据loading

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

@@ -4,17 +4,24 @@
 -->
 <template>
   <div class="card-container">
-    <div
+    <!-- <a-spin class="w-100% h-100%"> -->
+
+    <a-spin
       v-for="(item, index) in dataSource"
       :key="index"
+      :loading="isSyncing(item)"
+      tip="更新数据中..."
       class="card-item"
       :class="{
         checked: isSelected(item),
       }"
     >
+      <template #icon>
+        <icon-sync size="24" />
+      </template>
       <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
       <div class="ml-8px flex-1">
-        <p class="name">{{ item.name || '-' }}</p>
+        <p class="name cursor-pointer" @click="goDetail(item)">{{ item.name || '-' }}</p>
         <div class="field-row">
           <span class="label">状态</span>
           <StatusBox :status="item.status" />
@@ -108,7 +115,8 @@
           </a-button> -->
         </div>
       </div>
-    </div>
+    </a-spin>
+    <!-- </div> -->
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
     <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
     <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@@ -117,6 +125,7 @@
 
 <script setup>
 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 PauseAccountPatchModal from './pause-account-patch';
@@ -133,6 +142,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  syncMediaAccounts: {
+    type: Array,
+    default: () => [],
+  },
   selectedItems: {
     type: Array,
     default: () => [],
@@ -141,6 +154,8 @@ const props = defineProps({
 
 const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
 
+const router = useRouter();
+
 const pauseAccountPatchModalRef = ref(null);
 const reauthorizeAccountModalRef = ref(null);
 const authorizedAccountModalRef = ref(null);
@@ -159,6 +174,12 @@ const toggleSelect = (item) => {
   }
   emits('selectionChange', newSelected);
 };
+const isSyncing = (item) => {
+  if (!props.selectedItems.length) return false;
+
+  const target = props.selectedItems.find((v) => v.id === item.id);
+  return target.status === 0;
+};
 
 const openEdit = (item) => {
   emits('openEdit', item);
@@ -169,7 +190,6 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  console.log({ item });
   const { id, platform, status } = item;
   const isUnauthorized = isUnauthorizedStatus(status);
   if (isUnauthorized) {
@@ -207,11 +227,11 @@ const getTooltipText = (status) => {
   return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
 };
 
-const handleSyncData = inject('handleSyncData');
+const syncData = inject('handleSyncData');
 
 const onBtnClick = (item) => {
   if (showSyncDataButton(item.status)) {
-    handleSyncData && handleSyncData(item);
+    syncData(item);
     return;
   }
   if (isUnauthorizedStatus(item.status)) {
@@ -242,6 +262,10 @@ const getBtnText = (item) => {
 
   return '暂停同步';
 };
+
+const goDetail = (item) => {
+  router.push(`/media-account/detail/${item.id}`);
+};
 </script>
 
 <style scoped lang="scss">

src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue

@@ -31,7 +31,7 @@ import { defineExpose } from 'vue';
 
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 
-const handleSyncData = inject('handleSyncData');
+const syncData = inject('handleSyncData');
 
 const id = ref('');
 
@@ -45,7 +45,7 @@ const close = () => {
   visible.value = false;
 };
 const handleOk = () => {
-  handleSyncData({ id: id.value });
+  syncData({ id: id.value });
   close();
 };
 defineExpose({