feat: 对接用户组网管理

2026-03-24 18:57:52 +08:00
parent 3357566b02
commit 40a5e486a6
29 changed files with 1895 additions and 9381 deletions
@@ -14,7 +14,8 @@
      </div>
    </div>
    <div class="embedded-toolbar" v-if="embedded">
-      <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建镜像</el-button>
+      <el-button v-if="isEmbeddedHost" type="primary" @click="handleSyncToHostBatch"><el-icon><Refresh /></el-icon>同步镜像</el-button>
+      <el-button v-else type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建镜像</el-button>
      <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
    </div>

@@ -60,7 +61,7 @@
      </el-table-column>
      <el-table-column label="同步状态" width="100">
        <template #default="{ row }">
-          <el-tag :type="row.sync_status === 'synced' ? 'success' : 'warning'" size="small">{{ row.sync_status === 'synced' ? '同步' : '不同步' }}</el-tag>
+          <el-tag :type="row.sync_status === 'synced' ? 'success' : 'warning'" size="small">{{ row.sync_status === 'synced' ? '已同步' : '未同步' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路径" min-width="200" show-overflow-tooltip />
@@ -70,8 +71,8 @@
      <el-table-column label="操作" width="280" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleGoDetail(row)">详情</el-button>
-          <el-button link type="success" @click="handleSyncToHost(row)">同步</el-button>
-          <el-button link type="warning" @click="handleReloadOnHost(row)">宿主机重下载</el-button>
+          <el-button v-if="!isEmbeddedHost" link type="success" @click="handleSyncToHost()">同步</el-button>
+          <el-button link type="warning" @click="handleReloadOnHost(row)">重新下载</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
@@ -178,11 +179,9 @@
    <!-- 同步到宿主机弹窗 -->
    <el-dialog v-model="syncDialogVisible" title="同步镜像到宿主机" width="440px" destroy-on-close>
      <el-form label-width="100px">
-        <el-form-item label="镜像">
-          <el-input :model-value="syncTarget?.name" disabled />
-        </el-form-item>
        <el-form-item label="目标宿主机" required>
-          <el-select v-model="syncHostId" placeholder="请选择宿主机" style="width: 100%">
+          <el-input v-if="isEmbeddedHost" :model-value="currentHostLabel" disabled style="width: 100%" />
+          <el-select v-else v-model="syncHostId" placeholder="请选择宿主机" filterable style="width: 100%" v-loading="hostOptionsLoading">
            <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>
@@ -200,7 +199,8 @@
          <el-input :model-value="reloadTarget?.name" disabled />
        </el-form-item>
        <el-form-item label="目标宿主机" required>
-          <el-select v-model="reloadHostId" placeholder="请选择宿主机" style="width: 100%">
+          <el-input v-if="isEmbeddedHost" :model-value="currentHostLabel" disabled style="width: 100%" />
+          <el-select v-else v-model="reloadHostId" placeholder="请选择宿主机" style="width: 100%" v-loading="hostOptionsLoading">
            <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>
@@ -230,6 +230,7 @@ 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 serviceName = computed(() => injectedServiceName?.value || route.query.service_name || '')

@@ -255,7 +256,6 @@ const hostStatusList = ref([])

 // 同步到宿主机
 const syncDialogVisible = ref(false)
-const syncTarget = ref(null)
 const syncHostId = ref('')
 const syncLoading = ref(false)

@@ -265,6 +265,17 @@ const reloadTarget = ref(null)
 const reloadHostId = ref('')
 const reloadLoading = ref(false)

+const hostOptionsLoading = ref(false)
+const isEmbeddedHost = computed(() => !!(embedded && injectedHostId?.value))
+const currentHostLabel = computed(() => {
+  const hid = injectedHostId?.value
+  if (!hid) return '-'
+  const hd = injectedHostDetail?.value
+  if (hd) 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 formData = reactive({
  image_id: undefined, name: '', path: '', os_type: 'linux', type: 'system',
  description: '', status: '', size: 0, image_name: ''
@@ -310,7 +321,7 @@ const getHostName = (hid) => {
 // 加载宿主机列表
 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
@@ -320,17 +331,16 @@ const loadHostOptions = async () => {
  } catch (e) { /* ignore */ }
 }

-const resolveHostId = async () => {
+const resolveHostId = () => {
  if (injectedHostId?.value) return injectedHostId.value
-  if (!hostOptions.value.length) await loadHostOptions()
-  return hostOptions.value.length ? hostOptions.value[0].id : null
+  return null
 }

 const loadList = async () => {
  if (!serviceId.value) return
  loading.value = true
  try {
-    const hostId = await resolveHostId()
+    const hostId = resolveHostId()
    let res
    if (hostId) {
      res = await getImageCompareHost({ service_id: serviceId.value, host_id: hostId })
@@ -477,11 +487,23 @@ const handleViewDetail = async (row) => {
 }

 // 同步镜像到宿主机
-const handleSyncToHost = async (row) => {
-  syncTarget.value = row
-  syncHostId.value = ''
-  if (!hostOptions.value.length) await loadHostOptions()
+const handleSyncToHost = () => {
+  if (embedded && injectedHostId?.value) {
+    syncHostId.value = injectedHostId.value
+  } else {
+    syncHostId.value = ''
+  }
  syncDialogVisible.value = true
+  if (!embedded || !injectedHostId?.value) {
+    if (!hostOptions.value.length) {
+      hostOptionsLoading.value = true
+      loadHostOptions().finally(() => { hostOptionsLoading.value = false })
+    }
+  }
+}
+
+const handleSyncToHostBatch = () => {
+  handleSyncToHost()
 }

 const submitSyncToHost = async () => {
@@ -490,7 +512,6 @@ const submitSyncToHost = async () => {
  try {
    const formPayload = new FormData()
    formPayload.append('service_id', serviceId.value)
-    formPayload.append('image_id', syncTarget.value.id)
    formPayload.append('host_id', syncHostId.value)
    const res = await syncImageToHost(formPayload)
    if (res?.data?.code === 200) {
@@ -501,7 +522,7 @@ const submitSyncToHost = async () => {
      ElMessage.error(extractApiError(res?.data, '同步失败'))
    }
  } catch (e) {
-    ElMessage.error('同步失败: ' + (e?.response?.data?.message || e.message))
+    ElMessage.error(extractApiError(e?.response?.data, '同步失败'))
  } finally {
    syncLoading.value = false
  }
@@ -522,11 +543,20 @@ const handleReloadMaster = (row) => {
  }).catch(() => {})
 }

-const handleReloadOnHost = async (row) => {
+const handleReloadOnHost = (row) => {
  reloadTarget.value = row
-  reloadHostId.value = ''
-  if (!hostOptions.value.length) await loadHostOptions()
+  if (embedded && injectedHostId?.value) {
+    reloadHostId.value = injectedHostId.value
+  } else {
+    reloadHostId.value = ''
+  }
  reloadDialogVisible.value = true
+  if (!embedded || !injectedHostId?.value) {
+    if (!hostOptions.value.length) {
+      hostOptionsLoading.value = true
+      loadHostOptions().finally(() => { hostOptionsLoading.value = false })
+    }
+  }
 }

 const submitReloadOnHost = async () => {
@@ -575,6 +605,8 @@ onMounted(() => {
    loadList()
  }
 })
+
+defineExpose({ loadList })
 </script>

 <style scoped>