diff --git a/src/views/acs/nodes/Nodes.vue b/src/views/acs/nodes/Nodes.vue index 9e155a0..832f7ad 100644 --- a/src/views/acs/nodes/Nodes.vue +++ b/src/views/acs/nodes/Nodes.vue @@ -203,8 +203,28 @@ - - + + + +
+
{{ item.url }}
+
用户: {{ item.username }} | 创建时间: {{ item.created_at }}
+
+
+
@@ -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);