feat: 账号管理-授权、添加、分组管理、标签管理

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

@@ -28,7 +28,7 @@
           </a-button>
         </div>
       </div>
-      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
+      <FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
     </div>
 
     <div
@@ -80,13 +80,16 @@
     </div>
     <div class="card-wrap">
       <AccountTable
+        v-if="dataSource.length > 0"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
         @delete="handleDelete"
         @openEdit="handleOpenEdit"
       />
-      <div class="pagination-box">
+      <NoData v-else />
+
+      <div v-if="pageInfo.total > 0" class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -101,9 +104,9 @@
       </div>
     </div>
 
-    <GroupManageModal ref="groupManageModalRef" />
-    <TagsManageModal ref="tagsManageModalRef" />
-    <AddAccountModal ref="addAccountModalRef" />
+    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
+    <TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
+    <AddAccountModal ref="addAccountModalRef" @update="getData" />
     <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
     <BatchTagModal ref="batchTagModalRef" @update="getData" />
     <BatchGroupModal ref="batchGroupModalRef" @update="getData" />
@@ -122,7 +125,7 @@ import DeleteAccountModal from './components/account-table/delete-account';
 import BatchTagModal from './components/batch-tag-modal';
 import BatchGroupModal from './components/batch-group-modal';
 
-import { INITIAL_QUERY } from './constants';
+import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
 import { getMediaAccounts } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
@@ -138,13 +141,10 @@ const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
 const batchTagModalRef = ref(null);
 const batchGroupModalRef = ref(null);
+const filterBlockRef = ref(null);
 
 const tipStatus = ref(2);
-const pageInfo = reactive({
-  page: 1,
-  pageSize: 8,
-  total: 0,
-});
+const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
@@ -161,95 +161,37 @@ 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 = data?.total ?? 0;
-  // }
-  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.value;
+  const { code, data } = await getMediaAccounts({
+    page,
+    page_size: pageSize,
+    ...query.value,
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data?.total ?? 0;
+  }
 };
 const reload = () => {
-  pageInfo.page = 1;
+  pageInfo.value.page = 1;
   getData();
 };
 const handleSearch = () => {
   getData();
 };
 const handleReset = () => {
-  pageInfo.page = 1;
-  pageInfo.pageSize = 20;
-  pageInfo.total = 0;
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
   selectedItems.value = [];
   query.value = cloneDeep(INITIAL_QUERY);
   reload();
 };
 
 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
+  pageInfo.value.pageSize = pageSize;
   reload();
 };