feat: 更换Pagination组件

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

@@ -26,7 +26,7 @@
       </div>
       <Button type="primary" size="medium" @click="openAdd"
         ><template #icon>
-          <icon-plus size="16" class="mr-8px"/>
+          <icon-plus size="16" class="mr-8px" />
         </template>
         <template #default>添加新分组</template>
       </Button>
@@ -68,7 +68,7 @@
           <span class="s1 mb-16px">暂无分组</span>
           <Button type="primary" class="mb-16px" size="medium" @click="openAdd"
             ><template #icon>
-              <icon-plus size="16" class="mr-8px"/>
+              <icon-plus size="16" class="mr-8px" />
             </template>
             <template #default>去添加</template>
           </Button>
@@ -76,16 +76,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>
 
@@ -96,7 +95,7 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Button, Modal, Input, Space, Table } from 'ant-design-vue';
+import { Button, Modal, Pagination, Input, Space, Table } from 'ant-design-vue';
 import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';
 const { Column } = Table;
@@ -208,8 +207,10 @@ const handleSearch = () => {
   reload();
 };
 
-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
   pageInfo.value.page = current;
+  pageInfo.value.pageSize = pageSize;
+
   getData();
 };
 const onPageSizeChange = (pageSize) => {

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

@@ -35,16 +35,15 @@
         @selectionChange="handleSelectionChange"
       />
       <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>
@@ -54,7 +53,7 @@
 </template>
 
 <script setup>
-import { Button, Tabs } from 'ant-design-vue';
+import { Button, Tabs, Pagination } from 'ant-design-vue';
 const { TabPane } = Tabs;
 import FilterBlock from './components/filter-block';
 import BoardTable from './components/board-table';
@@ -113,8 +112,9 @@ const getData = async () => {
   }
 };
 
-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
   pageInfo.value.page = current;
+  pageInfo.value.page_size = pageSize;
   getData();
 };
 

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

@@ -83,16 +83,15 @@
       </template>
     </Table>
     <div v-if="pageInfo.total > 0" class="flex justify-end mt-16px">
-      <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>
     <template #footer>
@@ -110,7 +109,7 @@
 </template>
 
 <script setup>
-import { Button, Input, Modal, Table, Tooltip } from 'ant-design-vue';
+import { Button, Pagination, Input, Modal, Table, Tooltip } from 'ant-design-vue';
 import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
 import { formatTableField } from '@/utils/tools';
 import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
@@ -132,7 +131,6 @@ const {
   dataSource,
   pageInfo,
   onPageChange,
-  onPageSizeChange,
   rowSelection,
   handleSelect,
   handleSelectAll,
@@ -141,9 +139,6 @@ const {
   onPageChange: () => {
     getData();
   },
-  onPageSizeChange: () => {
-    getData();
-  },
 });
 
 const open = (formData) => {

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

@@ -71,17 +71,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.page_size"
+          :pageSizeOptions="['8', '16', '20', '32', '64']"
+          :pageSize="pageInfo.page_size"
           @change="onPageChange"
-          @page-size-change="onPageSizeChange"
         />
       </div>
     </div>
@@ -93,7 +92,7 @@
 
 <script setup>
 import { ref } from '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';
@@ -200,8 +199,9 @@ const handleReset = () => {
   reload();
 };
 
-const onPageChange = (current) => {
+const onPageChange = (current, pageSize) => {
   pageInfo.value.page = current;
+  pageInfo.value.page_size = pageSize;
   getData();
 };
 const onPageSizeChange = (pageSize) => {

src/views/property-marketing/put-account/investment-guidelines/index.vue

@@ -31,16 +31,15 @@
       <a-spin v-if="loading" tip="AI分析中" />
 
       <div v-if="listData.total > 0" class="pagination-box flex justify-end ignore-export">
-        <a-pagination
+         <Pagination
           :total="listData.total"
-          size="mini"
-          show-total
-          show-jumper
-          show-page-size
+          size="small"
+          :showTotal="(total: number) => `共 ${total} 条`"
+          showSizeChanger
+          showQuickJumper
           :current="query.page"
-          :page-size="query.pageSize"
+          :pageSize="query.page_size"
           @change="onPageChange"
-          @page-size-change="onPageSizeChange"
         />
       </div>
     </div>
@@ -73,7 +72,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { Button, Tabs, Space } from 'ant-design-vue';
+import { Button, Tabs, Space, Pagination } from 'ant-design-vue';
 const { TabPane } = Tabs;
 import PlacementGuideList from './components/table-data/placementGuideList.vue';
 import listSearchForm from './components/table-data/listSearchForm.vue';
@@ -106,8 +105,9 @@ const query = reactive({
 const currentComponent = computed(() => {
   return tabData.value === 'placement_guide' ? PlacementGuideList : GuideListHistory;
 });
-const onPageChange = (current) => {
+const onPageChange = (current: number, pageSize: number) => {
   query.page = current;
+  query.page_size = pageSize;
   onSearch();
 };
 const onPageSizeChange = (pageSize) => {