feat: 对接用户组网管理

src/views/virtualization/VolumeManage.vue

@@ -47,14 +47,21 @@
       <el-table-column label="宿主机" width="140">
         <template #default="{ row }">{{ getHostLabel(row.host_id) }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="340" fixed="right">
+      <el-table-column label="操作" width="200" fixed="right">
         <template #default="{ row }">
-          <el-button link type="primary" @click="handleViewDetail(row)">详情</el-button>
-          <el-button link type="primary" @click="handleResize(row)">调整大小</el-button>
-          <el-button link type="primary" @click="handleMount(row)">挂载</el-button>
-          <el-button link type="warning" @click="handleUnmount(row)">卸载</el-button>
-          <el-button link type="success" @click="handleTransfer(row)">迁移</el-button>
-          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+          <el-button link type="primary" size="small" @click="handleViewDetail(row)">详情</el-button>
+          <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+          <el-dropdown trigger="click" @command="cmd => handleRowMore(row, cmd)" style="margin-left: 4px; margin-top: 4.5px">
+            <el-button link type="info" size="small">更多<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="resize">调整大小</el-dropdown-item>
+                <el-dropdown-item command="mount">挂载</el-dropdown-item>
+                <el-dropdown-item command="unmount">卸载</el-dropdown-item>
+                <!-- <el-dropdown-item command="transfer">迁移</el-dropdown-item> -->
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -137,10 +144,12 @@
       </el-alert>
       <el-form label-width="100px">
         <el-form-item label="数据卷">{{ transferTarget?.name }} ({{ transferTarget?.size }} GB)</el-form-item>
-        <el-form-item label="当前宿主机">{{ getHostLabel(transferTarget?.host_id) }}</el-form-item>
+        <el-form-item label="当前宿主机">
+          <el-input :model-value="currentHostLabel" disabled style="width: 100%" />
+        </el-form-item>
         <el-form-item label="目标宿主机" required>
-          <el-select v-model="transferHostId" placeholder="请选择目标宿主机" style="width: 100%" filterable>
-            <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" :disabled="h.id === transferTarget?.host_id" />
+          <el-select v-model="transferHostId" placeholder="请选择目标宿主机" style="width: 100%" filterable v-loading="hostOptionsLoading" disabled>
+            <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id"  />
           </el-select>
         </el-form-item>
       </el-form>
@@ -150,32 +159,6 @@
       </template>
     </el-dialog>
 
-    <!-- 详情弹窗 -->
-    <el-dialog v-model="detailVisible" title="数据卷详情" width="600px" destroy-on-close>
-      <div v-loading="detailLoading">
-        <el-descriptions :column="2" border v-if="currentDetail">
-          <el-descriptions-item label="ID">{{ currentDetail.id }}</el-descriptions-item>
-          <el-descriptions-item label="名称">{{ currentDetail.name }}</el-descriptions-item>
-          <el-descriptions-item label="大小">{{ currentDetail.size }} GB</el-descriptions-item>
-          <el-descriptions-item label="系统卷">
-            <el-tag :type="currentDetail.is_system ? 'danger' : 'info'" size="small">{{ currentDetail.is_system ? '是' : '否' }}</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="状态">
-            <el-tag :type="volStatusType(currentDetail.status)" size="small">{{ volStatusLabel(currentDetail.status) }}</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="宿主机">{{ getHostLabel(currentDetail.host_id) }}</el-descriptions-item>
-          <el-descriptions-item label="路径" :span="2">
-            <span class="mono-text">{{ currentDetail.path || '-' }}</span>
-          </el-descriptions-item>
-          <el-descriptions-item label="目标设备" v-if="currentDetail.target_device">{{ currentDetail.target_device }}</el-descriptions-item>
-          <el-descriptions-item label="虚拟机ID" v-if="currentDetail.vm_id">{{ currentDetail.vm_id }}</el-descriptions-item>
-          <el-descriptions-item label="镜像ID" v-if="currentDetail.image_id">{{ currentDetail.image_id }}</el-descriptions-item>
-          <el-descriptions-item label="创建时间">{{ formatTimestamp(currentDetail.created_at) }}</el-descriptions-item>
-          <el-descriptions-item label="更新时间">{{ formatTimestamp(currentDetail.updated_at) }}</el-descriptions-item>
-        </el-descriptions>
-      </div>
-      <template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
-    </el-dialog>
 
     <!-- 镜像选择器 -->
     <ImageSelectorPopup v-model="showImageSelector" :service-id="serviceId" :current-id="createForm.image_id" @confirm="handleImageSelected" />
@@ -190,9 +173,9 @@
 import { ref, reactive, computed, inject, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, ArrowLeft } from '@element-plus/icons-vue'
+import { Plus, Refresh, ArrowLeft, ArrowDown } from '@element-plus/icons-vue'
 import {
-  getRemoteHostList, getVolumeList, getVolumeDetail,
+  getRemoteHostList, getVolumeList,
   createVolume, resizeVolume, mountVolume, unmountVolume, transferVolume, deleteVolume
 } from '@/api/admin/kvmService'
 import { extractApiError } from '@/utils/kvmErrorUtil'
@@ -205,13 +188,13 @@ const embedded = inject('embedded', false)
 const injectedServiceId = inject('serviceId', null)
 const injectedServiceName = inject('serviceName', null)
 const injectedHostId = inject('hostId', null)
+const injectedHostDetail = inject('hostDetail', null)
 const serviceId = computed(() => injectedServiceId?.value || parseInt(route.query.service_id) || 0)
 const hostId = computed(() => injectedHostId?.value || parseInt(route.query.host_id) || 0)
 const serviceName = computed(() => injectedServiceName?.value || route.query.service_name || '')
 
 const loading = ref(false)
 const submitLoading = ref(false)
-const detailLoading = ref(false)
 const volumeList = ref([])
 const total = ref(0)
 const filterStatus = ref('')
@@ -237,7 +220,7 @@ const formatTimestamp = (ts) => {
 
 const loadHostOptions = async () => {
   try {
-    const res = await getRemoteHostList({ service_id: serviceId.value, page: 1, page_size: 200 })
+    const res = await getRemoteHostList({ service_id: serviceId.value, page: 1, page_size: 10 })
     const body = res?.data
     if (body?.code === 200 && body?.data) {
       const inner = body.data
@@ -252,8 +235,6 @@ const createDialogVisible = ref(false)
 const createFormRef = ref(null)
 const resizeDialogVisible = ref(false)
 const mountDialogVisible = ref(false)
-const detailVisible = ref(false)
-const currentDetail = ref(null)
 const resizeTarget = ref(null)
 const newSize = ref(1)
 const mountTarget = ref(null)
@@ -265,6 +246,15 @@ const transferDialogVisible = ref(false)
 const transferTarget = ref(null)
 const transferHostId = ref('')
 const transferLoading = ref(false)
+const hostOptionsLoading = ref(false)
+const currentHostLabel = computed(() => {
+  const hid = transferTarget.value?.host_id || injectedHostId?.value
+  if (!hid) return '-'
+  const hd = injectedHostDetail?.value
+  if (hd && hd.id === hid) return `${hd.name || '宿主机'} (${hd.ip || '#' + hid})`
+  const h = hostOptions.value.find(x => x.id === hid)
+  return h ? `${h.name} (${h.ip || '#' + h.id})` : `宿主机 #${hid}`
+})
 
 // 选择器
 const showImageSelector = ref(false)
@@ -294,7 +284,7 @@ const loadList = async () => {
   if (!serviceId.value) return
   loading.value = true
   try {
-    const params = { service_id: serviceId.value, page: queryParams.page, page_size: queryParams.page_size }
+    const params = { service_id: serviceId.value, page: queryParams.page, count: queryParams.page_size,host_id:hostId.value }
     if (hostId.value) params.host_id = hostId.value
     if (filterStatus.value) params.status = filterStatus.value
     const res = await getVolumeList(params)
@@ -311,8 +301,8 @@ const handleSearch = () => { queryParams.page = 1; loadList() }
 
 const handleAdd = () => {
   Object.assign(createForm, {
-    name: '', size: 10, host_id: hostId.value || 0,
-    is_system: false, image_id: 0, vm_id: 0, target_device: '',
+    name: '', size: 10, host_id: hostId.value || '',
+    is_system: false, image_id: '', vm_id: '', target_device: '',
     _imageName: '', _vmName: ''
   })
   createDialogVisible.value = true
@@ -377,11 +367,14 @@ const handleUnmount = (row) => {
 }
 
 // 迁移卷
-const handleTransfer = async (row) => {
+const handleTransfer = (row) => {
   transferTarget.value = row
-  transferHostId.value = ''
-  if (!hostOptions.value.length) await loadHostOptions()
+  transferHostId.value = row.host_id || hostId.value || ''
   transferDialogVisible.value = true
+  if (!hostOptions.value.length) {
+    hostOptionsLoading.value = true
+    loadHostOptions().finally(() => { hostOptionsLoading.value = false })
+  }
 }
 
 const submitTransfer = async () => {
@@ -404,18 +397,8 @@ const submitTransfer = async () => {
   finally { transferLoading.value = false }
 }
 
-const handleViewDetail = async (row) => {
-  detailVisible.value = true
-  detailLoading.value = true
-  currentDetail.value = row
-  try {
-    const res = await getVolumeDetail({ service_id: serviceId.value, volume_id: row.id })
-    if (res?.data?.code === 200 && res?.data?.data) {
-      const d = res.data.data
-      currentDetail.value = d.volume ?? d.data ?? d
-    }
-  } catch { /* fallback */ }
-  finally { detailLoading.value = false }
+const handleViewDetail = (row) => {
+  router.push({ path: '/virtualization/volume-detail', query: { service_id: serviceId.value, volume_id: row.id } })
 }
 
 const handleDelete = (row) => {
@@ -430,6 +413,13 @@ const handleDelete = (row) => {
   }).catch(() => {})
 }
 
+const handleRowMore = (row, command) => {
+  if (command === 'resize') handleResize(row)
+  else if (command === 'mount') handleMount(row)
+  else if (command === 'unmount') handleUnmount(row)
+  else if (command === 'transfer') handleTransfer(row)
+}
+
 const goBack = () => { router.push('/virtualization/kvm-service') }
 
 onMounted(() => {
@@ -438,6 +428,8 @@ onMounted(() => {
     loadList()
   }
 })
+
+defineExpose({ loadList })
 </script>
 
 <style scoped>