From 0238216d8ee5472692ce8a2cbec8b0ef6b41d8d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8D=9A=E6=96=87?= <1179111926@qq.com>
Date: Mon, 4 Aug 2025 15:03:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/vgpu/views/poll/admin/index.vue  | 114 ++++++++++++------
 1 file changed, 78 insertions(+), 36 deletions(-)

diff --git a/packages/web/projects/vgpu/views/poll/admin/index.vue b/packages/web/projects/vgpu/views/poll/admin/index.vue
index 9a148e7..6101b15 100644
--- a/packages/web/projects/vgpu/views/poll/admin/index.vue
+++ b/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;">
@@ -43,7 +49,7 @@
     <div style="margin-top: 20px; margin-bottom: 10px;">
       <span>选择节点</span>
       <span style="float: right;">已选<span style="color: #3061D0; margin: 0 5px;">{{ nodeSelect.length
-          }}</span>个节点</span>
+      }}</span>个节点</span>
     </div>
     <div class="wrap">
       <div class="wrap-left">
@@ -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,28 +168,33 @@ const handleOk = async () => {
     return;
   }
   btnLoading.value = true;
-  const nodes = nodeList.value.filter(e => nodeSelect.value.includes(e.nodeIp)).map(e => ({ nodeIp: e.nodeIp, nodeName: e.nodeName }))
-  let res;
-  if (editId.value) {
-    res = await pollApi.update({
-      pool_id: editId.value,
-      pool_name: input.value,
-      nodes
-    })
-  } else {
-    res = await pollApi.create({
-      pool_name: input.value,
-      nodes
-    })
-  }
-  if (res?.code === 200) {
-    getList();
-    dialogVisible.value = false;
+  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) {
+      res = await pollApi.update({
+        pool_id: editId.value,
+        pool_name: input.value,
+        nodes
+      })
+    } else {
+      res = await pollApi.create({
+        pool_name: input.value,
+        nodes
+      })
+    }
+    if (res?.code === 200) {
+      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">
@@ -264,4 +306,4 @@ onMounted(async () => {
   width: 60px;
   flex-shrink: 0;
 }
-</style>
+</style>
\ No newline at end of file