feat:提交的正则校验 以及 修改时的回显问题

This commit is contained in:
zhangyu
2020-11-10 15:57:57 +08:00
parent 6e406374e8
commit b3b20f27c0
11 changed files with 67 additions and 24 deletions

View File

@@ -287,9 +287,11 @@
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
try {
let tempObj = JSON.parse(response.data.list[i].param);
let param=response.data.list[i].param|| '{}';
let tempObj = JSON.parse(param);
response.data.list[i].paramObj = [];
let tempObj1 = JSON.parse(response.data.list[i].labels);
let labels=response.data.list[i].labels|| '{}';
let tempObj1=JSON.parse(labels);
response.data.list[i].labelModule = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})

View File

@@ -92,7 +92,7 @@ export const asset = {
stateData: [
{value: 1, label: i18n.t('asset.inStock')},
{value: 2, label: i18n.t('asset.notInStock')},
{value: 3, label: i18n.t('asset.Suspended')},
{value: 3, label: i18n.t('asset.suspended')},
],
};
@@ -137,3 +137,9 @@ export const intervalList = [
{value: 900, label: '15m'},
{value: 1800, label: '30m'}
];
export const setting = {
DcState:[
{value:1,label: i18n.t('setting.usable')}
]
};

View File

@@ -535,7 +535,7 @@ const cn = {
uSize: "U位",
inStock: "在库",
notInStock: "出库",
Suspended:'停用',
suspended:'停用',
principal: "负责人",
tel: "电话",
featureTitle: "属性",
@@ -623,7 +623,9 @@ const cn = {
},
createDc: "新建数据中心",
editDc: "编辑数据中心",
editCabinet: "编辑机柜"
editCabinet: "编辑机柜",
usable:'可用',
suspended:'停用',
},
model: {
model: "资产型号",

View File

@@ -441,7 +441,7 @@ const en = {
uSize: 'U size',
inStock: 'In stock',//'在库'
notInStock: 'Not in stock',//'出库'
Suspended:'Suspended',
suspended:'Suspended',
assetType:'Asset type',//'资产类型'
principal:'Administrator',//'负责人'
tel:'Telephone', //'电话'
@@ -599,7 +599,9 @@ const en = {
direction:'Direction',
tags:'Tags',
snmpSetting:'SNMP setting',
}
},
usable:'Usable',
suspended:'Suspended',
},
model: {
model: 'Asset model',

View File

@@ -303,8 +303,10 @@
this.moduleList = response.data.list;
for (let i = 0; i < this.moduleList.length; i++) {
try {
let tempObj = JSON.parse(this.moduleList[i].param);
let tempObj1 = JSON.parse(this.moduleList[i].labels);
let param=this.moduleList[i].param|| '{}';
let tempObj = JSON.parse(param);
let labels=this.moduleList[i].labels|| '{}';
let tempObj1=JSON.parse(labels);
this.$set(this.moduleList[i], 'paramObj', []);
this.$set(this.moduleList[i], 'labelModule', []);
for (let k in tempObj) {

View File

@@ -272,8 +272,9 @@
<transition name="right-sub-box">
<div @mousedown.stop class="right-sub-box" v-if="editLabelsBox.show" :style="'top: ' + editLabelsBox.top + 'px; left: ' + editLabelsBox.left + 'px;'">
<div class="param-box">
<div class="param-box-row" v-for="(item, index) in tempLabelModule">
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
<div class="param-box-row" v-for="(item, index) in tempLabelModule" style="position: relative">
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" :class="{'input-error':inputKeyErr[index]}" v-model="item.key" @input="validateInput(item.key,index)"></el-input>
<span style="color: #F56C6C;font-size: 12px;position: absolute;top:25px;left: 10px" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
<span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeLabels(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
@@ -312,6 +313,7 @@
currentProjectCopy: {id: ''},
tempParamObj: [],
tempLabelModule: [],
inputKeyErr:[],
tempEndpoint: {},
tempEndpoint2: {},
rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
@@ -409,8 +411,8 @@
//子弹框控制 obj: module或endpoint对象 type:1module2endpoint
showEditLabelsBox(show, obj, type, e) {
//editLabelsBox tempLabelModule labelModule
console.log(123123123123,show, obj, type, e,this.tempLabelModule);
if (show) {
this.inputKeyErr=[];
let position = e.target.getBoundingClientRect();
this.editLabelsBox.type = type;
if (this.editLabelsBox.type == 2) {
@@ -424,12 +426,15 @@
} else {
this.tempLabelModule = JSON.parse(JSON.stringify(obj.labelModule));
}
this.tempLabelModule.forEach((item,index)=>{
this.inputKeyErr.push(false);
})
} else {
if (!this.editLabelsBox.show) {
return;
}
for (let i = 0; i < this.tempLabelModule.length; i++) {
if (!this.tempLabelModule[i].key || !this.tempLabelModule[i].value) {
if (!this.tempLabelModule[i].key || !this.tempLabelModule[i].value || this.inputKeyErr[i]) {
this.tempLabelModule.splice(i, 1);
i--;
}
@@ -471,11 +476,20 @@
// 新增labels
addLabels() {
this.tempLabelModule.push({key: '', value: ''});
this.inputKeyErr.push(false);
},
// 移除单个param
removeLabels(index) {
this.tempLabelModule.splice(index, 1);
this.inputKeyErr.splice(index, 1);
},
validateInput:function(value,index){
if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)){
this.inputKeyErr.splice(index,1,true)
}else{
this.inputKeyErr.splice(index,1,false)
}
},
//编辑endpoint
toEditEndpoint(endpoint) {
@@ -687,8 +701,10 @@
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
try {
let tempObj = JSON.parse(response.data.list[i].param);
let tempObj1 = JSON.parse(response.data.list[i].labels);
let param=response.data.list[i].param|| '{}';
let tempObj = JSON.parse(param);
let labels=response.data.list[i].labels|| '{}';
let tempObj1=JSON.parse(labels);
response.data.list[i].paramObj = [];
response.data.list[i].labelsModule = [];
for (let k in tempObj) {
@@ -1150,4 +1166,8 @@
.endpoints-box-endpoints .el-form-item.is-error {
margin-bottom: 22px;
}
.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
border-color: #F56C6C !important;
}
</style>

View File

@@ -100,7 +100,7 @@
<div class="param-box param-box-module">
<el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in endpoint.labelModule">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.key'">
<el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
</el-form-item>
<span class="param-box-row-eq">=</span>

View File

@@ -283,7 +283,7 @@
<div class="param-box param-box-module">
<el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in editModule.labelModule">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.key'">
<el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
</el-form-item>
<span class="param-box-row-eq">=</span>

View File

@@ -48,7 +48,7 @@
label: i18n.t('asset.notInStock')
}, {
value: 3,
label: i18n.t('asset.Suspended')
label: i18n.t('asset.suspended')
}
],
pingStatus:[

View File

@@ -87,7 +87,7 @@
<div v-if="item.prop=='state'">
<span v-if="scope.row.state==1">{{ $t('asset.inStock')}}</span>
<span v-if="scope.row.state==2">{{ $t('asset.notInStock')}}</span>
<span v-if="scope.row.state==3">{{ $t('asset.Suspended')}}</span>
<span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span>
</div>
<div v-if="item.prop == 'pingStatus'">
<el-popover

View File

@@ -400,8 +400,10 @@
if(response.code===200){
for(let i=0; i<response.data.list.length; i++){
try{
let tempObj=JSON.parse(response.data.list[i].param);
let tempObj1=JSON.parse(response.data.list[i].labels);
let param=response.data.list[i].param || '{}'
let tempObj=JSON.parse(param);
let labels=response.data.list[i].labels|| '{}';
let tempObj1=JSON.parse(labels);
response.data.list[i].paramObj=[];
response.data.list[i].labelModule=[];
for(let k in tempObj){
@@ -411,7 +413,7 @@
response.data.list[i].labelModule.push({key:k,value:tempObj1[k]})
}
}catch(err){
//console.error(response.data.list[i], err);
// console.error(response.data.list[i], err);
}
}
this.endpointTableData=response.data.list;
@@ -473,13 +475,20 @@
this.moduleList=response.data.list;
for(let i=0; i<this.moduleList.length; i++){
try{
let tempObj=JSON.parse(this.moduleList[i].param);
let param= this.moduleList[i].param || '{}';
let tempObj=JSON.parse(param);
this.$set(this.moduleList[i],'paramObj',[]);
for(let k in tempObj){
this.moduleList[i].paramObj.push({key:k,value:tempObj[k]});
}
let labels= this.moduleList[i].labels || '{}';
let tempObj1=JSON.parse(labels);
this.$set(this.moduleList[i],'labelModule',[]);
for(let k in tempObj1){
this.moduleList[i].labelModule.push({key:k,value:tempObj1[k]});
}
}catch(err){
//console.error(response.data.list[i], err);
console.error(response.data.list[i], err);
}
}
}