优化活动渠道列表分页展示

工作空间/产研/权益/汇丰全行/产品原型/pc-demo/src/views/CampaignManagement.vue

@@ -29,7 +29,7 @@
         </div>
       </template>
 
-      <el-table :data="tableData" stripe border style="width:100%">
+      <el-table :data="pagedTableData" stripe border style="width:100%">
         <el-table-column label="操作" width="200" fixed="left">
           <template #default="scope">
             <el-button type="text" size="small" @click="openModal('edit', scope.row)">编辑</el-button>
@@ -37,7 +37,11 @@
             <el-button type="text" size="small" style="color:#F56C6C" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="id" label="Campaign ID" width="120" align="center" />
+        <el-table-column label="Campaign ID" width="120" align="center">
+          <template #default="scope">
+            {{ getRowIndex(scope.$index) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="name" label="Campaign 名称" width="190" />
         <el-table-column prop="owner" label="Campaign 负责人" width="160" align="center" />
         <el-table-column label="跟进员工" width="120" align="center">
@@ -48,6 +52,18 @@
         <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
         <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
       </el-table>
+      <div class="pagination-section">
+        <span class="total">Total {{ tableData.length }}</span>
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          layout="prev, pager, next, sizes, jumper"
+          :page-sizes="[10, 20, 50]"
+          :total="tableData.length"
+          @size-change="handlePageSizeChange"
+          @current-change="handleCurrentPageChange"
+        />
+      </div>
     </el-card>
 
     <!-- 新建/编辑/查看弹窗 -->
@@ -86,6 +102,10 @@ export default {
     return {
       searchForm: { id: '', name: '', owner: '', staff: '' },
       tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10
+      },
       modalVisible: false,
       modalMode: 'create',
       form: { id: '', name: '', owner: '', staff: '' }
@@ -97,6 +117,10 @@ export default {
     },
     isViewMode() {
       return this.modalMode === 'view'
+    },
+    pagedTableData() {
+      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
+      return this.tableData.slice(start, start + this.pagination.pageSize)
     }
   },
   created() {
@@ -106,12 +130,30 @@ export default {
     async fetchList() {
       const res = await request.get('/api/campaign/list', { params: this.searchForm })
       this.tableData = res.data
+      this.syncCurrentPage()
+    },
+    handleSearch() {
+      this.pagination.currentPage = 1
+      this.fetchList()
     },
-    handleSearch() { this.fetchList() },
     handleReset() {
       this.searchForm = { id: '', name: '', owner: '', staff: '' }
+      this.pagination.currentPage = 1
       this.fetchList()
     },
+    handlePageSizeChange() {
+      this.pagination.currentPage = 1
+    },
+    handleCurrentPageChange(page) {
+      this.pagination.currentPage = page
+    },
+    getRowIndex(index) {
+      return (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
+    },
+    syncCurrentPage() {
+      const maxPage = Math.max(1, Math.ceil(this.tableData.length / this.pagination.pageSize))
+      if (this.pagination.currentPage > maxPage) this.pagination.currentPage = maxPage
+    },
     async handleDelete(row) {
       await ElMessageBox.confirm('您确定要删除此条数据吗？删除后将无法恢复。', '确认删除', { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' })
       await request.post('/api/campaign/delete', { id: row.id })
@@ -135,6 +177,7 @@ export default {
       await request.post('/api/campaign/save', this.form)
       ElMessage.success(this.modalMode === 'create' ? '新建成功' : '保存成功')
       this.modalVisible = false
+      if (this.modalMode === 'create') this.pagination.currentPage = 1
       this.fetchList()
     }
   }
@@ -146,4 +189,17 @@ export default {
 .search-section .action-row { margin-top: 15px; }
 .button-group { display: inline-block; margin-left: 20px; }
 .empty-text { color: #c0c4cc; }
+
+.pagination-section {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.pagination-section .total {
+  color: #606266;
+  font-size: 13px;
+}
 </style>

工作空间/产研/权益/汇丰全行/产品原型/pc-demo/src/views/ChannelManagement.vue

@@ -51,7 +51,11 @@
             <el-button type="text" size="small" style="color:#F56C6C" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="id" label="Channel ID" width="120" align="center" />
+        <el-table-column label="Channel ID" width="120" align="center">
+          <template #default="scope">
+            {{ getRowIndex(scope.$index) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="type" label="类型" width="150" align="center" />
         <el-table-column prop="category" label="类别" width="190" />
         <el-table-column prop="name" label="名称" width="190" />
@@ -263,6 +267,9 @@ export default {
     handleCurrentPageChange(page) {
       this.pagination.currentPage = page
     },
+    getRowIndex(index) {
+      return (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
+    },
     syncCurrentPage() {
       const maxPage = Math.max(1, Math.ceil(this.tableData.length / this.pagination.pageSize))
       if (this.pagination.currentPage > maxPage) this.pagination.currentPage = maxPage