Merge remote-tracking branch 'origin/codeCheck' into codeCheck

2020-05-06 19:30:03 +08:00
parent c54e257593 3e58bd4a41
commit e0f26d278d
7 changed files with 163 additions and 136 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1395,10 +1395,10 @@ li{
 .nz-submenu .el-menu--popup .el-menu-item .menu-item-active{
  color:$global-text-color-active !important;
 }
-.el-icon-setting:before {
-  content: "\E6CA";
-  color: #BA3939;
-}
+//.el-icon-setting:before {
+//  content: "\E6CA";
+//  color: #BA3939;
+//}

 .el-dropdown-menu__item:focus,
 .el-dropdown-menu__item:not(.is-disabled):hover,
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -575,7 +575,13 @@ const cn = {
      cabinetNum: "机柜数量",
      assets: "资产",
      remark: "备注",
-      cabinets: "机柜"
+      cabinets: "机柜",
+      traffic:{
+        title:'流量配置',
+        add:'添加',
+        direction:'方向',
+        tags:'标签'
+      }
    },
    model: {
      model: "资产模型",
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -303,7 +303,8 @@ const en = {
    url:'Invalid URL',
    uSize:'Must be number(1 - 47)',
    requiredIdc:'dc is required',
-    key:'Invalid key'
+    key:'Invalid key',
+    repeat:'Repeat'
  },
  search: {
    searchTip: 'Enter to search',//'点击或回车执行搜索'
@@ -562,6 +563,8 @@ const en = {
      traffic:{
        title:'Traffic Setting',
        add:'Add',
+        direction:'Direction',
+        tags:'Tags'
      }
    },
    model: {
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
@@ -3,27 +3,17 @@
    <div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
      <div class="param-box" style="height: calc(100% - 25px)">
        <el-scrollbar style="height: 100%">
-          <!--<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
-            <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
+          <div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
+            <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key" @input="validateInput(item.key,index)" :class="{'input-error':inputKeyErr[index]}"></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="removeTags(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-          </div>-->
-          <el-tag v-for="(item, index) in tempTagsObj" class="sub-box-tags"  size="small" :closable="true" :key="index" @close='delTag(item,index)' @click="editTag(item,index)">
-            <div >{{item.key}}：{{item.value}}</div>
-          </el-tag>
-          <div class="param-box-row" v-show="showNewTagInput">
-            <el-input placeholder="key" style="width: 63px" ref="tagKeyInput" class="param-box-row-key input-x-mini-22" :class="{'input-error':newTagInputError}" v-model="newTag.key" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
-            <span class="param-box-row-eq">=</span>
-            <el-input placeholder="value" style="width: 63px" class="param-box-row-value input-x-mini-22" v-model="newTag.value" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
-          </div>
-          <div v-if="showNewTagInput&&newTagInputError" style="text-align: left;padding-left: 10px">
-            <span  style="color: #F56C6C;font-size: 12px;">{{$t('validate.key')}}</span>
+            <span style="color: #F56C6C;font-size: 12px;" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
          </div>
        </el-scrollbar>
      </div>
      <div class="add-btn">
-<!--        <el-button @click="addTags" 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>-->
+        <el-button @click="addTags" 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>
        <el-button @click="showEditTagsBox(false)"  style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-check"></i></el-button>
      </div>
    </div>
@@ -39,9 +29,7 @@
        tempTagsObj:[],
        rowIndex:0,
        curConfigs:null,
-        newTag:{key:'',value:''},
-        showNewTagInput:true,
-        newTagInputError:false,
+        inputKeyErr:[],
      }
    },
    methods:{
@@ -53,6 +41,7 @@
          this.editTagsBox.top = position.top + 25;
          this.editTagsBox.left = position.left - 48;
          this.tempTagsObj=[];
+          this.inputKeyErr=[];
          let obj=null;
          try{
            obj=configs[index]['tags']
@@ -62,14 +51,19 @@
          if(obj){
            for(let key in obj){
              this.tempTagsObj.push({key:key,value:obj[key]})
+              this.inputKeyErr.push(false);
            }
          }
        } else {
          if (!this.editTagsBox.show) {
            return;
          }
-          this.confirmInput();
-          this.showNewTagInput=true;
+          let temp=this.inputKeyErr.find(item=>{
+            return item == true;
+          })
+          if(typeof temp != "undefined"){
+            return ;
+          }
          let tempObj={};
          for(let i=0;i<this.tempTagsObj.length;i++){
            let obj=this.tempTagsObj[i];
@@ -79,79 +73,27 @@
          }
          this.curConfigs[this.rowIndex]['tags']=Object.assign({},tempObj)
        }
+        this.$emit('after')
        this.editTagsBox.show = show;
      },
-      validateInput:function(){
-        if(this.newTag.key == ''){
-           return false;
-        }
-        if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(this.newTag.key)){
-          this.newTagInputError=true;
-          return false;
-        }
-        if(this.newTag.value == ''){
-          return false;
-        }
-        this.newTagInputError=false;
-        return true;
-      },
-      confirmInput:function(){
-        if(this.validateInput()){
-          this.tempTagsObj.push(Object.assign({},this.newTag));
-          this.showNewTagInput=true;
-          this.newTag={key:'',value:''};
-          this.$nextTick(()=>{
-            this.$refs.tagKeyInput.focus();
-          })
-        }
-      },
-      editTag:function(tag,index){
-        console.log(222)
-        if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
-          this.confirmInput();
-        }
-        this.tempTagsObj.splice(index,1);
-        this.newTag=Object.assign({},tag)
-        this.showNewTagInput=true;
-        this.$nextTick(()=>{
-          this.$refs.tagKeyInput.focus();
-        })
-      },
      addTags:function(){
-        if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
-          this.confirmInput();
+        this.tempTagsObj.push({key:'',value:''})
+        this.inputKeyErr.push(false);
+      },
+      validateInput:function(value,index){
+        if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)){
+          this.inputKeyErr.splice(index,1,true)
+        }else{
+          this.inputKeyErr.splice(index,1,false)
        }
-        this.newTag={key:'',value:''}
-        this.showNewTagInput=true;
-        this.$nextTick(()=>{
-          this.$refs.tagKeyInput.focus();
-        })
      },
-      delTag:function(tag,index){
+      removeTags:function(index){
        this.tempTagsObj.splice(index,1)
-      },
-      clearNewTag:function(){
-        this.newTag={key:'',value:''}
-        this.showNewTagInput=true;
      }
    },
  }
 </script>
-<style>
-  .sub-box-tags{
-    position: relative;
-    margin-bottom: 5px;
-    display: block;
-    width: 150px;
-    margin-left: 10px;
-    text-align: left;
-  }
-  .sub-box-tags .el-tag__close{
-    position: absolute;
-    top: 5px;
-    right: 2px;
-  }
-</style>
+
 <style scoped>
  .right-sub-box {
    width: 170px;
@@ -160,13 +102,6 @@
    z-index: 2;
    padding: 0;
  }
-  .sub-box{
-    padding:5px;
-    text-align: center;
-  }
-  .sub-box .param-box-row{
-    padding:0 10px 0 10px !important;
-  }
  .sub-box .add-btn{
    width: 100%;
    text-align: center;
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -165,10 +165,14 @@
        return valid;
      },
      valiateRepeatFunc:function(host,index){
+        if(host != ''){
          let temp=this.traffic.setting.find((item,i)=>{
            return i != index && item.host == host;
          })
          return typeof temp == "undefined";
+        }else{
+          return true;
+        }
      },
      delAssetSetting:function(index){
        this.uuids.splice(index,1);
@@ -300,7 +304,7 @@
                          direction:[],
                          ifindex:'',
                          ifdescr:' ',
-                          tags:"",
+                          tags:{},
                          edit:true,
                        }
                      ]
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -15,6 +15,7 @@
          :trigger-on-focus="false"
          :highlight-first-item="true"
          @input="hostInputChange"
+          @blur="validateHostEmpty"
        ></el-autocomplete>
        <el-popover trigger="click" placement="bottom" @show="popShow" @hide="popHide" popper-class="no-style-class">
          <div class="mib-browser-ad-search">
@@ -111,6 +112,11 @@
          </button>
        </el-popover>
        <div class="right-box-row-btn" @click="delSelf"><i class="el-icon-minus"></i></div>
+        <div>
+          <span style="color:#F56C6C;font-size: 12px;" v-if="hostRepeat">{{$t('validate.repeat')}}</span>
+          <span style="color:#F56C6C;font-size: 12px;" v-if="hostInvalid">{{$t('validate.host')}}</span>
+          <span style="color:#F56C6C;font-size: 12px;" v-if="hostEmpty">{{$t('validate.required')}}</span>
+        </div>
      </el-form-item>
      <div class="endpoints-box-endpoints">
        <el-table :data="assetSetting.configs"
@@ -122,6 +128,7 @@
                  @row-dblclick="changeRowEditState"
                  @row-click="validateRows"
                  class="taffic-setting-tab"
+                  v-if="refreshTab"
                  style="width: 100%;">
          <el-table-column
            label-class-name="endpoints-box-endpoints-title"
@@ -139,22 +146,34 @@
            </template>
            <template slot-scope="scope" :column="item">
              <template v-if="item.prop == 'tags'">
-                <div style="height: 50px;" @click="showEditTagsBox(true,scope.$index,scope.row,$event)">
-                  <el-scrollbar style="height: 100%;">
+                <div class="tab-tags" @click="showEditTagsBox(true,scope.$index,scope.row,$event)">
+                  <!--<el-scrollbar style="height: 100%;">
                    <el-tag
                      v-for="(value, key, index) in scope.row[item.prop]"
                      class="tab-tags"
                      size="mini"
-                      :closable="scope.row.edit==true"
                      :key="key"
                      style="display: block;margin-bottom:5px;" >
-                      <!--                  <div class="tab-tags-item">-->
-                      <!--                    <div class="tag-item-key">{{key}}：</div><div class="tag-item-value">{{value}}</div>-->
+                      &lt;!&ndash;                  <div class="tab-tags-item">&ndash;&gt;
+                      &lt;!&ndash;                    <div class="tag-item-key">{{key}}：</div><div class="tag-item-value">{{value}}</div>&ndash;&gt;

-                      <!--                  </div>-->
+                      &lt;!&ndash;                  </div>&ndash;&gt;
                      {{key}}：{{value}}
                    </el-tag>
-                  </el-scrollbar>
+                  </el-scrollbar>-->
+                  <el-tooltip placement="top" effect="light" popper-class="tags-pop transparent-pop">
+                    <div slot="content">
+                      <div class="tab-tags-item" v-for="(value, key, index) in scope.row[item.prop]">
+                        <div class="tag-item-key">{{key}}</div>
+                        <div class="tag-item-value">{{value}}</div>
+                      </div>
+                    </div>
+                    <div class="tab-tags-item" v-if="Object.keys(scope.row[item.prop]).length>0">
+                      <div class="tag-item-key">{{Object.keys(scope.row[item.prop])[0]}}</div>
+                      <div class="tag-item-value">{{scope.row[item.prop][Object.keys(scope.row[item.prop])[0]]}}</div>
+                      <div class="tag-item-text" v-if="Object.keys(scope.row[item.prop]).length>1">+{{Object.keys(scope.row[item.prop]).length-1}}</div>
+                    </div>
+                  </el-tooltip>
                </div>
              </template>
              <template v-if="item.prop == 'ifindex'">
@@ -177,10 +196,11 @@
                </template>
              </template>
              <template v-if="item.prop == 'ifdescr'">
-                <span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
+                <!--<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
                <template v-else>
                  <el-input v-model="scope.row[item.prop]" size="small" clearable></el-input>
-                </template>
+                </template>-->
+                <span>{{scope.row[item.prop]}}</span>
              </template>
              <template v-if="item.prop == 'direction'">
                <template v-if="scope.row.edit==false">
@@ -200,7 +220,7 @@
          </el-table-column>
          <el-table-column label="" :width="30">
            <template slot-scope="scope">
-              <el-button @click.stop="delTabRow(scope.$index,scope.row.ifindex)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
+              <el-button @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -208,7 +228,7 @@
          <el-button @click="addTabRow"  style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
        </div>
      </div>
-      <sub-box ref="subBox"></sub-box>
+      <sub-box ref="subBox" @after="refreshTabFunc"></sub-box>
      <loading ref="loading"></loading>
    </div>
 </template>
@@ -235,6 +255,8 @@
        assetValidate:false,
        hostRepeat:false,
        hostInvalid:false,
+        hostEmpty:false,
+        refreshTab:true,
        tableLabels:[
          {
            label:'ifIndex',
@@ -251,14 +273,14 @@
            errRows:[],
          },
          {
-            label:'direction',
+            label:this.$t('config.dc.traffic.direction'),
            prop:'direction',
            width:100,
            required:true,
            errRows:[],
          },
          {
-            label:'tags',
+            label:this.$t('config.dc.traffic.tags'),
            prop:'tags',
            required:false,
            errRows:[],
@@ -283,6 +305,12 @@
      clearAssetInput:function(){
        this.resetComponet();
      },
+      refreshTabFunc:function(){
+        this.refreshTab=false;
+        this.$nextTick(()=>{
+          this.refreshTab=true;
+        });
+      },
      resetComponet:function(){
        this.ifIndexList=[];
        this.assetSetting.assetId=null;
@@ -401,15 +429,15 @@
      },
      ifIndexInputChange:function(ifindex,row,index){
        if(this.ifIndexList && this.ifIndexList.length>0){
-          let temp=this.ifIndexList.find(item=>{
-            return item.value == ifindex;
-          })
-          if(!temp){
-            this.ifIndexError=true;
-            return ;
-          }else{
-            this.ifIndexError=false;
-          }
+          // let temp=this.ifIndexList.find(item=>{
+          //   return item.value == ifindex;
+          // })
+          // if(!temp){
+          //   this.ifIndexError=true;
+          //   return ;
+          // }else{
+          //   this.ifIndexError=false;
+          // }
          this.ifIndexChange(ifindex,row)
          let tmp=this.assetSetting.configs.find((item,i)=>{
            return i != index && item.ifindex == ifindex;
@@ -429,12 +457,20 @@
          clearTimeout(this.hostTimer);
        }
        this.hostTimer=setTimeout(()=>{
-          this.queryInterfaceInfos(true);
          this.validateHostRepeat(value);
          this.validateHostValid(value);
-        },1000)
+          if(!this.hostEmpty&&!this.hostRepeat&&!this.hostInvalid){
+            this.queryInterfaceInfos(true);
+          }
+        },500)
+      },
+      validateHostEmpty:function(){
+        this.hostEmpty=!this.assetSetting.host||this.assetSetting.host == '';
      },
      validateHostValid:function(host){
+        if(host==''){
+          return false
+        }
        const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
        if (hostReg.test(host)) {
          this.hostInvalid=false;
@@ -478,6 +514,18 @@
            if(required &&(!value || (typeof value =='string' && value == '')||(value instanceof Array && value.length<1))){
              validateFlag=false
              label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
+            }else{
+              if(label.prop == 'ifindex'){
+                if(this.ifIndexList && this.ifIndexList.length>0) {
+                  let temp = this.ifIndexList.find(item => {
+                    return item.value == value;
+                  })
+                  if(!temp){
+                    validateFlag=false
+                    label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
+                  }
+                }
+              }
            }
          })
        })
@@ -507,15 +555,18 @@
            direction:[],
            ifindex:null,
            ifdescr:' ',
-            tags:"",
+            tags:{},
            edit:true,
          })
        }
      },
-      delTabRow:function(index,ifindex){
+      delTabRow:function(index,row){
        if(this.assetSetting.configs.length>1){
-          this.assetSetting.configs.splice(index,1)
-          this.changeIfIndexOccupyState(ifindex,false)
+          this.assetSetting.configs.splice(index,1);
+          if(row.edit == true && this.ifIndexError == true){
+            this.ifIndexError=false;
+          }
+          this.changeIfIndexOccupyState(row.ifindex,false)
        }
      },
      resetIfIndexOccupyState:function(){
@@ -578,17 +629,36 @@
 </style>
 <style lang="scss">
  .tab-tags{
-    /*border: 0px;*/
-    /*padding: 0;*/
-    /*display: inline-block;*/
-    /*border-radius: 2px;*/
-    /*width: 100px;*/
+    width: 100%;
+    height: 22px;
  }
-  .tab-tags .tab-tags-item{
+  .tags-pop{
+    width: 110px;
+    text-align: center;
+  }
+  .tab-tags-item{
    display: flex;
+    margin-bottom: 5px;
+    height: 20px;
+    line-height: 20px;
  }
  .tab-tags-item .tag-item-key{
-    /*background-color: #E6E4E4;*/
+    border:1px solid #E6E4E4;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    background-color: #E6E4E4;
+    width: 52px;
+  }
+  .tab-tags-item .tag-item-value{
+    border:1px solid #E6E4E4;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #FFF;
+    width: 52px;
+  }
+  .tab-tags-item .tag-item-text{
+    background-color: #FFF;
+    width: 20px;
  }
  .taffic-setting-tab .el-table__row:hover{
    .input__inner{
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -47,6 +47,10 @@
                      class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
                <i class="nz-icon-create-square nz-icon"></i>
              </button>
+<!--              <button type="button" @click="listLanguage" :title="$t('overall.createDatacenter')"-->
+<!--                      class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" >-->
+<!--                <i class="nz-icon-create-square nz-icon"></i>-->
+<!--              </button>-->
            </div>
            <div class="pagination-top pagination-top-hide display-none"></div>
          </div>
@@ -79,7 +83,7 @@
                  &nbsp;
                  <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
                  &nbsp;
-                  <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id" ><i class="el-icon-s-tools"></i></span>
+                  <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="el-icon-setting"></i></span>
                </div>
                <template v-else-if="item.prop == 'principal'">
                  <template v-if="scope.row.principal">
@@ -148,6 +152,7 @@
  var vm;
  import bus from '../../../libs/bus';
  import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
+  import util from "./util";
  export default {
    name: "dc",
    components:{
@@ -252,6 +257,10 @@
      }
    },
    methods: {
+      listLanguage:function(){
+        util.methods.listLanguage();
+        console.log(util.data().languageList)
+      },
      elementsetShow(s, e) {
        var eventfixed = {
          shezhi: 0,