NEZ-2842 feat：新增alert message页面 高级搜索 回显

nezha-fronted/src/assets/css/components/common/searchBox.scss

@@ -1,9 +1,14 @@
 #nz-search-box{
   .history-icon {
-    border-right: 1px solid $--border-color-light;
+    border: 1px solid $--border-color-light;
+    border-right: none;
     width: 28px;
     text-align: center;
     display: inline-block;
+    height: 28px;
+    line-height: 28px;
+    vertical-align: middle;
+    margin-right: -4px;
   }
   .el-popover.el-popper {
     border: none;
@@ -129,8 +134,13 @@
   }
   .history-content {
     border: 1px solid $--border-color-light;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    overflow: auto;
+    max-height: 300px;
     .search-item{
       display: inline-block;
+      width: 100%;
       white-space: nowrap;
     }
   }

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

@@ -2,7 +2,7 @@ import lodash from 'lodash'
 export default {
   methods: {
   // 解析请求参数，初始化 searchLabel
-    initQueryFromPath (searchKeys) {
+    initQueryFromPath (searchKeys, cb) {
       const q = this.$route.query
       lodash.forIn(searchKeys, (val, key) => {
         let qv = lodash.get(q, key)
@@ -27,6 +27,12 @@ export default {
         }, 200)
         qv && this.$set(val.target, val.propertyName, qv)
       })
+      if (q.body) {
+        this.searchLabel.body = JSON.parse(q.body)
+        if (cb) {
+          cb()
+        }
+      }
       if (q.bottomBox && JSON.parse(q.bottomBox)) {
         this.$nextTick(() => {
           this.detailType = q.detailType

nezha-fronted/src/components/common/searchBox/searchBox.vue

@@ -12,7 +12,15 @@
         <i class="nz-icon nz-icon-time"/>
       </div>
       <div class="search-content history-content">
-        <div v-for="(item, index) in historyArr"  @mouseenter="historyIndex = index" :key="index" class="search-item" :ref="'search-item' + index" :class="{'search-item-select': index === historyIndex}">
+        <div
+          v-for="(item, index) in historyArr"
+          @mouseenter="historyIndex = index"
+          :key="index"
+          class="search-item text-ellipsis"
+          :ref="'search-item' + index"
+          :class="{'search-item-select': index === historyIndex}"
+          :title="renderHistoryTitle(item)"
+        >
           <span  v-for="(tag, tIndex) in item" :key="index + '-' +tIndex" class="search-box-tag" style="margin-right: 3px">
             <span>{{tag.i18n}}:</span>
             <span v-for="(value, vIndex) in tag.value" :key="value">{{value}} <span v-if="tag.value.length - 1 > vIndex">,</span></span>
@@ -547,6 +555,19 @@ export default {
     historyFocus () {
       this.$refs.history.focus()
     },
+    renderHistoryTitle (item) {
+      let str = ''
+      item.forEach(tag => {
+        str += this.$t(tag.code)
+        str += ':'
+        tag.value.forEach(value => {
+          str += value + ','
+        })
+        str = str.substring(0, str.length - 1)
+        str += '; '
+      })
+      return str
+    },
     contentShow (key) {
       this.keyShow = false // key 的下拉
       this.symbolShow = false // symbol 的下拉
@@ -647,7 +668,9 @@ export default {
         this.valueList = []
         this.valueListInfo.pageNo = 0
         this.valueListInfo.total = -1
-        this.selectEnum(findItem)
+        const arr = this.selectEnum(findItem)
+        this.valueList = [...arr]
+        this.oldValueList = [...arr]
         this.searchBoxType = findItem.type
         return
       }
@@ -679,7 +702,9 @@ export default {
         this.valueList = []
         this.valueListInfo.pageNo = 0
         this.valueListInfo.total = -1
-        this.selectEnum(findItem)
+        const arr = this.selectEnum(findItem)
+        this.valueList = [...arr]
+        this.oldValueList = [...arr]
         this.searchBoxType = findItem.type
         return
       }
@@ -879,7 +904,9 @@ export default {
         this.valueList = []
         this.valueListInfo.pageNo = 0
         this.valueListInfo.total = -1
-        this.selectEnum(findItem)
+        const arr = this.selectEnum(findItem)
+        this.valueList = [...arr]
+        this.oldValueList = [...arr]
         this.contentShow('')
         this.dialogStr = this.editDialogObj.name
         return
@@ -1058,15 +1085,64 @@ export default {
     selectEnum (findItem) { // 选择对应的枚举类型
       switch (findItem.name) {
         case 'priority':
-          this.valueList = [...this.severity]
+          return this.severity
-          this.oldValueList = [...this.severity]
-          break
         default:
-          this.valueList = []
+          return []
       }
     },
-    renderSelectArr () { // 将路右上方的 body参数回显
+    renderSelectArr () { // 将路由上方的 body参数回显
+      let body = this.$route.query.body
+      try {
+        if (body) {
+          body = JSON.parse(body)
+          console.log('body', body)
+          Object.keys(body).forEach(key => {
+            let initialKey = key
+            let str = ''
+            if (initialKey[0] === '-' && initialKey[1] === '*') {
+              initialKey = initialKey.substring(2)
+              str = '-*'
+            } else if (initialKey[0] === '-') {
+              initialKey = initialKey.substring(1)
+              str = '-'
+            } else if (initialKey[0] === '*') {
+              initialKey = initialKey.substring(1)
+              str = '*'
+            } else {
+              initialKey = initialKey + ''
+            }
+            const findKeyItem = this.oldSearchList.find(item => item.name === initialKey)
+            if (findKeyItem) {
+              const realValue = this.$lodash.cloneDeep(body[key])
+              let value = this.$lodash.cloneDeep(realValue)
+              if (findKeyItem.type === 'enum') { // 枚举类型需要特殊处理
+                value = this.enumRenderValue(findKeyItem, value)
+              }
+              this.selectArr.push({
+                i18n: str + this.$t(findKeyItem.i18n),
+                code: findKeyItem.i18n,
+                name: key,
+                realValue: realValue,
+                value: value
+              })
+            }
+          })
+          // this.selectArr.forEach(item => {
+          //   obj[item.name] = item.realValue
+          // })
+        }
+      } catch (e) {
 
+      }
+
+      console.log()
+    },
+    enumRenderValue (searchInfo, realValue) { // 处理枚举类型的回显
+      const arr = this.selectEnum(searchInfo)
+      const value = realValue.map(item => {
+        return arr.find(enumItem => enumItem.value === item).label
+      })
+      return value
     }
   },
   watch: {

nezha-fronted/src/components/common/timePicker.vue

@@ -555,12 +555,15 @@ export default {
     defaultPick: {
       immediate: true,
       handler (n, o) {
-        if (n && Number.isInteger(n)) {
+        if (Number.isInteger(n)) {
           const showTime = this.timeData.find((item) => item.id == n)
           if (showTime) {
             this.showTime = Object.assign({}, showTime)
             this.searchTime = this.$parent.searchTime
             this.nowTimeType = this.showTime
+            if (showTime.id == 0) {
+              this.isCustom = true
+            }
           }
           if (this.showEmpty && this.defaultPick === 12) {
             this.searchTime = []

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -437,7 +437,7 @@ export default {
       this.selectValue.projectIds = [Number(localStorage.getItem('alertMessageProjectId'))]
       this.searchCheckBox.projectIds = this.selectValue.projectIds.join(',')
     }
-    this.initQueryFromPath()
+    this.initQueryFromPath('', this.renderDefaultParams)
   },
   mounted () {
     if (localStorage.getItem('alertMessageProjectId')) {
@@ -447,6 +447,25 @@ export default {
     // this.getTitleSearch()
   },
   methods: {
+    renderDefaultParams () {
+      const q = JSON.parse(this.$route.query.body)
+      this.state = q.state
+      this.searchTime[0] = q.startAt
+      this.searchTime[1] = q.endAt
+      this.searchTime[2] = q.timeType
+      switch (q.timeType) {
+        case '7d' :
+          this.defaultPick = 10
+          break
+        case '30d' :
+          this.defaultPick = 11
+          break
+        default:
+          this.defaultPick = 0
+      }
+      console.log(this.defaultPick)
+      // this.defaultPick = 11
+    },
     batchAck () {
       if (this.batchDeleteObjs.length < 1) return
       this.$confirm(this.$t('tip.confirmBatchAck', [this.batchDeleteObjs.length]), {
@@ -808,9 +827,15 @@ export default {
       const path = this.fromRoute.alertMessage
       const routePathParams = this.$lodash.cloneDeep(param)
       delete routePathParams.statistics
+      routePathParams.body.timeType = this.searchTime[2]
       routePathParams.body = JSON.stringify(routePathParams.body)
       this.updatePath(routePathParams, path)
-      this.$get('/alert/message/query', { ...this.searchLabel }).then(response => {
+      const queryParams = {
+        ...this.searchLabel,
+        body: encodeURIComponent(JSON.stringify(this.searchLabel.body))
+      }
+      console.log(this.searchLabel.body)
+      this.$get('/alert/message/query', { ...queryParams }).then(response => {
         this.tools.loading = false
         if (response.code == 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)