NEZ-389 feat:asset tag 功能修改

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

@@ -472,6 +472,9 @@ li{
   padding-top: 24px;
   font-size: 14px;
 }
+.orange-font{
+  color:#FA901C;
+}
 .content-left .sidebar-info-item {
   line-height: 20px;
   padding: 0 0 0 10px;

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

@@ -8,14 +8,17 @@
           v-for="(item,index) in custom"
           :key="index"
           class="custom-label"
-          :class="!allowedAll&&!item.allowed && (index==0 || index == 1 || item.NotSet) ? 'custom-label-disabled' : ''"
           @click="handler(item,index)"
           :id="'element-set-el-'+index"
+          :class="{'custom-title orange-font':item.type == 'title','custom-label-disabled':!allowedAll&&!item.allowed && (index==0 || index == 1 || item.NotSet)}"
         >
           <i class="el-icon-check" v-if="!allowedAll&&!item.allowed&&(index==0||index==1||item.visibility=='disabled')"></i>
           <i v-else class="el-icon-check" v-show="item.show"></i>
           <span>{{item.label}}</span>
         </div>
+
+
+
       </el-scrollbar>
     </div>
     <div class="custom-bottom-btns">
@@ -160,6 +163,9 @@ export default {
   cursor: default;
   font-size: 14px;
 }
+.custom-title{
+  padding: 2px 0 2px 2px;
+}
 .custom-label-disabled {
   cursor: not-allowed;
   background: #f1f3f4;

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

@@ -101,6 +101,28 @@
                 </el-checkbox-group>
               </el-collapse-item>
             </el-collapse>
+            <!--tag 过滤-->
+            <div class="sidebar-title too-long-split orange-font">
+              Tag
+            </div>
+            <el-collapse v-model="activeTag" class="left-menu-bg">
+              <el-collapse-item :name="item.key" :title="item.key" v-for="item in tagData">
+                <el-checkbox-group v-model="tagCheckList" size="small" >
+                  <el-checkbox class="sidebar-info-item"  v-for="tag in item.values" :key="tag.value" :label="tag.value" @change="changeTagCheckBox(item,tag.value)">
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="tag.value.length > 14" trigger="hover" placement="top-start" :content="tag.value" >
+                        <span slot="reference">{{tag.value}}</span>
+                      </el-popover>
+                      <span v-else>{{tag.value}}</span>
+                    </div>
+                    <el-tooltip :content="''+tag.total" placement="top" effect="light" :disabled="tag.total<99">
+                      <el-badge class="mark" :value="tag.total" :max="99"/>
+                    </el-tooltip>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+            </el-collapse>
+
           </template>
           <template v-else>
             <div v-for="menu in $CONSTANTS.staticMenus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)">
@@ -151,6 +173,7 @@
 
           //asset相关
           activeType: 'dataCenter',
+          activeTag:'',
           dcData: [],
           dcCheckList: [],
           assetTypeData: [],
@@ -159,6 +182,10 @@
           vendorCheckList: [],
           pingData: [],
           pingCheckList: [],
+          tagData:[],
+          tagCheckList:[],
+          tagCheckMap:{},
+          lastCheckSize:0,
           assetPingSwitch:true,
         }
       },
@@ -183,9 +210,9 @@
             return "";
           }
         },
-        currentProjectChange() {
+        checkedTagCount(){
-          return this.$store.state.currentProject;
+          return this.tagCheckList.length;
-        },
+        }
       },
       watch: {
         route: {
@@ -410,6 +437,9 @@
                   item.value = item.status;
                   return item;
                 });
+
+                this.tagData = response.data.tag
+
               }
               resolve();
             });
@@ -444,7 +474,35 @@
             bus.$emit("asset-filter-change", "pingStates", "");
           }
         },
+        changeTagCheckBox(tag,value){
+          console.log(tag,value,this.tagCheckList)
+          let checked=this.tagCheckMap[tag.key];
+          if(!checked){
+            checked=[];
+          }
+          if(this.lastCheckSize < this.tagCheckList.length){
+            checked.push(value)
+          }else{
+            let index=checked.findIndex(item=>{
+              return item == value
+            })
+            checked.splice(index,1)
+          }
 
+          if(checked.length>0){
+            this.tagCheckMap[tag.key] = checked;
+          }else{
+            if(this.tagCheckMap[tag.key]){
+              delete this.tagCheckMap[tag.key]
+            }
+          }
+          this.lastCheckSize = this.tagCheckList.length;
+          if(Object.keys(this.tagCheckMap).length > 0){
+            bus.$emit("asset-filter-change", "tags", JSON.stringify(this.tagCheckMap));
+          }else{
+            bus.$emit("asset-filter-change", "tags", '');
+          }
+        },
         indOf(a, b) {
           let c = [];
           for (let i = 0; i < a.length; i++) {

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

@@ -96,11 +96,11 @@
             </div>
             <el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
               <div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
-                <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.tag'">
+                <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.tag'">
-                  <el-input placeholder="tag" size="mini" v-model="item.tag"></el-input>
+                  <el-autocomplete placeholder="tag" size="mini" v-model="item.tag" :fetch-suggestions="filterKey" @blur="loadValues(item)" @select="loadValues" popper-class="no-style-class"></el-autocomplete>
                 </el-form-item>
-                <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
+                <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.value'">
-                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                  <el-autocomplete placeholder="value" size="mini" v-model="item.value" :fetch-suggestions="filterValue" popper-class="no-style-class"></el-autocomplete>
                 </el-form-item>
                 <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
               </div>
@@ -251,7 +251,10 @@
         formData:null,
         accountValidResult: true,
         changeProtocolSwitch: true,
-        exporterDisableSwitch: false
+        exporterDisableSwitch: false,
+        tagKeys:[],
+        tagValues:[],
+        tagValuesCache:new Map(),
       }
     },
     watch: {
@@ -618,13 +621,61 @@
         }else{
           this.exporterDisableSwitch = false;
         }
+      },
+      loadKeys:function(){
+        this.$get('/asset/tagKey').then(res=>{
+          if(res.code == 200){
+            this.tagKeys = res.data.list.map(item=>{
+                return {value:item}
+              })
           }
+        })
+      },
+      loadValues:function(tag){
+        let tagVal=tag.tag && tag.tag!=''?tag.tag:tag.value
+        if(!tagVal || tagVal ==''){this.tagValues=[]; return; }
+
+        let value = this.tagValuesCache.get(tagVal)
+        if(!value){
+          value = [];
+          this.$get('/asset/tagValue?key='+tagVal).then(res => {
+            if(res.code == 200){
+              value = res.data.list.map(item=>{
+                return {value:item}
+              })
+
+              this.tagValues=Object.assign([],value)
+              this.tagValuesCache.set(tag.tag,Object.assign([],value))
+            }
+          })
+        }else{
+          this.tagValues=Object.assign([],value)
+        }
+      },
+      filterKey:function(input,callback){
+        if(!input || input == ''){
+          callback(this.tagKeys)
+        }else{
+          let result=this.tagKeys.filter(item=>{return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1})
+          callback(result)
+        }
+      },
+      filterValue:function(input,callback){
+        console.log(this.tagValues)
+        if(!input || input == ''){
+          callback(this.tagValues)
+        }else{
+          let result=this.tagValues.filter(item=>{return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1})
+          callback(result)
+        }
+      },
     },
     mounted() {
       this.getUserData();
       this.getVendorData();
       this.getAssetTypeData();
       this.getDcData();
+      this.loadKeys();
       this.showAccountOp = false;
     }
   }

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

@@ -59,6 +59,10 @@
           :prop="$tableSet.propTitle(item.prop,'asset')"
           :sort-orders="['ascending', 'descending']"
         >
+          <template slot-scope="scope" slot="header">
+            <span v-if="item.type == 'tag'"><span>{{item.label}}</span><span style="color:orange;">&nbsp;[Tag]</span></span>
+            <span v-else><span>{{item.label}}</span></span>
+          </template>
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop=='ID'">
               <span>{{scope.row.id}}</span>
@@ -118,6 +122,9 @@
           <div v-if="item.prop=='tel'">
             <span>{{scope.row.idc.tel}}</span>
           </div>
+          <template v-if="item.prop == 'tags'">
+            <span>{{filterTags(scope)}}</span>
+          </template>
           <template v-if="item.prop == 'option'">
             <span :title="$t('overall.view')" @click.stop="detail(scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
               class="el-icon-view"></i>
@@ -358,6 +365,7 @@
         },
 
         assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
+        tagKeys:[],
       }
     },
     watch: {
@@ -497,6 +505,7 @@
         if (refresh) {
           this.getTableData();
           bus.$emit('asset-list-change')
+          this.loadKeys();
         }
       },
       pageNo(val) {
@@ -642,6 +651,47 @@
         this.$nextTick(()=>{
           bus.$emit(event,param)
         })
+      },
+      loadKeys:function(){
+        this.$get('/asset/tagKey').then(res=>{
+          if(res.code == 200){
+            this.tagKeys = res.data.list.map(item=>{
+              return {label:item,prop:'tags',show:false,allowed: true,type:'tag'}
+
+            })
+            this.resetTableTitle()
+          }
+        })
+      },
+      resetTableTitle:function(){
+        let title = this.tools.customTableTitle;
+
+        let tableTitle = title.slice(0,this.tableTitle.length);
+
+        let tagTitle = title.slice(this.tableTitle.length,title.length);
+
+        let $self=this;
+        let newTags = this.tagKeys.filter(item=>{ return !tagTitle.find(t =>{return item.label == t.label})})
+        let keepTags = tagTitle.filter(item=>{ return $self.tagKeys.find(t =>{return item.label == t.label})})
+
+        let result = tableTitle.concat([{label:'Tag',show:false,NotSet:true,type:'title',prop:'table-tag'}])
+
+        result = result.concat(keepTags).concat(newTags)
+
+        this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
+
+      },
+      filterTags:function(scope){
+        console.log(scope)
+        let tag=scope.column.label.split(' [Tag]')[0]
+        let tagVals=scope.row.tags
+        if(tagVals){
+          console.log('tags',tagVals,tag)
+          let showTag=tagVals.find(item=>{return item.tag == tag})
+          if(showTag){
+            return showTag.value
+          }
+        }
       }
     },
 
@@ -672,6 +722,11 @@
         }
       }
       this.tools.customTableTitle = tableTitle;
+
+      this.loadKeys();
+
+      console.log('load end')
+
       //初始化数据
       this.getUserData();
       this.getTableData();