记录分页器

src/views/wechat/batch_msg/send_record/index.vue

@@ -2,7 +2,12 @@
   <div class="container">
     <a-form :model="filters" layout="inline" class="form-style">
       <a-form-item label="执行状态">
-        <a-select v-model:value="filters.result" placeholder="请选择" class="select-style" allowClear>
+        <a-select
+          v-model:value="filters.result"
+          placeholder="请选择"
+          class="select-style"
+          allowClear
+        >
           <a-select-option value="0">未发送</a-select-option>
           <!-- <a-select-option value=2>发送中</a-select-option> -->
           <a-select-option value="1">成功</a-select-option>
@@ -10,7 +15,7 @@
         </a-select>
       </a-form-item>
       <a-form-item label="发送微信">
-        <a-input v-model:value="filters.customer" placeholder="请输入" allowClear/>
+        <a-input v-model:value="filters.customer" placeholder="请输入" allowClear />
       </a-form-item>
       <a-form-item>
         <a-button type="primary" @click="onSearch">查询</a-button>
@@ -25,6 +30,7 @@
       :loading="loading.spinning"
       :pagination="pagination"
       class="table-style"
+       @change="handleTableChange"
     >
       <template #action="{ record }">
         <a @click="viewRecord(record)">发送记录</a>
@@ -125,6 +131,8 @@
         pageSize: 10,
         current: 1,
         showTotal: (total) => `共 ${total} 条`,
+        showSizeChanger: true, // 允许改变每页条数
+        pageSizeOptions: ['10', '20', '50', '100'], // 可选的每页条数
       });
 
       async function onSearch() {
@@ -167,6 +175,39 @@
         console.log('查看发送记录', record);
         // 在这里添加你的逻辑，比如跳转到发送记录页面或显示模态框
       };
+      const handleTableChange = (paginationParams) => {
+  // 更新响应式 pagination 对象的 current 和 pageSize
+  pagination.current = paginationParams.current;
+  pagination.pageSize = paginationParams.pageSize;
+
+  loading.spinning = true;
+  data.splice(0, data.length);
+
+  const sourceId = route.query.id;
+  getBatchMsgSendList({
+    batchId: Number(sourceId),
+    page: pagination.current, // 使用更新后的 current
+    pageSize: pagination.pageSize, // 使用更新后的 pageSize
+    status: Number(filters.result),
+    toid: filters.customer,
+  })
+    .then((res) => {
+      if (res && Array.isArray(res.data.data)) {
+        res.data.data.forEach((item, index) => {
+          item.index = index + 1 + (pagination.current - 1) * pagination.pageSize; // 更新序号
+        });
+        data.splice(0, data.length, ...res.data.data); // 更新 data
+        pagination.total = res.data.total; // 更新 total
+      }
+    })
+    .catch((error) => {
+      console.error('数据加载失败', error);
+    })
+    .finally(() => {
+      loading.spinning = false;
+    });
+};
+
 
       return {
         filters,
@@ -177,6 +218,7 @@
         onReset,
         viewRecord,
         loading,
+        handleTableChange,
       };
     },
   });

src/views/wechat/sop_task/send_tasks/index.vue

@@ -108,34 +108,49 @@
       ]);
 
       onMounted(async () => {
+        fetchData();
+        
+      });
+      async function fetchData() {
         const sourceId = route.query.sourceId;
         const sourceType = route.query.sourceType;
         try {
-        const res = await getSopTaskRecordMsg({
-          sourceId: Number(sourceId),
-          sourceType: Number(sourceType),
-          page: 1,
-          pageSize: 50,
-        });
-        if (res && Array.isArray(res.data.data)) {
-          res.data.data.forEach((item, index) => {
-            item.index = index + 1; // 为每条记录添加序号
+          const res = await getSopTaskRecordMsg({
+            sourceId: Number(sourceId),
+            sourceType: Number(sourceType),
+            page: 1,
+            pageSize: 50,
           });
-          data.splice(0, data.length, ...res.data.data); // 更新 data
-          pagination.total = res.data.total;
+          if (res && Array.isArray(res.data.data)) {
+            res.data.data.forEach((item, index) => {
+              item.index = index + 1; // 为每条记录添加序号
+            });
+            data.splice(0, data.length, ...res.data.data); // 更新 data
+            pagination.total = res.data.total;
+          }
+        } catch (error) {
+          console.error('数据加载失败', error);
+        } finally {
+          loading.spinning = false; // 数据加载完成后关闭加载指示器
         }
-      } catch (error) {
-        console.error('数据加载失败', error);
-      } finally {
-        loading.spinning = false; // 数据加载完成后关闭加载指示器
       }
-      });
-
       const pagination = reactive({
         total: 0,
         pageSize: 10,
         current: 1,
         showTotal: (total) => `共 ${total} 条`,
+        showSizeChanger: true, // 允许改变每页条数
+        pageSizeOptions: ['10', '20', '50', '100'], // 可选的每页条数
+        onChange: (page, pageSize) => {
+          pagination.current = page;
+          pagination.pageSize = pageSize;
+          fetchData();
+        },
+        onShowSizeChange: (current, size) => {
+          pagination.pageSize = size;
+          pagination.current = current;
+          fetchData();
+        },
       });
 
       const onSearch = () => {
@@ -154,6 +169,7 @@
         console.log('查看发送记录', record);
         // 在这里添加你的逻辑，比如跳转到发送记录页面或显示模态框
       };
+      
 
       return {
         filters,