src/components/admin/VmSelectorPopup.vue

@@ -2,9 +2,11 @@
   <el-dialog v-model="visible" title="选择虚拟机" width="700px" append-to-body @close="handleClose">
     <div class="selector-container">
       <div class="filter-bar">
-        <el-select v-model="hostIdFilter" placeholder="选择宿主机" clearable filterable style="width: 220px" @change="loadList">
+        <el-input v-model.trim="keyword" placeholder="搜索虚拟机名称或 ID" clearable style="width:220px" @keyup.enter="handleSearch" @clear="handleSearch" />
+        <el-select v-model="hostIdFilter" placeholder="全部宿主机" clearable filterable style="width: 220px" @change="handleSearch">
           <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
         </el-select>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
       </div>
       <el-table v-loading="loading" :data="list" highlight-current-row @current-change="handleCurrentChange" :height="300" :row-class-name="rowClassName">
         <el-table-column prop="id" label="ID" width="70" />
@@ -20,6 +22,9 @@
           </template>
         </el-table-column>
       </el-table>
+      <div class="pagination-wrapper">
+        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10,20,50]" :total="total" layout="total,sizes,prev,pager,next" small @current-change="loadList" @size-change="handleSizeChange" />
+      </div>
     </div>
     <template #footer>
       <el-button @click="visible = false">取消</el-button>
@@ -47,10 +52,21 @@ const list = ref([])
 const selectedItem = ref(null)
 const hostIdFilter = ref('')
 const hostOptions = ref([])
+const keyword = ref('')
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
 
 watch(() => props.modelValue, (val) => {
   visible.value = val
-  if (val) { loadHostOptions(); if (props.hostId) { hostIdFilter.value = props.hostId; loadList() } }
+  if (val) {
+    selectedItem.value = null
+    hostIdFilter.value = props.hostId || ''
+    keyword.value = ''
+    page.value = 1
+    loadHostOptions()
+    loadList()
+  }
 })
 watch(visible, (val) => emit('update:modelValue', val))
 
@@ -61,26 +77,31 @@ const loadHostOptions = async () => {
     if (body?.code === 200 && body?.data) {
       const inner = body.data
       hostOptions.value = inner.hosts || inner.data || (Array.isArray(inner) ? inner : [])
-      if (!hostIdFilter.value && hostOptions.value.length) hostIdFilter.value = hostOptions.value[0].id
-      if (hostIdFilter.value) loadList()
     }
   } catch { /* ignore */ }
 }
 
 const loadList = async () => {
-  if (!hostIdFilter.value) return
+  if (!props.serviceId) return
   loading.value = true
   try {
-    const res = await getVmList({ service_id: props.serviceId, host_id: hostIdFilter.value, page: 1, count: 10 })
+    const params = { service_id: props.serviceId, page: page.value, count: pageSize.value }
+    if (hostIdFilter.value) params.host_id = hostIdFilter.value
+    if (keyword.value) params.key = keyword.value
+    const res = await getVmList(params)
     const body = res?.data
     if (body?.code === 200 && body?.data) {
       const inner = body.data
       list.value = inner.data || (Array.isArray(inner) ? inner : [])
+      total.value = inner.meta?.count ?? inner.all_count ?? inner.total ?? list.value.length
     }
-  } catch { /* ignore */ }
+  } catch { list.value = []; total.value = 0 }
   finally { loading.value = false }
 }
 
+const handleSearch = () => { page.value = 1; loadList() }
+const handleSizeChange = () => { page.value = 1; loadList() }
+
 const formatMem = (kb) => {
   if (!kb) return '-'
   if (kb >= 1048576) return (kb / 1048576).toFixed(1) + ' GB'
@@ -99,12 +120,13 @@ const handleConfirm = () => {
     visible.value = false
   }
 }
-const handleClose = () => { selectedItem.value = null }
+const handleClose = () => { selectedItem.value = null; list.value = []; total.value = 0 }
 </script>
 
 <style scoped>
 .selector-container { min-height: 200px; }
 .filter-bar { display: flex; gap: 8px; margin-bottom: 12px; }
+.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 12px; }
 :deep(.current-row) { background-color: #ecf5ff !important; }
 :deep(.el-table__body tr) { cursor: pointer; }
 </style>

src/views/product/UserGoodsList.vue

@@ -612,7 +612,7 @@ const loadList = async () => {
     if (res?.data?.code === 200 && res?.data?.data) {
       const d = res.data.data
       list.value = d.data || (Array.isArray(d) ? d : [])
-      total.value = d.all_count ?? d.total ?? list.value.length
+      total.value = d.meta?.count ?? d.all_count ?? d.total ?? list.value.length
     } else { list.value = []; total.value = 0 }
   } catch { list.value = []; total.value = 0 } finally { loading.value = false }
 }
@@ -825,7 +825,7 @@ const loadVmListForItem = async () => {
     if (res?.data?.code === 200 && res?.data?.data) {
       const d = res.data.data
       vmListForItem.value = d.data || (Array.isArray(d) ? d : [])
-      vmListTotal.value = d.all_count ?? d.total ?? vmListForItem.value.length
+      vmListTotal.value = d.meta?.count ?? d.all_count ?? d.total ?? vmListForItem.value.length
     }
   } catch { vmListForItem.value = [] } finally { vmListLoading.value = false }
 }

src/views/user-vm/UserVmList.vue

@@ -1519,7 +1519,7 @@ const loadVmListForItem = async () => {
     if (res?.data?.code === 200 && res?.data?.data) {
       const d = res.data.data
       vmListForItem.value = d.data || (Array.isArray(d) ? d : [])
-      vmListTotal.value = d.all_count ?? d.total ?? vmListForItem.value.length
+      vmListTotal.value = d.meta?.count ?? d.all_count ?? d.total ?? vmListForItem.value.length
     }
   } catch { vmListForItem.value = [] } finally { vmListLoading.value = false }
 }
@@ -1710,7 +1710,7 @@ const loadBindVmList = async () => {
     if (res?.data?.code === 200 && res?.data?.data) {
       const d = res.data.data
       bindVmList.value = d.data || (Array.isArray(d) ? d : [])
-      bindVmTotal.value = d.all_count ?? d.total ?? bindVmList.value.length
+      bindVmTotal.value = d.meta?.count ?? d.all_count ?? d.total ?? bindVmList.value.length
     } else { bindVmList.value = []; bindVmTotal.value = 0 }
   } catch { bindVmList.value = [] } finally { bindVmLoading.value = false }
 }