pms 新增保养工单 保养项 分页

src/views/pms/iotmainworkorder/IotMainWorkOrderAdd.vue

@@ -98,7 +98,7 @@
 
     <!-- 列表 -->
     <ContentWrap>
-      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table v-loading="loading" :data="pagedList" :stripe="true" :show-overflow-tooltip="true">
         <!-- 添加序号列 -->
         <el-table-column
           type="index"
@@ -153,6 +153,18 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- 添加分页组件 -->
+      <el-pagination
+        style="margin-top: 20px; justify-content: flex-end"
+        :total="list.length"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
     </ContentWrap>
 
     <!-- 选择的物料列表 -->
@@ -410,6 +422,28 @@ const { params, name } = useRoute() // 查询参数
 const id = params.id
 const devicePersonsMap = ref<Map<number, Set<string>>>(new Map()) // 存储设备-责任人映射
 
+// 分页相关变量
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+// 计算分页后的数据
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return list.value.slice(start, end)
+})
+
+// 处理页码变化
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+}
+
+// 处理每页数量变化
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1 // 重置到第一页
+}
+
 const formData = ref({
   id: undefined,
   deptId: undefined,
@@ -688,6 +722,9 @@ const deviceChoose = async(selectedDevices) => {
   })
   // 更新工单名称
   updateWorkOrderName();
+
+  // 添加数据后自动跳转到第一页
+  currentPage.value = 1
 }
 
 /** 查看已经选择的物料 并编辑 */
@@ -1037,6 +1074,11 @@ const handleDelete = async (str: string) => {
     }
     // 更新工单名称
     updateWorkOrderName();
+
+    // 检查是否需要调整页码
+    if (list.value.length > 0 && pagedList.value.length === 0) {
+      currentPage.value = Math.max(1, currentPage.value - 1)
+    }
   } catch (error) {
     console.error('移除失败:', error)
     message.error('移除失败')