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

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'>
+    <div style="display: inline-block;margin-right: 20px" v-for="(item,key) in detailSearchListCopy" :key='key'>
-      <span class="search-title">{{item.label}}:</span>
+      <span class="search-detail-title">{{item.label}} :</span>
-      <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">
+                <div class="detail-top-search" v-if="selectValue[item.key].length">
-                   <span v-for="(item2,index2) in searchDetailObj[item.key]" :key="item2" class="search-value">
+                   <span v-for="(item2,index2) in selectValue[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>
+                  {{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>
+                <div><el-input size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"/></div>
-                 <el-checkbox-group v-model="searchDetailObj[item.key]">
+                 <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">

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;

nezha-fronted/src/components/common/detailView/nzDetailView.vue

@@ -39,14 +39,14 @@
             </div>
           </div>
           <div class="nz-detail-view-right">
-            <detailViewRight
+<!--            <detailViewRight-->
-              @getTableData = 'getDetail'
+<!--              @getTableData = 'getTableData'-->
-              ref="detailViewRight"
+<!--              ref="detailViewRight"-->
-              v-if="detailViewRightObj"
+<!--              v-if="detailViewRightObj"-->
-              :from="from"
+<!--              :from="from"-->
-              :obj="detailViewRightObj"
+<!--              :obj="detailViewRightObj"-->
-              :target-tab="'panelTab'"
+<!--              :target-tab="'panelTab'"-->
-            />
+<!--            />-->
           </div>
         </div>
       </div>
@@ -149,8 +149,8 @@ export default {
     search (searchObj) {
       this.$emit('search', searchObj)
     },
-    getDetail () {
+    getTableData () {
-      this.$emit('getDetail')
+      this.$emit('getTableData')
     },
     changeDetailType (item) {
       console.log(item)

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)
       }
     }
-    }
   },
   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

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 () {

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()
-      }
     },
     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()
-      }
     },
     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.$nextTick(() => {
-        this.$refs.dataTable.$refs.dataTable.doLayout()
+        this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
       })
     }
   },

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
     }

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>

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 {