perf: 更改module-walk交互方式,已实现回显

This commit is contained in:
陈劲松
2020-04-02 20:23:52 +08:00
parent 0641fd164c
commit cf279dd11f
7 changed files with 242 additions and 35 deletions

View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box-840">
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
<div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type.toLowerCase() == 'snmp'}" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
</div>
@@ -74,22 +74,23 @@
<!--end--table-->
</div>
<!--右侧endpoint列表-->
<div class="right-child-box endpoints-box">
<div class="right-child-box endpoints-box" :class="{'endpoints-box-snmp': currentModuleCopy.type.toLowerCase() == 'snmp'}">
<!--module-->
<div class="endpoints-box-module-info">
<div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
<el-input class="module-info module-info-port input-x-mini-22" v-model="currentModuleCopy.port"></el-input>
<el-input class="module-info module-info-port input-x-mini-22" :class="{'module-info-port-snmp': currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port"></el-input>
<el-popover
placement="bottom"
width="200"
trigger="hover"
v-if="currentModuleCopy.type.toLowerCase() == 'http'"
>
<div class="endpoint-param-pop">
<div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
</div>
<el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini-22" v-model="currentModuleCopy.param"></el-input>
</el-popover>
<el-input class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path"></el-input>
<el-input v-if="currentModuleCopy.type.toLowerCase() == 'http'" class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path"></el-input>
<button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover"><i class="nz-icon nz-icon-override"></i></button>
</div>
<!--endpoints-->
@@ -264,17 +265,17 @@
{
label: this.$t("project.endpoint.asset"),
prop: 'asset',
width: 123,
width: 121,
show: true,
},{
label: this.$t("project.endpoint.host"),
prop: 'host',
width: 123,
width: 121,
show: true,
},{
label: this.$t("project.endpoint.port"),
prop: 'port',
width: 55,
width: 54,
show: true,
},{
label: this.$t("project.endpoint.param"),
@@ -634,6 +635,13 @@
if(n) {
this.endpointForm.moduleId = n.id;
this.currentModuleCopy = JSON.parse(JSON.stringify(n));
if (n.type && n.type.toLowerCase() == 'snmp') {
this.endpointTableTitle[3].show = false;
this.endpointTableTitle[4].show = false;
} else {
this.endpointTableTitle[3].show = true;
this.endpointTableTitle[4].show = true;
}
}
}
},
@@ -648,6 +656,9 @@
</script>
<style scoped>
.nz-icon.nz-icon-minus-square {
font-size: 14px;
}
/* start--param*/
.param-btn {
float: right;
@@ -724,6 +735,9 @@
margin: 0 0 0 280px;
width: 540px;
}
.endpoints-box.endpoints-box-snmp {
width: 380px;
}
.right-child-box .el-input-group {
width: 187px;
float: right;
@@ -760,6 +774,9 @@
width: 53px;
right: 209px;
}
.module-info-port-snmp {
right: 50px;
}
.module-info-param {
width: 89px;
right: 116px;