feat: module新增、修改增加snmp类型等
1.module新增、修改增加snmp类型等 2.取消滚动条拖动延迟
This commit is contained in:
陈劲松
@@ -1,26 +1,45 @@
|
||||
<template>
|
||||
<el-popover :placement="placement" width="367" ref="selectWalkPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
|
||||
<el-popover v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide">
|
||||
<div>
|
||||
<div class="pop-item-wider">
|
||||
<el-scrollbar class="select-area-tree">
|
||||
<el-scrollbar class="select-walk-tree" ref="scrollbar">
|
||||
<el-tree
|
||||
ref="walkTree"
|
||||
node-key="id"
|
||||
:props="{label: 'name', children: 'children'}"
|
||||
node-key="objectID"
|
||||
:props="{label: 'name', children: 'subTree', disabled: disabledNode}"
|
||||
:data="walkData"
|
||||
default-expand-all
|
||||
:default-expanded-keys="expandedWalk"
|
||||
:expand-on-click-node="false"
|
||||
check-on-click-node
|
||||
check-strictly
|
||||
highlight-current
|
||||
@node-click="selectWalk"
|
||||
@check-change="clearOthers">
|
||||
show-checkbox
|
||||
@check="change"
|
||||
:default-checked-keys="currentWalk"
|
||||
>
|
||||
<span slot-scope="{node, data}" :class="getClass(data.objectID)">
|
||||
<span v-if="!data.type"><i class="el-icon-reading"></i></span>
|
||||
<span v-else>
|
||||
<i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
|
||||
<i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
|
||||
<i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
|
||||
<i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
|
||||
<i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
|
||||
</span>
|
||||
<el-popover trigger="hover" placement="left" v-if="data.objectID" popper-class="walk-detail">
|
||||
<div>
|
||||
<ul>
|
||||
<li><span class="metirc-tip-list">Name : </span><span>{{data.name}}</span></li>
|
||||
<li><span class="metirc-tip-list">OID : </span><span>{{data.objectID}}</span></li>
|
||||
<li><span class="metirc-tip-list">MIB : </span><span>{{mibName(node)}}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
|
||||
</el-popover>
|
||||
{{data.name}}
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<!--<div class="">
|
||||
<button class="float-right nz-btn nz-btn-size-small nz-btn-style-normal nz-btn-min-width-60" type="button" @click="selectWalk">{{$t('overall.ok')}}</button>
|
||||
</div>-->
|
||||
</div>
|
||||
<div slot="reference">
|
||||
<slot name="trigger">
|
||||
@@ -34,68 +53,84 @@
|
||||
name: "selectWalk",
|
||||
props:{
|
||||
placement: {type: String},
|
||||
isEdit: {type: Boolean, default: true},
|
||||
walkData: {type: Array},
|
||||
currentWalk: {type: Array}
|
||||
currentWalk: {type: Array},
|
||||
expandedWalk: {type: Array}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
//this.$refs.walkTree.setCurrentKey(this.currentArea);
|
||||
});
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
popBox: {show: false},
|
||||
walk: ''
|
||||
popBox: {show: false}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getClass() {
|
||||
return (value) => {
|
||||
return this.currentWalk.indexOf(value) == -1 ? '' : 'walk-active';
|
||||
}
|
||||
},
|
||||
mibName() {
|
||||
return (value) => {
|
||||
return this.getMibName(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openBox(walk){
|
||||
if (walk) {
|
||||
this.walk = walk;
|
||||
//this.$refs.walkTree.setChecked(this.area.id, true, false);
|
||||
getMibName(node) {
|
||||
let mibName = getMibName(node);
|
||||
function getMibName(n) {
|
||||
if (n.parent && n.parent.parent) {
|
||||
return getMibName(n.parent);
|
||||
} else if (n.parent) {
|
||||
return n.data.name;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
esc(){
|
||||
this.popBox.show = false;
|
||||
},
|
||||
//确认选择某个节点，与父组件交互
|
||||
selectWalk(data, checked, child) {
|
||||
this.walk = data;
|
||||
this.$emit('selectWalk', this.walk);
|
||||
this.esc();
|
||||
},
|
||||
//tree设为单选
|
||||
clearOthers(data, checked, child) {
|
||||
if (checked) {
|
||||
this.walk = data;
|
||||
//this.$refs.walkTree.setCheckedKeys();
|
||||
if (mibName) {
|
||||
return mibName;
|
||||
} else {
|
||||
this.walk = "";
|
||||
return "";
|
||||
}
|
||||
},
|
||||
change(data, tree) {
|
||||
this.$emit("selectWalk", data.objectID);
|
||||
},
|
||||
show() {
|
||||
this.popBox.show = true;
|
||||
},
|
||||
disabledNode(data) {
|
||||
if (data.objectID) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.select-area-tree {
|
||||
.select-walk-tree {
|
||||
height: 350px;
|
||||
}
|
||||
.select-area-tree .el-tree-node__content {
|
||||
.select-walk-tree .el-tree-node__content {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.select-area-tree .el-tree-node__content:hover {
|
||||
color: $global-text-color-active;
|
||||
}
|
||||
.select-area-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
.select-walk-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #F5F7FA;
|
||||
font-weight: bold;
|
||||
color: $global-text-color-active;
|
||||
}
|
||||
.select-walk-tree .el-tree .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.nz-pop-select-walk {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.walk-active {
|
||||
color: $global-text-color-active;
|
||||
}
|
||||
.walk-detail {
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user