fix：修改顶部搜索样式

2021-10-18 17:40:21 +08:00
parent 2c0d6dbf93
commit 42854089b9
5 changed files with 68 additions and 28 deletions
--- a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
+++ b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
@@ -1,16 +1,17 @@
 <template>
  <div style="line-height: 32px;">
-    <div class="search-detail-box" :class="[selectValue[item.key].length?'select-dropdown':'',detailSearchListCopy[key].dropShow?'show-my-dropdpwn':'']" v-for="(item,key) in detailSearchListCopy" :key='key'>
-      <span class="search-detail-title"  v-if="!selectValue[item.key].length">{{item.label}} :</span>
+    <div class="search-detail-box" :class="[selectValue[item.key].length?'select-dropdown':'',detailSearchListCopy[key].dropShow?'show-my-dropdpwn':'']" v-for="(item,key) in detailSearchListCopy" :key='key' v-show="item.children.length">
      <span v-if="item.type === 'checkBox'">
            <el-dropdown
+              :placement="'bottom-start'"
              class="detail-dropdown"
              type="primary"
              :trigger="'click'"
              :hide-on-click="false"
              @visible-change="(val)=>{showDropDown(val, key)}"
            >
-              <div>
+              <div style="padding-left: 10px;">
+                <span class="search-detail-title"  v-if="!selectValue[item.key].length">{{item.label}} :</span>
                <div class="detail-top-search" v-if="selectValue[item.key].length">
                   <span v-for="(item2,index2) in selectValue[item.key]" :key="item2" class="search-value">
                  {{item.oldChildren.find(dc=>dc.id==item2).name}}<span v-if="index2+1 !== selectValue[item.key].length">,</span>
@@ -33,13 +34,15 @@
          </span>
      <span v-else-if="item.type === 'dropdownCheckBox'&& key !== 'assetLabel'">
            <el-dropdown
+              :placement="'bottom-start'"
              class="detail-dropdown"
              type="primary"
              :trigger="'click'"
              :hide-on-click="false"
              @visible-change="searchStr = detailSearchListCopy[key].searchStr"
            >
-              <div>
+             <div style="padding-left: 10px;">
+                <span class="search-detail-title"  v-if="!selectValue[item.key].length">{{item.label}} :</span>
                <div class="detail-top-search" v-if="selectValue[item.key].length">
                   <span v-for="(item2,index2) in selectValue[item.key]" :key="item2" class="search-value">
                  {{getSearchStr(item.oldChildren,item2)}}<span v-if="index2+1 !== selectValue[item.key].length">,</span>
@@ -63,13 +66,15 @@
          </span>
      <span v-else-if="item.type === 'dropdownCheckBox'&& key === 'assetLabel'">
            <el-dropdown
+              :placement="'bottom-start'"
              class="detail-dropdown"
              type="primary"
              :trigger="'click'"
              :hide-on-click="false"
              @visible-change="searchStr = detailSearchListCopy[key].searchStr"
            >
-              <div>
+              <div style="padding-left: 10px;">
+                <span class="search-detail-title"  v-if="!selectValue[item.key].length">{{item.label}} :</span>
                <div class="detail-top-search" v-if="selectValue[item.key].length">
                   <span v-for="(item2,index2) in selectValue[item.key]" :key="item2" class="search-value">
                  {{getSearchStr(item.oldChildren,item2,key)}}<span v-if="index2+1 !== selectValue[item.key].length">,</span>
@@ -196,7 +201,6 @@ export default {
    display: inline-block;
    margin-right: 20px;
    transition: background-color .1s ease-out;
-    padding-left: 10px;
    border-radius: 2px;
  }
  .search-detail-box:hover{
@@ -230,6 +234,7 @@ export default {
    letter-spacing: 0;
    line-height: 14px;
    font-weight: 600;
+    margin-right: 10px;
  }
  .search-value{
    font-size: 14px;
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
@@ -22,7 +22,7 @@
                      type="button">
                <i class="nz-icon nz-icon-detail-view" />
              </button>
-              <el-dropdown-menu slot="dropdown" >
+              <el-dropdown-menu slot="dropdown"  class="right-public-box-dropdown-top">
                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
                <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
              </el-dropdown-menu>
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
@@ -109,23 +109,29 @@ export default {
        } else if (data.type === 'dropdownCheckBox') {
          className = 'search-items--dropdown'
        }
+        if (data.showMore) {
+          className += 'more'
+        }
        return className
      }
    },
    height () {
-      const paddingHeight = 30
-      const checkBoxRowHeight = 32
-      const labelRowHeight = 39
+      const paddingHeight = 0
+      const checkBoxRowHeight = 40
+      const labelRowHeight = 40
      let checkBoxRowCount = 0
      let labelRowCount = 0
      Object.keys(this.titleSearchListCopy).forEach(type => {
+        if (this.titleSearchListCopy[type].children.length === 0) {
+          return
+        }
        if (this.titleSearchListCopy[type].type === 'checkBox') {
          checkBoxRowCount++
        } else if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
          labelRowCount++
        }
      })
-      return paddingHeight + checkBoxRowHeight * checkBoxRowCount + labelRowHeight * labelRowCount + 2
+      return paddingHeight + checkBoxRowHeight * checkBoxRowCount + labelRowHeight * labelRowCount + checkBoxRowCount + labelRowCount + 1
    },
    getHeight () {
      if (this.changeMoreNum) {
@@ -388,9 +394,9 @@ export default {
  }
 }
 .search-box__container {
-  display: flex;
+  /*display: flex;*/
  flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
  /*padding: 15px 0 15px 17px;*/
  box-sizing: border-box;
  border: 1px solid $--right-box-border-color;
@@ -424,7 +430,7 @@ export default {
  align-items: center;
  flex-wrap: wrap;
  position: relative;
-  padding: 0px 80px 0px 0px;
+  padding: 0;
  box-sizing: border-box;
  /*line-height: 40px;*/

@@ -436,6 +442,13 @@ export default {
    vertical-align: text-bottom;
  }
 }
+.search-content-box {
+  background: #F9F9F9;
+  align-items: unset;
+  .search-title{
+    /*flex: 1;*/
+  }
+}
 .search-content-box:last-of-type{
  border-bottom: none;
 }
@@ -444,13 +457,23 @@ export default {
  flex: 1;
  flex-wrap: wrap;
  box-sizing: border-box;
-  margin-left: 15px;
+  padding-left: 15px;
+  padding-right: 80px;
+  background: #FFFFFF;
  &.search-items--checkbox .el-skeleton {
    height: 21px;
  }
  &.search-items--dropdown .el-skeleton {
    height: 28px;
  }
+  .el-checkbox{
+    line-height: 40px;
+  }
+}
+.more.search-items{
+  .el-checkbox{
+    line-height: 40px;
+  }
 }
 .search-more {
  position: absolute;
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -27,7 +27,7 @@
                      type="button">
                <i class="nz-icon nz-icon-list-view" />
              </button>
-              <el-dropdown-menu slot="dropdown" >
+              <el-dropdown-menu slot="dropdown"  class="right-public-box-dropdown-top">
                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
                <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
              </el-dropdown-menu>
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -335,7 +335,7 @@ export default {
        model: {
          label: this.$t('asset.model'),
          key: 'modelIds',
-          type: 'dropdownCheckBox',
+          type: 'checkBox',
          children: [],
          show: false,
          showMore: false,
@@ -402,7 +402,7 @@ export default {
        model: {
          label: this.$t('asset.model'),
          key: 'modelIdsDetail',
-          type: 'dropdownCheckBox',
+          type: 'checkBox',
          children: [],
          show: false,
          showMore: false,
@@ -482,7 +482,7 @@ export default {
      const params = JSON.parse(JSON.stringify(obj))
      if (this.detailType === 'view') {
        const obj = {}
-        params.modelIds = params.modelIdsDetail.map(item => item.split('-')[1])
+        params.modelIds = params.modelIdsDetail
        params.fieldsDetail.forEach(item => {
          const arr = item.split('-')
          if (obj[arr[0]]) {
@@ -594,16 +594,19 @@ export default {
        // this.$get('asset/model?pageSize=-1').then(response => {
        if (data) {
          this.modelData = data
-          const titleSearchData = {}
+          const arr = []
+          // const titleSearchData = {}
          this.modelData.forEach(m => {
            m.value = []
-            if (titleSearchData[m.brand.name]) {
-              titleSearchData[m.brand.name].children.push(m)
-            } else {
-              titleSearchData[m.brand.name] = { ...m.brand, children: [m] }
-            }
+            arr.push({ ...m, name: m.brand.name + '/' + m.name, value: m.id })
+            // if (titleSearchData[m.brand.name]) {
+            //   titleSearchData[m.brand.name].children.push(m)
+            // } else {
+            //   titleSearchData[m.brand.name] = { ...m.brand, children: [m] }
+            // }
          })
-          resolve(Object.keys(titleSearchData).map(b => titleSearchData[b]))
+          // resolve(Object.keys(titleSearchData).map(b => titleSearchData[b]))
+          resolve(arr)
          // this.titleSearchList.model.children = Object.keys(titleSearchData).map(b => titleSearchData[b])
        }
        resolve()
@@ -652,9 +655,9 @@ export default {
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      if (this.$route.path === '/asset' && !this.titleSearchList.model.children.length) {
        this.$set(this.searchLabel, 'statistics', 1)
-      } else {
+      }/* else {
        delete this.searchLabel.statistics
-      }
+      } */
      this.tools.loading = true
      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
        this.tools.loading = false
@@ -767,3 +770,12 @@ export default {
  }
 }
 </script>
+<style scoped lang="scss">
+  .list-page /deep/ .main-container{
+    display: flex;
+    flex-direction: column;
+    /deep/ .nz-table2{
+      flex: 1;
+    }
+  }
+</style>