fix: 重构虚拟机内网外网参数设置选择网络

src/views/virtualization/NetworkManage.vue

@@ -10,11 +10,13 @@
       </div>
       <div class="header-right">
         <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建网络</el-button>
+        <el-button type="success" @click="handleBatchAdd">批量创建</el-button>
         <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
       </div>
     </div>
     <div class="embedded-toolbar" v-if="embedded">
       <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建网络</el-button>
+      <el-button type="success" @click="handleBatchAdd">批量创建</el-button>
       <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
     </div>
 
@@ -27,7 +29,10 @@
         <el-option label="网桥(Bridge)" value="bridge" />
         <el-option label="内网(NAT)" value="nat" />
       </el-select>
-     
+      <el-select v-model="filterIpVersion" placeholder="IP版本" clearable style="width: 120px" @change="handleSearch">
+        <el-option label="IPv4" value="ipv4" />
+        <el-option label="IPv6" value="ipv6" />
+      </el-select>
     </div>
 
     <!-- 网络列表 -->
@@ -133,6 +138,46 @@
       </el-descriptions>
       <template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
     </el-dialog>
+
+    <!-- 批量创建弹窗 -->
+    <el-dialog v-model="batchDialogVisible" title="批量创建网络" width="560px" destroy-on-close>
+      <el-alert type="info" :closable="false" style="margin-bottom: 16px">通过指定 IP 范围（start_ip ~ end_ip）批量创建网络条目</el-alert>
+      <el-form ref="batchFormRef" :model="batchForm" :rules="batchFormRules" label-width="120px">
+        <el-form-item label="宿主机" prop="host_id">
+          <el-select v-model="batchForm.host_id" placeholder="选择宿主机" filterable style="width: 100%">
+            <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="起始IP" prop="start_ip">
+          <el-input v-model="batchForm.start_ip" placeholder="如 192.168.1.10" />
+        </el-form-item>
+        <el-form-item label="结束IP" prop="end_ip">
+          <el-input v-model="batchForm.end_ip" placeholder="如 192.168.1.50" />
+        </el-form-item>
+        <el-form-item label="网关">
+          <el-input v-model="batchForm.gateway" placeholder="可选，如 192.168.1.1" />
+        </el-form-item>
+        <el-form-item label="子网掩码">
+          <el-input v-model="batchForm.mask" placeholder="可选，如 24" />
+        </el-form-item>
+        <el-form-item label="DNS">
+          <el-input v-model="batchForm.nameservers" placeholder="可选，如 114.114.114.114,8.8.8.8" />
+        </el-form-item>
+        <el-form-item label="网桥名称">
+          <el-input v-model="batchForm.bridge_name" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="网络类型">
+          <el-select v-model="batchForm.type" style="width: 100%">
+            <el-option label="网桥(Bridge)" value="bridge" />
+            <el-option label="内网(NAT)" value="nat" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="batchDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleBatchSubmit">确定创建</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -141,7 +186,7 @@ import { ref, reactive, computed, inject, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Refresh, Search, ArrowLeft } from '@element-plus/icons-vue'
-import { getRemoteHostList, getNetworkList, getNetworkDetail, createNetwork, updateNetwork, deleteNetwork } from '@/api/admin/kvmService'
+import { getRemoteHostList, getNetworkList, getNetworkDetail, createNetwork, batchCreateNetwork, updateNetwork, deleteNetwork } from '@/api/admin/kvmService'
 import { extractApiError } from '@/utils/kvmErrorUtil'
 
 const route = useRoute()
@@ -160,6 +205,7 @@ const networkList = ref([])
 const total = ref(0)
 const keyword = ref('')
 const filterType = ref('')
+const filterIpVersion = ref('')
 const hostIdInput = ref(0)
 const hostOptions = ref([])
 const queryParams = reactive({ page: 1, page_size: 10 })
@@ -213,6 +259,7 @@ const loadList = async () => {
     const params = { service_id: serviceId.value, host_id: hid, page: queryParams.page, page_size: queryParams.page_size }
     if (keyword.value) params.key = keyword.value
     if (filterType.value) params.type = filterType.value
+    if (filterIpVersion.value) params.ip_version = filterIpVersion.value
     const res = await getNetworkList(params)
     const body = res?.data
     if (body?.code === 200 && body?.data) {
@@ -269,7 +316,7 @@ const handleSubmit = () => {
       if (dialogType.value === 'add') {
         res = await createNetwork(fd)
       } else {
-        fd.append('network_id', formData.id)
+        fd.append('id', formData.id)
         res = await updateNetwork(fd)
       }
       if (res?.data?.code === 200) {
@@ -309,6 +356,57 @@ const handleDelete = (row) => {
   }).catch(() => {})
 }
 
+// ---- 批量创建网络 ----
+const batchDialogVisible = ref(false)
+const batchFormRef = ref(null)
+const batchForm = reactive({
+  host_id: 0, start_ip: '', end_ip: '', gateway: '', mask: '',
+  nameservers: '', bridge_name: '', type: 'bridge'
+})
+const batchFormRules = {
+  host_id: [{ required: true, message: '请选择宿主机', trigger: 'change' }],
+  start_ip: [{ required: true, message: '请输入起始IP', trigger: 'blur' }],
+  end_ip: [{ required: true, message: '请输入结束IP', trigger: 'blur' }]
+}
+
+const handleBatchAdd = () => {
+  Object.assign(batchForm, {
+    host_id: hostIdInput.value || hostId.value || 0,
+    start_ip: '', end_ip: '', gateway: '', mask: '',
+    nameservers: '', bridge_name: '', type: 'bridge'
+  })
+  batchDialogVisible.value = true
+}
+
+const handleBatchSubmit = () => {
+  batchFormRef.value?.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      const fd = new FormData()
+      fd.append('service_id', serviceId.value)
+      fd.append('host_id', batchForm.host_id)
+      fd.append('start_ip', batchForm.start_ip)
+      fd.append('end_ip', batchForm.end_ip)
+      if (batchForm.gateway) fd.append('gateway', batchForm.gateway)
+      if (batchForm.mask) fd.append('mask', batchForm.mask)
+      if (batchForm.nameservers) fd.append('nameservers', batchForm.nameservers)
+      if (batchForm.bridge_name) fd.append('bridge_name', batchForm.bridge_name)
+      if (batchForm.type) fd.append('type', batchForm.type)
+      const res = await batchCreateNetwork(fd)
+      if (res?.data?.code === 200) {
+        ElMessage.success('批量创建成功')
+        batchDialogVisible.value = false
+        loadList()
+      } else {
+        ElMessage.error(extractApiError(res?.data, '批量创建失败'))
+      }
+    } catch (e) {
+      ElMessage.error(extractApiError(e?.response?.data, '批量创建失败'))
+    } finally { submitLoading.value = false }
+  })
+}
+
 const goBack = () => { router.push('/virtualization/kvm-service') }
 
 onMounted(async () => {