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

nezha-fronted/src/assets/stylus/main.scss

@@ -831,6 +831,9 @@ li{
 .right-box-add-endpoint {
   width: 850px;
 }
+.right-box-add-endpoint.right-box-add-endpoint-snmp {
+  width: 690px;
+}
 /* begin--右侧弹框--顶部按钮*/
 .right-box-top-btns {
   text-align: center;

nezha-fronted/src/components/common/header.vue

@@ -297,7 +297,6 @@
             snmpParam: '',
             //snmp setting 下划线命名是因为业务需求
             walk: [],
-            walkStr: '', //转为string的walk，用于回显
             version: 2, //2/3
             max_repetitions: 25,
             retries: 3,

nezha-fronted/src/components/common/popBox/selectWalk.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-popover :placement="placement" width="367" ref="selectWalkPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
+    <div>
+      <div class="pop-item-wider">
+        <el-scrollbar class="select-area-tree">
+          <el-tree
+            ref="walkTree"
+            node-key="id"
+            :props="{label: 'name', children: 'children'}"
+            :data="walkData"
+            default-expand-all
+            :expand-on-click-node="false"
+            check-on-click-node
+            check-strictly
+            highlight-current
+            @node-click="selectWalk"
+            @check-change="clearOthers">
+          </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">
+      </slot>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+    export default {
+      name: "selectWalk",
+      props:{
+        placement: {type: String},
+        isEdit: {type: Boolean, default: true},
+        walkData: {type: Array},
+        currentWalk: {type: Array}
+      },
+      created() {
+      },
+      mounted() {
+        this.$nextTick(() => {
+          //this.$refs.walkTree.setCurrentKey(this.currentArea);
+        });
+      },
+      data(){
+        return {
+          popBox: {show: false},
+          walk: ''
+        }
+      },
+      methods:{
+        openBox(walk){
+          if (walk) {
+            this.walk = walk;
+            //this.$refs.walkTree.setChecked(this.area.id, true, false);
+          }
+        },
+        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();
+          } else {
+            this.walk = "";
+          }
+        }
+      },
+      watch:{
+      }
+    }
+</script>
+
+<style lang="scss">
+.select-area-tree {
+  height: 350px;
+}
+.select-area-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 {
+  background-color: #F5F7FA;
+  font-weight: bold;
+  color: $global-text-color-active;
+}
+</style>

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -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;

nezha-fronted/src/components/common/rightBox/editEndpointBox.vue

@@ -119,12 +119,12 @@
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.port}}</div>
           </el-form-item>
           <!--path-->
-          <el-form-item :label="$t('project.endpoint.path')" prop="path">
+          <el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="currentModule.type.toLowerCase() == 'http'">
             <el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.path" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.path}}</div>
           </el-form-item>
           <!--param-->
-          <el-form-item class="right-box-form-param">
+          <el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
             <template slot="label">
               <span>{{$t('project.endpoint.param')}}</span>
               <div class="right-box-form-btns" v-if="rightBox.isEdit">

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -50,7 +50,7 @@
 
           <!-- snmp表单 -->
           <template v-if="currentModule.type && currentModule.type == 'snmp'">
-            <div class="right-box-sub-title">SNMP setting</div>
+            <div class="right-box-sub-title">SNMP settings</div>
             <div class="line-100 right-box-line"></div>
 
             <el-row>
@@ -58,9 +58,44 @@
                 <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="walkStr">
-                  <el-input class="snmp-walk" v-model="currentModule.walkStr" autosize type="textarea" :placeholder="$t('tip.pressEnterToAdd')"></el-input>
+                <el-form-item prop="walk">
+                  <select-walk ref="selectWalk" :walkData="walkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="currentModule.walk">
+                    <template v-slot:trigger>
+                      <div class="el-cascader" style="width:100%">
+                        <div class="el-input el-input--suffix">
+                          <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
+                          <span class="el-input__suffix">
+                            <span class="el-input__suffix-inner"><i class="el-input__icon el-icon-arrow-down"></i></span>
+                          </span>
+                        </div>
+                        <div class="el-cascader__tags">
+                          <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
+                            <span>{{item}}</span>
+                            <i class="el-tag__close el-icon-close"></i>
+                          </span>
+                        </div>
+                      </div>
+                    </template>
+                  </select-walk>
                 </el-form-item>
+                <!--<el-form-item prop="walkStr">
+                  <el-input class="snmp-walk" v-model="currentModule.walkStr" autosize type="textarea" :placeholder="$t('tip.pressEnterToAdd')"></el-input>
+                </el-form-item>-->
+                <!--<div class="module-walk">
+                  <div class="module-walk-box">
+                    <div class="walk-box-item" v-for="item in currentModule.walk">
+                      <div class="walk-box-item-txt">{{item}}</div>
+                      <div class="walk-box-item-op">
+                        <span><i class="nz-icon nz-icon-edit"></i></span>
+                        <span><i class="nz-icon nz-icon-minus-square"></i></span>
+                      </div>
+                    </div>
+                    <div class="walk-box-op">
+                      <span><i class="nz-icon-create-square nz-icon"></i></span>
+                    </div>
+                  </div>
+                </div>-->
+                <!--<span class="el-tag el-tag&#45;&#45;info el-tag&#45;&#45;small el-tag&#45;&#45;light"><span>东南 / 浙江 / 杭州</span><i class="el-tag__close el-icon-close"></i></span>-->
               </el-col>
             </el-row>
 
@@ -223,11 +258,6 @@
             </el-row>
           </template>
 
-          <el-form-item :label='$t("project.module.description")' prop="remark">
-            <el-input v-if="rightBox.isEdit" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="currentModule.remark" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.remark}}</div>
-          </el-form-item>
-
           <div class="right-box-form-tip" v-if="rightBox.isEdit">
             {{$t('project.module.tip.defaultEndpointSet')}}
             <div class="line-100"></div>
@@ -244,7 +274,7 @@
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.path}}</div>
           </el-form-item>
 
-          <el-form-item class="right-box-form-param">
+          <el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
             <template slot="label">
               <span>{{$t('project.endpoint.param')}}</span>
               <div class="right-box-form-btns" v-if="rightBox.isEdit">
@@ -276,6 +306,11 @@
 
           </el-form-item>
 
+          <el-form-item :label='$t("project.module.description")' prop="remark">
+            <el-input v-if="rightBox.isEdit" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="currentModule.remark" size="small"></el-input>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.remark}}</div>
+          </el-form-item>
+
         </el-form>
       </el-scrollbar>
 
@@ -294,6 +329,7 @@
 
 <script>
   import {noSpecialChar, port, nzNumber} from "../js/validate";
+  import selectWalk from "../popBox/selectWalk";
 
   export default {
     name: "moduleBox",
@@ -301,8 +337,12 @@
       module: Object,
       currentProject: Object
     },
+    components: {
+      'select-walk': selectWalk
+    },
     data() {
       return {
+        walkData: [],
         currentModule: {},
         rightBox: {
           show: false,
@@ -320,9 +360,9 @@
           port: [
             {validator:port, trigger: 'blur'},
           ],
-          walk: [
+          /*walk: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
+          ],*/
           username: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
@@ -346,6 +386,19 @@
       }
     },
     methods: {
+      selectWalk() {
+
+      },
+
+      getWalkData() {
+        /*this.$get('mib/tree', {pageSize: -1, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            this.walkData = response.data.list;
+            console.info(this.walkData);
+          }
+        });*/
+      },
+
       show(show, isEdit) {
         this.rightBox.show = show;
         this.rightBox.isEdit = isEdit;
@@ -369,7 +422,7 @@
       //转化snmpParam属性
       parseSnmpParam(module) {
         let snmpObj = { //下划线命名是因为业务需求
-          walk: module.walkStr.split(/\n/),
+          walk: module.walk,
           version: module.version, //2/3
           max_repetitions: module.max_repetitions ? module.max_repetitions : 25,
           retries: module.retries ? module.retries : 3,
@@ -396,7 +449,7 @@
       //回显时解析snmpParam
       reparseSnmpParam(module) {
         let snmpObj = JSON.parse(module.snmpParam);
-        module.walkStr = snmpObj.walk.join("\n");
+        module.walk = snmpObj.walk;
         module.version = snmpObj.version;
         module.max_repetitions = snmpObj.max_repetitions;
         module.retries = snmpObj.retries;
@@ -485,7 +538,7 @@
 
       /*获取project列表*/
       getProjectList: function() {
-        this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
+        this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.projectList = response.data.list;
             if (this.currentProject && this.currentProject.id) {
@@ -534,6 +587,9 @@
         this.$refs.scrollbar.update();
       }
     },
+    mounted() {
+      this.getWalkData();
+    },
     created() {
       this.getProjectList();
     },
@@ -547,22 +603,22 @@
         immediate: true,
         deep: true,
         handler(n, o) {
+          this.currentModule = JSON.parse(JSON.stringify(n));
           if (n && n.id) {
             this.rightBox.title =this.rightBox.isEdit? this.$t("project.module.editModule") + "  ID：" + n.id : this.$t("project.module.module") + "  ID：" + n.id ;
             if (n.snmpParam) {
-              this.reparseSnmpParam(n);
+              this.reparseSnmpParam(this.currentModule);
             }
-            this.currentModule = JSON.parse(JSON.stringify(n));
+
           } else if (n) {
+            this.rightBox.title = this.$t("project.module.createModule");
             if (!n.type) {
               n.type = 'http';
             } else if (n.type.toLowerCase() == 'snmp') {
               if (n.snmpParam) {
-                this.reparseSnmpParam(n);
+                this.reparseSnmpParam(this.currentModule);
               }
             }
-            this.rightBox.title = this.$t("project.module.createModule");
-            this.currentModule = JSON.parse(JSON.stringify(n));
           }
         }
       },
@@ -570,7 +626,7 @@
         immediate: true,
         deep: true,
         handler(n, o) {
-          if (n.type.toLowerCase() == 'snmp') {
+          if (n.type && n.type.toLowerCase() == 'snmp') {
             n.port = 161;
           }
         }
@@ -581,14 +637,46 @@
     }
   }
 </script>
-
+<style scoped>
+  .module-walk-box {
+    width: 100%;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    min-height: 32px;
+    margin-bottom: 22px;
+    padding: 3px 0;
+  }
+  .module-walk-box i {
+    color: #C0C4CC;
+  }
+  .walk-box-item {
+    padding: 5px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .walk-box-item-txt {
+    color: #606266;
+  }
+  .walk-box-item-op span:first-of-type {
+    margin-right: 4px;
+  }
+  .walk-box-item-op span {
+    cursor: pointer;
+  }
+  .walk-box-op {
+    width: 18px;
+    margin: 5px 0 5px 15px;
+    cursor: pointer;
+  }
+</style>
 <style>
   .sub-label {
     padding-right: 15px;
     font-size: 14px;
     color: #666;
     text-align: right;
-    line-height: 32px
+    line-height: 30px
   }
   .sub-label-required::before {
     content: '*';

nezha-fronted/src/components/page/project/project.vue

@@ -230,8 +230,8 @@
         moduleList: [],
         projectList: [],
         currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
-        editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //编辑的module
-        currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //endpoint弹框用来回显module
+        editModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //编辑的module
+        currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //endpoint弹框用来回显module
         endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
         endpointSearchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -674,7 +674,6 @@
       },
       initSnmpParam(module) {
         this.$set(module, 'walk', []);
-        this.$set(module, 'walkStr', '');
         this.$set(module, 'version', '');
         this.$set(module, 'max_repetitions', '');
         this.$set(module, 'retries', '');