前端分页

packages/web/projects/vgpu/views/poll/admin/index.vue

@@ -5,9 +5,9 @@
         round>创建资源池</el-button>
     </template>
   </list-header>
-  <div v-loading="loading" style="min-height: 200px;">
+  <div v-loading="loading" style="min-height: 90px;">
     <block-box
-      v-for="{ poolId, poolName, nodeNum, cpuCores, gpuNum, availableMemory, totalMemory, diskSize, nodeList }, index in list"
+      v-for="{ poolId, poolName, nodeNum, cpuCores, gpuNum, availableMemory, totalMemory, diskSize, nodeList }, index in paginatedList"
       :key="poolId">
       <el-row style="align-items: center;">
         <div class="left">
@@ -22,7 +22,7 @@
         </div>
         <div class="right">
           <el-button type="text">查看详情</el-button>
-          <template v-if="index === 0">
+          <template v-if="index === 0 && currentPage === 1">
             <el-button type="text">配置</el-button>
           </template>
           <template v-else>
@@ -34,6 +34,12 @@
       </el-row>
     </block-box>
   </div>
+
+  <!-- 分页组件 -->
+  <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
+    layout="total, ->, sizes, jumper, prev, next" :page-sizes="[10, 20, 50, 100]" :total="list.length"
+    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+
   <el-dialog @close="editId = null; input = ''; nodeSelect = []" v-model="dialogVisible"
     :title="editId ? '编辑资源池' : '创建资源池'" width="1180" :before-close="handleClose">
     <el-row :wrap="false" style="align-items: center;">
@@ -61,11 +67,8 @@
             <div>CPU<span>{{ cpuCores }}核</span></div>
           </div>
         </div>
-
-      </div>
-      <div class="wrap-center">
-
       </div>
+      <div class="wrap-center"></div>
       <div class="wrap-right">
         <div style="margin-top: 12px;"
           v-for="{ nodeIp, cpuCores, gpuNum, gpuMemory, totalMemory, diskSize }, index in nodeList.filter(e => nodeSelect.includes(e.nodeIp))"
@@ -93,29 +96,62 @@
       </span>
     </template>
   </el-dialog>
-
 </template>
 
 <script setup lang="jsx">
 import pollApi from '~/vgpu/api/poll';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, watchEffect } from 'vue';
 import BlockBox from '@/components/BlockBox.vue';
 import { Remove } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
+// 数据列表相关
 const list = ref([])
+const loading = ref(true)
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+// 对话框相关
 const dialogVisible = ref(false)
 const editId = ref(null)
-const nodeList = ref([])
-const nodeSelect = ref([])
 const input = ref('')
 const btnLoading = ref(false)
-const loading = ref(true)
 
+// 节点选择相关
+const nodeList = ref([])
+const nodeSelect = ref([])
+
+// 计算分页后的数据
+const paginatedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return list.value.slice(start, end)
+})
+
+// watchEffect(()=>{
+//   console.log(currentPage.value, pageSize.value, 88)
+// })
+
+// 字节转GB
 const bytesToGB = (bytes) => {
   return Math.round(bytes / (1024 * 1024 * 1024));
 }
 
+// 分页大小变化
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  currentPage.value = 1 // 切换每页条数时重置到第一页
+}
+
+// 当前页变化
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+}
+
+// 确认操作
 const handleOk = async () => {
   if (!input.value) {
     ElMessage({
@@ -132,6 +168,7 @@ const handleOk = async () => {
     return;
   }
   btnLoading.value = true;
+  try {
     const nodes = nodeList.value.filter(e => nodeSelect.value.includes(e.nodeIp)).map(e => ({ nodeIp: e.nodeIp, nodeName: e.nodeName }))
     let res;
     if (editId.value) {
@@ -150,10 +187,14 @@ const handleOk = async () => {
       getList();
       dialogVisible.value = false;
     }
+  } finally {
+    btnLoading.value = false;
+  }
 
   btnLoading.value = false;
 }
 
+// 复选框变化
 const handleCheckboxChange = (ip) => {
   const index = nodeSelect.value.indexOf(ip);
   if (index > -1) {
@@ -163,6 +204,7 @@ const handleCheckboxChange = (ip) => {
   }
 }
 
+// 删除操作
 const handleDelete = async (id) => {
   ElMessageBox.confirm(`确定要删除当前资源池吗？`, '提示', {
     confirmButtonText: '确定',
@@ -175,9 +217,9 @@ const handleDelete = async (id) => {
         if (res.code === 200) {
           ElMessage.success('删除成功');
           getList();
-          done(); // 关闭对话框
+          done();
         }
-        instance.confirmButtonLoading = false; // 确保无论如何都关闭loading
+        instance.confirmButtonLoading = false;
       } else {
         done();
       }
@@ -185,21 +227,21 @@ const handleDelete = async (id) => {
   })
 }
 
+// 获取资源池列表
 const getList = async () => {
   loading.value = true
   const res = await pollApi.getPollList()
   loading.value = false
   list.value = res.data
+  total.value = res.data.length
 }
 
-
+// 初始化加载数据
 onMounted(async () => {
   getList();
   const res = await pollApi.getNodeList()
   nodeList.value = res.data
-
 });
-
 </script>
 
 <style scoped lang="scss">