perf: 逻辑调整

src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue

@@ -60,7 +60,7 @@
     </template>
   </a-modal>
 
-  <SelectSubAccountModal ref="selectSubAccountModalRef" />
+  <SelectSubAccountModal ref="selectSubAccountModalRef" @confirm="onSelectSubAccounts" />
 </template>
 
 <script setup>
@@ -131,12 +131,14 @@ const getDaysDiffText = (lastSyncedAt) => {
 };
 
 const open = (accountId, last_synced_at = null) => {
+  reset();
+
   id.value = accountId;
   lastSyncedAt.value = last_synced_at;
   visible.value = true;
 };
 
-const close = () => {
+const reset = () => {
   formRef.value?.resetFields();
   formRef.value?.clearValidate();
 
@@ -152,6 +154,9 @@ const close = () => {
   showSyncTip.value = false;
   clearFakeProgressTimer();
   clearStatusPollingTimer();
+};
+
+const close = () => {
   visible.value = false;
 };
 
@@ -246,10 +251,21 @@ const handleSyncData = () => {
   }
 };
 
+const onSelectSubAccounts = (selectedItems) => {
+  console.log({ selectedItems });
+
+  visible.value = true;
+  isLoading.value = true;
+  isCompleted.value = false;
+  progress.value = 0;
+  startFakeProgressPolling();
+  startStatusPolling();
+};
+
 const handleOk = () => {
-  close();
+  // visible.value = false;
-  selectSubAccountModalRef.value.open();
+  // selectSubAccountModalRef.value.open();
-  return;
+  // return;
   // n天未同步更新
   if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
     handleSyncData();

src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue

@@ -97,7 +97,7 @@
         </a-table-column>
       </template>
     </a-table>
-    <div v-if="pageInfo.total > 0" class="flex justify-end">
+    <div v-if="pageInfo.total > 0" class="flex justify-end mt-16px">
       <a-pagination
         :total="pageInfo.total"
         size="mini"
@@ -111,8 +111,13 @@
       />
     </div>
     <template #footer>
+      <span class="cts color-#3C4043 s1"
+        >已选<span class="color-#6D4CFE num mx-3px">{{ selectedItems.length }}个</span>账户</span
+      >
+      <div class="flex items-center">
         <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete">添加已选账户</a-button>
+        <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onConfirm">添加已选账户</a-button>
+      </div>
     </template>
   </a-modal>
 </template>
@@ -121,8 +126,7 @@
 import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
 import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
 
-import icon1 from '@/assets/img/media-account/icon-delete.png';
+const emits = defineEmits('confirm');
-
 const update = inject('update');
 
 const visible = ref(false);
@@ -130,7 +134,6 @@ const dataSource = ref([]);
 const query = ref(cloneDeep(INITIAL_FORM));
 const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
 const selectedItems = ref([]);
-const deleteTaskModalRef = ref(null);
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
@@ -149,17 +152,23 @@ const onClose = () => {
   visible.value = false;
 };
 
+const onConfirm = () => {
+  onClose();
+  emits('confirm', selectedItems);
+};
+
 const getData = () => {
   dataSource.value = [
     {
-      id: 1832880547948105,
+      id: '1832880547948105',
       name: '美团-人设组YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题-3',
     },
     {
-      id: 1832880548441993,
+      id: '1832880548441993',
       name: 'YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题',
     },
   ];
+  pageInfo.value.total = 2;
 };
 const reload = () => {
   pageInfo.value.page = 1;

src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss

@@ -1,8 +1,18 @@
 .select-sub-account-modal {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
   .arco-modal-header {
   }
   .arco-modal-body {
     height: 536px;
+    display: flex;
+    flex-direction: column;
     .filter-row {
       .filter-row-item {
         &:not(:last-child) {
@@ -16,20 +26,19 @@
           font-style: normal;
           font-weight: 400;
           flex-shrink: 0;
-          line-height: 22px; /* 157.143% */
-        }
-        :deep(.arco-space-item) {
-          width: 100%;
-        }
-      }
-    }
-    .cts {
-      color: var(--Text-1, #211f24);
-      font-family: $font-family-medium;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
           line-height: 22px; 
         }
       }
+    }
+    
+  }
+  .arco-modal-footer {
+    justify-content: space-between;
+    .s1 {
+      font-family: $font-family-regular;
+      .num {
+        font-family: $font-family-medium;
+      }
+    }
+  }
 }