fix：搜索内容调整 modeil以及more未完善

2021-10-13 11:12:26 +08:00
parent 464f0d38ed
commit 24d6e7a218
9 changed files with 197 additions and 135 deletions
--- a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
+++ b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
@@ -1,24 +1,29 @@
 <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>
+    <div style="display: inline-block;margin-right: 20px" v-for="(item,key) in detailSearchListCopy" :key='key'>
+      <span class="search-detail-title">{{item.label}} :</span>
+      <span v-if="item.type === 'checkBox'">
            <el-dropdown
+              class="detail-dropdown"
              type="primary"
              :trigger="'click'"
              :hide-on-click="false"
+              @visible-change="searchStr = detailSearchListCopy[key].searchStr"
            >
              <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>
+                <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>
                </span>
                </div>
+                <div class="detail-top-search" style="text-align: center" v-else>
+                  All
+                </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]">
+                <div><el-input size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"/></div>
+                 <el-checkbox-group v-model="selectValue[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>
@@ -26,6 +31,36 @@
              </el-dropdown-menu>
            </el-dropdown>
          </span>
+      <span v-else-if="item.type === 'dropdownCheckBox'">
+            <el-dropdown
+              class="detail-dropdown"
+              type="primary"
+              :trigger="'click'"
+              :hide-on-click="false"
+              @visible-change="searchStr = detailSearchListCopy[key].searchStr"
+            >
+              <div>
+                <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>
+                </span>
+                </div>
+                <div class="detail-top-search" style="text-align: center" v-else>
+                  All
+                </div>
+                <i class="nz-icon nz-icon-arrow-down search-value"/>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="detail-top-search-dropdown">
+                <div><el-input size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"/></div>
+                 <el-checkbox-group v-model="selectValue[item.key]">
+                    <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" :title="item3.name">
+                      {{item3.name}}
+                      <el-checkbox :label="item3.id+'-'+item4.id" :key="index4"  v-for="(item4,index4) in item3.children">{{item4.name}}</el-checkbox>
+                    </el-dropdown-item>
+                 </el-checkbox-group>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
    </div>
  </div>
 </template>
@@ -60,13 +95,28 @@ export default {
        }
      }
    },
-    searchDetailObj: {
+    selectValue: {
      type: Object
    }
  },
+  computed: {
+  },
  data () {
    return {
-      detailSearchListCopy: {}
+      detailSearchListCopy: {},
+      searchStr: ''
+    }
+  },
+  methods: {
+    searchStrChange (val, key) {
+      this.detailSearchListCopy[key].searchStr = val
+      this.detailSearchListCopy[key].children = this.detailSearchListCopy[key].oldChildren.filter(children => children.name.indexOf(val) !== -1)
+    },
+    getSearchStr (oldChildren, label) {
+      const arr = label.split('-')
+      const obj = oldChildren.find(item => item.id == arr[0])
+      const children = obj.children.find(item => item.id == arr[1])
+      return children.name
    }
  },
  watch: {
@@ -74,14 +124,17 @@ export default {
      immediate: true,
      deep: true,
      handler (n) {
-        console.log(n)
        this.detailSearchListCopy = JSON.parse(JSON.stringify(n))
+        Object.keys(this.detailSearchListCopy).forEach(key => {
+          this.detailSearchListCopy[key].searchStr = ''
+          this.detailSearchListCopy[key].oldChildren = JSON.parse(JSON.stringify(this.detailSearchListCopy[key].children))
+        })
+        console.log(this.detailSearchListCopy)
      }
    },
-    searchDetailObj: {
+    selectValue: {
      deep: true,
      handler (n) {
-        console.log(n, 123123123)
        this.$emit('reload', n)
      }
    }
@@ -90,7 +143,15 @@ export default {
 </script>

 <style scoped>
-  .search-title {
+  .detail-dropdown{
+    border: 1px solid #E7EAED;
+    padding: 0 10px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 2px;
+    margin-left: 5px;
+  }
+  .search-detail-title {
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
@@ -107,11 +168,10 @@ export default {
  .detail-top-search {
    display: inline-block;
    vertical-align: bottom;
-    max-width: 100px;
+    width: 100px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
-    margin-left: 5px;
  }
 </style>
 <style lang="scss">
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -1,6 +1,15 @@
 <template>
  <div class="detail-left-box">
-    <div style="height:40px">123</div>
+    <div class="order-box">
+      <el-select v-model="orderBy" placeholder="请选择">
+        <el-option
+          v-for="item in tableTitle"
+          :key="item.prop"
+          :label="item.label"
+          :value="item.prop">
+        </el-option>
+      </el-select>
+    </div>
    <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">
@@ -52,6 +61,16 @@ export default {
          show: true,
          minWidth: 140,
          sortable: 'custom'
+        }, {
+          label: this.$t('overall.parent'),
+          prop: 'parent',
+          show: false,
+          minWidth: 110
+        }, {
+          label: this.$t('overall.children'),
+          prop: 'children',
+          show: false,
+          minWidth: 120
        }, {
          label: this.$t('overall.type'),
          prop: 'type',
@@ -64,6 +83,11 @@ export default {
          show: true,
          minWidth: 110,
          sortable: 'custom'
+        }, {
+          label: this.$t('asset.pingInfo'),
+          prop: 'pingInfo',
+          show: true,
+          minWidth: 110
        }, {
          label: this.$t('overall.dc'),
          prop: 'dc',
@@ -100,25 +124,54 @@ export default {
          show: true,
          minWidth: 110,
          sortable: 'custom'
+        }, {
+          label: 'SN',
+          prop: 'sn',
+          show: true,
+          minWidth: 110
        }, {
          label: 'Talon',
          prop: 'clientState',
          show: true,
          sortable: 'custom',
          minWidth: 150
+        }, {
+          label: this.$t('asset.purchaseDate'),
+          prop: 'purchaseDate',
+          show: false,
+          minWidth: 120
        }
-      ]
+      ],
+      orderBy: '',
+      orderType: 'ascending'
    }
  },
  methods: {
    detailViewRightShow (item) {
      this.$emit('detailViewRightShow', item)
    }
+  },
+  watch: {
+    orderBy: {
+      handler (n) {
+        this.$emit('orderDetail', n, this.orderType)
+      }
+    },
+    orderType: {
+      handler (n) {
+        this.$emit('orderDetail', this.orderBy, n)
+      }
+    }
  }
 }
 </script>

 <style scoped lang="scss">
+  .order-box{
+    height:40px;
+    padding: 0 15px;
+    line-height: 40px
+  }
  .detail-row-box{
    height: calc(100% - 40px);
    overflow: hidden;
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
@@ -39,14 +39,14 @@
            </div>
          </div>
          <div class="nz-detail-view-right">
-            <detailViewRight
-              @getTableData = 'getDetail'
-              ref="detailViewRight"
-              v-if="detailViewRightObj"
-              :from="from"
-              :obj="detailViewRightObj"
-              :target-tab="'panelTab'"
-            />
+<!--            <detailViewRight-->
+<!--              @getTableData = 'getTableData'-->
+<!--              ref="detailViewRight"-->
+<!--              v-if="detailViewRightObj"-->
+<!--              :from="from"-->
+<!--              :obj="detailViewRightObj"-->
+<!--              :target-tab="'panelTab'"-->
+<!--            />-->
          </div>
        </div>
      </div>
@@ -149,8 +149,8 @@ export default {
    search (searchObj) {
      this.$emit('search', searchObj)
    },
-    getDetail () {
-      this.$emit('getDetail')
+    getTableData () {
+      this.$emit('getTableData')
    },
    changeDetailType (item) {
      console.log(item)
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
@@ -4,7 +4,7 @@
      <label class="search-title">{{data.label}}:</label>
      <el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items">
        <template>
-          <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]" @change="selectValueOut.change === 0 && selectValueOut.change++">
+          <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValue[data.key]" @change="selectValue.change === 0 && selectValue.change++">
            <template v-for="(item, j) in data.children">
              <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
            </template>
@@ -23,6 +23,7 @@
            v-for="(item, j) in data.children"
            v-show="j < data.index || data.showMore"
            :key="j"
+            :selectValue="selectValue[data.key]"
            :ref="`${type}_${item.id}_cascader`"
            :collapse-tags="true"
            :item="item"
@@ -138,25 +139,14 @@ export default {
      }
    },
    selectValue: {
-      immediate: true,
      deep: true,
      handler (n) {
-        this.selectValueOut = { ...n, change: 0 }
-      }
-    },
-    selectValueOut: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        if (n && n.change) {
-          this.$emit('reload', n)
-        }
+        this.$emit('reload', n)
      }
    }
  },
  data () {
    return {
-      selectValueOut: {},
      contentWidth: 0, // 搜索框内部区域的宽度
      titleSearchListCopy: {},
      widthConstant: {
@@ -225,16 +215,20 @@ export default {
            })
          })
          const valuesStr = JSON.stringify(values)
-          this.selectValueOut[key] = valuesStr === '{}' || !valuesStr ? null : valuesStr
+          this.selectValue[key] = valuesStr === '{}' || !valuesStr ? null : valuesStr
        } else {
          const values = new Set()
          cascs.forEach(c => {
            const nodes = c.$refs.cascader.getCheckedNodes()
            nodes.forEach(n => values.add(n.data.id))
          })
-          this.selectValueOut[key] = [...values]
+          this.selectValue[key] = [...values]
+        }
+        if (!this.selectValue.change) {
+          this.selectValue.change = 1
+        } else {
+          this.selectValue.change++
        }
-        this.selectValueOut.change++
      })
    },
    computeCascWidth (textWidth, labelWidth) { // label + tag + margin
--- a/nezha-fronted/src/components/common/labelFilter/dropdown.vue
+++ b/nezha-fronted/src/components/common/labelFilter/dropdown.vue
@@ -7,6 +7,7 @@
    <el-cascader
      ref="cascader"
      v-bind="$attrs"
+      v-model="cascaderData"
      :collapse-tags="collapseTags"
      :options="item.children"
      :props="{ multiple: true, label: 'name', value: 'id' }"
@@ -29,6 +30,15 @@ export default {
    collapseTags: {
      type: Boolean,
      default: false
+    },
+    selectValue: {}
+  },
+  watch: {
+    selectValue: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+      }
    }
  },
  methods: {
@@ -50,7 +60,8 @@ export default {
  },
  data () {
    return {
-      ready: false
+      ready: false,
+      cascaderData: ''
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -80,9 +80,10 @@ export default {
            response.data.list[i].status = response.data.list[i].status + ''
          }
          this.tableData = response.data.list
+          this.detailViewRightObj = this.tableData[0]
          this.pageObj.total = response.data.total
          this.pageObj.pages = response.data.pages
-          if (!this.scrollbarWrap) {
+          if (!this.scrollbarWrap && this.$refs.dataTable.$refs.dataTable) {
            this.$nextTick(() => {
              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
              this.toTopBtnHandler(this.scrollbarWrap)
@@ -114,20 +115,12 @@ export default {
    },
    pageNo (val) {
      this.pageObj.pageNo = val
-      if (this.detailType !== 'view') {
-        this.getTableData()
-      } else {
-        this.getDetail()
-      }
+      this.getTableData()
    },
    pageSize (val) {
      this.pageObj.pageSize = val
      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      if (this.detailType !== 'view') {
-        this.getTableData()
-      } else {
-        this.getDetail()
-      }
+      this.getTableData()
    },
    add () {
      this.object = this.newObject()
@@ -169,7 +162,7 @@ export default {
    },
    dragend () {
      this.$nextTick(() => {
-        this.$refs.dataTable.$refs.dataTable.doLayout()
+        this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
      })
    },
    search (searchObj) {
@@ -302,13 +295,9 @@ export default {
      this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
    }
    if (!this.fromBottom) {
-      if (this.detailType !== 'view') {
-        this.getTableData()
-      } else {
-        this.getDetail()
-      }
+      this.getTableData()
      this.$nextTick(() => {
-        this.$refs.dataTable.$refs.dataTable.doLayout()
+        this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
      })
    }
  },
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -19,79 +19,27 @@ export default {
      this.detailType = flag
      localStorage.setItem('detail-view-' + this.tableId, this.detailType)
      this.pageObj.pageNo = 1
-      this.detailViewLoading = true
-      if (flag === 'list') {
-        this.searchLabel = {}
-        this.searchCheckBox = {}
-        this.getTableData()
-      } else {
-        this.getDetail()
-      }
      setTimeout(() => {
        this.detailViewLoading = false
        this.$refs.clickSearch && this.$refs.clickSearch.needMore()
      }, 100)
    },
-    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()
+          this.getTableData()
          clearTimeout(this.detailTimer)
          this.detailTimer = ''
        }, 1000)
      } else {
        clearTimeout(this.detailTimer)
        this.detailTimer = setTimeout(() => {
-          this.searchDetail()
+          this.getTableData()
          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, { ...this.searchLabel, ...params }).then(response => {
-        this.tools.loading = false
-        if (response.code === 200) {
-          this.tableData = response.data.list
-          this.detailViewRightObj = this.tableData[0]
-          this.pageObj.total = response.data.total
-          this.pageObj.pages = response.data.pages
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    },
    detailViewRightShow (item) {
      this.detailViewRightObj = item
    }
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -52,7 +52,7 @@
          <span v-else >-</span>
        </template>
        <template v-else-if="item.prop === 'pingInfo'">
-          <div class="ping-info">
+          <div class="ping-info" v-if="scope.row.pingInfo">
            <div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}" style="position: relative">
            </div>
            <div class="active-icon-content">{{$t('asset.assetStatPre')+(scope.row.pingInfo.lastUpdate?utcTimeToTimezoneStr(scope.row.pingInfo.lastUpdate):$t('asset.assetStatDown'))}}</div>
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -2,7 +2,7 @@
  <div>
    <nz-data-list
      v-loading="detailViewLoading"
-      v-show="detailType === 'list'"
+      v-if="detailType === 'list'"
      ref="dataList"
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
@@ -14,7 +14,6 @@
      :detailType="detailType"
      @changeDetailType="changeDetailType"
      @getTableData="getTableData"
-      @getDetail="getDetail"
    >
      <template v-slot:top-tool-right>
        <button id="asset-filter" :class="{ 'is-focus': dataListLayout.indexOf('clickSearch') > -1 }" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
@@ -78,18 +77,19 @@
    </nz-data-list>
    <nzDetailView
      v-loading="detailViewLoading || tools.loading"
-      v-show="detailType !== 'list'"
+      v-if="detailType !== 'list'"
      :api="url"
+      ref="dataList"
      :layout="dataListLayout"
      :from="fromRoute.asset"
      :search-msg="searchMsg"
      :detailType="detailType"
      :detailViewRightObj="detailViewRightObj"
-      @search="searchDetail"
+      @search="search"
      @changeDetailType="changeDetailType"
    >
      <template v-slot:top-tool-left>
-        <detailViewTopSearch :searchDetailObj.sync="searchDetailObj" :detailSearchList="detailSearchList" @reload="searchDetailTop" />
+        <detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />
      </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">
@@ -115,7 +115,7 @@
      <template v-slot:nz-detail-view-list>
        <asset-detail
          class="data-detail"
-          ref="dataDetail"
+          ref="dataTable"
          v-loading="tools.loading"
          :detailViewRightObj="detailViewRightObj"
          :api="url"
@@ -135,7 +135,7 @@
          small
        >
          <template>
-            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getDetail" @keyup.enter.native="getDetail" size="mini"/>
+            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
          </template>
        </el-pagination>
@@ -312,7 +312,7 @@ export default {
          index: -1
        },
        ping: {
-          label: 'ping',
+          label: 'Ping',
          key: 'ping',
          type: 'checkBox',
          children: [
@@ -350,7 +350,9 @@ export default {
        typeIds: [],
        ping: [],
        modelIds: [],
-        fields: ''
+        fields: '',
+        modelIdsDetail: [],
+        fieldsDetail: []
      },
      detailSearchList: {
        dc: {
@@ -374,7 +376,7 @@ export default {
          index: -1
        },
        ping: {
-          label: 'ping',
+          label: 'Ping',
          key: 'ping',
          type: 'checkBox',
          children: [
@@ -388,7 +390,17 @@ export default {
        },
        model: {
          label: this.$t('asset.model'),
-          key: 'modelIds',
+          key: 'modelIdsDetail',
+          type: 'dropdownCheckBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        assetLabel: {
+          label: 'More',
+          key: 'fieldsDetail',
          type: 'dropdownCheckBox',
          children: [],
          show: false,
@@ -396,12 +408,6 @@ export default {
          width: 0,
          index: -1
        }
-      },
-      searchDetailObj: {
-        dcIds: [],
-        typeIds: [],
-        ping: [],
-        modelIds: []
      }
    }
  },
@@ -544,6 +550,7 @@ export default {
            this.modelData = response.data.list
            const titleSearchData = {}
            this.modelData.forEach(m => {
+              m.value = []
              if (titleSearchData[m.brand.name]) {
                titleSearchData[m.brand.name].children.push(m)
              } else {