src/views/acs/nodes/Nodes.vue

@@ -203,8 +203,28 @@
         <el-form-item v-if="serverForm.server_type === 'dockerContainer'" label="Auth-ID">
           <el-input v-model="serverForm.auth_id" placeholder="服务器管理id" />
         </el-form-item>
-        <el-form-item v-if="serverForm.server_type === 'hyperV'" label="Guacamole-ID">
-          <el-input v-model="serverForm.guacamole_id" placeholder="guacamole服务id" />
+        <el-form-item v-if="serverForm.server_type === 'hyperV'" label="Guacamole配置">
+          <el-select
+            v-model="serverForm.guacamole_id"
+            placeholder="请选择Guacamole配置"
+            filterable
+            clearable
+            :loading="guacamoleLoading"
+            @change="handleGuacamoleChange"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in guacamoleList"
+              :key="item.id"
+              :label="`${item.url} (${item.username})`"
+              :value="item.id"
+            >
+              <div class="guacamole-option">
+                <div class="option-main">{{ item.url }}</div>
+                <div class="option-sub">用户: {{ item.username }} | 创建时间: {{ item.created_at }}</div>
+              </div>
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item v-if="serverForm.server_type === 'hyperV'" label="登录用户名">
           <el-input v-model="serverForm.username" placeholder="服务器登录用户名" />
@@ -283,6 +303,7 @@ import {
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
 import { getServer, addServer, editServer, deleteServer, getServerStatus } from '@/utils/acs/server'
 import { copyDomText } from "@/utils/hide"
+import {getGuacamoleList} from '@/utils/acs/guacamole'
 
 const router = useRouter()
 
@@ -334,6 +355,10 @@ const handleSizeChange = (val) => {
 const dialogVisible = ref(false)
 const dialogType = ref('add') // 'add', 'edit'
 
+// Guacamole 相关数据
+const guacamoleList = ref([])
+const guacamoleLoading = ref(false)
+
 // 表单对象和规则
 const serverFormRef = ref(null)
 const serverForm = reactive({
@@ -442,6 +467,49 @@ const updateStats = () => {
   serverStats.offline = serverData.value.length - serverStats.online
 }
 
+// 获取 Guacamole 列表
+const fetchGuacamoleList = async () => {
+  if (guacamoleLoading.value) return
+  
+  guacamoleLoading.value = true
+  try {
+    const res = await getGuacamoleList()
+    console.log("列表数据",res)
+    if (res && res.data && res.data.code === 200) {
+      guacamoleList.value = res.data.data || []
+    } else {
+      ElMessage.error('获取Guacamole配置列表失败')
+      guacamoleList.value = []
+    }
+  } catch (error) {
+    console.error('获取Guacamole列表失败:', error)
+    ElMessage.error('获取Guacamole配置列表失败')
+    guacamoleList.value = []
+  } finally {
+    guacamoleLoading.value = false
+  }
+}
+
+// 处理 Guacamole 选择变化
+const handleGuacamoleChange = (selectedId) => {
+  if (!selectedId) {
+    // 清空相关字段
+    serverForm.username = ''
+    serverForm.password = ''
+    return
+  }
+  
+  // 找到选中的 Guacamole 配置
+  const selectedGuacamole = guacamoleList.value.find(item => item.id === selectedId)
+  if (selectedGuacamole) {
+    // 自动填充相关字段
+    serverForm.username = selectedGuacamole.username
+    serverForm.password = selectedGuacamole.password
+    
+    ElMessage.success(`已自动填充 ${selectedGuacamole.url} 的配置信息`)
+  }
+}
+
 // 添加服务器
 const handleAdd = () => {
   dialogType.value = 'add'
@@ -460,6 +528,11 @@ const handleAdd = () => {
     }
   })
   
+  // 如果是虚拟机类型，获取 Guacamole 列表
+  if (serverType.value === 'hyperV') {
+    fetchGuacamoleList()
+  }
+  
   // 确保在下一个 tick 重置表单验证状态
   nextTick(() => {
     if (serverFormRef.value) {
@@ -480,6 +553,11 @@ const handleEdit = (row) => {
     }
   })
   
+  // 如果是虚拟机类型，获取 Guacamole 列表
+  if (row.server_type === 'hyperV') {
+    fetchGuacamoleList()
+  }
+  
   nextTick(() => {
     if (serverFormRef.value) {
       serverFormRef.value.clearValidate()
@@ -1027,6 +1105,24 @@ onMounted(async () => {
   line-height: 1.2;
 }
 
+/* Guacamole 选项样式 */
+.guacamole-option {
+  padding: 4px 0;
+}
+
+.guacamole-option .option-main {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 2px;
+}
+
+.guacamole-option .option-sub {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.2;
+}
+
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);