gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:traffic setting 页面调整

Browse Source
This commit is contained in:
wangwenrui
2020-05-06 19:17:49 +08:00
parent 2e2732599f
commit 3e58bd4a41
7 changed files with 163 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
View File

@@ -3,27 +3,17 @@
<div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
<div class="param-box" style="height: calc(100% - 25px)">
<el-scrollbar style="height: 100%">
<!--<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
<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 tempTagsObj" :key="index">
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key" @input="validateInput(item.key,index)" :class="{'input-error':inputKeyErr[index]}"></el-input>
<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="removeTags(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
</div>-->
<el-tag v-for="(item, index) in tempTagsObj" class="sub-box-tags" size="small" :closable="true" :key="index" @close='delTag(item,index)' @click="editTag(item,index)">
<div >{{item.key}}：{{item.value}}</div>
</el-tag>
<div class="param-box-row" v-show="showNewTagInput">
<el-input placeholder="key" style="width: 63px" ref="tagKeyInput" class="param-box-row-key input-x-mini-22" :class="{'input-error':newTagInputError}" v-model="newTag.key" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" style="width: 63px" class="param-box-row-value input-x-mini-22" v-model="newTag.value" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
</div>
<div v-if="showNewTagInput&&newTagInputError" style="text-align: left;padding-left: 10px">
<span style="color: #F56C6C;font-size: 12px;">{{$t('validate.key')}}</span>
<span style="color: #F56C6C;font-size: 12px;" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
</div>
</el-scrollbar>
</div>
<div class="add-btn">
<!-- <el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>-->
<el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
<el-button @click="showEditTagsBox(false)" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-check"></i></el-button>
</div>
</div>
@@ -39,9 +29,7 @@
tempTagsObj:[],
rowIndex:0,
curConfigs:null,
newTag:{key:'',value:''},
showNewTagInput:true,
newTagInputError:false,
inputKeyErr:[],
}
},
methods:{
@@ -53,6 +41,7 @@
this.editTagsBox.top = position.top + 25;
this.editTagsBox.left = position.left - 48;
this.tempTagsObj=[];
this.inputKeyErr=[];
let obj=null;
try{
obj=configs[index]['tags']
@@ -62,14 +51,19 @@
if(obj){
for(let key in obj){
this.tempTagsObj.push({key:key,value:obj[key]})
this.inputKeyErr.push(false);
}
}
} else {
if (!this.editTagsBox.show) {
return;
}
this.confirmInput();
this.showNewTagInput=true;
let temp=this.inputKeyErr.find(item=>{
return item == true;
})
if(typeof temp != "undefined"){
return ;
}
let tempObj={};
for(let i=0;i<this.tempTagsObj.length;i++){
let obj=this.tempTagsObj[i];
@@ -79,79 +73,27 @@
}
this.curConfigs[this.rowIndex]['tags']=Object.assign({},tempObj)
}
this.$emit('after')
this.editTagsBox.show = show;
},
validateInput:function(){
if(this.newTag.key == ''){
return false;
}
if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(this.newTag.key)){
this.newTagInputError=true;
return false;
}
if(this.newTag.value == ''){
return false;
}
this.newTagInputError=false;
return true;
},
confirmInput:function(){
if(this.validateInput()){
this.tempTagsObj.push(Object.assign({},this.newTag));
this.showNewTagInput=true;
this.newTag={key:'',value:''};
this.$nextTick(()=>{
this.$refs.tagKeyInput.focus();
})
}
},
editTag:function(tag,index){
console.log(222)
if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
this.confirmInput();
}
this.tempTagsObj.splice(index,1);
this.newTag=Object.assign({},tag)
this.showNewTagInput=true;
this.$nextTick(()=>{
this.$refs.tagKeyInput.focus();
})
},
addTags:function(){
if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
this.confirmInput();
this.tempTagsObj.push({key:'',value:''})
this.inputKeyErr.push(false);
},
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)
}
this.newTag={key:'',value:''}
this.showNewTagInput=true;
this.$nextTick(()=>{
this.$refs.tagKeyInput.focus();
})
},
delTag:function(tag,index){
removeTags:function(index){
this.tempTagsObj.splice(index,1)
},
clearNewTag:function(){
this.newTag={key:'',value:''}
this.showNewTagInput=true;
}
},
}
</script>
<style>
.sub-box-tags{
position: relative;
margin-bottom: 5px;
display: block;
width: 150px;
margin-left: 10px;
text-align: left;
}
.sub-box-tags .el-tag__close{
position: absolute;
top: 5px;
right: 2px;
}
</style>
<style scoped>
.right-sub-box {
width: 170px;
@@ -160,13 +102,6 @@
z-index: 2;
padding: 0;
}
.sub-box{
padding:5px;
text-align: center;
}
.sub-box .param-box-row{
padding:0 10px 0 10px !important;
}
.sub-box .add-btn{
width: 100%;
text-align: center;