236 lines
7.0 KiB
Vue
236 lines
7.0 KiB
Vue
<template>
|
||
<a-modal
|
||
:visible="visible"
|
||
:title="isEdit ? '编辑服务器/PC' : '新增服务器/PC'"
|
||
@ok="handleOk"
|
||
@cancel="handleCancel"
|
||
@update:visible="handleUpdateVisible"
|
||
:confirm-loading="confirmLoading"
|
||
width="800px"
|
||
>
|
||
<a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item field="unique_id" label="唯一标识">
|
||
<a-input
|
||
v-model="formData.unique_id"
|
||
placeholder="输入为空系统自动生成UUID"
|
||
:disabled="isEdit"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item field="name" label="服务器名称">
|
||
<a-input v-model="formData.name" placeholder="请输入服务器名称" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item field="server_type" label="服务器类型">
|
||
<a-select v-model="formData.server_type" placeholder="请选择服务器类型">
|
||
<a-option value="physical">物理服务器</a-option>
|
||
<a-option value="virtual">虚拟服务器</a-option>
|
||
<a-option value="cloud">云服务器</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item field="os" label="操作系统">
|
||
<a-select v-model="formData.os" placeholder="请选择操作系统">
|
||
<a-option value="windows">Windows</a-option>
|
||
<a-option value="linux">Linux</a-option>
|
||
<a-option value="other">其它</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item field="location" label="位置/机房信息">
|
||
<a-input-group>
|
||
<a-input
|
||
v-model="formData.location"
|
||
placeholder="请输入或选择位置信息"
|
||
/>
|
||
<a-select
|
||
v-model="selectedLocation"
|
||
placeholder="选择位置"
|
||
style="width: 200px"
|
||
@change="handleLocationSelect"
|
||
>
|
||
<a-option
|
||
v-for="location in locationOptions"
|
||
:key="location.value"
|
||
:value="location.value"
|
||
>
|
||
{{ location.label }}
|
||
</a-option>
|
||
</a-select>
|
||
</a-input-group>
|
||
</a-form-item>
|
||
|
||
<a-form-item field="tags" label="服务器标签">
|
||
<a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
|
||
</a-form-item>
|
||
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item field="ip" label="IP地址">
|
||
<a-input v-model="formData.ip" placeholder="可以输入多个IP，逗号做分隔" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item field="remote_port" label="远程访问端口">
|
||
<a-input v-model="formData.remote_port" placeholder="为空则不可远程访问" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item field="agent_url" label="Agent URL配置">
|
||
<a-input v-model="formData.agent_url" placeholder="请输入Agent URL配置" />
|
||
</a-form-item>
|
||
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item field="data_collection" label="数据采集">
|
||
<a-switch v-model="formData.data_collection" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间">
|
||
<a-select v-model="formData.collection_interval" placeholder="请选择采集时间">
|
||
<a-option :value="1">1分钟</a-option>
|
||
<a-option :value="5">5分钟</a-option>
|
||
<a-option :value="10">10分钟</a-option>
|
||
<a-option :value="30">30分钟</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item field="remark" label="备注信息">
|
||
<a-textarea
|
||
v-model="formData.remark"
|
||
placeholder="请输入备注信息"
|
||
:rows="4"
|
||
/>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, computed, watch } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import { v4 as uuidv4 } from 'uuid'
|
||
import type { FormInstance } from '@arco-design/web-vue'
|
||
|
||
interface Props {
|
||
visible: boolean
|
||
record?: any
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
record: () => ({}),
|
||
})
|
||
|
||
const emit = defineEmits(['update:visible', 'success'])
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const confirmLoading = ref(false)
|
||
const selectedLocation = ref('')
|
||
|
||
const isEdit = computed(() => !!props.record?.id)
|
||
|
||
const formData = reactive({
|
||
unique_id: '',
|
||
name: '',
|
||
server_type: '',
|
||
os: '',
|
||
location: '',
|
||
tags: '',
|
||
ip: '',
|
||
remote_port: '',
|
||
agent_url: '',
|
||
data_collection: false,
|
||
collection_interval: 5,
|
||
remark: '',
|
||
})
|
||
|
||
const rules = {
|
||
name: [{ required: true, message: '请输入服务器名称' }],
|
||
server_type: [{ required: true, message: '请选择服务器类型' }],
|
||
os: [{ required: true, message: '请选择操作系统' }],
|
||
}
|
||
|
||
const locationOptions = ref([
|
||
{ label: 'A数据中心-3层-24机柜-5U位', value: 'A数据中心-3层-24机柜-5U位' },
|
||
{ label: 'A数据中心-3层-24机柜-6U位', value: 'A数据中心-3层-24机柜-6U位' },
|
||
{ label: 'B数据中心-1层-12机柜-1U位', value: 'B数据中心-1层-12机柜-1U位' },
|
||
{ label: 'B数据中心-1层-12机柜-2U位', value: 'B数据中心-1层-12机柜-2U位' },
|
||
{ label: 'C数据中心-2层-8机柜-3U位', value: 'C数据中心-2层-8机柜-3U位' },
|
||
])
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(val) => {
|
||
if (val) {
|
||
if (isEdit.value && props.record) {
|
||
Object.assign(formData, props.record)
|
||
} else {
|
||
Object.assign(formData, {
|
||
unique_id: '',
|
||
name: '',
|
||
server_type: '',
|
||
os: '',
|
||
location: '',
|
||
tags: '',
|
||
ip: '',
|
||
remote_port: '',
|
||
agent_url: '',
|
||
data_collection: false,
|
||
collection_interval: 5,
|
||
remark: '',
|
||
})
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
const handleLocationSelect = (value: string) => {
|
||
formData.location = value
|
||
}
|
||
|
||
const handleOk = async () => {
|
||
try {
|
||
await formRef.value?.validate()
|
||
|
||
if (!formData.unique_id) {
|
||
formData.unique_id = uuidv4()
|
||
}
|
||
|
||
confirmLoading.value = true
|
||
|
||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
||
Message.success(isEdit.value ? '更新成功' : '创建成功')
|
||
emit('success')
|
||
handleCancel()
|
||
} catch (error) {
|
||
console.error('验证失败:', error)
|
||
} finally {
|
||
confirmLoading.value = false
|
||
}
|
||
}
|
||
|
||
const handleUpdateVisible = (value: boolean) => {
|
||
emit('update:visible', value)
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
emit('update:visible', false)
|
||
formRef.value?.resetFields()
|
||
}
|
||
</script>
|