feat： asset详细视图的回显完成

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

@@ -53,8 +53,8 @@
               <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-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >
+                      <span :title="item3.name"> {{item3.name}}</span>
                       <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>

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

@@ -39,14 +39,14 @@
             </div>
           </div>
           <div class="nz-detail-view-right">
-<!--            <detailViewRight-->
-<!--              @getTableData = 'getTableData'-->
-<!--              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>

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -24,9 +24,11 @@
             v-show="j < data.index || data.showMore"
             :key="j"
             :selectValue="selectValue[data.key]"
+            :type="data.key"
             :ref="`${type}_${item.id}_cascader`"
             :collapse-tags="true"
             :item="item"
+            @resize="(value) => resize(value, type, item, data.key)"
             @blur="casFocus"
             @change="(value) => casChange(value, type, item, data.key)"
             @focus="casFocus"
@@ -236,13 +238,33 @@ export default {
       const inputWidth = tagWidth + this.widthConstant.dropdownCheckBox.moreNumberWidth + this.widthConstant.dropdownCheckBox.arrowDownWidth
       return { tagWidth, inputWidth, width: labelWidth + inputWidth + this.widthConstant.dropdownCheckBox.boxMargin }
     },
+    resize (value, type, item) {
+      const oldInputWidth = item.inputWidth
+      if (type) {
+        if (value.length === 0) { // 回到初始宽度
+          item.width = item.originalWidth
+          item.inputWidth = this.widthConstant.dropdownCheckBox.inputOriginalWidth
+        } else {
+          const showTag = item.children.find(c => c.id == value[0]) // 展示的tag
+          const { tagWidth, inputWidth, width } = this.computeCascWidth(this.computeDistance(showTag.name, 12), item.labelWidth)
+          item.width = width
+          item.inputWidth = inputWidth
+        }
+      }
+      if (item.inputWidth !== oldInputWidth) {
+        this.$nextTick(() => {
+          this.$refs[`${type}_${item.id}_cascader`][0].$el.querySelector('.el-input__inner').style.width = `${item.inputWidth}px`
+          this.needMore(type, item, true)
+        })
+      }
+    },
     setEachCascWidth (value, type, item) {
       if (type) {
         if (value.length === 0) { // 回到初始宽度
           item.width = item.originalWidth
           item.inputWidth = this.widthConstant.dropdownCheckBox.inputOriginalWidth
         } else {
-          const showTag = item.children.find(c => c.id === value[0][0]) // 展示的tag
+          const showTag = item.children.find(c => c.id == value[0]) // 展示的tag
           const { tagWidth, inputWidth, width } = this.computeCascWidth(this.computeDistance(showTag.name, 12), item.labelWidth)
           item.width = width
           item.inputWidth = inputWidth

nezha-fronted/src/components/common/labelFilter/dropdown.vue

@@ -10,7 +10,7 @@
       v-model="cascaderData"
       :collapse-tags="collapseTags"
       :options="item.children"
-      :props="{ multiple: true, label: 'name', value: 'id' }"
+      :props="{ multiple: true, label: 'name', value: 'id', checkStrictly: true }"
       placeholder=""
       popper-class="click-search-dropdown"
       size="mini"
@@ -31,13 +31,31 @@ export default {
       type: Boolean,
       default: false
     },
-    selectValue: {}
+    selectValue: {},
+    type: {}
   },
   watch: {
     selectValue: {
       immediate: true,
       handler (n) {
         console.log(n)
+        this.cascaderData = []
+        if (n && this.type !== 'fields') {
+          n.forEach(item => {
+            if (this.item.children.find(children => children.id == item)) {
+              this.cascaderData.push([item])
+              this.$emit('resize', [item])
+            }
+          })
+        } else if (n && this.type === 'fields') {
+          const obj = JSON.parse(n)
+          if (obj[this.item.id]) {
+            obj[this.item.id].forEach(item => {
+              this.cascaderData.push([item])
+              this.$emit('resize', [item])
+            })
+          }
+        }
       }
     }
   },

nezha-fronted/src/components/common/mixin/detailViewMixin.js

@@ -18,28 +18,49 @@ export default {
       }
       this.detailType = flag
       localStorage.setItem('detail-view-' + this.tableId, this.detailType)
+      if (this.detailType === 'view') {
+        // modelIdsDetail
+        this.selectValue.modelIdsDetail = []
+        this.selectValue.modelIds.forEach(modelId => {
+          this.titleSearchList.model.children.forEach(model => {
+            const brand = model.children.find(children => modelId == children.id)
+            if (brand) {
+              console.log(brand)
+              this.selectValue.modelIdsDetail.push(brand.brandId + '-' + modelId)
+            }
+          })
+        })
+        this.selectValue.fieldsDetail = []
+        if (this.selectValue.fields) {
+          const obj = JSON.parse(this.selectValue.fields)
+          Object.keys(obj).forEach(key => {
+            obj[key].forEach(item => {
+              this.selectValue.fieldsDetail.push(key + '-' + item)
+            })
+          })
+        }
+      } else {
+        const obj = {}
+        this.selectValue.modelIds = this.selectValue.modelIdsDetail.map(item => item.split('-')[1])
+        this.selectValue.fieldsDetail.forEach(item => {
+          const arr = item.split('-')
+          if (obj[arr[0]]) {
+            obj[arr[0]].push(arr[1])
+          } else {
+            obj[arr[0]] = [arr[1]]
+          }
+        })
+        this.selectValue.fields = JSON.stringify(obj)
+        if (this.selectValue.fields === '{}') {
+          this.selectValue.fields = ''
+        }
+      }
       this.pageObj.pageNo = 1
       setTimeout(() => {
         this.detailViewLoading = false
         this.$refs.clickSearch && this.$refs.clickSearch.needMore()
       }, 100)
     },
-    searchDetailTop () {
-      if (!this.detailTimer) {
-        this.detailTimer = setTimeout(() => {
-          this.getTableData()
-          clearTimeout(this.detailTimer)
-          this.detailTimer = ''
-        }, 1000)
-      } else {
-        clearTimeout(this.detailTimer)
-        this.detailTimer = setTimeout(() => {
-          this.getTableData()
-          clearTimeout(this.detailTimer)
-          this.detailTimer = ''
-        }, 1000)
-      }
-    },
     detailViewRightShow (item) {
       this.detailViewRightObj = item
     }

nezha-fronted/src/components/page/asset/asset.vue

@@ -2,7 +2,7 @@
   <div>
     <nz-data-list
       v-loading="detailViewLoading"
-      v-if="detailType === 'list'"
+      v-show="detailType === 'list'"
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
@@ -115,7 +115,7 @@
       <template v-slot:nz-detail-view-list>
         <asset-detail
           class="data-detail"
-          ref="dataTable"
+          ref="dataDetail"
           v-loading="tools.loading"
           :detailViewRightObj="detailViewRightObj"
           :api="url"
@@ -408,7 +408,8 @@ export default {
           width: 0,
           index: -1
         }
-      }
+      },
+      timer: ''
     }
   },
   methods: {
@@ -465,14 +466,46 @@ export default {
       })
     },
     reloadTable (obj) {
-      Object.keys(obj).forEach(key => {
-        if (typeof obj[key] === 'string') {
-          this.searchCheckBox[key] = obj[key] ? obj[key] : null
+      const params = JSON.parse(JSON.stringify(obj))
+      if (this.detailType === 'view') {
+        const obj = {}
+        params.modelIds = params.modelIdsDetail.map(item => item.split('-')[1])
+        params.fieldsDetail.forEach(item => {
+          const arr = item.split('-')
+          if (obj[arr[0]]) {
+            obj[arr[0]].push(arr[1])
+          } else {
+            obj[arr[0]] = [arr[1]]
+          }
+        })
+        params.fields = JSON.stringify(obj)
+        if (params.fields === '{}') {
+          params.fields = ''
+        }
+        delete params.modelIdsDetail
+        delete params.fieldsDetail
+      }
+      Object.keys(params).forEach(key => {
+        if (typeof params[key] === 'string') {
+          this.searchCheckBox[key] = params[key] ? params[key] : null
         } else {
-          obj[key] && obj[key].length > 0 ? this.searchCheckBox[key] = obj[key].join(',') : this.searchCheckBox[key] = null
+          params[key] && params[key].length > 0 ? this.searchCheckBox[key] = params[key].join(',') : this.searchCheckBox[key] = null
         }
       })
-      this.getTableData()
+      if (!this.timer) {
+        this.timer = setTimeout(() => {
+          this.getTableData()
+          clearTimeout(this.timer)
+          this.timer = ''
+        }, 1000)
+      } else {
+        clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          this.getTableData()
+          clearTimeout(this.timer)
+          this.timer = ''
+        }, 1000)
+      }
     },
     getDcData () {
       return new Promise(resolve => {