feat: 对接主控服务接口

src/components/admin/HostGroupSelectorPopup.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog v-model="visible" title="选择宿主机组" width="600px" append-to-body @close="handleClose">
+    <div class="selector-container">
+      <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" />
+        <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="note" label="备注" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.note || row.Note || '-' }}</template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :disabled="!selectedItem" @click="handleConfirm">确认选择</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getHostGroupList } from '@/api/admin/kvmService'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  serviceId: { type: Number, default: 0 },
+  currentId: { type: Number, default: 0 }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const selectedItem = ref(null)
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) loadList()
+})
+watch(visible, (val) => emit('update:modelValue', val))
+
+const loadList = async () => {
+  loading.value = true
+  try {
+    const res = await getHostGroupList({ service_id: props.serviceId })
+    const body = res?.data
+    if (body?.code === 200 && body?.data) {
+      const items = Array.isArray(body.data) ? body.data : (body.data.data || body.data.list || [])
+      list.value = items.map(i => ({
+        id: i.Id ?? i.id,
+        name: i.Name ?? i.name,
+        note: i.Note ?? i.note
+      }))
+    }
+  } catch { /* ignore */ }
+  finally { loading.value = false }
+}
+
+const rowClassName = ({ row }) => row.id === props.currentId ? 'current-row' : ''
+const handleCurrentChange = (row) => { selectedItem.value = row }
+const handleConfirm = () => {
+  if (selectedItem.value) {
+    emit('confirm', selectedItem.value)
+    visible.value = false
+  }
+}
+const handleClose = () => { selectedItem.value = null }
+</script>
+
+<style scoped>
+.selector-container { min-height: 200px; }
+:deep(.current-row) { background-color: #ecf5ff !important; }
+</style>