NEZ-389 feat:asset tag 功能修改

2020-09-08 11:18:18 +08:00
parent aa05a8c111
commit 74cacb33ae
5 changed files with 183 additions and 10 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/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;
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/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() {
-          return this.$store.state.currentProject;
-        },
+        checkedTagCount(){
+          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++) {
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/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-input placeholder="tag" size="mini" v-model="item.tag"></el-input>
+                <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.tag'">
+                  <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-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.value'">
+                  <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;
    }
  }
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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();