feat: 对接用户组网管理

src/views/virtualization/UserNetworkingManage.vue

@@ -19,9 +19,14 @@
     </div>
 
     <div class="filter-bar">
-      <el-input v-model="keyword" placeholder="搜索组网" clearable style="width: 220px" @keyup.enter="handleSearch" @clear="handleSearch">
+      <el-input v-model="keyword" placeholder="关键词搜索" clearable style="width: 200px" @keyup.enter="handleSearch" @clear="handleSearch">
         <template #prefix><el-icon><Search /></el-icon></template>
       </el-input>
+      <el-select v-model="filterHostId" placeholder="按宿主机筛选" clearable filterable style="width: 200px" @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-input v-model="filterUserId" placeholder="按用户ID筛选" clearable style="width: 160px" @keyup.enter="handleSearch" @clear="handleSearch" />
+      <el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon>搜索</el-button>
     </div>
 
     <el-table :data="list" v-loading="loading" stripe>
@@ -47,9 +52,9 @@
     </el-table>
 
     <div class="pagination-wrapper" v-if="total > 0">
-      <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.page_size"
+      <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.count"
         :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next"
-        @size-change="s => { queryParams.page_size = s; queryParams.page = 1; loadList() }"
+        @size-change="s => { queryParams.count = s; queryParams.page = 1; loadList() }"
         @current-change="p => { queryParams.page = p; loadList() }" />
     </div>
 
@@ -62,19 +67,22 @@
         <el-form-item label="描述">
           <el-input v-model="createForm.description" type="textarea" :rows="2" placeholder="可选描述" />
         </el-form-item>
-        <el-form-item label="用户ID" prop="user_id">
-          <el-input-number v-model="createForm.user_id" :min="1" style="width: 100%" placeholder="用户 ID" />
+        <el-form-item label="用户" prop="user_id">
+          <div style="display: flex; align-items: center; gap: 8px; width: 100%">
+            <el-input :model-value="createForm.user_id ? `${createUserName} (ID: ${createForm.user_id})` : ''" readonly placeholder="请选择用户" style="flex: 1" />
+            <el-button type="primary" @click="showCreateUserSelector = true">选择</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="宿主机" prop="host_id">
           <el-select v-model="createForm.host_id" placeholder="选择宿主机" filterable clearable style="width: 100%">
-            <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
+            <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-item label="网桥名称" prop="bridge_name">
-          <el-input v-model="createForm.bridge_name" placeholder="如 br0" />
+        <el-form-item label="网桥名称">
+          <el-input v-model="createForm.bridge_name" placeholder="如 br0（可选）" />
         </el-form-item>
-        <el-form-item label="网关地址" prop="gateway">
-          <el-input v-model="createForm.gateway" placeholder="如 10.0.0.1" />
+        <el-form-item label="网关地址">
+          <el-input v-model="createForm.gateway" placeholder="如 10.0.0.1（可选）" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -108,6 +116,9 @@
     <!-- 虚拟机选择器 -->
     <VmSelectorPopup v-model="showAssignVmSelector" :service-id="serviceId" :current-id="assignForm.vm_id" @confirm="handleAssignVmSelected" />
 
+    <!-- 用户选择器（创建组网用） -->
+    <UserListSelector v-model="showCreateUserSelector" :current-user-id="createForm.user_id" @confirm="handleCreateUserSelected" />
+
     <!-- 组网详情弹窗 -->
     <el-dialog v-model="detailVisible" title="组网详情" width="800px" destroy-on-close>
       <el-descriptions :column="2" border v-if="currentDetail" v-loading="detailLoading" style="margin-bottom: 20px">
@@ -116,32 +127,47 @@
         <el-descriptions-item label="描述">{{ currentDetail.description || '-' }}</el-descriptions-item>
         <el-descriptions-item label="用户ID">{{ currentDetail.user_id }}</el-descriptions-item>
         <el-descriptions-item label="宿主机">{{ getHostLabel(currentDetail.host_id) }}</el-descriptions-item>
-        <el-descriptions-item label="网桥">{{ currentDetail.bridge_name }}</el-descriptions-item>
-        <el-descriptions-item label="网关">{{ currentDetail.gateway }}</el-descriptions-item>
+        <el-descriptions-item label="网桥">{{ currentDetail.bridge_name || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="网关">{{ currentDetail.gateway || '-' }}</el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ formatTime(currentDetail.created_at) }}</el-descriptions-item>
+        <el-descriptions-item label="更新时间">{{ formatTime(currentDetail.updated_at) }}</el-descriptions-item>
       </el-descriptions>
 
       <div class="networks-section" v-if="detailNetworks.length">
         <div class="networks-header">
-          <h4>组网下的网络</h4>
+          <h4>组网下的网络 ({{ detailNetworks.length }})</h4>
         </div>
         <el-table :data="detailNetworks" stripe size="small">
-          <el-table-column prop="vm_id" label="虚拟机ID" width="100" />
-          <el-table-column prop="vm_name" label="虚拟机名称" min-width="120" show-overflow-tooltip />
-          <el-table-column label="虚拟机状态" width="100">
+          <el-table-column label="网络ID" width="80">
+            <template #default="{ row }">{{ row.network?.id || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="IP 地址" min-width="150">
             <template #default="{ row }">
-              <el-tag :type="vmStatusType(row.vm_status)" size="small">{{ row.vm_status || '-' }}</el-tag>
+              <span class="mono-text">{{ row.network?.address || '-' }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="网络信息" min-width="200">
+          <el-table-column label="MAC 地址" min-width="160">
             <template #default="{ row }">
-              <template v-if="row.network">
-                <div>IP: {{ row.network.ip || '-' }}</div>
-                <div>MAC: {{ row.network.mac || '-' }}</div>
-              </template>
-              <span v-else>-</span>
+              <span class="mono-text">{{ row.network?.mac_address || '-' }}</span>
             </template>
           </el-table-column>
+          <el-table-column label="类型" width="80">
+            <template #default="{ row }">
+              <el-tag :type="networkTypeTagType(row.network?.type)" size="small">{{ networkTypeLabel(row.network?.type) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="绑定虚拟机" width="110">
+            <template #default="{ row }">
+              <span v-if="row.network?.vm_id">ID: {{ row.network.vm_id }}</span>
+              <el-tag v-else type="info" size="small">未绑定</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="网桥" width="110" show-overflow-tooltip>
+            <template #default="{ row }">{{ row.network?.bridge_name || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="目标设备" width="90" show-overflow-tooltip>
+            <template #default="{ row }">{{ row.network?.target_device || '-' }}</template>
+          </el-table-column>
           <el-table-column label="操作" width="100" fixed="right">
             <template #default="{ row }">
               <el-button link type="danger" size="small" @click="handleRemoveNetwork(row)">移除</el-button>
@@ -167,6 +193,7 @@ import {
 } from '@/api/admin/kvmService'
 import { extractApiError } from '@/utils/kvmErrorUtil'
 import VmSelectorPopup from '@/components/admin/VmSelectorPopup.vue'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
 import dayjs from 'dayjs'
 
 const route = useRoute()
@@ -183,20 +210,33 @@ const detailLoading = ref(false)
 const list = ref([])
 const total = ref(0)
 const keyword = ref('')
+const filterHostId = ref(null)
+const filterUserId = ref('')
 const hostOptions = ref([])
-const queryParams = reactive({ page: 1, page_size: 10 })
+const queryParams = reactive({ page: 1, count: 10 })
 
-const formatTime = (t) => t ? dayjs(t).format('YYYY-MM-DD HH:mm:ss') : '-'
-const vmStatusType = (s) => ({ running: 'success', stopped: 'info', suspended: 'warning', error: 'danger' }[s] || 'info')
+const formatTime = (t) => {
+  if (!t) return '-'
+  if (t.seconds) return dayjs.unix(t.seconds).format('YYYY-MM-DD HH:mm:ss')
+  return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
+}
+
+const NETWORK_TYPE_MAP = {
+  nat: { label: 'NAT', type: '' },
+  bridge: { label: '桥接', type: 'success' },
+  direct: { label: '直连', type: 'warning' }
+}
+const networkTypeLabel = (t) => NETWORK_TYPE_MAP[t]?.label || t || '-'
+const networkTypeTagType = (t) => NETWORK_TYPE_MAP[t]?.type ?? 'info'
 
 const getHostLabel = (hid) => {
   const h = hostOptions.value.find(x => x.id === hid)
-  return h ? h.name : (hid || '-')
+  return h ? `${h.name || ''} (${h.ip || h.id})` : (hid || '-')
 }
 
 const loadHostOptions = async () => {
   try {
-    const res = await getRemoteHostList({ service_id: serviceId.value, page: 1, page_size: 100 })
+    const res = await getRemoteHostList({ service_id: serviceId.value, page: 1, page_size: 200 })
     const body = res?.data
     if (body?.code === 200 && body?.data) {
       const inner = body.data
@@ -208,8 +248,14 @@ const loadHostOptions = async () => {
 const loadList = async () => {
   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.count
+    }
     if (keyword.value) params.keyword = keyword.value
+    if (filterHostId.value) params.host_id = filterHostId.value
+    if (filterUserId.value) params.user_id = parseInt(filterUserId.value) || undefined
     const res = await getUserNetworkingList(params)
     if (res?.data?.code === 200) {
       const d = res.data.data
@@ -230,19 +276,26 @@ const handleSearch = () => { queryParams.page = 1; loadList() }
 const createDialogVisible = ref(false)
 const createFormRef = ref(null)
 const createForm = reactive({ name: '', description: '', user_id: null, host_id: null, bridge_name: '', gateway: '' })
+const createUserName = ref('')
+const showCreateUserSelector = ref(false)
 const createRules = {
   name: [{ required: true, message: '请输入组网名称', trigger: 'blur' }],
-  user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
-  host_id: [{ required: true, message: '请选择宿主机', trigger: 'change' }],
-  bridge_name: [{ required: true, message: '请输入网桥名称', trigger: 'blur' }],
-  gateway: [{ required: true, message: '请输入网关地址', trigger: 'blur' }]
+  user_id: [{ required: true, message: '请选择用户', trigger: 'change' }],
+  host_id: [{ required: true, message: '请选择宿主机', trigger: 'change' }]
 }
 
 const handleAdd = () => {
   Object.assign(createForm, { name: '', description: '', user_id: null, host_id: null, bridge_name: '', gateway: '' })
+  createUserName.value = ''
   createDialogVisible.value = true
 }
 
+const handleCreateUserSelected = (user) => {
+  createForm.user_id = user.user_id || user.id
+  createUserName.value = user.user_name || user.name || ''
+  createFormRef.value?.validateField('user_id')
+}
+
 const submitCreate = () => {
   createFormRef.value?.validate(async (valid) => {
     if (!valid) return
@@ -254,8 +307,8 @@ const submitCreate = () => {
       if (createForm.description) fd.append('description', createForm.description)
       fd.append('user_id', createForm.user_id)
       fd.append('host_id', createForm.host_id)
-      fd.append('bridge_name', createForm.bridge_name)
-      fd.append('gateway', createForm.gateway)
+      if (createForm.bridge_name) fd.append('bridge_name', createForm.bridge_name)
+      if (createForm.gateway) fd.append('gateway', createForm.gateway)
       const res = await createUserNetworking(fd)
       if (res?.data?.code === 200) {
         ElMessage.success('组网创建成功')
@@ -323,7 +376,7 @@ const handleViewDetail = async (row) => {
     const res = await getUserNetworkingDetail({ service_id: serviceId.value, networking_id: row.id })
     if (res?.data?.code === 200) {
       const d = res.data.data
-      if (d?.data) currentDetail.value = d.data
+      currentDetail.value = d?.data || d || row
       detailNetworks.value = d?.networks || []
     }
   } catch { ElMessage.warning('获取详情失败') } finally { detailLoading.value = false }
@@ -331,7 +384,7 @@ const handleViewDetail = async (row) => {
 
 // ---- 删除组网 ----
 const handleDelete = (row) => {
-  ElMessageBox.confirm(`确定要删除组网「${row.name}」吗？此操作不可恢复。`, '删除确认', {
+  ElMessageBox.confirm(`确定要删除组网「${row.name || row.id}」吗？此操作不可恢复。`, '删除确认', {
     confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning'
   }).then(async () => {
     try {
@@ -344,15 +397,18 @@ const handleDelete = (row) => {
 
 // ---- 移除组网下的网络 ----
 const handleRemoveNetwork = (netItem) => {
-  ElMessageBox.confirm(`确定要从组网中移除该网络吗？`, '移除确认', {
+  const net = netItem.network || {}
+  const addrLabel = net.address ? ` (${net.address})` : ''
+  const vmLabel = net.vm_id ? `，关联虚拟机 ID: ${net.vm_id}` : ''
+  ElMessageBox.confirm(`确定要从组网中移除网络 #${net.id || '?'}${addrLabel}${vmLabel} 吗？`, '移除确认', {
     confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
   }).then(async () => {
     try {
       const fd = new FormData()
       fd.append('service_id', serviceId.value)
       fd.append('networking_id', currentDetail.value.id)
-      fd.append('network_id', netItem.network?.id || netItem.id)
-      fd.append('vm_id', netItem.vm_id)
+      fd.append('network_id', net.id)
+      fd.append('vm_id', net.vm_id || 0)
       const res = await removeUserNetworkingNetwork(fd)
       if (res?.data?.code === 200) {
         ElMessage.success('移除成功')
@@ -380,11 +436,12 @@ onMounted(async () => {
 .sub-info { font-size: 13px; color: #909399; }
 .header-right { display: flex; gap: 8px; }
 .embedded-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
-.filter-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+.filter-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
 .pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 16px; }
 .networks-section { margin-top: 8px; }
 .networks-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
 .networks-header h4 { margin: 0; font-size: 15px; color: #303133; }
+.mono-text { font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace; font-size: 12px; color: #303133; }
 :deep(.el-table) { --el-table-header-bg-color: #fafafa; }
 :deep(.el-table th) { font-weight: 600; color: #303133; font-size: 13px; }
 </style>