293 lines
10 KiB
Vue
293 lines
10 KiB
Vue
<template>
|
||
<Dialog :options="{ title: '修改DNS服务器', size: 'lg' }" v-model="show">
|
||
<template #body-content>
|
||
<div class="p-4 sm:p-6">
|
||
<div class="mb-6">
|
||
<p class="mt-1 text-sm text-gray-600">
|
||
域名： <span class="font-medium">{{ domainDoc?.domain }}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<!-- DNS1 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
主DNS服务器 <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
v-model="dnsServers.dns1"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="例如：ns1.example.com"
|
||
:class="{ 'border-red-300': errors.dns1 }"
|
||
/>
|
||
<p v-if="errors.dns1" class="mt-1 text-sm text-red-600">{{ errors.dns1 }}</p>
|
||
</div>
|
||
|
||
<!-- DNS2 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
辅DNS服务器 <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
v-model="dnsServers.dns2"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="例如：ns2.example.com"
|
||
:class="{ 'border-red-300': errors.dns2 }"
|
||
/>
|
||
<p v-if="errors.dns2" class="mt-1 text-sm text-red-600">{{ errors.dns2 }}</p>
|
||
</div>
|
||
|
||
<!-- DNS3 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
第三个DNS服务器
|
||
</label>
|
||
<input
|
||
v-model="dnsServers.dns3"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="例如：ns3.example.com（可选）"
|
||
/>
|
||
</div>
|
||
|
||
<!-- DNS4 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
第四个DNS服务器
|
||
</label>
|
||
<input
|
||
v-model="dnsServers.dns4"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="例如：ns4.example.com（可选）"
|
||
/>
|
||
</div>
|
||
|
||
<!-- DNS5 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
第五个DNS服务器
|
||
</label>
|
||
<input
|
||
v-model="dnsServers.dns5"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="例如：ns5.example.com（可选）"
|
||
/>
|
||
</div>
|
||
|
||
<!-- DNS6 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
第六个DNS服务器
|
||
</label>
|
||
<input
|
||
v-model="dnsServers.dns6"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="例如：ns6.example.com（可选）"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 当前DNS服务器信息 -->
|
||
<div class="mt-6 p-4 bg-gray-50 rounded-md">
|
||
<h4 class="text-sm font-medium text-gray-700 mb-3">当前DNS服务器</h4>
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">主DNS:</span>
|
||
<span class="font-mono text-gray-900">{{ domainDoc?.dns_host1 || '未设置' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">辅DNS:</span>
|
||
<span class="font-mono text-gray-900">{{ domainDoc?.dns_host2 || '未设置' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">DNS3:</span>
|
||
<span class="font-mono text-gray-900">{{ domainDoc?.dns_host3 || '未设置' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">DNS4:</span>
|
||
<span class="font-mono text-gray-900">{{ domainDoc?.dns_host4 || '未设置' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">DNS5:</span>
|
||
<span class="font-mono text-gray-900">{{ domainDoc?.dns_host5 || '未设置' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">DNS6:</span>
|
||
<span class="font-mono text-gray-900">{{ domainDoc?.dns_host6 || '未设置' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
|
||
{{ error }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template #actions>
|
||
<div class="w-full flex justify-end space-x-3">
|
||
<button
|
||
type="button"
|
||
class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none"
|
||
@click="cancel"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700 focus:outline-none disabled:bg-gray-300 disabled:cursor-not-allowed"
|
||
@click="modifyDNSServer"
|
||
:disabled="isLoading || !isValid"
|
||
>
|
||
{{ isLoading ? '修改中...' : '确认修改' }}
|
||
</button>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { toast } from 'vue-sonner';
|
||
import { Dialog } from 'jingrow-ui';
|
||
import { DashboardError } from '../utils/error';
|
||
|
||
export default {
|
||
name: 'JsiteDomainModifyDNSServerDialog',
|
||
components: {
|
||
Dialog
|
||
},
|
||
props: {
|
||
domain: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
domainDoc: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
},
|
||
emits: ['success'],
|
||
data() {
|
||
return {
|
||
show: true,
|
||
dnsServers: {
|
||
dns1: '',
|
||
dns2: '',
|
||
dns3: '',
|
||
dns4: '',
|
||
dns5: '',
|
||
dns6: ''
|
||
},
|
||
errors: {},
|
||
error: null
|
||
};
|
||
},
|
||
computed: {
|
||
isLoading() {
|
||
return this.$resources.modifyDNSServer.loading;
|
||
},
|
||
isValid() {
|
||
return this.dnsServers.dns1 && this.dnsServers.dns2 && !this.hasErrors;
|
||
},
|
||
hasErrors() {
|
||
return Object.keys(this.errors).length > 0;
|
||
}
|
||
},
|
||
resources: {
|
||
modifyDNSServer() {
|
||
return {
|
||
url: 'jcloud.api.domain_west.west_domain_modify_dns_server',
|
||
validate() {
|
||
this.errors = {};
|
||
|
||
if (!this.dnsServers.dns1) {
|
||
this.errors.dns1 = '主DNS服务器不能为空';
|
||
} else if (!this.isValidDNSFormat(this.dnsServers.dns1)) {
|
||
this.errors.dns1 = '主DNS服务器格式不正确';
|
||
}
|
||
|
||
if (!this.dnsServers.dns2) {
|
||
this.errors.dns2 = '辅DNS服务器不能为空';
|
||
} else if (!this.isValidDNSFormat(this.dnsServers.dns2)) {
|
||
this.errors.dns2 = '辅DNS服务器格式不正确';
|
||
}
|
||
|
||
// 验证可选的DNS服务器格式
|
||
if (this.dnsServers.dns3 && !this.isValidDNSFormat(this.dnsServers.dns3)) {
|
||
this.errors.dns3 = '第三个DNS服务器格式不正确';
|
||
}
|
||
if (this.dnsServers.dns4 && !this.isValidDNSFormat(this.dnsServers.dns4)) {
|
||
this.errors.dns4 = '第四个DNS服务器格式不正确';
|
||
}
|
||
if (this.dnsServers.dns5 && !this.isValidDNSFormat(this.dnsServers.dns5)) {
|
||
this.errors.dns5 = '第五个DNS服务器格式不正确';
|
||
}
|
||
if (this.dnsServers.dns6 && !this.isValidDNSFormat(this.dnsServers.dns6)) {
|
||
this.errors.dns6 = '第六个DNS服务器格式不正确';
|
||
}
|
||
|
||
if (Object.keys(this.errors).length > 0) {
|
||
throw new DashboardError('请检查DNS服务器格式');
|
||
}
|
||
},
|
||
onSuccess(data) {
|
||
if (data.status === 'success') {
|
||
toast.success('DNS服务器修改成功！');
|
||
this.$emit('success', {
|
||
domain: this.domain,
|
||
dnsServers: this.dnsServers,
|
||
message: data.message
|
||
});
|
||
this.show = false;
|
||
} else {
|
||
this.error = data.message || '修改DNS服务器失败';
|
||
}
|
||
},
|
||
onError(error) {
|
||
this.error = error.message || '修改DNS服务器失败';
|
||
}
|
||
};
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化DNS服务器信息
|
||
if (this.domainDoc) {
|
||
this.dnsServers.dns1 = this.domainDoc.dns_host1 || '';
|
||
this.dnsServers.dns2 = this.domainDoc.dns_host2 || '';
|
||
this.dnsServers.dns3 = this.domainDoc.dns_host3 || '';
|
||
this.dnsServers.dns4 = this.domainDoc.dns_host4 || '';
|
||
this.dnsServers.dns5 = this.domainDoc.dns_host5 || '';
|
||
this.dnsServers.dns6 = this.domainDoc.dns_host6 || '';
|
||
}
|
||
},
|
||
methods: {
|
||
cancel() {
|
||
this.show = false;
|
||
},
|
||
modifyDNSServer() {
|
||
this.error = null;
|
||
this.$resources.modifyDNSServer.submit({
|
||
domain: this.domain,
|
||
dns1: this.dnsServers.dns1,
|
||
dns2: this.dnsServers.dns2,
|
||
dns3: this.dnsServers.dns3 || undefined,
|
||
dns4: this.dnsServers.dns4 || undefined,
|
||
dns5: this.dnsServers.dns5 || undefined,
|
||
dns6: this.dnsServers.dns6 || undefined
|
||
});
|
||
},
|
||
isValidDNSFormat(dns) {
|
||
if (!dns) return false;
|
||
|
||
// 简单的DNS格式验证
|
||
const dnsRegex = /^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/;
|
||
return dnsRegex.test(dns) && dns.length >= 3 && dns.length <= 253;
|
||
}
|
||
}
|
||
};
|
||
</script> |