feat: 新功能、bug修复

新功能：
1.顶部菜单的Create按钮：Project、Module；
2.Project页：除Endpoint新增、Metrics列表外的功能；
BUG修复：
1.Config、Project、Alert各个后台交互操作都加上了成功、失败提示；
2.Config-Account：列表、弹框增加了删除功能
3.Config-PromServer：弹框中DC下拉框删除功能可以用了
4.Project：Endpoint列表--编辑--Host子弹框，优化了一下asset列表交互

nezha-fronted/src/assets/css/main.css

@@ -222,6 +222,7 @@ html {
   text-align: center;
 }
 .right-box-top-btn {
+  text-align: center;
   border-radius: 0 0 9px 9px;
   float: right;
   color: #656565;

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

@@ -29,11 +29,11 @@
                 </el-menu-item>
                 <el-submenu index="2">
                     <template slot="title">
-                        <div @click="jumpToProject('project', projectData[0])">{{$t('overall.project')}}</div>
+                        <div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
                     </template>
                     <template v-for="(item, index) in projectData">
                         <el-menu-item :index="'2-' + index.toString()">
-                            <div @click="jumpToProject('project', item)">
+                            <div @click="jumpToProject(item)">
                               <span>{{item.name}}</span>
                               <div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
                             </div>
@@ -109,7 +109,7 @@
 
         <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
         <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
-        <endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></endpoint-box>
+        <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></edit-endpoint-box>
 
     </div>
 </template>
@@ -123,7 +123,7 @@ export default {
       assetData: [],
       projectData: [], //顶部菜单project列表中的数据
       editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
-      currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project，此处固定为空对象
+      currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
       editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
       currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
       editEndpoint: { //新增/编辑的endpoint
@@ -182,42 +182,19 @@ export default {
         this.editProject = {id: '', name: '', remark: ''};
       } else if (item.type == 2) {
         this.$refs.moduleBox.show(true);
-        this.editModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
+        this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
       } else if (item.type == 3) {
-        this.$refs.endpointBox.show(true);
+        //this.$refs.endpointBox.show(true);
       }
-      /*this.jumpTo(item.url);
-      setTimeout(() =>{
-        if (item.type == 1) {
-          if (this.projectData.length > 0) {
-            this.$store.commit('setProject', this.projectData[0]);
-          }
-          this.$store.commit('toCreateProject', true);
-          this.$store.commit('projectRightBoxShow', true);
-        } else if (item.type == 2) {
-          if (this.projectData.length > 0) {
-            this.$store.commit('setProject', this.projectData[0]);
-          }
-          this.$store.commit('toCreateModule', true);
-        } else if (item.type == 3) {
-          if (this.projectData.length > 0) {
-            this.$store.commit('setProject', this.projectData[0]);
-          }
-          this.$store.commit('toCreateEndpoint', true);
-        } else if (item.type == 5) {
-          this.$store.commit('projectRightBoxShow', false);
-          this.$store.commit('toCreateAlertConfig', true);
-        }
-      }, 120);*/
     },
     jumpToAsset(data, id) {
       this.$store.state.assetData.moduleData = data;
       this.$store.state.assetData.selectedData = id;
       this.jumpTo(data);
     },
-    jumpToProject(data, p) {
+    jumpToProject(p) {
       this.$store.commit('setProject', p);
-      this.jumpTo(data);
+      this.jumpTo('project');
     },
     changeLocal(lang) {
       localStorage.setItem("language", lang);
@@ -230,7 +207,7 @@ export default {
         }
       })
     },
-    getProjectData() {
+    getProjectList() {
       this.$get('project', {}).then(response => {
         if (response.code == 200) {
           this.projectData = response.data.list;
@@ -242,12 +219,12 @@ export default {
       this.editProject = Object.assign({}, p);
     },
     projectReload() {
-      this.getProjectData();
+      this.getProjectList();
     }
   },
   mounted() {
     this.getAssetData();
-    this.getProjectData();
+    this.getProjectList();
   },
   computed: {
     projectListReloadWatch() {
@@ -257,8 +234,8 @@ export default {
   watch: {
     projectListReloadWatch(n, o) {
       if (n) {
-        this.getProjectData();
+        this.getProjectList();
-        this.$store.commit('projectListReloadChange', false);
+        this.$store.commit('projectListChange', false);
       }
     }
   }

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

@@ -9,14 +9,20 @@
           </div>
           <span>{{$t('overall.esc')}}</span>
         </div>
-        <div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
+        <div v-if="!rightBox.isEdit" class="right-box-top-btn right-box-top-btn-full" @click="toEdit(true)">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-edit-outline"></i>
+          </div>
+          <span>{{$t('overall.edit')}}</span>
+        </div>
+        <div v-if="rightBox.isEdit" class="right-box-top-btn right-box-top-btn-full" @click="save">
           <div class="right-box-btn-icon">
             <i class="el-icon-edit-outline"></i>
           </div>
           <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
           <span v-else>{{$t('overall.edit')}}</span>
         </div>
-        <div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del()">
+        <div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del">
           <div class="right-box-btn-icon">
             <i class="el-icon-delete"></i>
           </div>
@@ -35,7 +41,7 @@
         <div class="right-box-form-row">
           <div class="right-box-form-label">{{$t("project.project.project")}}</div>
           <div class="right-box-form-content">
-            <el-select @change="((val) => {getToSelectModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
+            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" v-if="rightBox.isEdit" size="small">
               <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
@@ -46,7 +52,7 @@
           <div class="right-box-form-label">{{$t("project.module.module")}}</div>
           <div class="right-box-form-content">
             <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" v-if="rightBox.isEdit" size="small">
-              <el-option v-for="item in toSelectModuleData" :key="item.id" :label="item.name" :value="item"></el-option>
+              <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
           </div>
@@ -62,7 +68,7 @@
               v-model="endpoint.host"
               size="small"
             ></el-input>
-            <div @click="showSubBox" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
+            <div @click="showSubBox(true)" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
               <span class="el-icon-more"></span>
             </div>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
@@ -102,14 +108,17 @@
             <el-button v-if="rightBox.isEdit" class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
           </div>
           <div class="right-box-form-content">
-            <div class="param-box param-box-endpoint">
+            <div class="param-box param-box-endpoint" v-if="rightBox.isEdit">
-              <div class="param-box-row" v-for="(item, index) in paramObj">
+              <div class="param-box-row" v-for="(item, index) in endpoint.paramObj">
                 <el-input :disabled="!rightBox.isEdit" placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
                 <span class="param-box-row-eq">=</span>
                 <el-input :disabled="!rightBox.isEdit" placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
                 <span v-if="rightBox.isEdit" class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
               </div>
             </div>
+            <div v-else class="right-box-form-content-txt">
+              <div v-for="(item, index) in endpoint.paramObj">{{item.key}}={{item.value}}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -117,9 +126,76 @@
 
       <!-- begin--底部按钮-->
       <div class="right-box-bottom-btns">
-        <div @click="esc" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+        <div @click="esc" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{$t('overall.save')}}</div>
       </div>
       <!-- end--底部按钮-->
+
+      <!-- begin--子弹框-->
+      <transition name="right-sub-box">
+        <div class="right-sub-box" @click.stop v-if="subBox.show">
+          <!-- begin--标题-->
+          <div class="right-box-title">{{subBox.title}}</div>
+          <!-- end--标题-->
+            <div class="right-box-top-btn right-box-top-btn-full" @click="subEsc">
+              <div class="right-box-btn-icon">
+                <i class="el-icon-close"></i>
+              </div>
+              <span>{{$t('overall.esc')}}</span>
+            </div>
+          <!-- begin--搜索框-->
+          <el-input placeholder="" v-model="assetSearch.text">
+            <template slot="prepend">
+              <div class="endpoint-asset-prepend">
+                <div class="endpoint-asset-label">
+                  <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
+                  <span @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
+                  <i v-if="assetSearch.dropdownShow" class="el-icon-arrow-up"></i>
+                  <i v-if="!assetSearch.dropdownShow" class="el-icon-arrow-down"></i>
+                </span>
+                </div>
+                <div class="endpoint-asset-dropdown" v-if="assetSearch.dropdownShow">
+                  <div @click="dropdownSelect('IP')" class="endpoint-asset-dropdown-item">IP</div>
+                  <div @click="dropdownSelect('SN')" class="endpoint-asset-dropdown-item">SN</div>
+                </div>
+              </div>
+            </template>
+            <template slot="append"><i @click="searchAsset" class="el-icon-search"></i></template>
+          </el-input>
+          <!-- 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">
+              <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 @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>
+          <!-- end--table-->
+        </div>
+      </transition>
+      <!-- end--子弹框-->
     </div>
   </transition>
 </template>
@@ -134,23 +210,58 @@
     },
     data() {
       return {
+        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
+        projectList: [],
+        moduleList: [],
+        assetList: []
+      }
+    },
+    methods: {
+      show(show) {
+        this.rightBox.show = show;
+      },
+
+      toEdit(show) {
+        this.rightBox.isEdit = show;
+      },
+
+      //endpoint弹框中asset子弹框控制
+      showSubBox(show) {
+        this.subBox.show = show;
+      },
+
+      /*关闭弹框*/
+      esc() {
+        this.rightBox.show = false;
+        this.subBox.show = false;
+      },
+
+      /*关闭子弹框*/
+      subEsc() {
+        this.subBox.show = false;
+      },
+
       // 清除param
-        clearAllParam: function() {
+      clearAllParam() {
-          this.module.paramObj = [];
+        this.endpoint.paramObj = [];
       },
 
       // 新增param
-        addParam: function() {
+      addParam() {
-          this.module.paramObj.push({key: '', value: ''});
+        this.endpoint.paramObj.push({key: '', value: ''});
       },
 
       // 移除单个param
-        removeParam: function(index) {
+      removeParam(index) {
-          this.module.paramObj.splice(index, 1);
+        this.endpoint.paramObj.splice(index, 1);
       },
 
       //将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 + '"');
@@ -162,6 +273,125 @@
           return jsonString;
         }
       },
+
+      /*获取project列表*/
+      getProjectList() {
+        this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            this.projectList = response.data.list;
+          }
+        });
+      },
+
+      // 获取endpoint弹框中的asset子弹框里asset列表数据
+      getAssetList(currentPage) {
+        if (currentPage) {
+          this.assetPageObj.pageNo = currentPage;
+        } else {
+          this.assetPageObj.pageNo = 1;
+        }
+        this.$get('asset', this.assetPageObj).then(response => {
+          if (response.code === 200) {
+            this.assetList = response.data.list;
+            this.assetPageObj.total = response.data.total;
+          }
+        });
+      },
+
+      //endpoint弹框中的asset子弹框搜索
+      searchAsset() {
+        if (this.assetSearch.label == 'IP') {
+          this.assetSearch.host = this.assetSearch.text;
+          this.assetSearch.sn = '';
+        } else if (this.assetSearch.label == 'SN') {
+          this.assetSearch.sn = this.assetSearch.text;
+          this.assetSearch.host = '';
+        }
+        this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch);
+        this.getAssetList(false);
+      },
+
+      // endpoint弹框中的asset子弹框里asset选择事件
+      selectAsset(obj) {
+        this.selectedAsset = obj;
+        this.endpoint.host = obj.host;
+        this.endpoint.assetId = obj.id;
+      },
+
+      // 获取endpoint弹框中module下拉框数据
+      getModuleList(projectId) {
+        this.$get('module', {projectId: projectId}).then(response => {
+          if (response.code === 200) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              try {
+                let tempObj = JSON.parse(response.data.list[i].param);
+                response.data.list[i].paramObj = [];
+                for (let k in tempObj) {
+                  response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+                }
+              } catch(err) {
+                console.info(response.data.list[i], err);
+              }
+            }
+            this.moduleList = response.data.list;
+          }
+        });
+      },
+
+      //保存endpoint
+      save() {
+        this.endpoint.moduleId = this.currentModule.id;
+        this.endpoint.projectId = this.currentProject.id;
+        this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
+        this.$put('endpoint', this.endpoint).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.esc();
+            this.$emit("reload");
+          } else {
+            this.$message.error(response.msg);
+          }
+        });
+      },
+
+      //删除endpoint
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          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;
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      // endpoint弹框的asset子弹框顶部搜索条件选中事件
+      dropdownSelect(label) {
+        this.assetSearch.label = label;
+        this.assetSearch.dropdownShow = false;
+      },
+    },
+    created() {
+      this.getProjectList();
+      this.getAssetList();
+    },
+    mounted() {
+      this.getModuleList(this.currentProject.id);
+    },
+    watch: {
+      endpoint(n, o) {
+        if (n && n.id) {
+          this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + n.id;
+        } else {
+          this.rightBox.title = this.$t("project.endpoint.createEndpoint");
+        }
       }
     }
   }
@@ -242,4 +472,95 @@
     right: 1px;
   }
   /* end--param*/
+  /* begin--子弹框*/
+  .right-sub-box {
+    width: 380px;
+    height: 520px;
+    position: absolute;
+    right: 80px;
+    z-index: 2;
+    padding: 0 10px;
+  }
+  .right-sub-box .el-input-group {
+    width: 227px;
+    float: right;
+    margin: 7px 0 0 0;
+  }
+  /* begin--搜索框*/
+  .endpoint-asset-prepend {
+    border-radius: 4px 0 0 4px;
+  }
+  .endpoint-asset-label {
+    line-height: 26px;
+    height: 26px;
+  }
+  .endpoint-asset-dropdown {
+    position: absolute;
+    top: 27px;
+    background-color: #656565;
+    border-radius: 4px;
+    width: 52px;
+    left: 0;
+  }
+  .endpoint-asset-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-dropdown-item:hover {
+    background-color: #3a8ee6;
+  }
+  /* end--搜索框*/
+  /* begin--table*/
+  .endpoint-sub-table {
+    margin-top: 25px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: 45%;
+    padding-left: 10px;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+  }
+  /* end--table*/
+
+  /* end--子弹框*/
 </style>

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

@@ -1,7 +1,6 @@
 <template>
   <transition name="right-box">
     <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
-      <el-scrollbar style="height: 100%">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
@@ -103,7 +102,6 @@
         <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
       </div>
       <!-- end--底部按钮-->
-      </el-scrollbar>
     </div>
   </transition>
 </template>
@@ -140,7 +138,7 @@
         if (this.module.id) {
           this.$put('module', this.module).then(response => {
             if (response.code === 200) {
-              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
               this.$emit("reload");
               this.rightBox.show = false;
             } else {
@@ -151,7 +149,7 @@
           this.module.projectId = this.module.project.id;
           this.$post('module', this.module).then(response => {
             if (response.code === 200) {
-              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
               this.$emit("reload");
               this.rightBox.show = false;
             } else {
@@ -168,15 +166,15 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("project?ids=" + this.project.id).then(response => {
+          this.$delete("module?ids=" + this.module.id).then(response => {
             if (response.code === 200) {
-              this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
               this.rightBox.show = false;
               this.$emit("reload");
             } else {
               this.$message.error(response.msg);
             }
-          })
+          });
         });
       },
 
@@ -186,12 +184,14 @@
           if (response.code === 200) {
             this.projectList = response.data.list;
             if (this.currentProject && this.currentProject.id) {
-              for (let i = 0; i < this.projectList.length; i++) {
+              /*for (let i = 0; i < this.projectList.length; i++) {
                 if (this.projectList[i].id == this.currentProject.id) {
                   this.currentProject = this.projectList[i];
                   break;
                 }
-              }
+              }*/
+            } else {
+
             }
           }
         });

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

@@ -84,7 +84,7 @@
         if (this.project.id) {
           this.$put('project', this.project).then(response => {
             if (response.code === 200) {
-              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
               this.$emit("reload");
               this.rightBox.show = false;
             } else {
@@ -94,7 +94,7 @@
         } else {
           this.$post('project', this.project).then(response => {
             if (response.code === 200) {
-              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
               this.$emit("reload");
               this.rightBox.show = false;
             } else {
@@ -113,7 +113,7 @@
         }).then(() => {
           this.$delete("project?ids=" + this.project.id).then(response => {
             if (response.code === 200) {
-              this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
               this.rightBox.show = false;
               this.$emit("reload");
             } else {

nezha-fronted/src/components/page/alert/config.vue

@@ -81,7 +81,7 @@
                         <span v-else-if="item.prop == 'type'">
                             <template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
                         </span>
-                        <span v-else-if="item.prop == 'linkObject'">{{scope.row[item.prop].name}}</span>
+                        <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row[item.prop].name}}</span>
                         <span v-else>{{scope.row[item.prop]}}</span>
                     </template>
                 </el-table-column>
@@ -508,15 +508,21 @@ export default {
       if (this.alertRule.id) {
         this.$put('alert/rule', this.alertRule).then(response => {
           if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
             this.getTableData();
-            this.rightBox.isEdit = false;
+            this.rightBox.show = false;
+          } else {
+            this.$message.error(response.msg);
           }
         });
       } else {
         this.$post('alert/rule', this.alertRule).then(response => {
           if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
             this.getTableData();
-            this.rightBox.isEdit = false;
+            this.rightBox.show = false;
+          } else {
+            this.$message.error(response.msg);
           }
         });
       }

nezha-fronted/src/components/page/config/account.vue

@@ -90,7 +90,8 @@
                             <el-switch
                               v-model="scope.row.status"
                               active-value="1"
-                              inactive-value="0">
+                              inactive-value="0"
+                              @change="(val)=>{statusChange(scope.row)}">
                             </el-switch>
                         </span>
                         <span v-else>{{scope.row[item.prop]}}</span>
@@ -117,7 +118,7 @@
                         <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
                         <span v-else>{{$t('overall.edit')}}</span>
                     </div>
-                    <div class="right-box-top-btn" v-if="rightBox.isEdit && user.userId != ''">
+                    <div class="right-box-top-btn" v-if="rightBox.isEdit && user.userId != ''" @click="del(user)">
                         <div class="right-box-btn-icon">
                             <i class="el-icon-delete"></i>
                         </div>
@@ -360,6 +361,22 @@ export default {
       this.rightBox.show = true;
     },
     del: function(u) {
+      this.$confirm(this.$t("tip.confirmDelete"), {
+        confirmButtonText: this.$t("tip.yes"),
+        cancelButtonText: this.$t("tip.no"),
+        type: 'warning'
+      }).then(() => {
+        this.$delete("sys/user/delete?userIds=" + u.userId).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+            this.rightBox.show = false;
+            this.getTableData();
+          } else {
+            this.$message.error(response.msg);
+          }
+        });
+      });
+
     },
     detail: function(u) {
       this.user = Object.assign({}, u);
@@ -387,11 +404,27 @@ export default {
       this.rightBox.show = true;
     },
     save: function() {
-      this.$post('sys/user/update', this.user).then(response => {
+      if (this.user.userId) {
+        this.$put('sys/user/update', this.user).then(response => {
           if (response.code === 200) {
-          this.rightBox.isEdit = false;
+            this.rightBox.show = false;
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+          } else {
+            this.$message.error(response.msg);
+          }
+          this.getTableData();
+        });
+      } else {
+        this.$post('sys/user/save', this.user).then(response => {
+          if (response.code === 200) {
+            this.rightBox.show = false;
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.getTableData();
+          } else {
+            this.$message.error(response.msg);
           }
         });
+      }
     },
     saveOrToEdit: function() {
       if (!this.rightBox.isEdit) {
@@ -401,6 +434,10 @@ export default {
         this.save();
       }
     },
+    statusChange: function(user) {
+      this.user = user;
+      this.save();
+    },
     jumpTo(data,id) {
       this.$store.state.assetData.moduleData = data;
       this.$store.state.assetData.selectedData = id;

nezha-fronted/src/components/page/config/promServer.vue

@@ -92,7 +92,7 @@
                         <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
                         <span v-else>{{$t('overall.edit')}}</span>
                     </div>
-                    <div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
+                    <div @click="del(promServer)" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
                         <div class="right-box-btn-icon">
                             <i class="el-icon-delete"></i>
                         </div>
@@ -282,9 +282,7 @@ export default {
           disabled: false
         }],
       },
-      searchLabel: { //搜索参数
+      searchLabel: {}, //搜索参数
-
-      },
     }
   },
   methods: {
@@ -302,8 +300,9 @@ export default {
       }).then(() => {
         this.$delete("promServer?ids=" + u.id).then(response => {
           if (response.code === 200) {
-            this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
             this.getTableData();
+            this.rightBox.show = false;
           } else {
             this.$message.error(response.msg);
           }
@@ -326,17 +325,23 @@ export default {
       if (this.promServer.id) {
         this.$put('promServer', this.promServer).then(response => {
           if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
             this.getTableData();
             this.rightBox.isEdit = false;
             this.esc();
+          } else {
+            this.$message.error(response.msg);
           }
         });
       } else {
         this.$post('promServer', this.promServer).then(response => {
           if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
             this.getTableData();
             this.rightBox.isEdit = false;
             this.esc();
+          } else {
+            this.$message.error(response.msg);
           }
         });
       }
@@ -384,7 +389,21 @@ export default {
     },
     toDelIdc: function(item) {
       this.blurEditIdc();
-      //TODO 请求后台，删除
+      this.$confirm(this.$t("tip.confirmDelete"), {
+        confirmButtonText: this.$t("tip.yes"),
+        cancelButtonText: this.$t("tip.no"),
+        type: 'warning'
+      }).then(() => {
+        this.$delete("idc?ids=" + item.id).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+            this.getTableData();
+            this.getIdcData();
+          } else {
+            this.$message.error(response.msg);
+          }
+        });
+      });
     },
     getIdcData: function() {
       this.$get('idc', this.pageObj).then(response => {

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

@@ -3,6 +3,15 @@
     <div class="content-left">
       <div class="sidebar-title">{{currentProject.name}}</div>
       <div class="sidebar-info">
+        <div
+          v-for="item in moduleList"
+          class="sidebar-info-item"
+          :class="{'sidebar-info-item-active': item.id == currentModule.id}"
+          @click="changeModule(item)"
+        >
+          {{item.name}}
+          <div class="side-bar-menu-edit" @click.stop="toEditModule(item)"><i class="el-icon-edit-outline"></i></div>
+        </div>
       </div>
     </div>
 
@@ -12,11 +21,11 @@
           <el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
             <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
           </el-button>
-          <el-button @click="" class="top-tool-btn top-tool" size="mini">
+          <el-button disabled @click="" class="top-tool-btn top-tool" size="mini">
             <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
           </el-button>
         </el-button-group>
-        <el-button @click.stop="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
+        <el-button disabled @click.stop="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
           <span><i class="el-icon-plus"></i></span>
           <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
         </el-button>
@@ -35,15 +44,18 @@
           :label="item.label"
         >
           <template slot-scope="scope" :column="item">
-            <span v-if="item.prop == 'asset'">{{scope.row[item.prop].host}}</span>
+            <span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
+            <span v-else-if="item.prop == 'param'">
+              <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
+            </span>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
         <el-table-column :label="$t('overall.option')" width="100">
           <template slot-scope="scope" :column="item">
             <div class="content-right-options">
-              <span @click.stop="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
+              <span @click.stop="endpointDetail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
-              <span @click.stop="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
+              <span @click.stop="toEditEndpoint(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
             </div>
           </template>
         </el-table-column>
@@ -51,17 +63,17 @@
       <Pagination :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="Pagination"></Pagination>
     </div>
 
-    <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
+    <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
+    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndPointTableData" ref="editEndpointBox"></edit-endpoint-box>
   </div>
 </template>
 
 <script>
-import projectBox from '../../common/rightBox/projectBox';
 export default {
   name: "project2",
   data() {
     return {
-      endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: ''},
+      editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
       endpointTableTitle: [
         {
           label: this.$t("project.endpoint.endpointId"),
@@ -97,27 +109,30 @@ export default {
         total:0
       },
       moduleList: [],
+      projectList: [],
       currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
       editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
       currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
-
+      searchLabel: {moduleId: ''}, //endpoint搜索参数
     }
   },
   methods: {
     getEndPointTableData() {
-      this.$get('endpoint', this.endpointPageObj).then(response => {
+      this.searchLabel.moduleId = this.currentModule.id;
+      this.$set(this.searchLabel, 'pageNo', this.endpointPageObj.pageNo);
+      this.$set(this.searchLabel, 'pageSize', this.endpointPageObj.pageSize);
+      this.$get('endpoint', this.searchLabel).then(response => {
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
             try {
-              var tempObj = JSON.parse(response.data.list[i].param);
+              let tempObj = JSON.parse(response.data.list[i].param);
-            } catch (err) {
-              console.info(response.data.list[i]);
-              console.info(err);
-            }
               response.data.list[i].paramObj = [];
               for (let k in tempObj) {
                 response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
               }
+            } catch (err) {
+              console.info(response.data.list[i], err);
+            }
           }
           this.endpointTableData = response.data.list;
           this.endpointPageObj.total = response.data.total;
@@ -132,9 +147,150 @@ export default {
       this.endpointPageObj.pageSize = val;
       this.getEndPointTableData();
     },
+
+    // 获取左侧module列表数据
+    getModuleList() {
+      //若currentProject不存在（如页面刷新了），默认取project列表的第一个
+      if (this.currentProject && this.currentProject.id) {
+        this.$get('module', {projectId: this.currentProject.id, pageSize: 999, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            this.moduleList = response.data.list;
+            for (let i = 0; i < this.moduleList.length; i++) {
+              try {
+                let tempObj = JSON.parse(this.moduleList[i].param);
+                this.$set(this.moduleList[i], 'paramObj', []);
+                for (let k in tempObj) {
+                  this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
+                }
+              } catch (err) {
+                console.info(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: []};
+            }
+          }
+        });
+      } else {
+        if (this.projectList && this.projectList.length > 0) {
+          this.$store.commit('setProject', this.projectList[0]);
+        } else {
+          this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
+            if (response.code == 200) {
+              this.projectList = response.data.list;
+              if (this.projectList.length > 0) {
+                this.getModuleList();
+              } else {
+                return;
+              }
+            }
+          });
+        }
+      }
+    },
+
+    //左侧module列表选中切换
+    changeModule(module) {
+      this.currentModule = module;
+    },
+
+    //弹出endpoint编辑页
+    toEditEndpoint(endpoint) {
+      this.rightBoxHandler(3);
+      this.$refs.editEndpointBox.toEdit(true);
+      this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
+    },
+
+    toCreateEndpoint() {
+      
+    },
+
+    //查看endpoint详情
+    endpointDetail(endpoint) {
+      this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
+      this.rightBoxHandler(3);
+      this.$refs.editEndpointBox.toEdit(false);
+    },
+
+    //弹出module编辑页
+    toEditModule(module) {
+      console.info(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.rightBoxHandler(2);
+    },
+    
+    //控制弹框状态 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);
+
+        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) {
+      }
+    }
   },
   created() {
+    this.currentProject = this.$store.state.currentProject;
+    this.getModuleList();
+  },
+  mounted() {
+    setTimeout(()=>{
       this.getEndPointTableData();
+    }, 200);
+  },
+  computed: {
+    currentProjectChange() {
+      return this.$store.state.currentProject;
+    }
+  },
+  watch: {
+    currentProjectChange(n, o) {
+      this.currentProject = Object.assign({}, n);
+    },
+    currentProject(n, o) {
+      this.getModuleList();
+    },
+    currentModule(n, o) {
+      if (n && n.id) {
+        this.getEndPointTableData();
+      } else {
+        this.endpointTableData = [];
+      }
+    }
   }
 }
 </script>

nezha-fronted/src/main.js

@@ -18,13 +18,13 @@ import Pagination from "./components/common/pagination"; //引入全局分页组
 import searchInput from "./components/common/searchInput"; //搜索框组件
 import projectBox from './components/common/rightBox/projectBox'; //project弹框组件
 import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
-import endpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
+import editEndpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
 Vue.component("project-box", projectBox);
 Vue.component("module-box", moduleBox);
-Vue.component("endpoint-box", endpointBox);
+Vue.component("edit-endpoint-box", editEndpointBox);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;

nezha-fronted/src/store/index.js

@@ -8,11 +8,11 @@ const store = new Vuex.Store({
       selectedData:'',
       moduleData:'',
     },
-    projectData: {
+    currentProject: {
       id: '',
-      name: ''
+      name: '',
+      remark: ''
     },
-    projectBoxShow: false,
     projectListReload: false,
     createProject: false,
     createModule: false,
@@ -23,13 +23,12 @@ const store = new Vuex.Store({
   },
   mutations: {
     setProject(state, project) {
-      state.projectData = Object.assign({}, project);
+      state.currentProject = Object.assign({}, project);
-      state.projectBoxShow = false;
     },
     projectRightBoxShow(state, show) {
       state.projectBoxShow = show;
     },
-    projectListReloadChange(state, reload) {
+    projectListChange(state, reload) {
       state.projectListReload = reload;
     },
     toCreateProject(state, status) {