feat: Endpoint新增弹框（未完成版）

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-add-endpoint" v-if="rightBox.show">
+    <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @click="showEditParamBox(false)">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
@@ -37,7 +37,7 @@
         <div class="right-box-form-row">
           <div class="right-box-form-label">{{$t("project.module.module")}}</div>
           <div class="right-box-form-content">
-            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" size="small">
+            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
               <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
           </div>
@@ -84,23 +84,26 @@
             </div>
             <!-- end--table-->
           </div>
+          <!--右侧endpoint列表-->
           <div class="right-child-box endpoints-box">
+            <!--module-->
             <div class="endpoints-box-module-info">
               <div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
-              <el-input class="module-info module-info-port" size="mini" v-model="currentModule.port"></el-input>
+              <el-input class="module-info module-info-port" size="mini" v-model="currentModuleCopy.port"></el-input>
               <el-popover
-                placement="top"
+                placement="bottom"
                 width="200"
                 trigger="hover"
               >
                 <div class="endpoint-param-pop">
-                  <div v-for="item,index in currentModule.paramObj">{{item.key}}={{item.value}}</div>
+                  <div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
                 </div>
-                <el-input slot="reference" disabled class="module-info module-info-param" size="mini" v-model="currentModule.param"></el-input>
+                <el-input @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param" size="mini" v-model="currentModuleCopy.param"></el-input>
               </el-popover>
-              <el-input class="module-info module-info-path" size="mini" v-model="currentModule.path"></el-input>
+              <el-input class="module-info module-info-path" size="mini" v-model="currentModuleCopy.path"></el-input>
               <el-button class="module-info module-info-cover" size="mini">{{$t('overall.cover')}}</el-button>
             </div>
+            <!--endpoints-->
             <div class="endpoints-box-endpoints">
               <el-table
                 :data="endpointList"
@@ -114,44 +117,58 @@
                 </el-table-column>
                 <el-table-column
                   label-class-name="endpoints-box-endpoints-title"
-                  v-for="(item, index) in endpointTableTitle"
+                  v-for="(title, index) in endpointTableTitle"
-                  v-if="item.show"
+                  v-if="title.show"
-                  :width="item.width"
+                  :width="title.width"
                   :key="`col-${index}`"
-                  :label="item.label"
+                  :label="title.label"
                 >
-                  <template slot-scope="scope" :column="item">
+                  <template slot-scope="scope" :column="title">
-                    <span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
+                    <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
-                    <span v-else-if="item.prop == 'param'">
+                    <span v-else-if="title.prop == 'param'">
                       <el-popover
-                        placement="top"
+                        placement="bottom"
                         width="200"
                         trigger="hover"
                       >
                         <div class="endpoint-param-pop">
                           <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
                         </div>
-                        <span slot="reference">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
+                        <span slot="reference">
+                          <span v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
+                          <span v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param" size="mini" v-model="scope.row.param"></el-input></span>
+                        </span>
                       </el-popover>
                     </span>
-                    <span v-else-if="item.prop == 'path'">
+                    <span v-else-if="title.prop == 'path'">
                       <el-popover
-                        placement="top"
+                        placement="bottom"
                         width="100"
                         trigger="hover"
-                        :content="scope.row[item.prop]"
+                        :content="scope.row[title.prop]"
                       >
-                        <span slot="reference">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
+                        <span slot="reference">
+                          <span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
+                          <span v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.path"></el-input></span>
+                        </span>
                       </el-popover>
                     </span>
-                    <span v-else>{{scope.row[item.prop]}}</span>
+                    <span v-else-if="title.prop == 'port'">
+                      <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
+                      <span v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.port"></el-input></span>
+                    </span>
+                    <span v-else-if="title.prop == 'host'">
+                      <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
+                      <span v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.host"></el-input></span>
+                    </span>
                   </template>
                 </el-table-column>
                 <el-table-column label="" width="56">
-                  <template slot-scope="scope" :column="item">
+                  <template slot-scope="scope" :column="title">
                     <div>
-                      <span class="param-box-row-symbol"><i class="el-icon-edit-outline"></i></span>
+                      <span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
-                      <span class="param-box-row-symbol"><i class="el-icon-minus"></i></span>
+                      <span v-else class="endpoint-box-row-symbol" @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
+                      <span class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="el-icon-minus"></i></span>
                     </div>
                   </template>
                 </el-table-column>
@@ -169,6 +186,23 @@
       </div>
       <!-- end--底部按钮-->
 
+      <!--start--param编辑框-->
+      <transition name="right-sub-box">
+        <div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
+          <div class="param-box">
+            <div class="param-box-row" v-for="(item, index) in tempParamObj">
+              <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+              <span class="param-box-row-eq">=</span>
+              <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+              <span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+            </div>
+          </div>
+          <div style="width: 100%; text-align: center; height: 25px;">
+            <el-button @click="addParam" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
+          </div>
+        </div>
+      </transition>
+      <!--end--param编辑框-->
     </div>
   </transition>
 </template>
@@ -183,9 +217,11 @@
     },
     data() {
       return {
+        currentModuleCopy: {},
+        tempParamObj: [],
+        tempEndpoint: {},
         rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
-        editParamBox: {show: false}, //param编辑弹框
+        editParamBox: {show: false, top: 0, left: 0, type: 1}, //param编辑弹框
-        viewParamBox: {show: false}, //param查看弹框
         moduleParamShow: false, //module默认参数param悬浮窗
         assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
         assetPageObj: {pageNo: 1, pageSize: 9999},
@@ -229,13 +265,39 @@
         this.rightBox.show = show;
       },
 
-      //子弹框控制
+      //子弹框控制  obj: module或endpoint对象  type:1module2endpoint
-      showEditParamBox(show) {
+      showEditParamBox(show, obj, type, e) {
+        if (show) {
+          let position = e.target.getBoundingClientRect();
+          this.editParamBox.type = type;
+          if (this.editParamBox.type == 2) {
+            this.tempEndpoint = obj;
+          }
+          this.editParamBox.top = position.top - 234;
+          this.editParamBox.left = position.left - 48;
+          if (!obj.param) {
+            this.$set(obj, 'paramObj', []);
+            this.tempParamObj = [];
+          } else {
+            this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
+          }
+        } else {
+          if (this.editParamBox.type == 1) {
+            this.currentModuleCopy.paramObj = this.tempParamObj;
+            this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
+          } else if (this.editParamBox.type == 2) {
+            for (let i = 0; i < this.endpointList.length; i++) {
+              if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
+                this.endpointList[i].param = this.paramToJson(this.tempParamObj);
+                this.endpointList[i].paramObj = this.tempParamObj;
+                break;
+              }
+            }
+          }
+          this.tempParamObj = [];
+        }
         this.editParamBox.show = show;
       },
-      showViewParamBox(show) {
-        this.viewParamBox.show = show;
-      },
 
       /*关闭弹框*/
       esc() {
@@ -246,7 +308,7 @@
 
       // 新增param
       addParam() {
-        this.endpoint.paramObj.push({key: '', value: ''});
+        this.currentModuleCopy.paramObj.push({key: '', value: ''});
       },
 
       // 移除单个param
@@ -254,6 +316,26 @@
         this.endpoint.paramObj.splice(index, 1);
       },
 
+      //编辑endpoint
+      toEditEndpoint(endpoint) {
+        endpoint.isEdit = true;
+      },
+      editEndpoint(endpoint) {
+        endpoint.isEdit = false;
+      },
+
+      //移除endpoint
+      removeEndpoint(endpoint) {
+        endpoint.isEdit = false;
+        for (let i = 0; i < this.endpointList.length; i++) {
+          if (this.endpointList[i].assetId == endpoint.assetId) {
+            this.endpointList.splice(i, 1);
+            this.assetList.unshift(endpoint.asset);
+            break;
+          }
+        }
+      },
+
       //将param转为json字符串格式
       paramToJson(param) {
         let tempParam = {};
@@ -305,14 +387,15 @@
       // endpoint弹框中的asset子弹框里asset选择事件
       selectAsset(obj, index) {
         this.endpointList.push({
+          isEdit: false,
           assetId: obj.id,
           asset: obj,
           host: obj.host,
-          param: this.currentModule.param,
+          param: this.currentModuleCopy.param,
-          paramObj: this.currentModule.paramObj,
+          paramObj: this.currentModuleCopy.paramObj,
-          port: this.currentModule.port,
+          port: this.currentModuleCopy.port,
-          path: this.currentModule.path,
+          path: this.currentModuleCopy.path,
-          moduleId: this.currentModule.id
+          moduleId: this.currentModuleCopy.id
         });
         this.assetList.splice(index, 1);
       },
@@ -353,7 +436,7 @@
 
       //保存endpoint
       save() {
-        this.endpoint.moduleId = this.currentModule.id;
+        this.endpoint.moduleId = this.currentModuleCopy.id;
         this.endpoint.projectId = this.currentProject.id;
         this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
         this.$put('endpoint', this.endpoint).then(response => {
@@ -393,22 +476,19 @@
       dropdownSelect(label) {
         this.assetSearch.label = label;
         this.assetSearch.dropdownShow = false;
+        this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule));
       },
     },
     created() {
       this.getProjectList();
       this.getAssetList();
     },
-    mounted() {
-      this.getModuleList(this.currentProject.id);
-    },
     watch: {
-      endpoint(n, o) {
+      currentProject(n, o) {
-        if (n && n.id) {
+        this.getModuleList(n.id);
-          this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + n.id;
+      },
-        } else {
+      currentModule(n, o) {
-          this.rightBox.title = this.$t("project.endpoint.createEndpoint");
+        this.currentModuleCopy = JSON.parse(JSON.stringify(n));
-        }
       }
     }
   }
@@ -441,15 +521,8 @@
   }
 
   .param-box {
-    border: 1px solid #DCDFE6;
+    height: 200px;
-    border-radius: 4px;
+    overflow: auto;
-    padding: 0 10px;
-  }
-  .param-box-endpoint {
-    height: 325px;
-  }
-  .param-box-module {
-    height: 227px;
   }
   .param-box-row {
     padding: 7px 0 0 0;
@@ -460,14 +533,14 @@
   }
   .param-box-row-key, .param-box-row-value {
     display: inline-block;
-    width: 41.5%;
+    width: 50px;
   }
   .param-box-row-eq {
     display: inline-block;
-    width: 22px;
+    width: 18px;
     text-align: center;
-    height: 32px;
+    height: 22px;
-    line-height: 32px;
+    line-height: 22px;
     color: #c4c7cF;
   }
   .param-box-row-symbol:first-of-type {
@@ -476,7 +549,7 @@
     text-align: center;
     display: inline-block;
     position: absolute;
-    top: 6px;
+    top: 7px;
     right: 34px;
     cursor: pointer;
   }
@@ -489,8 +562,8 @@
     width: 14px;
     display: inline-block;
     position: absolute;
-    top: 9px;
+    top: 12px;
-    right: 14px;
+    left: 135px;
     cursor: pointer;
   }
   .param-box-row-symbol>i {
@@ -536,10 +609,10 @@
 
   .right-child-box .module-info {
     display: inline-block;
-    height: 33px;
+    height: 24px;
     vertical-align: middle;
     position: absolute;
-    top: 2px;
+    top: 5px;
   }
   .right-child-box-title {
     padding: 9px 0 0 4px;
@@ -569,9 +642,12 @@
     width: 60px;
     right: 52px;
   }
+  .endpoint-info-param {
+    width: 80px;
+  }
   .right-child-box .module-info-cover {
     right: 4px;
-    height: 28px;
+    height: 24px;
     padding: 5px 5px;
     background: #656565;
     color: white;
@@ -591,17 +667,11 @@
 
   /* begin--子弹框*/
   .right-sub-box {
-    width: 380px;
+    width: 170px;
-    height: 520px;
+    height: 225px;
-    position: absolute;
+    position: fixed;
-    right: 80px;
     z-index: 2;
-    padding: 0 10px;
+    padding: 0 0 0 10px;
-  }
-  .right-sub-box .el-input-group {
-    width: 227px;
-    float: right;
-    margin: 7px 0 0 0;
   }
   /* begin--搜索框*/
   .endpoint-asset-prepend {
@@ -692,8 +762,12 @@
   /* end--子弹框*/
 </style>
 <style>
-  .module-info.el-input input {
+  .endpoints-box-module-info .el-input input,
+  .endpoints-box-endpoints .el-input input,
+  .right-sub-box .el-input input{
     padding: 0 5px;
+    height: 24px;
+    line-height: 24px;
   }
   .endpoints-box-endpoints-title {
     color: black;
@@ -708,14 +782,16 @@
   .endpoints-box-endpoints .el-table .el-table__row td{
     padding: 5px 0;
   }
-  .module-info-param.el-input.is-disabled .el-input__inner {
+  .module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner,
+  .endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner {
     cursor: pointer;
     background-color: white;
     border-color: #DCDFE6;
     color: #606266;
     transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   }
-  .module-info-param.el-input.is-disabled .el-input__inner:hover {
+  .module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover,
+  .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
     border-color: #c0c4cc;
   }
 </style>

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

@@ -0,0 +1,100 @@
+<template>
+  <!--start--param编辑框-->
+  <transition name="right-sub-box">
+    <div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
+      <div class="param-box">
+        <div class="param-box-row" v-for="(item, index) in currentModule.paramObj">
+          <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+          <span class="param-box-row-eq">=</span>
+          <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+          <span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+        </div>
+      </div>
+      <div style="width: 100%; text-align: center; height: 25px;">
+        <el-button @click="addParam" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
+      </div>
+    </div>
+  </transition>
+  <!--end--param编辑框-->
+</template>
+
+<script>
+export default {
+  name: "paramEditBox",
+  props: {
+    editParamBox: Object,
+    paramObj: Array
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+  /* begin--子弹框*/
+  .right-sub-box {
+    width: 170px;
+    height: 225px;
+    position: fixed;
+    z-index: 2;
+    padding: 0 0 0 10px;
+  }
+  .param-box {
+    height: 200px;
+    overflow: auto;
+  }
+  .param-box-row {
+    padding: 7px 0 0 0;
+    position: relative;
+  }
+  .param-box-row:last-of-type {
+    padding-bottom: 7px;
+  }
+  .param-box-row-key, .param-box-row-value {
+    display: inline-block;
+    width: 50px;
+  }
+  .param-box-row-eq {
+    display: inline-block;
+    width: 18px;
+    text-align: center;
+    height: 22px;
+    line-height: 22px;
+    color: #c4c7cF;
+  }
+  .param-box-row-symbol:first-of-type {
+    font-size: 18px;
+    color: #bbbbbb;
+    text-align: center;
+    display: inline-block;
+    position: absolute;
+    top: 7px;
+    right: 34px;
+    cursor: pointer;
+  }
+  .param-box-row-symbol:last-of-type {
+    font-size: 12px;
+    color: #bbbbbb;
+    border: 1px solid #bbbbbb;
+    text-align: center;
+    height: 12px;
+    width: 14px;
+    display: inline-block;
+    position: absolute;
+    top: 12px;
+    left: 135px;
+    cursor: pointer;
+  }
+  .param-box-row-symbol>i {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+  }
+  /* end--param*/
+</style>

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

@@ -37,7 +37,7 @@
                             <i class="el-icon-close" @click="close_selcet_list(ind,$event)"></i>
                         </div>
                         <div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
-                            <input type="text" id="sreach_input" v-model="input_sreach" @keyup="enter" @click="stop_click">
+                            <input type="text" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click">
                             <div class="select_info_list" v-if="val.type == 'select'">
                                 <ul>
                                     <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
@@ -626,8 +626,17 @@
                 }
             },
             // input框监听是按删除还是回车
-            enter(e) {
+            enter(val, e) {
               var keyCode = window.event ? e.keyCode : e.which;
+              if(val == 'ID'&&keyCode == 13){
+                let id = /^[0-9]*$/
+                if (!id.test(this.input_sreach) || this.input_sreach > 2147483647) {
+                  //如果有不正确的值 进行删除
+                  this.input_sreach = ''
+                  this.$message.error(this.other.delErrorId)
+                  return false;
+                }
+              }
               if(keyCode!==8){
                 this.delBool = false
                 this.delcriteriaBool = false