From bc8ec890531167d5fb76df817b7ab456138f120a Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 28 Jul 2020 19:42:25 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-351=20perf:=20project=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E4=BE=A7=E6=BB=91=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          |  49 +-
 .../common/rightBox/addEndpointBox.vue        | 484 +++++++-------
 .../common/rightBox/editEndpointBox.vue       | 412 +++++-------
 .../components/common/rightBox/moduleBox.vue  | 601 ++++++++----------
 .../src/components/page/project/project.vue   | 237 +++----
 5 files changed, 760 insertions(+), 1023 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 59bc334bd..77684bcd5 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -9,7 +9,7 @@
     >
       <el-submenu :index="'-3'" popper-class="nz-submenu" class="icon-menu-item">
         <template slot="title">
-          <i class="nz-icon-navmore nz-icon"></i>
+          <i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
         </template>
         <template v-for="(item, index) in linkData">
           <el-menu-item :index="'0-' + index">
@@ -18,7 +18,7 @@
         </template>
       </el-submenu>
       <el-submenu :index="'-1'" class="icon-menu-item" popper-class="display-none">
-        <div slot="title" class="el-submenu__title" @click="cli()" >
+        <div slot="title" class="el-submenu__title" @click="cli" >
           <i class="nz-icon nz-icon-cli"></i>
           <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
         </div>
@@ -150,16 +150,12 @@
       </el-submenu>
     </el-menu>
 
-    <panel-box :panel="editPanel" @reload="panelListReload" @reloadForDel="" ref="panelBox"></panel-box>
-    <project-box :project="editProject" ref="projectBox"></project-box>
-    <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
+    <project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox"></project-box>
+    <module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
+    <add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @reload=""
                       ref="addEndpointBox"></add-endpoint-box>
-    <!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
-                    @sendStateData="closeAsset"></asset-add-unit>-->
-    <asset-box :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" v-if="assetBoxShow"
-               ref="assetAddUnit"></asset-box>
-    <alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
+    <asset-box v-if="rightBox.asset.show" :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" ref="assetAddUnit"></asset-box>
+    <alert-config-box v-if="rightBox.alertRule.show" :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
     <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
@@ -174,6 +170,13 @@
     },
     data() {
       return {
+        rightBox: {
+          project: {show: false},
+          module: {show: false},
+          endpoint: {show: false},
+          asset: {show: false},
+          alertRule: {show: false},
+        },
         username: sessionStorage.getItem("nz-username"),
         language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
         assetData: [],
@@ -181,10 +184,6 @@
         activeItemIndex:'',
         activeItemIndexes: [],
         hoverItemIndex: '',
-        editPanel:{//新增or编辑的panel
-          id:'',
-          name: ''
-        },
         projectData: [], //顶部菜单project列表中的数据
         editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
         currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
@@ -257,15 +256,6 @@
       }
     },
     methods: {
-      closeAsset() {
-        this.addUnitShow = false;
-        this.assetBoxShow = false;
-      },
-      refreshAsset(flag) {
-        if (flag && this.$route.path == "/asset") {
-          window.location.reload();
-        }
-      },
       cli(){
         this.$store.commit('openConsole');
       },
@@ -284,14 +274,11 @@
       },
 
       createBox(item) {
-        if (item.type == 0) {
-          this.$refs.panelBox.show(true);
-          this.editPanel = {id: '', name: ''};
-        }else  if (item.type == 1) {
-          this.$refs.projectBox.show(true,true);
+        if (item.type == 1) {
+          this.rightBox.project.show = true;
           this.editProject = {id: '', name: '', remark: ''};
         } else if (item.type == 2) {
-          this.$refs.moduleBox.show(true,true);
+          this.rightBox.module.show = true;
           this.editModule = {
             id: '',
             name: '',
@@ -437,8 +424,8 @@
         })
       },
       toEditProject(p) {
-        this.$refs.projectBox.show(true,true);
         this.editProject = Object.assign({}, p);
+        this.rightBox.project.show = true;
       },
       indOf(a, b) {
         let c = [];
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index da8392f75..f08737075 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -1,229 +1,226 @@
 <template>
-  <transition name="right-box">
-    <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-      </div>
-      <!-- end--顶部按钮-->
+  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="showEditParamBox(false)" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns"></div>
+    <!-- end--顶部按钮-->
 
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
+    <!-- end--标题-->
 
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpointForm" :model="endpointForm" :rules="rules">
-          <!--project-->
-          <el-form-item :label='$t("project.project.project")' prop="projectId">
-            <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">
-              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item" :id="'project-'+item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <!--module-->
-          <el-form-item :label='$t("project.module.module")' prop="moduleId">
-            <el-select @change="((val) => {changeModule(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" :id="'module-'+item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <!--asset和endpoint-->
-          <div class="right-box-form-row right-child-boxes">
-            <div class="right-child-box assets-box">
-              <!--begin--标题-->
-              <div class="right-child-box-title">{{$t('asset.asset')}}</div>
-              <!--end--标题-->
-              <!--begin--搜索框-->
-              <div style="display: inline-block">
-                <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
-                  <button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
-                    <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
-                    <span>
-                      <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
-                      <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
-                    </span>
-                  </button><el-input style="width: 100px;" class="input-x-mini-24 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input><button
-                  type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button>
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpoint" :model="endpoint" :rules="rules">
+        <!--project-->
+        <el-form-item :label='$t("project.project.project")' prop="projectId">
+          <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">
+            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item" :id="'project-'+item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--module-->
+        <el-form-item :label='$t("project.module.module")' prop="moduleId">
+          <el-select @change="((val) => {changeModule(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" :id="'module-'+item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--asset和endpoint-->
+        <div class="right-box-form-row right-child-boxes">
+          <div class="right-child-box assets-box">
+            <!--begin--标题-->
+            <div class="right-child-box-title">{{$t('asset.asset')}}</div>
+            <!--end--标题-->
+            <!--begin--搜索框-->
+            <div style="display: inline-block">
+              <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
+                <button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
+                  <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
+                  <span>
+                    <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
+                    <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
+                  </span>
+                </button><el-input style="width: 100px;" class="input-x-mini-24 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input><button
+                type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button>
 
-                  <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
-                    <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="search-asset-ip">IP</div>
-                    <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div>
-                  </div>
+                <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
+                  <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="search-asset-ip">IP</div>
+                  <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div>
                 </div>
               </div>
-              <!--end--搜索框-->
-
-              <!-- begin--table-->
-              <div class="endpoint-sub-table">
-                <div class="endpoint-sub-table-head">
-                  <div class="endpoint-sub-table-col">IP</div>
-                  <div class="endpoint-sub-table-col">SN</div>
-                </div>
-                <div class="line-100"></div>
-                <div class="endpoint-sub-table-body">
-                  <el-scrollbar style="height: 100%" ref="assetScrollbar">
-                    <div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
-                      <div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
-                      <div class="endpoint-sub-table-col">{{item.host}}</div>
-                      <el-popover trigger="hover" placement="right-start" :content="item.sn" >
-                        <div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
-                      </el-popover>
-                    </div>
-                  </el-scrollbar>
-                </div>
-              </div>
-              <!--end--table-->
             </div>
-            <!--右侧endpoint列表-->
-            <div class="right-child-box endpoints-box" :class="{'endpoints-box-snmp': currentModuleCopy.type && 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" :class="{'module-info-port-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port"></el-input>
-                <el-popover
-                  placement="bottom"
-                  width="200"
-                  trigger="hover"
-                  v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'"
+            <!--end--搜索框-->
+
+            <!-- begin--table-->
+            <div class="endpoint-sub-table">
+              <div class="endpoint-sub-table-head">
+                <div class="endpoint-sub-table-col">IP</div>
+                <div class="endpoint-sub-table-col">SN</div>
+              </div>
+              <div class="line-100"></div>
+              <div class="endpoint-sub-table-body">
+                <el-scrollbar style="height: 100%" ref="assetScrollbar">
+                  <div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
+                    <div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
+                    <div class="endpoint-sub-table-col">{{item.host}}</div>
+                    <el-popover trigger="hover" placement="right-start" :content="item.sn" >
+                      <div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
+                    </el-popover>
+                  </div>
+                </el-scrollbar>
+              </div>
+            </div>
+            <!--end--table-->
+          </div>
+          <!--右侧endpoint列表-->
+          <div class="right-child-box endpoints-box" :class="{'endpoints-box-snmp': currentModuleCopy.type && 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" :class="{'module-info-port-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port"></el-input>
+              <el-popover
+                placement="bottom"
+                width="200"
+                trigger="hover"
+                v-if="currentModuleCopy.type && 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 v-if="currentModuleCopy.type && 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-->
+            <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
+              <el-table
+                :data="endpointList"
+                ref="endpointTable"
+                style="width: 100%;border-radius: 4px;"
+                v-scrollBar:el-table
+                height="calc(100% - 36px)"
+                :row-class-name="setRowIndex"
+                empty-text=" ">
+                <el-table-column
+                  type="selection"
+                  width="25"
+                  style="padding: 0 1px;">
+                </el-table-column>
+                <el-table-column
+                  label-class-name="endpoints-box-endpoints-title"
+                  v-for="(title, index) in endpointTableTitle"
+                  v-if="title.show"
+                  :width="title.width"
+                  :key="`col-${index}`"
+                  :label="title.label"
                 >
-                  <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 v-if="currentModuleCopy.type && 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-->
-              <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
-                <el-table
-                  :data="endpointList"
-                  ref="endpointTable"
-                  style="width: 100%;border-radius: 4px;"
-                  v-scrollBar:el-table
-                  height="calc(100% - 36px)"
-                  :row-class-name="setRowIndex"
-                  empty-text=" ">
-                  <el-table-column
-                    type="selection"
-                    width="25"
-                    style="padding: 0 1px;">
-                  </el-table-column>
-                  <el-table-column
-                    label-class-name="endpoints-box-endpoints-title"
-                    v-for="(title, index) in endpointTableTitle"
-                    v-if="title.show"
-                    :width="title.width"
-                    :key="`col-${index}`"
-                    :label="title.label"
-                  >
-                    <template slot-scope="scope" :column="title">
-                      <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
-                      <span v-else-if="title.prop == 'param'">
-                        <el-popover
-                          v-if="!scope.row.isEdit"
-                          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">
-                            <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
-                          </span>
-                        </el-popover>
-                        <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
-                            <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
-                          </el-form-item>
+                  <template slot-scope="scope" :column="title">
+                    <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
+                    <span v-else-if="title.prop == 'param'">
+                      <el-popover
+                        v-if="!scope.row.isEdit"
+                        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">
+                          <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
                         </span>
+                      </el-popover>
+                      <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
+                        </el-form-item>
                       </span>
-                      <span v-else-if="title.prop == 'path'">
-                        <el-popover
-                          placement="bottom"
-                          width="100"
-                          trigger="hover"
-                          :content="scope.row[title.prop]"
-                          v-if="!scope.row.isEdit"
-                        >
-                          <span slot="reference" >
-                            <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
-                          </span>
-                        </el-popover>
-                        <span @mousedown.stop v-else>
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                            <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.path"></el-input>
-                          </el-form-item>
+                    </span>
+                    <span v-else-if="title.prop == 'path'">
+                      <el-popover
+                        placement="bottom"
+                        width="100"
+                        trigger="hover"
+                        :content="scope.row[title.prop]"
+                        v-if="!scope.row.isEdit"
+                      >
+                        <span slot="reference" >
+                          <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
                         </span>
+                      </el-popover>
+                      <span @mousedown.stop v-else>
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.path"></el-input>
+                        </el-form-item>
                       </span>
-                      <span v-else-if="title.prop == 'port'">
-                        <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
-                        <span @mousedown.stop v-else>
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                            <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.port"></el-input>
-                          </el-form-item>
-                        </span>
+                    </span>
+                    <span v-else-if="title.prop == 'port'">
+                      <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
+                      <span @mousedown.stop v-else>
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.port"></el-input>
+                        </el-form-item>
                       </span>
-                      <span v-else-if="title.prop == 'host'">
-                        <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
-                        <span @mousedown.stop v-else>
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                            <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
-                          </el-form-item>
-                        </span>
+                    </span>
+                    <span v-else-if="title.prop == 'host'">
+                      <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
+                      <span @mousedown.stop v-else>
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
+                        </el-form-item>
                       </span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="" width="56">
-                    <template slot-scope="scope" :column="title">
-                      <div>
-                        <span :id="'ep-asset-toedit-'+scope.row.assetId" v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
-                        <span :id="'ep-asset-edit-'+scope.row.assetId" v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
-                        <span :id="'ep-asset-remove-'+scope.row.assetId" class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                      </div>
-                    </template>
-                  </el-table-column>
-                </el-table>
-                <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
-                <div>
-                  <button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-normal nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
-                  <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
-                </div>
+                    </span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="" width="56">
+                  <template slot-scope="scope" :column="title">
+                    <div>
+                      <span :id="'ep-asset-toedit-'+scope.row.assetId" v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
+                      <span :id="'ep-asset-edit-'+scope.row.assetId" v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
+                      <span :id="'ep-asset-remove-'+scope.row.assetId" class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
+              <div>
+                <button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-normal nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
+                <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
               </div>
             </div>
           </div>
-        </el-form>
-
-      </el-scrollbar>
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-
-      <!--start--param编辑框-->
-      <transition name="right-sub-box">
-        <div @mousedown.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 input-x-mini-22" v-model="item.key"></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="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-            </div>
-          </div>
-          <div style="width: 100%; text-align: center; height: 25px;">
-            <el-button @click="addParam" 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>
-          </div>
         </div>
-      </transition>
-      <!--end--param编辑框-->
+      </el-form>
+
+    </el-scrollbar>
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
     </div>
-  </transition>
+
+    <!--start--param编辑框-->
+    <transition name="right-sub-box">
+      <div @mousedown.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 input-x-mini-22" v-model="item.key"></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="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+          </div>
+        </div>
+        <div style="width: 100%; text-align: center; height: 25px;">
+          <el-button @click="addParam" 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>
+        </div>
+      </div>
+    </transition>
+    <!--end--param编辑框-->
+  </div>
 </template>
 
 <script>
@@ -245,7 +242,7 @@
         },
         paramBorderColor: '#dcdfe6',
         endpointTouch: false,
-        endpointForm: {projectId: '', moduleId: '', endpointList: []},
+        endpoint: {projectId: '', moduleId: '', endpointList: []},
         currentModuleCopy: {},
         currentProjectCopy: {id: ''},
         tempParamObj: [],
@@ -292,12 +289,6 @@
       }
     },
     methods: {
-      show(show) {
-        this.rightBox.show = show;
-        this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
-        this.endpointForm = {projectId: '', moduleId: '', endpointList:[]}
-      },
-
       //子弹框控制  obj: module或endpoint对象  type:1module2endpoint
       showEditParamBox(show, obj, type, e) {
         if (show) {
@@ -341,15 +332,13 @@
         this.editParamBox.show = show;
       },
 
-      clickos() {
-        this.esc();
+      clickOutside() {
+        this.esc(false);
       },
 
       /*关闭弹框*/
-      esc() {
-        this.rightBox.show = false;
-        this.editParamBox.show = false;
-        this.endpointTouch = false;
+      esc(refresh) {
+        this.$emit("close", refresh);
       },
 
       // 新增param
@@ -375,7 +364,7 @@
         this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint));
       },
       editEndpoint(endpoint) {
-        this.$refs.addEndpointForm.validate((valid) => {
+        this.$refs.addEndpoint.validate((valid) => {
           if (valid) {
             endpoint.isEdit = false;
             this.tempEndpoint2 = {};
@@ -444,8 +433,8 @@
 
       changeProject(project) {
         this.currentModuleCopy = {};
-        this.endpointForm.moduleId = '';
-        this.endpointForm.projectId = project.id;
+        this.endpoint.moduleId = '';
+        this.endpoint.projectId = project.id;
         this.editParamBox.show = false;
         this.tempParamObj = [];
         this.endpointList = [];
@@ -454,7 +443,7 @@
       },
 
       changeModule(module) {
-        this.endpointForm.moduleId = module.id;
+        this.endpoint.moduleId = module.id;
         this.editParamBox.show = false;
         this.tempParamObj = [];
       },
@@ -484,8 +473,8 @@
         });
         this.assetList.splice(index, 1);
         this.endpointTouch = true;
-        this.endpointForm.projectId = this.currentProjectCopy.id;
-        this.endpointForm.moduleId = this.currentModuleCopy.id;
+        this.endpoint.projectId = this.currentProjectCopy.id;
+        this.endpoint.moduleId = this.currentModuleCopy.id;
         this.$refs.assetScrollbar.update();
       },
 
@@ -525,11 +514,11 @@
 
       //保存endpoint
       save() {
-        this.endpointForm.projectId = this.currentProjectCopy.id;
-        this.endpointForm.moduleId = this.currentModuleCopy.id;
+        this.endpoint.projectId = this.currentProjectCopy.id;
+        this.endpoint.moduleId = this.currentModuleCopy.id;
         if (this.endpointList.length == 0) {
           this.endpointTouch = true;
-          this.$refs.addEndpointForm.validate();
+          this.$refs.addEndpoint.validate();
           return false;
         }
         //对endpointList进行处理，避免携带过多无用数据
@@ -538,13 +527,12 @@
           let endpoint = {moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host};
           endpointList.push(endpoint);
         });
-        this.$refs.addEndpointForm.validate((valid) => {
+        this.$refs.addEndpoint.validate((valid) => {
           if (valid) {
             this.$post('endpoint', endpointList).then(response => {
               if (response.code === 200) {
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc();
-                this.$emit("reload");
+                this.esc(true);
               } else {
                 this.$message.error(response.msg);
               }
@@ -578,8 +566,7 @@
           this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit('reload');
-              this.rightBox.show = false;
+              this.esc(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -602,21 +589,13 @@
         row.index = rowIndex;
       }
     },
-    computed: {
-      projectListReloadWatch() {
-        return this.$store.state.projectListChange;
-      },
-      moduleListReloadWatch() {
-        return this.$store.state.moduleListChange;
-      },
-    },
     created() {
       this.getProjectList();
       this.getAssetList();
     },
     watch: {
       endpointList(n, o) {
-        this.endpointForm.endpointList = n;
+        this.endpoint.endpointList = n;
         if (n.length > 0) {
           this.paramBorderColor = '#dcdfe6';
         } else {
@@ -624,16 +603,19 @@
         }
 
       },
-      currentProject(n, o) {
-        this.currentProjectCopy=Object.assign({},n);
-        this.endpointForm.projectId = n.id;
-        this.getModuleList(n.id);
+      currentProject: {
+        immediate: true,
+        handler(n, o) {
+          this.currentProjectCopy = Object.assign({}, n);
+          this.endpoint.projectId = n.id;
+          this.getModuleList(n.id);
+        }
       },
       currentModule: {
         immediate: true,
         handler(n, o) {
           if(n) {
-            this.endpointForm.moduleId = n.id;
+            this.endpoint.moduleId = n.id;
             this.currentModuleCopy = JSON.parse(JSON.stringify(n));
 
           }
@@ -651,12 +633,6 @@
           }
         }
       },
-      projectListReloadWatch(n, o) {
-        this.getProjectList();
-      },
-      moduleListReloadWatch(n, o) {
-        this.getModuleList(this.currentProjectCopy.id);
-      }
     }
   }
 </script>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 3f593337c..c2d6f81f2 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -1,206 +1,119 @@
 <template>
-  <transition name="right-box">
-    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show" v-clickoutside="clickos">
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-        <button id="edit-ep-edit" v-if="!rightBox.isEdit" type="button" @click="toEdit(true)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
-
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
-
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form  right-box-form-left" :model="endpoint" label-position="right" label-width="120px" :rules="rules" ref="endPointForm">
-          <!--project-->
-          <el-form-item :label="$t('project.project.project')" prop="project.id">
-            <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.projectId" placeholder="" v-if="rightBox.isEdit" size="small">
-              <el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
-          </el-form-item>
-          <!--module-->
-          <el-form-item :label="$t('project.module.module')" prop="module.id">
-            <el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.moduleId" placeholder="" v-if="rightBox.isEdit" size="small">
-              <el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
-          </el-form-item>
-          <!--asset-->
-          <el-form-item :label="$t('asset.asset')" prop="assetId">
-            <el-autocomplete
-              :fetch-suggestions="assetSuggestion"
-              v-model.trim="endpoint.asset.host"
-              placeholder=""
-              @select="selectAsset"
-              @change.native="inputAsset"
-              size="small"
-              value-key="host"
-              popper-class="no-style-class"
-              style="width: 100%;"
-            >
-            </el-autocomplete>
-              <!--<el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && endpoint.asset" placeholder="" :value="endpoint.asset.host" size="small"></el-input>
-              <el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && !endpoint.asset" placeholder="" value="" size="small"></el-input>
-              <el-popover placement="left" width="400" v-model="subBox.show" popper-class="nz-pop">
-                <div class="pop-window-assetType-content">
-                  &lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;
-                  <div class="pop-top-btns">
-                    <button type="button" @click="subEsc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="edit-ep-subesc">
-                      <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
-                      <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
-                    </button>
-                  </div>
-                  &lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;
-                  &lt;!&ndash;begin&#45;&#45;标题&ndash;&gt;
-                  <div class="pop-title">{{subBox.title}}</div>
-                  &lt;!&ndash;end&#45;&#45;标题&ndash;&gt;
-                  &lt;!&ndash;&ndash;&gt;
-                  <div class="pop-item-wider " >
-                    &lt;!&ndash; begin&#45;&#45;搜索框&ndash;&gt;
-                    <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
-                      <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
-                        <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
-                        <span>
-                          <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
-                          <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
-                        </span>
-                      </button><div class="endpoint-asset-search-input">
-                        <el-input class="input-x-mini-22 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
-                      </div><button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" >
-                        <i @click="searchAsset" class="el-icon-search" id="edit-ep-search-asset"></i>
-                      </button>
-
-                      <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
-                        <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-ip">IP</div>
-                        <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-sn">SN</div>
-                      </div>
-                    </div>
-                    &lt;!&ndash; end&#45;&#45;搜索框&ndash;&gt;
-                    &lt;!&ndash; begin&#45;&#45;table&ndash;&gt;
-                    <div class="endpoint-sub-table">
-                      <div class="endpoint-sub-table-head">
-                        <div class="endpoint-sub-table-col">IP</div>
-                        <div class="endpoint-sub-table-col">SN</div>
-                      </div>
-                      <div class="line-100"></div>
-                      <div class="endpoint-sub-table-body">
-                        <div v-if="selectedAsset.id != ''" :data="selectedAsset.id" class="endpoint-sub-table-row endpoint-sub-table-row-selected">
-                          <div class="endpoint-sub-table-col">{{selectedAsset.host}}</div>
-                          <div class="endpoint-sub-table-col">{{selectedAsset.sn}}</div>
-                        </div>
-                        <div v-else class="endpoint-sub-table-row"></div>
-                        <div id="edit-select-asset" @click="selectAsset(item)" :data="item.id" v-for="item in assetList" class="endpoint-sub-table-row" :class="{'endpoint-sub-table-row-active': item.id == selectedAsset.id}">
-                          <div class="endpoint-sub-table-col">{{item.host}}</div>
-                          <div class="endpoint-sub-table-col">{{item.sn}}</div>
-                        </div>
-                      </div>
-                      <div class="endpoint-sub-table-paginate">
-                        <div class="endpoint-sub-table-paginate-all">All:&nbsp;{{assetPageObj.total}}</div>
-                        <el-pagination background :pager-count="5" layout="prev, pager, next" @current-change="(currentPage) => {getAssetList(currentPage)}" :total="assetPageObj.total"></el-pagination>
-                      </div>
-                    </div>
-                    &lt;!&ndash; end&#45;&#45;table&ndash;&gt;
-                  </div>
-                </div>
-                <div slot="reference" @click.prevent="" class="right-box-row-btn" v-if="rightBox.isEdit">
-                  <span class="el-icon-more"></span>
-                </div>
-              </el-popover>
-              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>-->
-          </el-form-item>
-          <!--host-->
-          <el-form-item :label="$t('project.endpoint.host')" prop="host">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.host" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
-          </el-form-item>
-          <!--port-->
-          <el-form-item :label="$t('project.endpoint.port')" prop="port">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.port" size="small"></el-input>
-            <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" 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" v-if="currentModule.type.toLowerCase() == 'http'">
-            <template slot="label">
-              <span>{{$t('project.endpoint.param')}}</span>
-            </template>
-              <div  v-if="rightBox.isEdit" style="text-align: right">
-                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-                <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i class="el-icon-delete"></i></span>
-                </button>
-                <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
-                </button>
-              </div>
-            <div v-if="rightBox.isEdit" class="param-box param-box-module">
-              <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
-                <div class="param-box-row" v-for="(item, index) in endpoint.paramObj">
-                  <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                    <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-eq">=</span>
-                  <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                    <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                </div>
-              </el-scrollbar>
-            </div>
-            <div v-else v-for="(item, index) in endpoint.paramObj" v-if="!rightBox.isEdit">
-              <div  class="right-box-form-content-txt">{{item.key}}={{item.value}}</div>
-            </div>
-
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-
-      <!-- end--表单-->
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button v-if="rightBox.isEdit" @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-
+  <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
     </div>
-  </transition>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + editEndpoint.id}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form class="right-box-form  right-box-form-left" :model="editEndpoint" label-position="right" label-width="120px" :rules="rules" ref="endpointForm">
+        <!--project-->
+        <el-form-item :label="$t('project.project.project')" prop="project.id">
+          <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small">
+            <el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--module-->
+        <el-form-item :label="$t('project.module.module')" prop="module.id">
+          <el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small">
+            <el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--asset-->
+        <el-form-item :label="$t('asset.asset')" prop="assetId">
+          <el-autocomplete
+            :fetch-suggestions="assetSuggestion"
+            v-model.trim="editEndpoint.asset.host"
+            placeholder=""
+            @select="selectAsset"
+            @change.native="inputAsset"
+            size="small"
+            value-key="host"
+            popper-class="no-style-class"
+            style="width: 100%;"
+          >
+          </el-autocomplete>
+        </el-form-item>
+        <!--host-->
+        <el-form-item :label="$t('project.endpoint.host')" prop="host">
+          <el-input placeholder="" v-model="editEndpoint.host" size="small"></el-input>
+        </el-form-item>
+        <!--port-->
+        <el-form-item :label="$t('project.endpoint.port')" prop="port">
+          <el-input placeholder="" v-model="editEndpoint.port" size="small"></el-input>
+        </el-form-item>
+        <!--path-->
+        <el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
+          <el-input placeholder="" v-model="editEndpoint.path" size="small"></el-input>
+        </el-form-item>
+        <!--param-->
+        <el-form-item class="right-box-form-param" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
+          <template slot="label">
+            <span>{{$t('project.endpoint.param')}}</span>
+          </template>
+          <div style="text-align: right">
+            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+            <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+              <span><i class="el-icon-delete"></i></span>
+            </button>
+            <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+              <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
+            </button>
+          </div>
+          <div class="param-box param-box-module">
+            <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
+              <div class="param-box-row" v-for="(item, index) in editEndpoint.paramObj">
+                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
+                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
+                </el-form-item>
+                <span class="param-box-row-eq">=</span>
+                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
+                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                </el-form-item>
+                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+              </div>
+            </el-scrollbar>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
     name: "endpointBox",
     props: {
-      postEndpoint: Object,
+      endpoint: Object,
     },
     data() {
       return {
-        endpoint:null,
-        rightBox: {show: false, title: '',isEdit: false},
+        editEndpoint: {},
         subBox: {show: false, title: this.$t("overall.asset")}, //asset子弹框
         assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
         assetPageObj: {pageNo: 1, pageSize: 11, total: 0},
         selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset
-        currentProject: null,
-        currentModule: null,
         projectList: [],
         moduleList: [],
         assetList: [],
@@ -224,34 +137,14 @@
       }
     },
     methods: {
-      show(show) {
-        this.rightBox.show = show;
-      },
-
-      toEdit(show, id) {
-        this.rightBox.isEdit = show;
-        this.rightBox.show = true;
-        this.$nextTick(()=>{
-          if (show) {
-            this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + id;
-            this.currentProject=this.projectList.find(item=>{return item.id == this.endpoint.projectId})
-            this.getModuleList(this.endpoint.projectId,true)
-          } else {
-            this.rightBox.title = this.$t("project.endpoint.endpoint") + "  ID：" + id;
-          }
-        });
-      },
-
       //endpoint弹框中asset子弹框控制
       showSubBox(show) {
         this.subBox.show = show;
       },
 
       /*关闭弹框*/
-      esc() {
-        this.rightBox.show = false;
-        this.subBox.show = false;
-        this.$emit("close");
+      esc(refresh) {
+        this.$emit("close", refresh);
       },
 
       /*关闭子弹框*/
@@ -259,8 +152,8 @@
         this.subBox.show = false;
       },
 
-      clickos() {
-        this.esc();
+      clickOutside() {
+        this.esc(false);
       },
 
       // 清除param
@@ -303,29 +196,33 @@
 
       /*获取project列表*/
       getProjectList() {
-        this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            this.projectList = response.data.list;
-            if ((!this.currentProject || !this.currentProject.id) && this.projectList.length > 0) {
-              this.currentProject = this.projectList[0];
+        return new Promise(resolve => {
+          this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
+            if (response.code === 200) {
+              this.projectList = response.data.list;
+              if (!this.editEndpoint.projectId && this.projectList.length > 0) {
+                this.editEndpoint.projectId = this.projectList[0].id;
+              }
             }
-          }
+            resolve();
+          });
         });
       },
 
       //project下拉框点击事件
       changeProject(projectId) {
-        this.currentModule = {id: '', name: '', project: {},type:'', port: '', path: '', param: '', paramObj: []};
         this.getModuleList(projectId);
-        this.endpoint.moduleId='';
+        this.editEndpoint.projectId = projectId;
+        this.editEndpoint.moduleId = '';
       },
 
       //project下拉框点击事件
       changeModule(moduleId) {
-        this.currentModule = this.moduleList.find(item=>{return item.id ==  this.endpoint.moduleId});
-        this.endpoint.port = this.currentModule.port;
-        this.endpoint.path = this.currentModule.path;
-        this.endpoint.paramObj = this.currentModule.paramObj;
+        let newModule = this.moduleList.find(item => {return item.id == this.endpoint.moduleId});
+        this.editEndpoint.moduleId = moduleId;
+        this.editEndpoint.port = newModule.port;
+        this.editEndpoint.path = newModule.path;
+        this.editEndpoint.paramObj = newModule.paramObj;
       },
 
       // 获取endpoint弹框中的asset子弹框里asset列表数据
@@ -359,26 +256,26 @@
       // endpoint弹框中的asset子弹框里asset选择事件
       selectAsset(obj) {
         this.selectedAsset = obj;
-        this.endpoint.host = obj.host;
-        this.endpoint.assetId = obj.id;
-        this.$refs.endPointForm.validate();
+        this.editEndpoint.host = obj.host;
+        this.editEndpoint.assetId = obj.id;
+        this.$refs.endpointForm.validate();
       },
       inputAsset(e) {
-        this.endpoint.assetId = "";
+        this.editEndpoint.assetId = "";
         let host = e.target.value;
         if (host) {
           for (let i = 0; i < this.assetList.length; i++) {
             if (host == this.assetList[i].host) {
-              this.endpoint.assetId = this.assetList[i].id;
+              this.editEndpoint.assetId = this.assetList[i].id;
               this.selectedAsset = this.assetList[i];
-              this.endpoint.host = host;
+              this.editEndpoint.host = host;
               break;
             }
           }
         }
       },
       // 获取endpoint弹框中module下拉框数据
-      getModuleList(projectId,setCurModule=false) {
+      getModuleList(projectId, setCurModule = false) {
         this.$get('module', {projectId: projectId}).then(response => {
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
@@ -394,7 +291,7 @@
             }
             this.moduleList = response.data.list;
             if(setCurModule){
-              this.currentModule=this.moduleList.find(item=>{return item.id == this.endpoint.moduleId});
+              this.editEndpoint.moduleId = this.moduleList.find(item => {return item.id == this.editEndpoint.moduleId}).id;
             }
           }
         });
@@ -402,18 +299,15 @@
 
       //保存endpoint
       save() {
-        this.$refs.endPointForm.validate((valide=>{
+        this.$refs.endpointForm.validate((valide=>{
           if(valide){
-            this.endpoint.moduleId = this.currentModule.id;
-            this.endpoint.projectId = this.currentProject.id;
-            this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
+            this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj);
             let requestData = [];
-            requestData.push(this.endpoint);
+            requestData.push(this.editEndpoint);
             this.$put('endpoint', requestData).then(response => {
               if (response.code === 200) {
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc();
-                this.$emit("reload");
+                this.esc(true);
               } else {
                 this.$message.error(response.msg);
               }
@@ -422,7 +316,6 @@
             return false;
           }
         }))
-
       },
 
       //删除endpoint
@@ -432,11 +325,10 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
+          this.$delete("endpoint?ids=" + this.editEndpoint.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit('reload');
-              this.rightBox.show = false;
+              this.esc(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -463,33 +355,19 @@
         callback(data);
       },
     },
-    created() {
-      this.getProjectList();
+    mounted() {
+      this.getProjectList().then(response => {
+        this.getModuleList(this.editEndpoint.projectId);
+      });
       this.getAssetList();
     },
-    computed: {
-      projectListReloadWatch() {
-        return this.$store.state.projectListChange;
-      },
-      moduleListReloadWatch() {
-        return this.$store.state.moduleListChange;
-      },
-    },
-    mounted() {
-      // setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
-    },
     watch: {
-      projectListReloadWatch(n, o) {
-        this.getProjectList();
-      },
-      moduleListReloadWatch(n, o) {
-        this.getModuleList(this.currentProject.id);
-      },
-      postEndpoint:{
-        immediate:true,
-        deep:true,
-        handler(n,o){
-          this.endpoint=Object.assign({},n)
+      endpoint:{
+        immediate: true,
+        deep: true,
+        handler(n, o) {
+          console.info(n)
+          this.editEndpoint = JSON.parse(JSON.stringify(n));
         },
       },
     }
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 9d770129d..34b94bb35 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1,308 +1,293 @@
 <template>
-  <transition name="right-box">
-    <div class="right-box right-box-module" v-if="rightBox.show" v-clickoutside="clickos">
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button id="module-del" type="button" v-if="currentModule.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-        <button v-if="!rightBox.isEdit && currentModule.buildIn != 1" id="module-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
+  <div class="right-box right-box-module" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
 
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editModule.id ? $t("project.module.editModule") + "  ID：" + editModule.id : $t("project.module.createModule")}}</div>
+    <!-- end--标题-->
 
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box" ref="scrollbar">
-        <el-form class="right-box-form right-box-form-left" :model="currentModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
-          <el-form-item :label='$t("project.project.project")' prop="project">
-            <el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
-              <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
-            </el-select>
-            <div v-if="!rightBox.isEdit && currentModule.project" class="right-box-form-content-txt">{{currentModule.project.name}}</div>
-          </el-form-item>
-          <el-form-item :label='$t("project.module.moduleName")' prop="name">
-            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentModule.name" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.name}}</div>
-          </el-form-item>
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box" ref="scrollbar">
+      <el-form class="right-box-form right-box-form-left" :model="editModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
+        <el-form-item :label='$t("project.project.project")' prop="project">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.project" placeholder="" size="small">
+            <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label='$t("project.module.moduleName")' prop="name">
+          <el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small"></el-input>
+        </el-form-item>
 
-          <div class="nz-tab module-box-type">
-            <div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
-              <div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'http', 'unclickable': currentModule.id}">HTTP</div>
-            </div>
-            <div @click="changeType('snmp')" class="nz-tab-item-box" id="module-type-2">
-              <div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'snmp', 'unclickable': currentModule.id}">SNMP</div>
-            </div>
+        <div class="nz-tab module-box-type">
+          <div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'http', 'unclickable': editModule.id}">HTTP</div>
           </div>
+          <div @click="changeType('snmp')" class="nz-tab-item-box" id="module-type-2">
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'snmp', 'unclickable': editModule.id}">SNMP</div>
+          </div>
+        </div>
 
-          <!-- snmp表单 -->
-          <span class="snmp-form" v-if="currentModule.type && currentModule.type == 'snmp'">
-            <div class="right-box-sub-title">SNMP settings</div>
-            <div class="line-100 right-box-line"></div>
+        <!-- snmp表单 -->
+        <span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
+          <div class="right-box-sub-title">SNMP settings</div>
+          <div class="line-100 right-box-line"></div>
 
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="walk">
+                <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editModule.walk">
+                  <template v-slot:trigger>
+                    <div class="el-cascader">
+                      <div class="el-input">
+                        <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
+                      </div>
+                      <div class="el-cascader__tags">
+                        <el-scrollbar style="height: 100%;" ref="walkScrollbar">
+                          <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in editModule.walk">
+                            <span v-html="mibName(item)"></span>
+                            <div class="walk-close-box" @click.stop="removeWalk(item)">
+                              <i class="el-tag__close el-icon-close walk-close"></i>
+                            </div>
+                          </span>
+                        </el-scrollbar>
+                      </div>
+                    </div>
+                  </template>
+                </select-walk>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.version')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="version">
+                <el-radio-group v-model.number="editModule.version" size="small">
+                  <el-radio-button :label="2"></el-radio-button>
+                  <el-radio-button :label="3"></el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="max_repetitions">
+                <el-input v-model.number="editModule.max_repetitions" size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.retries')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="retries">
+                <el-input v-model.number="editModule.retries" size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.timeout')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="timeout">
+                <el-input v-model.number="editModule.timeout" size="small">
+                  <template slot="append">second</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="1">&nbsp;</el-col>
+            <el-col :span="23">
+              <div class="right-box-sub-title">Auth</div>
+              <div class="line-100 right-box-line"></div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="community">
+                <el-input v-model.trim="editModule.community" maxlength="64" show-word-limit size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!--SNMP V3 setting-->
+          <template v-if="editModule.version == 3">
             <el-row>
               <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+                <div class="sub-label sub-label-required">{{$t('login.username')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="walk">
-                  <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="currentModule.walk">
-                    <template v-slot:trigger>
-                      <div class="el-cascader">
-                        <div class="el-input">
-                          <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
-                        </div>
-                        <div class="el-cascader__tags">
-                          <el-scrollbar style="height: 100%;" ref="walkScrollbar">
-                            <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
-                              <span v-html="mibName(item)"></span>
-                              <div class="walk-close-box" @click.stop="removeWalk(item)">
-                                <i class="el-tag__close el-icon-close walk-close"></i>
-                              </div>
-                            </span>
-                          </el-scrollbar>
-                        </div>
-                      </div>
-                    </template>
-                  </select-walk>
+                <el-form-item prop="username">
+                  <el-input v-model.trim="editModule.username" maxlength="64" show-word-limit size="small"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row>
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.version')}}</div>
+                <div class="sub-label">{{$t('project.module.securityLevel')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="version">
-                  <el-radio-group v-model.number="currentModule.version" size="small">
-                    <el-radio-button :label="2"></el-radio-button>
-                    <el-radio-button :label="3"></el-radio-button>
+                <el-form-item prop="security_level">
+                  <el-radio-group v-model="editModule.security_level" size="small" @change="updateScrollbar">
+                    <el-radio-button label="noAuthNoPriv"></el-radio-button>
+                    <el-radio-button label="authNoPriv"></el-radio-button>
+                    <el-radio-button label="authPriv"></el-radio-button>
                   </el-radio-group>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
+                <div class="sub-label sub-label-required">{{$t('login.password')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="max_repetitions">
-                  <el-input v-model.number="currentModule.max_repetitions" size="small"></el-input>
+                <el-form-item prop="password">
+                  <el-input v-model.trim="editModule.password" maxlength="64" show-word-limit size="small"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row class="same-label-width" v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.retries')}}</div>
+                <div class="sub-label">{{$t('project.module.authProtocol')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="retries">
-                  <el-input v-model.number="currentModule.retries" size="small"></el-input>
+                <el-form-item prop="auth_protocol">
+                  <el-radio-group v-model="editModule.auth_protocol" size="small">
+                    <el-radio-button label="MD5"></el-radio-button>
+                    <el-radio-button label="SHA"></el-radio-button>
+                  </el-radio-group>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row class="same-label-width" v-if="editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.timeout')}}</div>
+                <div class="sub-label">{{$t('project.module.privProtocol')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="timeout">
-                  <el-input v-model.number="currentModule.timeout" size="small">
-                    <template slot="append">second</template>
-                  </el-input>
+                <el-form-item prop="priv_protocol">
+                  <el-radio-group v-model="editModule.priv_protocol" size="small">
+                    <el-radio-button label="DES"></el-radio-button>
+                    <el-radio-button label="AES"></el-radio-button>
+                  </el-radio-group>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
-              <el-col :span="1">&nbsp;</el-col>
-              <el-col :span="23">
-                <div class="right-box-sub-title">Auth</div>
-                <div class="line-100 right-box-line"></div>
-              </el-col>
-            </el-row>
-
-            <el-row>
+            <el-row v-if="editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
+                <div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="community">
-                  <el-input v-model.trim="currentModule.community" maxlength="64" show-word-limit size="small"></el-input>
+                <el-form-item prop="priv_password">
+                  <el-input v-model.trim="editModule.priv_password" maxlength="64" show-word-limit size="small"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
+          </template>
 
-            <!--SNMP V3 setting-->
-            <template v-if="currentModule.version == 3">
-              <el-row>
-                <el-col :span="6">
-                  <div class="sub-label sub-label-required">{{$t('login.username')}}</div>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="username">
-                    <el-input v-model.trim="currentModule.username" maxlength="64" show-word-limit size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.contextName')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="context_name">
+                <el-input v-model.trim="editModule.context_name" maxlength="64" show-word-limit size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </span>
 
-              <el-row>
-                <el-col :span="6">
-                  <div class="sub-label">{{$t('project.module.securityLevel')}}</div>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="security_level">
-                    <el-radio-group v-model="currentModule.security_level" size="small" @change="updateScrollbar">
-                      <el-radio-button label="noAuthNoPriv"></el-radio-button>
-                      <el-radio-button label="authNoPriv"></el-radio-button>
-                      <el-radio-button label="authPriv"></el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
+        <div class="right-box-form-tip">
+          {{$t('project.module.tip.defaultEndpointSet')}}
+          <div class="line-100"></div>
+          {{$t('project.module.tip.relation')}}
+        </div>
 
-              <el-row v-if="currentModule.security_level == 'authNoPriv' || currentModule.security_level == 'authPriv'">
-                <el-col :span="6">
-                  <div class="sub-label sub-label-required">{{$t('login.password')}}</div>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="password">
-                    <el-input v-model.trim="currentModule.password" maxlength="64" show-word-limit size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
+        <el-form-item :label='$t("project.endpoint.port")' prop="port" >
+          <el-input placeholder="" v-model.number="editModule.port" size="small"></el-input>
+        </el-form-item>
 
-              <el-row class="same-label-width" v-if="currentModule.security_level == 'authNoPriv' || currentModule.security_level == 'authPriv'">
-                <el-col :span="6">
-                  <div class="sub-label">{{$t('project.module.authProtocol')}}</div>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="auth_protocol">
-                    <el-radio-group v-model="currentModule.auth_protocol" size="small">
-                      <el-radio-button label="MD5"></el-radio-button>
-                      <el-radio-button label="SHA"></el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
+        <el-form-item v-if="editModule.type && editModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
+          <el-input placeholder="" v-model="editModule.path" size="small"></el-input>
+        </el-form-item>
 
-              <el-row class="same-label-width" v-if="currentModule.security_level == 'authPriv'">
-                <el-col :span="6">
-                  <div class="sub-label">{{$t('project.module.privProtocol')}}</div>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="priv_protocol">
-                    <el-radio-group v-model="currentModule.priv_protocol" size="small">
-                      <el-radio-button label="DES"></el-radio-button>
-                      <el-radio-button label="AES"></el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
+        <el-form-item class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
+          <template slot="label">
+            <span>{{$t('project.endpoint.param')}}</span>
+            <div class="right-box-form-btns">
+              <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+              <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+                <span><i class="el-icon-delete"></i></span>
+              </button>
+              <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+                <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
+              </button>
+            </div>
+          </template>
 
-              <el-row v-if="currentModule.security_level == 'authPriv'">
-                <el-col :span="6">
-                  <div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="priv_password">
-                    <el-input v-model.trim="currentModule.priv_password" maxlength="64" show-word-limit size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </template>
-
-            <el-row>
-              <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.contextName')}}</div>
-              </el-col>
-              <el-col :span="18">
-                <el-form-item prop="context_name">
-                  <el-input v-model.trim="currentModule.context_name" maxlength="64" show-word-limit size="small"></el-input>
+          <div class="param-box param-box-module">
+            <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
+              <div class="param-box-row" v-for="(item, index) in editModule.paramObj">
+                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
+                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
                 </el-form-item>
-              </el-col>
-            </el-row>
-          </span>
-
-          <div class="right-box-form-tip" v-if="rightBox.isEdit">
-            {{$t('project.module.tip.defaultEndpointSet')}}
-            <div class="line-100"></div>
-            {{$t('project.module.tip.relation')}}
-          </div>
-
-          <el-form-item :label='$t("project.endpoint.port")' prop="port" >
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model.number="currentModule.port" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.port}}</div>
-          </el-form-item>
-
-          <el-form-item v-if="currentModule.type && currentModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="currentModule.path" size="small"></el-input>
-            <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" 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">
-                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-                <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i class="el-icon-delete"></i></span>
-                </button>
-                <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
-                </button>
+                <span class="param-box-row-eq">=</span>
+                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
+                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                </el-form-item>
+                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
               </div>
-            </template>
+            </el-scrollbar>
+          </div>
+        </el-form-item>
 
-            <div v-if="rightBox.isEdit" class="param-box param-box-module">
-              <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
-                <div class="param-box-row" v-for="(item, index) in currentModule.paramObj">
-                  <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                    <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-eq">=</span>
-                  <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                    <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                </div>
-              </el-scrollbar>
-            </div>
-            <div v-for="(item, index) in currentModule.paramObj" v-if="!rightBox.isEdit">
-              <div  class="right-box-form-content-txt">{{item.key}}={{item.value}}</div>
-            </div>
+        <el-form-item :label='$t("project.module.description")' prop="remark">
+          <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="editModule.remark" size="small"></el-input>
+        </el-form-item>
 
-          </el-form-item>
+      </el-form>
+    </el-scrollbar>
 
-          <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>
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>
@@ -322,12 +307,7 @@
       return {
         walkData: [],
         expandedWalkData: [],
-        currentModule: {},
-        rightBox: {
-          show: false,
-          title: '',
-          isEdit:false
-        },
+        editModule: {},
         rules: {
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'},
@@ -339,9 +319,6 @@
           port: [
             {validator:port, trigger: 'blur'},
           ],
-          /*walk: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],*/
           username: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
@@ -366,10 +343,10 @@
     },
     methods: {
       selectWalk(walk) {
-        if (this.currentModule.walk.indexOf(walk) != -1) {
-          this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
+        if (this.editModule.walk.indexOf(walk) != -1) {
+          this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
         } else {
-          this.currentModule.walk.push(walk);
+          this.editModule.walk.push(walk);
         }
 
         this.$refs.walkScrollbar.update();
@@ -418,13 +395,15 @@
       },
 
       removeWalk(walk) {
-        this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
+        this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
         this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false);
       },
 
       initWalk() {
         this.$nextTick(() => {
-          this.$refs.selectWalk.show();
+          if (this.$refs.selectWalk) {
+            this.$refs.selectWalk.show();
+          }
         })
       },
 
@@ -451,24 +430,19 @@
         }
       },
 
-      show(show, isEdit) {
-        this.rightBox.show = show;
-        this.rightBox.isEdit = isEdit;
-      },
-
       /*关闭弹框*/
-      esc() {
-        this.rightBox.show = false;
+      esc(refresh) {
+        this.$emit("close", refresh);
       },
 
-      clickos() {
-        this.esc();
+      clickOutside() {
+        this.esc(false);
       },
       changeType(type) {
-        if (this.currentModule.id) {
+        if (this.editModule.id) {
           return;
         }
-        this.currentModule.type = type;
+        this.editModule.type = type;
         this.updateScrollbar();
       },
       //转化snmpParam属性
@@ -523,34 +497,33 @@
       },
       /*保存*/
       save() {
-        this.currentModule.param = this.paramToJson(this.currentModule.paramObj);
+        this.editModule.param = this.paramToJson(this.editModule.paramObj);
         this.$refs.moduleForm.validate((valid) => {
           if (valid) {
-            if (this.currentModule.type.toLowerCase() == 'snmp') {
-              this.parseSnmpParam(this.currentModule);
+            if (this.editModule.type.toLowerCase() == 'snmp') {
+              this.parseSnmpParam(this.editModule);
             } else {
-              if (this.currentModule.snmpParam) {
-                this.currentModule.snmpParam = "";
+              if (this.editModule.snmpParam) {
+                this.editModule.snmpParam = "";
               }
             }
-            this.currentModule.projectId = this.currentModule.project.id;
-            if (this.currentModule.id) {
-              this.$put('module', this.currentModule).then(response => {
+            this.editModule.projectId = this.editModule.project.id;
+            if (this.editModule.id) {
+              this.$put('module', this.editModule).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('moduleListChange');
-                  this.rightBox.show = false;
-                  this.$emit('reload');
+                  //this.$store.commit('moduleListChange');
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
               });
             } else {
-              this.$post('module', this.currentModule).then(response => {
+              this.$post('module', this.editModule).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('moduleListChange');
-                  this.rightBox.show = false;
+                  //this.$store.commit('moduleListChange');
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -561,14 +534,6 @@
           }
         });
       },
-      saveOrToEdit: function() {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("project.module.editModule") + "  ID：" + this.currentModule.id;
-        } else {
-          this.save();
-        }
-      },
       /*删除*/
       del() {
         this.$confirm(this.$t("tip.confirmDelete"), {
@@ -576,11 +541,11 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("module?ids=" + this.currentModule.id).then(response => {
+          this.$delete("module?ids=" + this.editModule.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.rightBox.show = false;
-              this.$store.commit('moduleListChange');
+              //this.$store.commit('moduleListChange');
+              this.esc(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -589,50 +554,40 @@
       },
 
       /*获取project列表*/
-      getProjectList: function() {
+      getProjectList() {
         this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.projectList = response.data.list;
-            if (this.currentProject && this.currentProject.id) {
-              /*for (let i = 0; i < this.projectList.length; i++) {
-                if (this.projectList[i].id == this.currentProject.id) {
-                  this.currentProject = this.projectList[i];
-                  break;
-                }
-              }*/
-            } else {
-
-            }
           }
         });
       },
 
       // 清除param
-      clearAllParam: function() {
-        this.currentModule.paramObj = [];
+      clearAllParam() {
+        this.editModule.paramObj = [];
         this.$nextTick(() => {
           this.$refs.paramBoxScrollbar.update();
         });
       },
 
       // 新增param
-      addParam: function() {
-        this.currentModule.paramObj.push({key: '', value: ''});
+      addParam() {
+        this.editModule.paramObj.push({key: '', value: ''});
         this.$nextTick(() => {
           this.$refs.paramBoxScrollbar.update();
         });
       },
 
       // 移除单个param
-      removeParam: function(index) {
-        this.currentModule.paramObj.splice(index, 1);
+      removeParam(index) {
+        this.editModule.paramObj.splice(index, 1);
         this.$nextTick(() => {
           this.$refs.paramBoxScrollbar.update();
         });
       },
 
       //将param转为json字符串格式
-      paramToJson: function(param) {
+      paramToJson(param) {
         let tempParam = {};
         for (let i = 0; i < param.length; i++) {
           eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
@@ -655,9 +610,6 @@
       this.getProjectList();
     },
     computed: {
-      projectListReloadWatch() {
-        return this.$store.state.projectListChange;
-      },
       mibName() {
         return (value) => {
           return this.getMibName(this.walkData, value);
@@ -669,26 +621,10 @@
         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(this.currentModule);
-            }
-
-          } 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(this.currentModule);
-              }
-            }
-          }
+          this.editModule = JSON.parse(JSON.stringify(n));
         }
       },
-      currentModule: {
+      editModule: {
         immediate: true,
         deep: true,
         handler(n, o) {
@@ -706,9 +642,6 @@
           }
         }
       },
-      projectListReloadWatch(n, o) {
-        this.getProjectList();
-      }
     }
   }
 </script>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 04f4371a0..f37f2f96e 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -26,10 +26,10 @@
       <el-scrollbar ref="leftScrollbar" style="height: 100%">
         <div class="sidebar-title too-long-split">{{$t('project.project.project')}}</div>
         <div class="sidebar-info">
-          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
+          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
             <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
               <template slot="title">
-                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
+                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event,item)" :id="'project-module-'+item.id">
                   <div class="sidebar-info-item-txt">
                     <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
                       <span slot="reference" class="">
@@ -41,15 +41,15 @@
                 </div>
               </template>
               <div class="sidebar-info sub-sidebar-info" >
-                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="toAddModule">
+                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
                   <i class="nz-icon nz-icon-create-square"></i>
                 </div>
                 <template v-else>
-                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
+                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
                     <div :id="`module-${module.id}`" class="item-tip">
                       <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
                       <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
-                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
                     </div>
                   </div>
                 </template>
@@ -77,7 +77,7 @@
               class="margin-l-20"
             >
               <template slot="optionZone">
-                <button @click.stop="toCreateEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
+                <button @click.stop="addEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
                   <i class="nz-icon nz-icon-create-square"></i>
                 </button>
               </template>
@@ -109,7 +109,7 @@
             :prop="propTitle(item.prop)"
           >
             <template slot-scope="scope" :column="item" >
-              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(scope.row)">{{scope.row[item.prop].host}}</span>
+              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">{{scope.row[item.prop].host}}</span>
               <span v-else-if="item.prop == 'param'">
                 <template v-if="scope.row.paramObj">
                   <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
@@ -118,13 +118,12 @@
               </span>
               <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
               <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                <span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
                 &nbsp;
-                <span :title="$t('overall.query')" @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
+                <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
                 &nbsp;
-                <span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
               </div>
-<!--              <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
               <span v-else-if="item.prop == 'state'" >
                 <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
                   <div slot="reference" style="width: 20px">
@@ -157,7 +156,7 @@
       </div>
       <transition name="el-zoom-in-bottom">
         <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
-                    :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="currentEndpoint" :asset-detail="bottomBox.assetDetail"
+                    :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
                     @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
       </transition>
     </div>
@@ -173,18 +172,21 @@
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
-
-    <module-box :current-project="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
-    <edit-endpoint-box :project="currentProject" :module="currentModule" :post-endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
-    <add-endpoint-box :current-project="endpointEditInfos.project" :current-module="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
+    <transition name="right-box">
+      <module-box v-if="rightBox.module.show" :current-project="currentProject" :module="module" @close="closeModuleRightBox" ref="moduleBox"></module-box>
+    </transition>
+    <transition name="right-box">
+      <add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
+    </transition>
+    <transition name="right-box">
+      <edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox"></edit-endpoint-box>
+    </transition>
   </div>
 </template>
 
 <script>
   import exportXLSX from "../../common/exportXLSX";
   import loading from "../../common/loading";
-  import chartDataFormat from "../../charts/chartDataFormat";
-  import bus from '../../../libs/bus'
   import panelTab from '../../common/bottomBox/tabs/panelTab'
 
   export default {
@@ -196,6 +198,11 @@
     },
     data() {
       return {
+        rightBox: {
+          module: {show: false},
+          addEndpoint: {show: false},
+          editEndpoint: {show: false},
+        },
         /*二级页面相关*/
         bottomBox: {
           endpoint: {}, //asset详情
@@ -206,7 +213,7 @@
           showSubList: false,
           targetTab: '',
         },
-        
+
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
         ready: false,
 
@@ -220,17 +227,17 @@
           tablelable: [], //从缓存中加载的table header
           dropCol: [], //自定义列工具的数据
         },
-        
-        
+
+
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
 
-        endpointEditInfos:{
+        endpoint:{
           project:null,
           module:null,
         },
         userData: [],
 
-        editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
+        endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
         endpointTableTitle: [
           {
             label: this.$t("project.endpoint.endpointId"),
@@ -284,15 +291,16 @@
           pageSize: 50,
           total:0
         },
-        currentEndpoint: {},
+        endpoint: {},
 
         currentProjectTitle:'',
         moduleList: [],
         projectList: [],
         pageType:'',//project endpoint
         currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
-        editModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //编辑的module
-        currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //endpoint弹框用来回显module
+        module: {}, //编辑的module
+        blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
+        currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
         endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
         endpointSearchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -437,10 +445,10 @@
           }
         }
       },
-      getProjectList:function(reload){
+      getProjectList(reload) {
         this.$get('project',{pageSize:-1}).then(response=>{
           if(response.code == 200){
-            this.projectList=response.data.list;
+            this.projectList = response.data.list;
             if (reload) {
               if (this.projectList.length > 0) {
                 this.currentProject = this.projectList[0];
@@ -451,41 +459,42 @@
           }
         })
       },
-      getProjectModule:function(projectId){
-        //return [];
-        let moduleList=Object.assign([],this.moduleList);
-        return moduleList.filter((item,index)=>{
-          return item.project.id==projectId;
+      getProjectModule(projectId) {
+        let moduleList = JSON.parse(JSON.stringify(this.moduleList));
+        return moduleList.filter((item,index) => {
+          return item.project.id == projectId;
         })
       },
-      projectChange:function(){
-        //展开后为避免左侧无数据，显示对应project的第一个module下的endpoint
-        // let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
-        // if(currentProjectId != ''){
-        //   currentProjectId=Number.parseInt(currentProjectId);
-        //   let moduleList=this.getProjectModule(currentProjectId);
-        //   this.currentModule=moduleList[0];
-        //   this.currentProject=this.projectList.find((item)=>{
-        //     return item.id == currentProjectId
-        //   })
-        //   this.getEndpointTableData();
-        //   // this.$store.commit('setProject',null)
-        // }
-      },
-      detailProjectInfo:function(event,project){
+      detailProject(event, project) {
         this.pageType = 'project';
-        if(event){
-          if(project){
-            this.currentProject=project;
-            // this.$store.commit('setProject',this.currentProject)
+        if(event) {
+          if(project) {
+            this.currentProject = project;
           }
-          // this.$refs.projectLeft.setActiveNames([]);
-        }else{
-          this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
+        } else {
+          this.currentProjectTitle = this.currentProject.name + "-" + this.currentProject.id;
         }
-        this.currentModule={};
+        this.currentModule = {};
       },
-      getAllModuleList:function(){
+      closeModuleRightBox(refresh) {
+        this.rightBox.module.show = false;
+        if (refresh) {
+          this.getAllModuleList();
+        }
+      },
+      closeAddEndpointRightBox(refresh) {
+        this.rightBox.addEndpoint.show = false;
+        if (refresh) {
+          this.getEndpointTableData();
+        }
+      },
+      closeEditEndpointRightBox(refresh) {
+        this.rightBox.editEndpoint.show = false;
+        if (refresh) {
+          this.getEndpointTableData();
+        }
+      },
+      getAllModuleList() {
         this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.moduleList = response.data.list;
@@ -500,46 +509,39 @@
                 //console.error(response.data.list[i], err);
               }
             }
-            // if (this.moduleList.length > 0) {
-            //   this.currentModule = this.moduleList[0];
-            // } else {
-            //   this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
-            // }
           }
         });
       },
       //左侧module列表选中切换
-      changeModule(module) {
+      changeModule(project, module) {
         this.currentModule = module;
         this.endpointSearchLabel = {moduleId: ''};
         this.$refs.projectSearch.clearSearch();
         this.bottomBox.showSubList = false;
-        this.currentProject = {};
+        this.currentProject = project;
       },
 
       //弹出endpoint编辑页
-      toEditEndpoint(endpoint) {
-        this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
-        this.$set(this.editEndpoint,'projectId',this.currentModule.project.id)
-        this.$set(this.editEndpoint,'moduleId',this.currentModule.id)
+      editEndpoint(endpoint) {
+        this.endpoint = JSON.parse(JSON.stringify(endpoint));
+        this.$set(this.endpoint,'projectId',this.currentModule.project.id)
+        this.$set(this.endpoint,'moduleId',this.currentModule.id)
 
-        this.rightBoxHandler(3);
-        this.$refs.editEndpointBox.toEdit(true, this.editEndpoint.id);
-        if (!this.editEndpoint.paramObj) {
-          this.$set(this.editEndpoint, 'paramObj', []);
+        this.rightBox.editEndpoint.show = true;
+        if (!this.endpoint.paramObj) {
+          this.$set(this.endpoint, 'paramObj', []);
         }
       },
 
-      toCreateEndpoint() {
-        this.endpointEditInfos.project=Object.assign({},this.currentModule.project);
-        this.endpointEditInfos.module=Object.assign({},this.currentModule)
-        this.$refs.addEndpointBox.show(true);
-        this.$refs.addEndpointBox.clearEndpoints();
+      addEndpoint() {
+        this.endpoint.project = Object.assign({},this.currentModule.project);
+        this.endpoint.module = Object.assign({},this.currentModule);
+        this.rightBox.addEndpoint.show = true;
       },
 
       //查看endpoint详情
-      detail(endpoint) {
-        this.currentEndpoint = Object.assign({}, endpoint);
+      detailEndpoint(endpoint) {
+        this.endpoint = Object.assign({}, endpoint);
         this.bottomBox.targetTab = "panel";
         this.bottomBox.showSubList = true;
       },
@@ -559,40 +561,36 @@
         this.$set(module, 'context_name', '');
       },
       //弹出module编辑页
-      toEditModule(module) {
+      editModule(module) {
         this.currentModule = JSON.parse(JSON.stringify(module));
         if (!this.currentModule.paramObj) {
           this.$set(this.currentModule, 'paramObj', []);
         }
-        this.editModule = JSON.parse(JSON.stringify(module));
-        if (!this.editModule.paramObj) {
-          this.$set(this.editModule, 'paramObj', []);
+        this.module = JSON.parse(JSON.stringify(module));
+        if (!this.module.paramObj) {
+          this.$set(this.module, 'paramObj', []);
         }
-        if (this.editModule.snmpParam) {
-          this.initSnmpParam(this.editModule);
+        if (this.module.snmpParam) {
+          this.initSnmpParam(this.module);
         }
-        this.rightBoxHandler(2);
+        this.rightBox.module.show = true;
         this.$nextTick(() => {
           this.$refs.moduleBox.initWalk();
         });
       },
-      toAddModule() {
-        this.editModule = {id: '', type: '', name: '', project: this.currentProject, port: '', path: '', param: '', paramObj: [], snmpParam: ''};
-        this.rightBoxHandler(2);
+      addModule() {
+        this.module = this.newModule();
+        this.rightBox.module.show = true;
         this.$nextTick(() => {
           this.$refs.moduleBox.initWalk();
         });
       },
+      newModule() {
+        return JSON.parse(JSON.stringify(this.blankModule));
+      },
 
-      //asset弹框控制
-      /*tabControl(data) {
-        if (data === 'close') {
-          this.viewAssetState = false
-          this.$refs['assetEditUnit'].tabView = false
-        }
-      },*/
       //搜索
-      endpointSearch: function(searchObj) {
+      endpointSearch(searchObj) {
         let orderBy='';
         if(this.endpointSearchLabel.orderBy){
           orderBy=this.endpointSearchLabel.orderBy
@@ -610,41 +608,6 @@
         this.getEndpointTableData();
       },
 
-      //控制弹框状态 type  1:project; 2:module; 3:editEndponit; 4:addEndpoint;
-      rightBoxHandler(type) {
-        if (type == 1) {
-          this.$refs.projectBox.show(true);
-
-          if (this.$refs.moduleBox) {
-            this.$refs.moduleBox.show(false);
-          }
-          if (this.$refs.editEndpointBox) {
-            this.$refs.editEndpointBox.show(false);
-          }
-          //this.$refs.addEndpointBox.show(false);
-        } else if (type == 2) {
-          this.$refs.moduleBox.show(true,true);
-
-          if (this.$refs.projectBox) {
-            this.$refs.projectBox.show(false);
-          }
-          if (this.$refs.editEndpointBox) {
-            this.$refs.editEndpointBox.show(false);
-          }
-          //this.$refs.addEndpointBox.show(false);
-        } else if (type == 3) {
-          this.$refs.editEndpointBox.show(true);
-          if (this.$refs.projectBox) {
-            this.$refs.projectBox.show(false);
-          }
-          if (this.$refs.moduleBox) {
-            this.$refs.moduleBox.show(false);
-          }
-          //this.$refs.addEndpointBox.show(false);
-        } else if (type == 4) {
-        }
-      },
-
       dateFormat(time) {
         if (!time) {
           return '-';
@@ -660,15 +623,15 @@
         return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
       },
       viewAsset(endpoint) {
-        this.currentEndpoint = Object.assign({}, endpoint);
+        this.endpoint = Object.assign({}, endpoint);
         this.bottomBox.targetTab = 'assetDetail';
         this.bottomBox.showSubList = true;
         /*this.viewAssetState=true;
         this.$refs.assetEditUnit.getAssetData(id);
         this.$refs.assetEditUnit.tabView=true;*/
       },
-      showEndpoint(endpoint) {
-        this.currentEndpoint = Object.assign({}, endpoint);
+      query(endpoint) {
+        this.endpoint = Object.assign({}, endpoint);
         this.bottomBox.targetTab = 'endpointQuery';
         this.bottomBox.showSubList = true;
       },
@@ -914,7 +877,7 @@
         immediate:true,
         handler(n, o) {
           this.currentProject = Object.assign({}, n);
-          this.detailProjectInfo();
+          this.detailProject();
         }
       },
       projectListChange:function(n,o){
@@ -940,7 +903,7 @@
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
-      currentEndpoint: {
+      endpoint: {
         deep: true,
         handler(n) {
           this.bottomBox.endpointDetail = this.convertToDetail(n);