refactor(环境管理): 域名长度限制调整到 253
Signed-off-by: fit2-zhao <yong.zhao@fit2cloud.com>
This commit is contained in:
fit2-zhao
Craftsman
parent
576aba0a06
commit
475498e636
|
|
@ -4,167 +4,181 @@
|
||||||
<el-table-column prop="ip" label="IP">
|
<el-table-column prop="ip" label="IP">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-input size="small" v-if="scope.row.status" v-model="scope.row.ip"></el-input>
|
<el-input size="small" v-if="scope.row.status" v-model="scope.row.ip"></el-input>
|
||||||
<span v-else>{{scope.row.ip}}</span>
|
<span v-else>{{ scope.row.ip }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column prop="domain" :label="$t('load_test.domain')">
|
<el-table-column prop="domain" :label="$t('load_test.domain')">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-input size="small" v-if="scope.row.status" v-model="scope.row.domain"></el-input>
|
<el-input size="small" v-if="scope.row.status" v-model="scope.row.domain"></el-input>
|
||||||
<span v-else>{{scope.row.domain}}</span>
|
<span v-else>{{ scope.row.domain }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column prop="annotation" :label="$t('commons.annotation')">
|
<el-table-column prop="annotation" :label="$t('commons.annotation')">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-input size="small" v-if="scope.row.status" v-model="scope.row.annotation"></el-input>
|
<el-input size="small" v-if="scope.row.status" v-model="scope.row.annotation"></el-input>
|
||||||
<span v-else>{{scope.row.annotation}}</span>
|
<span v-else>{{ scope.row.annotation }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column :label="$t('commons.operating')" width="100">
|
<el-table-column :label="$t('commons.operating')" width="100">
|
||||||
<template v-slot:default="scope">
|
<template v-slot:default="scope">
|
||||||
<span>
|
<span>
|
||||||
<el-button size="mini" p="$t('commons.remove')" icon="el-icon-close" circle @click="remove(scope.row)"
|
<el-button
|
||||||
class="ht-btn-remove"/>
|
size="mini"
|
||||||
<el-button size="mini" p="$t('commons.save')" icon="el-icon-check" type="primary" circle @click="confirm(scope.row)"
|
p="$t('commons.remove')"
|
||||||
class="ht-btn-confirm"/>
|
icon="el-icon-close"
|
||||||
|
circle
|
||||||
|
@click="remove(scope.row)"
|
||||||
|
class="ht-btn-remove" />
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
p="$t('commons.save')"
|
||||||
|
icon="el-icon-check"
|
||||||
|
type="primary"
|
||||||
|
circle
|
||||||
|
@click="confirm(scope.row)"
|
||||||
|
class="ht-btn-confirm" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<el-button class="ht-btn-add" size="mini" p="$t('commons.add')" icon="el-icon-circle-plus-outline" @click="add">{{$t("commons.add")}}</el-button>
|
<el-button class="ht-btn-add" size="mini" p="$t('commons.add')" icon="el-icon-circle-plus-outline" @click="add">{{
|
||||||
<el-button class="ht-btn-add" size="mini" p="$t('commons.add')" icon="el-icon-files" @click="copy">{{$t("commons.copy")}}</el-button>
|
$t('commons.add')
|
||||||
|
}}</el-button>
|
||||||
|
<el-button class="ht-btn-add" size="mini" p="$t('commons.add')" icon="el-icon-files" @click="copy">{{
|
||||||
|
$t('commons.copy')
|
||||||
|
}}</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MsApiVariableInput from "./ApiVariableInput";
|
import MsApiVariableInput from './ApiVariableInput';
|
||||||
import MsTableOperatorButton from "../../MsTableOperatorButton";
|
import MsTableOperatorButton from '../../MsTableOperatorButton';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "MsApiHostTable",
|
name: 'MsApiHostTable',
|
||||||
components: {MsApiVariableInput, MsTableOperatorButton},
|
components: { MsApiVariableInput, MsTableOperatorButton },
|
||||||
props: {
|
props: {
|
||||||
hostTable: Array,
|
hostTable: Array,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
remove: function (row) {
|
||||||
|
this.hostTable.splice(this.hostTable.indexOf(row), 1);
|
||||||
},
|
},
|
||||||
data() {
|
change: function () {
|
||||||
return {
|
this.$emit('change', this.hostTable);
|
||||||
currentPage: 1,
|
},
|
||||||
pageSize: 5,
|
add: function (r) {
|
||||||
total: 0,
|
let row = {
|
||||||
|
ip: '',
|
||||||
|
domain: '',
|
||||||
|
status: 'edit',
|
||||||
|
annotation: '',
|
||||||
|
uuid: this.uuid(),
|
||||||
|
};
|
||||||
|
this.hostTable.push(row);
|
||||||
|
},
|
||||||
|
copy: function (r) {
|
||||||
|
let row = {
|
||||||
|
ip: '',
|
||||||
|
domain: '',
|
||||||
|
status: 'edit',
|
||||||
|
annotation: '',
|
||||||
|
uuid: this.uuid(),
|
||||||
|
};
|
||||||
|
// 获取上一行的数据
|
||||||
|
for (let i = this.hostTable.length - 1; i >= 0; i--) {
|
||||||
|
if (this.hostTable[i].status === '') {
|
||||||
|
row.ip = this.hostTable[i].ip;
|
||||||
|
row.domain = this.hostTable[i].domain;
|
||||||
|
row.annotation = this.hostTable[i].annotation;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.hostTable.push(row);
|
||||||
|
},
|
||||||
|
confirm: function (row) {
|
||||||
|
this.validateIp(row.ip) && this.validateDomain(row.domain) ? (row.status = '') : row.status;
|
||||||
|
this.$emit('change', this.hostTable);
|
||||||
|
if (row.status === '') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
init: function () {
|
||||||
|
if (this.hostTable === undefined || this.hostTable.length === 0) {
|
||||||
|
let row = {
|
||||||
|
ip: '',
|
||||||
|
domain: '',
|
||||||
|
status: 'edit',
|
||||||
|
annotation: '',
|
||||||
|
uuid: this.uuid(),
|
||||||
|
};
|
||||||
|
this.hostTable.push(row);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
validateIp(ip) {
|
||||||
this.init();
|
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
|
||||||
|
if (regexp.test(ip) === false) {
|
||||||
|
this.$warning(this.$t('load_test.input_ip'));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
},
|
},
|
||||||
methods: {
|
validateDomain(domain) {
|
||||||
remove: function (row) {
|
let strRegex =
|
||||||
this.hostTable.splice(this.hostTable.indexOf(row), 1);
|
'^(?=^.{3,255}$)(http(s)?:\\/\\/)?(www\\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\\d+)*(\\/\\w+\\.\\w+)*$';
|
||||||
},
|
const re = new RegExp(strRegex);
|
||||||
change: function () {
|
if (re.test(domain) && domain.length < 253) {
|
||||||
this.$emit('change', this.hostTable);
|
|
||||||
},
|
|
||||||
add: function (r) {
|
|
||||||
let row = {
|
|
||||||
ip: '',
|
|
||||||
domain: '',
|
|
||||||
status: 'edit',
|
|
||||||
annotation: '',
|
|
||||||
uuid: this.uuid(),
|
|
||||||
}
|
|
||||||
this.hostTable.push(row);
|
|
||||||
},
|
|
||||||
copy: function (r) {
|
|
||||||
let row = {
|
|
||||||
ip: '',
|
|
||||||
domain: '',
|
|
||||||
status: 'edit',
|
|
||||||
annotation: '',
|
|
||||||
uuid: this.uuid(),
|
|
||||||
}
|
|
||||||
// 获取上一行的数据
|
|
||||||
for (let i = this.hostTable.length - 1; i >= 0; i--) {
|
|
||||||
if (this.hostTable[i].status === '') {
|
|
||||||
row.ip = this.hostTable[i].ip;
|
|
||||||
row.domain = this.hostTable[i].domain;
|
|
||||||
row.annotation = this.hostTable[i].annotation;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.hostTable.push(row);
|
|
||||||
},
|
|
||||||
confirm: function (row) {
|
|
||||||
this.validateIp(row.ip) && this.validateDomain(row.domain) ? row.status = '' : row.status;
|
|
||||||
this.$emit('change', this.hostTable);
|
|
||||||
if (row.status === "") {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
init: function () {
|
|
||||||
if (this.hostTable === undefined || this.hostTable.length === 0) {
|
|
||||||
let row = {
|
|
||||||
ip: '',
|
|
||||||
domain: '',
|
|
||||||
status: 'edit',
|
|
||||||
annotation: '',
|
|
||||||
uuid: this.uuid()
|
|
||||||
}
|
|
||||||
this.hostTable.push(row);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
validateIp(ip) {
|
|
||||||
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
|
|
||||||
if (regexp.test(ip) == false) {
|
|
||||||
this.$warning(this.$t('load_test.input_ip'));
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
return true;
|
||||||
},
|
}
|
||||||
validateDomain(domain) {
|
this.$warning(this.$t('load_test.input_domain'));
|
||||||
let strRegex = "^(?=^.{3,255}$)(http(s)?:\\/\\/)?(www\\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\\d+)*(\\/\\w+\\.\\w+)*$";
|
return false;
|
||||||
const re = new RegExp(strRegex);
|
},
|
||||||
if (re.test(domain) && domain.length < 67) {
|
dblHostTable: function (row) {
|
||||||
return true;
|
row.status = 'edit';
|
||||||
}
|
},
|
||||||
this.$warning(this.$t('load_test.input_domain'));
|
uuid: function () {
|
||||||
return false;
|
return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
|
||||||
},
|
},
|
||||||
dblHostTable: function (row) {
|
},
|
||||||
row.status = 'edit';
|
};
|
||||||
},
|
|
||||||
uuid: function () {
|
|
||||||
return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.ht-btn-remove {
|
||||||
|
color: white;
|
||||||
|
background-color: #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
.ht-btn-remove {
|
.ht-btn-confirm {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #DCDFE6;
|
/*background-color: #1483F6;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.ht-btn-confirm {
|
.ht-btn-add {
|
||||||
color: white;
|
border: 0px;
|
||||||
/*background-color: #1483F6;*/
|
margin-top: 10px;
|
||||||
}
|
color: #783887;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.ht-btn-add {
|
.ht-tb {
|
||||||
border: 0px;
|
background-color: white;
|
||||||
margin-top: 10px;
|
border: 0px;
|
||||||
color: #783887;
|
}
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ht-tb {
|
|
||||||
background-color: white;
|
|
||||||
border: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue