feat:traffic setting 交互调整

nezha-fronted/src/components/common/js/validate.js

@@ -6,7 +6,6 @@ export function host(rule, value, callback) {
     callback();
   }
   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})?$/
-  console.log(value)
   setTimeout(() => {
     if (hostReg.test(value)) {
       callback()

nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue

@@ -9,7 +9,7 @@
             <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)'>
+          <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">
@@ -106,6 +106,7 @@
         }
       },
       editTag:function(tag,index){
+        console.log(222)
         if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
           this.confirmInput();
         }

nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue

@@ -19,7 +19,7 @@
           <el-form-item :label="$t('config.dc.dc')" size="small">
             <el-input :disabled="true" v-model="dcObj.name"></el-input>
           </el-form-item>
-          <traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" ></traffic-setting-tab>
+          <traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" :validate-repeat-func="valiateRepeatFunc"></traffic-setting-tab>
           <button @click="addAssetSetting" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" style="margin:5px 1px">{{$t('config.dc.traffic.add')}}</button>
         </el-form>
       </el-scrollbar>
@@ -164,6 +164,12 @@
         }
         return valid;
       },
+      valiateRepeatFunc:function(host,index){
+        let temp=this.traffic.setting.find((item,i)=>{
+          return i != index && item.host == host;
+        })
+        return typeof temp == "undefined";
+      },
       delAssetSetting:function(index){
         this.uuids.splice(index,1);
         this.traffic.setting.splice(index,1)
@@ -192,10 +198,13 @@
             setting:[],
           }
           this.traffic.setting.forEach(assetSetting=>{
-            let assetId=assetSetting.assetId;
             assetSetting.configs.forEach(config=>{
               let settingItem={
-                assetId:assetId,
+                host:assetSetting.host,
+                port:assetSetting.port,
+                community:assetSetting.community,
+                version:assetSetting.version,
+                auth:assetSetting.auth,
                 direction:config.direction.toString(),
                 ifindex:config.ifindex,
                 ifdescr:config.ifdescr,
@@ -260,7 +269,7 @@
                   configs.forEach(item=>{
                     let config={
                       direction:item.direction&&item.direction!=''?item.direction.split(','):[],
-                      ifindex:item.ifindex,
+                      ifindex:item.ifindex+'',
                       ifdescr:item.ifdescr,
                       tags:item.tags,
                       edit:false,
@@ -289,7 +298,7 @@
                       configs:[
                         {
                           direction:[],
-                          ifindex:null,
+                          ifindex:'',
                           ifdescr:' ',
                           tags:"",
                           edit:true,

nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue

@@ -6,8 +6,10 @@
         </el-select>-->
         <el-autocomplete
           clearable
+          :class="{'input-error':hostInvalid || hostRepeat}"
           class="asset-input right-box-row-with-btn"
           v-model="assetSetting.host"
+          popper-class="no-style-class"
           :fetch-suggestions="queryAssetHosts"
           :debounce="1000"
           :trigger-on-focus="false"
@@ -137,7 +139,7 @@
             </template>
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'tags'">
-                <div style="height: 50px;">
+                <div style="height: 50px;" @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]"
@@ -145,7 +147,6 @@
                       size="mini"
                       :closable="scope.row.edit==true"
                       :key="key"
-                      @click="showEditTagsBox(true,scope.$index,$event)"
                       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>-->
@@ -163,18 +164,23 @@
 <!--                    <el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>-->
 <!--                  </el-select>-->
                   <el-autocomplete
-                    v-model.number="scope.row[item.prop]"
+                    v-model="scope.row[item.prop]"
+                    :class="{'input-error':isError(item.errRows,scope.$index)||ifIndexError,'transparent-pop':assetSetting.host == ''}"
                     :fetch-suggestions="loadIfIndex"
                     :debounce="300"
                     :trigger-on-focus="true"
+                    popper-class="no-style-class"
                     size="mini"
                     :highlight-first-item="true"
-                    @input="ifIndexInputChange"
+                    @input="ifIndexInputChange(scope.row[item.prop],scope.row,scope.$index)"
                   ></el-autocomplete>
                 </template>
               </template>
               <template v-if="item.prop == 'ifdescr'">
-                <span >{{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>
               <template v-if="item.prop == 'direction'">
                 <template v-if="scope.row.edit==false">
@@ -184,8 +190,8 @@
                 <template v-else>
                   <el-checkbox-group :disabled="assetSetting.host == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">
                     <div class="input__inner">
-                      <el-checkbox label="rx"></el-checkbox>
-                      <el-checkbox label="tx"></el-checkbox>
+                      <el-checkbox label="rx">RX</el-checkbox>
+                      <el-checkbox label="tx" >TX</el-checkbox>
                     </div>
                   </el-checkbox-group>
                 </template>
@@ -210,6 +216,7 @@
 <script>
   import subBox from "./subBox";
   import loading from "../../loading";
+  import vm from "../../../../main";
   export default {
     name: "assetConfigTab",
     components:{
@@ -220,21 +227,24 @@
       index:{},
       postAssetList:{type:Array,required:true},
       assetSetting:{type:Object},
+      validateRepeatFunc:{type:Function},
     },
     data(){
       return {
         assetList:[],
         assetValidate:false,
+        hostRepeat:false,
+        hostInvalid:false,
         tableLabels:[
           {
-            label:'ifindex',
+            label:'ifIndex',
             prop:'ifindex',
             width:90,
             required:true,
             errRows:[],
           },
           {
-            label:'ifdescr',
+            label:'ifDescr',
             prop:'ifdescr',
             width:100,
             required:false,
@@ -329,7 +339,7 @@
             })
 
             this.ifIndexList=ifIndexList.map(item=>{
-              return {label:item.value,value:Number.parseInt(item.value),isOccupy:false};
+              return {label:item.value,value:item.value,isOccupy:false};
             })
 
             let ifDescrList=resultList.filter(item=>{
@@ -343,13 +353,20 @@
           }else{
             // this.$refs.loading.endLoading();
             console.error(response);
-            this.$message.error(response.msg)
+            // this.$message.error(response.msg)
           }
         })
 
       },
       loadIfIndex:function(queryString,cb){
-        cb(this.ifIndexList);
+        let result=Object.assign([],this.ifIndexList);
+        result=result.filter(item=>{
+          let temp=this.assetSetting.configs.find(c=>{
+            return c.ifindex == item.value;
+          })
+          return typeof temp == "undefined";
+        })
+        cb(result)
       },
       queryAssetHosts:function(queryString,cb){
         let param={
@@ -382,32 +399,59 @@
       handleInputConfirm:function(){
 
       },
-      ifIndexInputChange:function(value){
+      ifIndexInputChange:function(ifindex,row,index){
         if(this.ifIndexList && this.ifIndexList.length>0){
           let temp=this.ifIndexList.find(item=>{
-            return item.value == Number.parseInt(value);
+            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;
           })
+          if(tmp){
+            this.ifIndexError=true;
+            return ;
+          }else{
+            this.ifIndexError=false;
+          }
+        }else{
+          this.ifIndexError=false;
         }
       },
       hostInputChange:function(value){
-        console.log('input change')
         if(this.hostTimer){
           clearTimeout(this.hostTimer);
         }
         this.hostTimer=setTimeout(()=>{
-          console.log('lazy loading')
-          this.queryInterfaceInfos();
+          this.queryInterfaceInfos(true);
+          this.validateHostRepeat(value);
+          this.validateHostValid(value);
         },1000)
       },
-
+      validateHostValid:function(host){
+        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;
+        } else {
+          this.hostInvalid=true;
+        }
+      },
+      validateHostRepeat:function(host){
+        if(!this.validateRepeatFunc(host,this.index)){
+          this.hostRepeat=true;
+        }else{
+          this.hostRepeat=false;
+        }
+      },
       changeRowEditState:function(row,column,event){
         if(this.validateRows()){
-          this.commitAdd(true);
+          this.commitAdd(false);
           if(row.edit == true){
             this.$set(row,'edit',false)
           }else{
@@ -437,7 +481,9 @@
             }
           })
         })
-
+        if(this.ifIndexError){
+          validateFlag=false;
+        }
         return validateFlag;
       },
       isError:function(columnErrRows,rowIndex){
@@ -489,15 +535,15 @@
       delSelf:function(){
         this.$emit('delSelf',this.index)
       },
-      showEditTagsBox:function(show,index,e){
-        if(this.assetSetting.host != ''){
+      showEditTagsBox:function(show,index,row,e){
+        if(this.assetSetting.host != '' && row.edit == true){
           this.$refs.subBox.showEditTagsBox(show,this.assetSetting.configs,index,e);
         }
       },
     },
     mounted() {
-      if(this.assetSetting&&this.assetSetting.assetId){
-        this.queryInterfaceInfos(this.assetSetting.assetId,true);
+      if(this.assetSetting&&this.assetSetting.host&&this.assetSetting.host != ''){
+        this.queryInterfaceInfos(true);
       }
     }
   }