添加分页

src/views/processing/photoTask/index.vue

@@ -38,42 +38,53 @@
               overflow: 'auto',
             }"
           >
-            <table
-              border="1"
-              style="
-                width: 100%;
-                border-collapse: collapse;
-                text-align: center;
-                table-layout: fixed;
-              "
-            >
+            <table class="photo-task-table">
               <thead>
                 <tr>
-                  <th>货主</th>
-                  <th>加工单号</th>
-                  <th>状态</th>
-                  <th>查看</th>
-                  <th>操作</th>
+                  <th style="width: 25%">货主</th>
+                  <th style="width: 35%">加工单号</th>
+                  <th style="width: 15%">状态</th>
+                  <th style="width: 12.5%">查看</th>
+                  <th style="width: 12.5%">操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(row, rowIndex) in photoTasks" :key="rowIndex">
-                  <td>{{ row.ownerName }}</td>
-                  <td>{{ row.code }}</td>
-                  <td>{{ row.status }}</td>
                   <td>
-                    <van-button type="info" size="mini" @click="showPhotos(row)"
+                    <span class="text-compact">{{ row.ownerName }}</span>
+                  </td>
+                  <td>
+                    <span class="text-sm">{{ row.code }}</span>
+                  </td>
+                  <td>
+                    <span class="text-compact">{{ row.status }}</span>
+                  </td>
+                  <td>
+                    <van-button type="primary" plain size="small" @click="showPhotos(row)" class="compact-button"
                       >查看
                     </van-button>
                   </td>
                   <td>
-                    <van-button type="primary" size="mini" @click="toPhoto(row)"
+                    <van-button v-if="row.status !== '完成'" type="primary" size="small" @click="toPhoto(row)" class="compact-button"
                       >拍摄
                     </van-button>
                   </td>
                 </tr>
               </tbody>
             </table>
+            
+            <!-- 分页控件 -->
+            <van-pagination
+              v-model="paginate.page"
+              :page-size="paginate.size"
+              :total-items="paginate.total"
+              :page-count="paginate.pages"
+              :show-page-size="5"
+              model="simple"
+              forced="true"
+              @change="onPageChange"
+              class="pagination"
+            />
           </van-pull-refresh>
         </div>
       </div>
@@ -142,7 +153,6 @@ const uploadImages = ref([])
 const uploading = ref(false)
 const currentTaskId = ref(null)
 
-const sizes = ref([20, 50, 100])
 const paginate = ref({
   page: 1,
   size: 20,
@@ -166,6 +176,8 @@ onMounted(() => {
 })
 
 function onRefresh() {
+  // 刷新时重置到第一页
+  paginate.value.page = 1
   listProcessingPhoto()
 }
 
@@ -173,14 +185,22 @@ function listProcessingPhoto() {
   loading.value = true
   getProcessingPhotoTask(paginate.value).then((res) => {
     photoTasks.value = res?.data?.records || []
+    // 更新分页信息
+    if (res?.data) {
+      paginate.value.size = res.data.size || 0
+      paginate.value.total = res.data.total || 0
+      paginate.value.page = res.data.current || 0
+      paginate.value.pages = res.data.pages || 0
+    }
   }).finally(() => {
     loading.value = false
   })
 }
 
-function nextPage() {
-  const page = paginate.value.page
-  paginate.value.page += 1
+// 分页变更处理
+function onPageChange(page) {
+  paginate.value.page = page
+  listProcessingPhoto()
 }
 
 function showPhotos(row) {
@@ -299,6 +319,75 @@ onRefresh()
 </script>
 
 <style scoped lang="scss">
+.photo-task-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  table-layout: fixed;
+  font-size: 12px;
+
+  thead {
+    tr {
+      background-color: #f5f5f5;
+      
+      th {
+        padding: 6px 2px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      height: 36px;
+      border-bottom: 1px solid #e0e0e0;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      td {
+        padding: 3px 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        .text-compact {
+          font-size: 12px;
+          line-height: 1.2;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .text-sm {
+          font-size: 11px;
+          line-height: 1.2;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .compact-button {
+          height: 24px;
+          line-height: 22px;
+          padding: 0 6px;
+          font-size: 11px;
+          min-width: 36px;
+        }
+      }
+    }
+  }
+}
+
+.pagination {
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
+
 .upload-popup {
   height: 100%;
   display: flex;