feat: 更换Pagination组件

2025-09-04 23:30:41 +08:00
parent 3f5249c731
commit 8b42a67e9f
21 changed files with 183 additions and 215 deletions
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@ -40,16 +40,15 @@
        @sorterChange="handleSorterChange"
      />
      <div v-if="pageInfo.total > 0" class="pagination-row">
-        <a-pagination
+         <Pagination
          :total="pageInfo.total"
-          size="mini"
-          show-total
-          show-jumper
-          show-page-size
+          size="small"
+          :showTotal="(total, range) => `共 ${total} 条`"
+          showSizeChanger
+          showQuickJumper
          :current="pageInfo.page"
-          :page-size="pageInfo.page_size"
+          :pageSize="pageInfo.page_size"
          @change="onPageChange"
-          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>
@ -60,7 +59,7 @@
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';

-import { Tooltip } from 'ant-design-vue';
+import { Tooltip, Pagination } from 'ant-design-vue';
 import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
 import { formatNumberShow } from '@/utils/tools';
 import { INITIAL_QUERY, CARD_FIELDS } from './constants';
@ -100,8 +99,9 @@ const getData = async () => {
  }
 };

-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
  pageInfo.value.page = current;
+  pageInfo.value.page_size = pageSize;
  getData();
 };

--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@ -90,23 +90,22 @@
      </template>
    </Table>
    <div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
-      <a-pagination
+      <Pagination
        :total="pageInfo.total"
-        size="mini"
-        show-total
-        show-jumper
-        show-page-size
+        size="small"
+        :showTotal="(total, range) => `共 ${total} 条`"
+        showSizeChanger
+        showQuickJumper
        :current="pageInfo.page"
-        :page-size="pageInfo.page_size"
+        :pageSize="pageInfo.page_size"
        @change="onPageChange"
-        @page-size-change="onPageSizeChange"
      />
    </div>
  </div>
 </template>

 <script setup>
-import { Button, Input, Tooltip, Table } from 'ant-design-vue';
+import { Button, Input, Tooltip, Table, Pagination } from 'ant-design-vue';
 import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
 import { useRoute } from 'vue-router';
 import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
@ -141,8 +140,9 @@ const onDateChange = (value) => {
  handleSearch();
 };

-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
  pageInfo.value.page = current;
+  pageInfo.value.page_size = pageSize;
  getData();
 };

--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@ -26,7 +26,7 @@
      </div>
      <Button type="primary" size="middle" @click="openAdd"
        ><template #icon>
-          <icon-plus size="16" class="mr-8px"/>
+          <icon-plus size="16" class="mr-8px" />
        </template>
        <template #default>添加新分组</template>
      </Button>
@ -40,11 +40,13 @@
      class="h-500px"
      :pagination="false"
      :showSorterTooltip="false"
-      @change="(pagination, filters, sorter) => {
-        if (sorter && sorter.columnKey) {
-          handleSorterChange(sorter.columnKey, sorter.order);
+      @change="
+        (pagination, filters, sorter) => {
+          if (sorter && sorter.columnKey) {
+            handleSorterChange(sorter.columnKey, sorter.order);
+          }
        }
-      }"
+      "
    >
      <Table.Column title="分组名称" dataIndex="name" />
      <Table.Column title="创建人" dataIndex="creator">
@ -52,13 +54,7 @@
          {{ record.creator?.name || '-' }}
        </template>
      </Table.Column>
-      <Table.Column
-        title="创建日期"
-        dataIndex="created_at"
-        :width="160"
-        key="created_at"
-        :sorter="true"
-      >
+      <Table.Column title="创建日期" dataIndex="created_at" :width="160" key="created_at" :sorter="true">
        <template #customRender="{ record }">
          {{ exactFormatTime(record.created_at) }}
        </template>
@ -76,7 +72,7 @@
          <span class="s1 mb-16px">暂无分组</span>
          <Button type="primary" class="mb-16px" size="middle" @click="openAdd"
            ><template #icon>
-              <icon-plus size="16" class="mr-8px"/>
+              <icon-plus size="16" class="mr-8px" />
            </template>
            <template #default>去添加</template>
          </Button>
@ -84,16 +80,15 @@
      </template>
    </Table>
    <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
-      <a-pagination
+      <Pagination
        :total="pageInfo.total"
-        size="mini"
-        show-total
-        show-jumper
-        show-page-size
+        size="small"
+        :showTotal="(total, range) => `共 ${total} 条`"
+        showSizeChanger
+        showQuickJumper
        :current="pageInfo.page"
-        :page-size="pageInfo.pageSize"
+        :pageSize="pageInfo.pageSize"
        @change="onPageChange"
-        @page-size-change="onPageSizeChange"
      />
    </div>

@ -104,7 +99,7 @@

 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Button, Input, Modal, Space, Table } from 'ant-design-vue';
+import { Button, Input, Modal, Space, Table, Pagination } from 'ant-design-vue';
 import { getAccountGroup } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';

@ -139,8 +134,6 @@ const loading = ref(false);
 const query = ref(cloneDeep(INITIAL_QUERY));
 const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));

-
-
 function open() {
  visible.value = true;
  getData();
@ -195,8 +188,9 @@ const reload = () => {
  getData();
 };

-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
  pageInfo.value.page = current;
+  pageInfo.value.pageSize = pageSize;
  getData();
 };
 const onPageSizeChange = (pageSize) => {
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@ -4,7 +4,7 @@
 -->
 <template>
  <div class="account-manage-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px ">
+    <div class="filter-wrap bg-#fff rounded-8px">
      <div class="top flex h-64px px-24px py-10px justify-between items-center">
        <p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
        <div class="flex items-center">
@ -18,11 +18,11 @@
            <template #icon>
              <img :src="icon2" width="16" height="16" class="mr-8px" />
            </template>
-           分组管理
+            分组管理
          </Button>
          <Button type="primary" class="w-112px" size="middle" @click="handleOpenAccountModal">
            <template #icon>
-              <icon-plus size="16" class="mr-8px"/>
+              <icon-plus size="16" class="mr-8px" />
            </template>
            <template #default>添加账号</template>
          </Button>
@ -92,17 +92,16 @@
      <NoData v-else />

      <div v-if="pageInfo.total > 0" class="pagination-row">
-        <a-pagination
+        <Pagination
          :total="pageInfo.total"
-          size="mini"
-          show-total
-          show-jumper
-          show-page-size
-          :page-size-options="[8, 16, 20, 32, 64]"
+          size="small"
+          :showTotal="(total, range) => `共 ${total} 条`"
+          showSizeChanger
+          showQuickJumper
          :current="pageInfo.page"
-          :page-size="pageInfo.pageSize"
+          :pageSize="pageInfo.pageSize"
+          :pageSizeOptions="['8', '16', '20', '32', '64']"
          @change="onPageChange"
-          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>
@ -120,7 +119,7 @@
 <script setup>
 import { ref, provide } from 'vue';
 import { Notification } from '@arco-design/web-vue';
-import { Checkbox, Button, Space } from 'ant-design-vue';
+import { Checkbox, Button, Space, Pagination } from 'ant-design-vue';

 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@ -241,8 +240,10 @@ const handleReset = () => {
  reload();
 };

-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
  pageInfo.value.page = current;
+  pageInfo.value.pageSize = pageSize;
+
  getData();
 };
 const onPageSizeChange = (pageSize) => {