feat: 投放账户管理

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

@@ -20,8 +20,9 @@
     </div>
 
     <div
+      v-if="dataSource.length > 0"
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
+      :class="selectedItems.length > 0 ? 'selected' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -41,14 +42,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
-            <span class="label">
-              {{
-                isNormalStatus
-                  ? '太棒啦！所有账号都在正常运行。'
-                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
-              }}
-            </span>
+            <img :src="icon4" width="16" height="16" class="mr-8px" />
+            <span class="label"> 太棒啦！所有账号都在正常运行。 </span>
           </template>
         </div>
       </div>
@@ -56,29 +51,26 @@
       <template v-if="selectedItems.length > 0">
         <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
       </template>
-      <div v-else>
-        <a-space v-if="isAbnormalStatus" class="flex items-center">
-          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
-            <template #default>查看异常账号</template>
-          </a-button>
-        </a-space>
-      </div>
     </div>
     <div class="card-wrap">
       <AccountTable
+        v-if="dataSource.length > 0"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
         @delete="handleDelete"
         @openEdit="handleOpenEdit"
+        @update="getData"
       />
-      <div class="pagination-box">
+      <NoData v-else />
+
+      <div v-if="pageInfo.total > 0" class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
           show-total
           show-jumper
-          show-page-size
+          :show-page-size="false"
           :current="pageInfo.page"
           :page-size="pageInfo.pageSize"
           @change="onPageChange"
@@ -87,8 +79,8 @@
       </div>
     </div>
 
-    <AddAccountModal ref="addAccountModalRef" />
-    <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
+    <AddAccountModal ref="addAccountModalRef" @update="getData" />
+    <DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
   </div>
 </template>
 
@@ -101,7 +93,7 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
-import { getMediaAccounts } from '@/api/all/propertyMarketing';
+import { getPlacementAccounts } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
@@ -113,18 +105,15 @@ const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
 
-const tipStatus = ref(2);
 const pageInfo = reactive({
   page: 1,
-  pageSize: 20,
-  total: 100,
+  pageSize: 8,
+  total: 0,
 });
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
 
-const isNormalStatus = computed(() => tipStatus.value === 1);
-const isAbnormalStatus = computed(() => tipStatus.value === 2);
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
@@ -135,72 +124,16 @@ onMounted(() => {
 });
 
 const getData = async () => {
-  console.log('getData');
-  // const { page, pageSize } = pageInfo;
-  // const { code, data, total } = await getMediaAccounts({
-  //   page,
-  //   page_size: pageSize,
-  //   ...query.value,
-  // });
-  // if (code === 200) {
-  //   dataSource.value = data.data;
-  //   pageInfo.total = total;
-  // }
-  dataSource.value = [
-    {
-      id: 1,
-      name: '全球',
-      account_id: 1,
-      mobile: 1777777,
-      status: 0,
-      platform: 0,
-      operator: {
-        name: '小周',
-      },
-      group: {
-        name: '美团组',
-      },
-      tags: [
-        {
-          name: '标签1',
-        },
-        {
-          name: '标签2',
-        },
-        {
-          name: '标签3',
-        },
-        {
-          name: '标签4',
-        },
-        {
-          name: '标签5',
-        },
-      ],
-    },
-    {
-      id: 2,
-      name: '全球2',
-      account_id: 1,
-      mobile: 1777777,
-      status: 4,
-      platform: 0,
-      operator: {
-        name: '小周',
-      },
-      group: {
-        name: '美团组',
-      },
-      tags: [
-        {
-          name: '标签1',
-        },
-        {
-          name: '标签2',
-        },
-      ],
-    },
-  ];
+  const { page, pageSize } = pageInfo;
+  const { code, data, total } = await getPlacementAccounts({
+    page,
+    page_size: pageSize,
+    ...query.value,
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.total = data?.total ?? 0;
+  }
 };
 const reload = () => {
   pageInfo.page = 1;
@@ -260,9 +193,14 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
-const handleOpenAbnormalAccount = () => {
-  query.value.status = 2;
-  reload();
+// const handleOpenAbnormalAccount = () => {
+//   query.value.status = 2;
+//   reload();
+// };
+
+const onDeleteSuccess = (ids) => {
+  selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
+  getData();
 };
 </script>