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

2023-06-07 14:45:51 +08:00
parent 930a4d1755
commit cf683627e7
5 changed files with 134 additions and 14 deletions
--- a/nezha-fronted/src/assets/css/components/common/searchBox.scss
+++ b/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;
    }
  }
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/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
--- a/nezha-fronted/src/components/common/searchBox/searchBox.vue
+++ b/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,16 +1085,65 @@ export default {
    selectEnum (findItem) { // 选择对应的枚举类型
      switch (findItem.name) {
        case 'priority':
-          this.valueList = [...this.severity]
-          this.oldValueList = [...this.severity]
-          break
+          return this.severity
        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: {
    // selectIndex: {
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/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 = []
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/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)