fix:修复endpoint新增、编辑框回显bug

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

@@ -880,6 +880,7 @@ li{
 }
 .right-box-add-endpoint {
   width: 850px;
+  transition: width 200ms;
 }
 .right-box-add-endpoint.right-box-add-endpoint-snmp {
   width: 690px;

nezha-fronted/src/components/common/language/en.js

@@ -41,6 +41,7 @@ const en = {
     changePwd:'Change password',//修改密码
     createChart:'Create chart',
     createProject:'Create project',
+    createEndpoint:'Create Endpoint',
     createAsset:'Create asset',
     createAlertRule:'Create alert rule',
     createAccount:'Create account',

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

@@ -15,7 +15,7 @@
         <el-form class="right-box-form" label-position="top" 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="currentProject" placeholder="" size="small">
+            <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>
@@ -404,7 +404,7 @@
         this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.projectList = response.data.list;
-            this.getModuleList(this.currentProject.id);
+            this.getModuleList(this.currentProjectCopy.id);
           }
         });
       },
@@ -449,6 +449,7 @@
         this.tempParamObj = [];
         this.endpointList = [];
         this.getAssetList();
+        this.getModuleList(project.id);
       },
 
       changeModule(module) {
@@ -482,7 +483,7 @@
         });
         this.assetList.splice(index, 1);
         this.endpointTouch = true;
-        this.endpointForm.projectId = this.currentProject.id;
+        this.endpointForm.projectId = this.currentProjectCopy.id;
         this.endpointForm.moduleId = this.currentModuleCopy.id;
         this.$refs.assetScrollbar.update();
       },
@@ -523,7 +524,7 @@
 
       //保存endpoint
       save() {
-        this.endpointForm.projectId = this.currentProject.id;
+        this.endpointForm.projectId = this.currentProjectCopy.id;
         this.endpointForm.moduleId = this.currentModuleCopy.id;
         if (this.endpointList.length == 0) {
           this.endpointTouch = true;
@@ -593,6 +594,7 @@
       clearEndpoints() {
         this.getAssetList();
         this.endpointList = [];
+        this.assetSearch= {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}
       },
 
       setRowIndex({row, rowIndex}) {
@@ -622,10 +624,9 @@
 
       },
       currentProject(n, o) {
+        this.currentProjectCopy=Object.assign({},n);
         this.endpointForm.projectId = n.id;
-        if(n.id != o.id){
-          this.getModuleList(n.id);
-        }
+        this.getModuleList(n.id);
       },
       currentModule: {
         immediate: true,
@@ -653,7 +654,7 @@
         this.getProjectList();
       },
       moduleListReloadWatch(n, o) {
-        this.getModuleList(this.currentProject.id);
+        this.getModuleList(this.currentProjectCopy.id);
       }
     }
   }

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

@@ -23,15 +23,15 @@
         <el-form class="right-box-form" :model="endpoint" label-position="top" :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="currentProject" 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"></el-option>
+            <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="currentModule" 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"></el-option>
+            <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>
@@ -189,17 +189,18 @@
   export default {
     name: "endpointBox",
     props: {
-      endpoint: Object,
-      currentProject: Object,
-      currentModule: Object
+      postEndpoint: Object,
     },
     data() {
       return {
+        endpoint:null,
         rightBox: {show: false, title: '',isEdit: false},
         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: [],
@@ -230,11 +231,15 @@
       toEdit(show, id) {
         this.rightBox.isEdit = show;
         this.rightBox.show = true;
-        if (show) {
-          this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + id;
-        } else {
-          this.rightBox.title = this.$t("project.endpoint.endpoint") + "  ID：" + id;
-        }
+        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子弹框控制
@@ -309,17 +314,18 @@
       },
 
       //project下拉框点击事件
-      changeProject(project) {
-        this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
-        this.getModuleList(project.id);
+      changeProject(projectId) {
+        this.currentModule = {id: '', name: '', project: {},type:'', port: '', path: '', param: '', paramObj: []};
+        this.getModuleList(projectId);
+        this.endpoint.moduleId='';
       },
 
       //project下拉框点击事件
-      changeModule(module) {
-        this.currentModule = module;
-        this.endpoint.port = module.port;
-        this.endpoint.path = module.path;
-        this.endpoint.paramObj = module.paramObj;
+      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;
       },
 
       // 获取endpoint弹框中的asset子弹框里asset列表数据
@@ -372,7 +378,7 @@
         }
       },
       // 获取endpoint弹框中module下拉框数据
-      getModuleList(projectId) {
+      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++) {
@@ -387,6 +393,9 @@
               }
             }
             this.moduleList = response.data.list;
+            if(setCurModule){
+              this.currentModule=this.moduleList.find(item=>{return item.id == this.endpoint.moduleId});
+            }
           }
         });
       },
@@ -467,7 +476,7 @@
       },
     },
     mounted() {
-      setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
+      // setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
     },
     watch: {
       projectListReloadWatch(n, o) {
@@ -475,7 +484,14 @@
       },
       moduleListReloadWatch(n, o) {
         this.getModuleList(this.currentProject.id);
-      }
+      },
+      postEndpoint:{
+        immediate:true,
+        deep:true,
+        handler(n,o){
+          this.endpoint=Object.assign({},n)
+        },
+      },
     }
   }
 </script>

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

@@ -91,7 +91,7 @@
               class="margin-l-20"
             >
               <template slot="optionZone">
-                <button @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
+                <button @click.stop="toCreateEndpoint" :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>
                 <!--<div class="export-left-btn" @click.stop="toCreateEndpoint">
                   <i class="nz-icon nz-icon-create-square" :title="$t('overall.createProject')" ></i>
@@ -186,8 +186,8 @@
     ></element-set>
 
     <module-box :currentProject="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
-    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
+    <edit-endpoint-box :project="currentProject" :module="currentModule" :post-endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
+    <add-endpoint-box :currentProject="endpointEditInfos.project" :currentModule="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
     <!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl"
                ref="assetEditUnit"></asset-box>-->
   </div>
@@ -223,7 +223,10 @@
         subResizeShow: true,
         mainListHeight: '', //主列表dom的高度
         showSubList: false,
-
+        endpointEditInfos:{
+          project:null,
+          module:null,
+        },
         userData: [],
         showTopBtn: false, //主列表top按钮
         tableHover: false, //控制滚动条和top按钮同时出现
@@ -458,8 +461,8 @@
         // }
       },
       detailProjectInfo:function(event,project){
+        this.pageType='project'
         if(event){
-          this.pageType='project'
           if(project){
             this.currentProject=project;
             // this.$store.commit('setProject',this.currentProject)
@@ -506,6 +509,9 @@
       //弹出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)
+
         this.rightBoxHandler(3);
         this.$refs.editEndpointBox.toEdit(true, this.editEndpoint.id);
         if (!this.editEndpoint.paramObj) {
@@ -514,6 +520,8 @@
       },
 
       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();
       },
@@ -789,6 +797,9 @@
       currentProjectChange() {
         return this.$store.state.currentProject;
       },
+      projectListChange(){
+        return this.$store.state.projectListChange;
+      },
       moduleListReloadWatch() {
         return this.$store.state.moduleListChange;
       },
@@ -800,6 +811,9 @@
           this.detailProjectInfo();
         }
       },
+      projectListChange:function(n,o){
+        this.getProjectList();
+      },
       currentProject(n, o) {
         // this.getModuleList();
         // this.$store.commit('setProject',n)