331 lines
10 KiB
Vue
331 lines
10 KiB
Vue
<!-- ip设置页面 -->
|
|
<template>
|
|
<div>
|
|
<el-button @click="dialogVisible = true">ip配置</el-button>
|
|
<el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%">
|
|
<div class="ip_setting">
|
|
<el-form
|
|
:model="ruleForm"
|
|
:rules="rules"
|
|
ref="ruleForm"
|
|
label-width="140px"
|
|
class="demo-ruleForm"
|
|
:label-position="labelPosition"
|
|
>
|
|
<el-form-item label="IP获取方式" prop="ipGetMethod">
|
|
<el-col :span="10">
|
|
<el-select v-model="ruleForm.ipGetMethod">
|
|
<el-option label="区域一" value="shanghai"></el-option>
|
|
<el-option label="区域二" value="beijing"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="DNS获取方式" prop="DnsGetMethod">
|
|
<el-col :span="10">
|
|
<el-select v-model="ruleForm.DnsGetMethod">
|
|
<el-option label="区域一" value="shanghai"></el-option>
|
|
<el-option label="区域二" value="beijing"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="本机IP" prop="ipAddress">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="子网掩码" prop="subnetMaskRules">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="网关地址" prop="gateway">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="主DNS服务器" prop="primaryDNS">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="备用DNS服务器" prop="bprimaryDNS">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input
|
|
v-model="input1"
|
|
style="width: 43px; height: 30px"
|
|
></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible = false"
|
|
>保存</el-button
|
|
>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { isValidPrimaryDNS } from "../validate";
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
labelPosition: "left",
|
|
ruleForm: {
|
|
ipGetMethod: "",
|
|
DnsGetMethod: "",
|
|
ipAddress: "",
|
|
subnetMaskRules: "",
|
|
gateway: "",
|
|
primaryDNS: "",
|
|
bprimaryDNS: "",
|
|
},
|
|
rules: {
|
|
ipGetMethod: [
|
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
|
],
|
|
DnsGetMethod: [
|
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
|
],
|
|
ipAddress: [
|
|
{
|
|
required: true,
|
|
validator: this.validateIpAddress,
|
|
trigger: "blur",
|
|
message: "请输入有效的IP地址",
|
|
},
|
|
],
|
|
subnetMaskRules: [
|
|
{
|
|
required: true,
|
|
validator: this.validateSubnetMask,
|
|
trigger: "blur",
|
|
message: "请输入有效的子网掩码",
|
|
},
|
|
],
|
|
gateway: [
|
|
{
|
|
required: true,
|
|
validator: this.validateGateway,
|
|
trigger: "blur",
|
|
message: "请输入有效的网关地址",
|
|
},
|
|
],
|
|
primaryDNS: [
|
|
{
|
|
required: true,
|
|
validator: this.validatePrimaryDNS,
|
|
trigger: "blur",
|
|
message: "请输入有效的主DNS服务器地址",
|
|
},
|
|
],
|
|
bprimaryDNS: [
|
|
{
|
|
required: true,
|
|
validator: this.validatePrimaryDNS,
|
|
trigger: "blur",
|
|
message: "请输入有效的备用DNS服务器地址",
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
alert("submit!");
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
},
|
|
//ip地址验证
|
|
validateIpAddress(rule, value, callback) {
|
|
if (value === "") {
|
|
callback(new Error("请输入IP地址"));
|
|
} else if (
|
|
!/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
|
|
value
|
|
)
|
|
) {
|
|
callback(new Error("请输入有效的IP地址"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
//子网掩码验证
|
|
validateSubnetMask(rule, value, callback) {
|
|
if (value === "") {
|
|
callback(new Error("请输入子网掩码"));
|
|
} else if (
|
|
!/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
|
|
value
|
|
)
|
|
) {
|
|
callback(new Error("请输入有效的子网掩码"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
//网关地址验证
|
|
validateGateway(rule, value, callback) {
|
|
if (value === "") {
|
|
callback(new Error("请输入网关地址"));
|
|
} else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
|
|
callback(new Error("请输入有效的网关地址"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
//dns服务验证
|
|
validatePrimaryDNS(rule, value, callback) {
|
|
if (value === "") {
|
|
callback(new Error("请输入主DNS服务器地址"));
|
|
} else if (!isValidPrimaryDNS(value)) {
|
|
callback(new Error("请输入有效的主DNS服务器地址"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped="less">
|
|
|
|
</style>
|