feat：添加顶部搜索选择

2021-10-12 16:53:59 +08:00
parent b591445d91
commit 133275d66d
8 changed files with 271 additions and 32 deletions
--- a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
+++ b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
@@ -0,0 +1,151 @@
+<template>
+  <div style="line-height: 32px;">
+    <div style="display: inline-block;margin-right: 20px" v-for="(item,index) in detailSearchListCopy" :key='index'>
+      <span class="search-title">{{item.label}}:</span>
+      <span>
+            <el-dropdown
+              type="primary"
+              :trigger="'click'"
+              :hide-on-click="false"
+            >
+              <div>
+                <div class="detail-top-search">
+                   <span v-for="(item2,index2) in searchDetailObj[item.key]" :key="item2" class="search-value">
+                  {{item.children.find(dc=>dc.id==item2).name}}<span v-if="index2+1 !== searchDetailObj[item.key].length">,</span>
+                </span>
+                </div>
+                <i class="nz-icon nz-icon-arrow-down search-value"/>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="detail-top-search-dropdown">
+                <span @click="searchDetailObj[item.key] = []" class="clear-all-select">{{$t('overall.clearAllSelect')}}</span>
+                 <el-checkbox-group v-model="searchDetailObj[item.key]">
+                    <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" :title="item3.name">
+                      <el-checkbox :label="item3.id">{{item3.name}}</el-checkbox>
+                    </el-dropdown-item>
+                 </el-checkbox-group>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detailViewTopSearch',
+  props: {
+    detailSearchList: {
+      /*
+      * project: {
+          label: 'Project', // 显示的label
+          key: 'projectIds', // 搜索使用的key
+          type: 'checkBox', // 类型
+          children: []      // 需要展示的子集
+          showMore: false, // 是否需要显示更多
+          index: 最大宽度的个数, // 是否需要显示更多
+        },
+      * */
+      type: Object,
+      default () {
+        return {
+          project: {
+            label: 'Project', // 显示的label
+            key: 'projectIds', // 搜索使用的key
+            type: 'checkBox', // 类型
+            children: [], // 需要展示的子集
+            show: false,
+            showMore: false,
+            index: 10 // 是否需要显示更多
+          }
+        }
+      }
+    },
+    searchDetailObj: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      detailSearchListCopy: {}
+    }
+  },
+  watch: {
+    detailSearchList: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        console.log(n)
+        this.detailSearchListCopy = JSON.parse(JSON.stringify(n))
+      }
+    },
+    searchDetailObj: {
+      deep: true,
+      handler (n) {
+        console.log(n, 123123123)
+        this.$emit('reload', n)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .search-title {
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 14px;
+    font-weight: 600;
+  }
+  .search-value{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 14px;
+    font-weight: 400;
+  }
+  .detail-top-search {
+    display: inline-block;
+    vertical-align: bottom;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    margin-left: 5px;
+  }
+</style>
+<style lang="scss">
+  .detail-top-search-dropdown{
+    max-height: 300px;
+    overflow-y: auto;
+    .el-dropdown-menu__item{
+      padding: 0;
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+      .el-checkbox{
+        width: calc(100% - 20px);
+        height: 36px;
+        padding: 0 0 0 20px;
+        display: flex;
+        align-items: center;
+        .el-checkbox__label{
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .clear-all-select{
+    padding-left: 42px;
+    padding: 0 20px;
+    color: #0052cc;
+    font-size: 12px;
+  }
+  .clear-all-select:hover{
+    text-decoration: underline;
+  }
+</style>
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -4,15 +4,17 @@
    <ul class="detail-row-box">
      <li v-for="(item,index) in tableData" :key="index" class="detail-row" @click="detailViewRightShow(item)" :class="item.id === detailViewRightObj.id ? 'selected' : ''">
        <div class="detail-row-info">
-          <div class="asset-manageIp">
+          <div class="asset-manageIp" :title="item.name">
            <el-popover :content="$t('asset.assetStatPre')+(item.pingInfo.lastUpdate?utcTimeToTimezoneStr(item.pingInfo.lastUpdate):$t('asset.assetStatDown'))" v-if="item.pingInfo" placement="right" trigger="hover">
-          <span slot="reference">
-            <span :class="{'active-icon green-bg':item.pingInfo.status == 1,'active-icon red-bg':item.pingInfo.status == 0}"></span>
-          </span>
+            <span slot="reference">
+              <span :class="{'active-icon green-bg':item.pingInfo.status == 1,'active-icon red-bg':item.pingInfo.status == 0}"></span>
+            </span>
            </el-popover>
-            {{item.manageIp}}
+            <span v-else style="display: inline-block;width: 13px">
+            </span>
+            {{item.name}}
          </div>
-          <div class="asset-name">{{item.name}}</div>
+          <div class="asset-name" :title="item.manageIp">{{item.manageIp}}</div>
        </div>
      </li>
    </ul>
@@ -135,10 +137,14 @@ export default {
  .detail-row-info{
    display: flex;
    height: 100%;
+    width: calc(100% - 15px);
    justify-content:center;
    flex-direction: column;
    > div{
      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
    }
  .asset-manageIp{
    font-size: 16px;
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
@@ -332,7 +332,7 @@ export default {
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
 .arrow-down {
  transform: rotate(0);
  transition: all linear .2s;
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -157,7 +157,8 @@ const cn = {
    oid: 'OID格式校验错误',
    normal: '正常',
    unusual: '不正常',
-    AuthenticationFailed: '认证失败'
+    AuthenticationFailed: '认证失败',
+    clearAllSelect: '清除选择的内容'
  },
  setup: {
    step0: '欢迎',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -162,7 +162,8 @@ const en = {
    oid: 'OID format check error',
    normal: 'Up',
    unusual: 'Down',
-    AuthenticationFailed: 'Authentication failed'
+    AuthenticationFailed: 'Authentication failed',
+    clearAllSelect: 'Clear the selection'
  },
  pageSize: '/page',
  setup: {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -1,7 +1,6 @@
 import bus from '@/libs/bus'
 import { tableSet } from '@/components/common/js/tools'
 import { fromRoute } from '@/components/common/js/constants'
-import { object } from 'cytoscape/src/is'
 export default {
  data () {
    return {
@@ -312,7 +311,6 @@ export default {
        this.$refs.dataTable.$refs.dataTable.doLayout()
      })
    }
-
  },
  beforeDestroy () {
    if (this.scrollbarWrap) {
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -4,7 +4,8 @@ export default {
    return {
      detailType: 'list',
      detailViewRightObj: '',
-      detailViewLoading: false
+      detailViewLoading: false,
+      detailTimer: ''
    }
  },
  created () {
@@ -31,16 +32,51 @@ export default {
        this.$refs.clickSearch && this.$refs.clickSearch.needMore()
      }, 100)
    },
-    searchDetail (params) {
+    searchDetail (searchObj) {
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (typeof searchObj[item] !== 'undefined' && searchObj[item] !== null && searchObj[item] !== '') {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (this.searchDetailObj) {
+        for (const item in this.searchDetailObj) {
+          if (typeof this.searchDetailObj[item] !== 'undefined' && this.searchDetailObj[item] !== null && this.searchDetailObj[item] !== '') {
+            if (this.searchDetailObj[item].join(',') !== '') {
+              this.$set(this.searchLabel, item, this.searchDetailObj[item].join(','))
+            }
+          }
+        }
+      }
+      if (this.$refs.dataTable) {
+        this.$refs.dataTable.$refs.dataTable.bodyWrapper.scrollTop = 0
+      }
      this.getDetail()
    },
+    searchDetailTop () {
+      if (!this.detailTimer) {
+        this.detailTimer = setTimeout(() => {
+          this.searchDetail()
+          clearTimeout(this.detailTimer)
+          this.detailTimer = ''
+        }, 1000)
+      } else {
+        clearTimeout(this.detailTimer)
+        this.detailTimer = setTimeout(() => {
+          this.searchDetail()
+          clearTimeout(this.detailTimer)
+          this.detailTimer = ''
+        }, 1000)
+      }
+    },
    getDetail () {
      const params = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      this.tools.loading = true
-      this.$get(this.url, { ...params }).then(response => {
+      this.$get(this.url, { ...this.searchLabel, ...params }).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
          this.tableData = response.data.list
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -89,23 +89,7 @@
      @changeDetailType="changeDetailType"
    >
      <template v-slot:top-tool-left>
-        <div style="display: inline-block">
-          <span>Data center :</span>
-          <span>
-            <el-dropdown
-              type="primary"
-              @command="changeDetailType">
-              <button class="top-tool-btn table-column-setting"
-                      type="button">
-
-                <i class="nz-icon nz-icon-arrow-down" />
-              </button>
-              <el-dropdown-menu slot="dropdown" >
-                <el-dropdown-item :command="[item.id,dc]" v-for="(item,index) in dcData" :key="index"><el-checkbox ></el-checkbox>{{item.name}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </span>
-        </div>
+        <detailViewTopSearch :searchDetailObj.sync="searchDetailObj" :detailSearchList="detailSearchList" @reload="searchDetailTop" />
      </template>
      <template v-slot:top-tool-right>
        <button id="asset-create-asset" v-has="'asset_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="add">
@@ -196,6 +180,7 @@ import assetDetail from '@/components/common/detailView/list/asset/assetDetail'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'

 export default {
  name: 'asset',
@@ -209,7 +194,8 @@ export default {
    topToolMoreOptions,
    alertSilenceBox,
    nzDetailView,
-    assetDetail
+    assetDetail,
+    detailViewTopSearch
  },
  mixins: [dataListMixin, detailViewMixin],
  data () {
@@ -365,6 +351,57 @@ export default {
        ping: [],
        modelIds: [],
        fields: ''
+      },
+      detailSearchList: {
+        dc: {
+          label: this.$t('overall.dc'),
+          key: 'dcIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        type: {
+          label: this.$t('overall.type'),
+          key: 'typeIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        ping: {
+          label: 'ping',
+          key: 'ping',
+          type: 'checkBox',
+          children: [
+            { key: 'Down', id: 0, name: 'Down' },
+            { key: 'Up', id: 1, name: 'Up' }
+          ],
+          show: true,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        model: {
+          label: this.$t('asset.model'),
+          key: 'modelIds',
+          type: 'dropdownCheckBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        }
+      },
+      searchDetailObj: {
+        dcIds: [],
+        typeIds: [],
+        ping: [],
+        modelIds: []
      }
    }
  },
@@ -405,6 +442,7 @@ export default {
          if (response.code === 200) {
            resolve(response.data.list.map(d => { return { ...d, value: d.id } }))
            // this.titleSearchList.type.children = response.data.list.map(d => { return { ...d, value: d.id } })
+            // this.detailSearchList.type.children = response.data.list.map(d => { return { ...d, value: d.id } })
          }
          resolve()
        })
@@ -551,19 +589,27 @@ export default {
    // 初始化数据
    this.getModelData().then(res => {
      this.titleSearchList.model.children = res
+      this.detailSearchList.model.children = res
      this.titleSearchList.model.show = true
+      this.detailSearchList.model.show = true
    })
    this.getTypeData().then(res => {
      this.titleSearchList.type.children = res
+      this.detailSearchList.type.children = res
      this.titleSearchList.type.show = true
+      this.detailSearchList.type.show = true
    })
    this.getDcData().then(res => {
      this.titleSearchList.dc.children = res
+      this.detailSearchList.dc.children = res
      this.titleSearchList.dc.show = true
+      this.detailSearchList.dc.show = true
    })
    this.getSearchableMetaData().then(res => {
      this.titleSearchList.assetLabel.children = res
+      this.detailSearchList.assetLabel.children = res
      this.titleSearchList.assetLabel.show = true
+      this.detailSearchList.assetLabel.show = true
    })
    this.getStateData()
    this.getTypeTreeData()