feat: 搜索框（部分内容,缺全文搜索处理）

src/components/advancedSearch/Index.vue

@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     search (metaList, formatSql) {
-      this.$emit('search', formatSql)
+      this.$emit('search', metaList, formatSql)
     },
     changeMode (mode, data) {
       this.searchMode = mode
@@ -77,8 +77,8 @@ export default {
     }
   },
   setup (props) {
-    // 默认为文本模式 TODO 改回text
+    // 默认为文本模式
-    let searchMode = ref('tag')
+    let searchMode = ref('text')
     if (props.defaultMode) {
       switch (props.defaultMode) {
         case 'tag': {

src/components/advancedSearch/TagMode.vue

@@ -107,6 +107,7 @@ export default {
     // 新增条件
     addCondition (meta) {
       this.metaList.forEach(m => {
+        console.info(m)
         m.cancelEditing()
       })
       // 先判断上一个condition是否已填写完整，没有则删除；之后将当前所有meta的内容的isEditing置为false
@@ -132,7 +133,6 @@ export default {
           this.$refs.columnSelect.focus()
         })
       }
-      console.info(this.metaList)
     },
     addConnection () {
       this.metaList.push(new Meta(connection))
@@ -161,16 +161,16 @@ export default {
         })
         meta.column.label = selectedColumn.label
         meta.column.type = selectedColumn.type
-      }
+        setTimeout(() => {
-      setTimeout(() => {
+          meta.column.isEditing = false
-        meta.column.isEditing = false
 
-        // 处理操作符
+          // 处理操作符
-        if (!meta.operator.value) {
+          if (!meta.operator.value) {
-          meta.operator.isEditing = true
+            meta.operator.isEditing = true
-          meta.operator.show = true
+            meta.operator.show = true
-        }
+          }
-      }, 200)
+        }, 200)
+      }
     },
     selectConnection (value, meta) {
       meta.isEditing = false
@@ -185,7 +185,11 @@ export default {
       setTimeout(() => {
         meta.column.isEditing = false
         if (meta.isEmpty()) {
-          this.metaList.splice(index, 1)
+          if (this.metaList.length > 1) {
+            this.metaList.splice(index - 1, 2)
+          } else {
+            this.metaList.splice(index, 1)
+          }
         }
       }, 200)
     },
@@ -231,6 +235,7 @@ export default {
     changeMode () {
       const parser = new SqlParser(this.metaList, this.columnList)
       const { metaList, formatSql } = parser.formatMetaList()
+      console.info(formatSql)
       this.metaList = metaList
       this.$emit('changeMode', 'text', formatSql)
     },

src/components/advancedSearch/meta/meta.js

@@ -88,3 +88,17 @@ export default class Meta {
     }
   }
 }
+
+export function cloneMeta (source) {
+  if (source instanceof Meta) {
+    const m = new Meta(source.meta)
+    Object.keys(source).forEach(s => {
+      m[s] = _.cloneDeep(source[s])
+    })
+    return m
+  } else if (_.isArray(source)) {
+    return source.map(s => {
+      return cloneMeta(s)
+    })
+  }
+}

src/components/entities/EntityTop.vue

@@ -71,7 +71,6 @@ export default {
       this.$emit('close')
     },
     filter (row) {
-      console.info(row.name, this.item)
       this.$emit('filter', row.name, this.item)
     },
     initEntityTop (leftVal, itemVal, data, totalCount) {

src/utils/sql-parser.js

@@ -1,5 +1,5 @@
 import { GenericSQL, SqlParserVisitor } from 'dt-sql-parser'
-import Meta, { connection, condition, columnType } from '@/components/advancedSearch/meta/meta'
+import Meta, { connection, condition, columnType, cloneMeta } from '@/components/advancedSearch/meta/meta'
 import _ from 'lodash'
 // 补全语句，用于解析
 const sqlPrev = 'select a from b where '
@@ -34,7 +34,7 @@ export default class SqlParser extends SqlParserVisitor {
       this.tempMeta.column.type = columnType.fullText
       this.tempMeta.column.name = stringInQuot(this.tempMeta.column.name)
       this.tempMeta.column.label = this.tempMeta.column.name
-      this.metaList.push(_.cloneDeep(this.tempMeta))
+      this.metaList.push(cloneMeta(this.tempMeta))
     }
     this.tempMeta = null
     return {
@@ -44,12 +44,15 @@ export default class SqlParser extends SqlParserVisitor {
   }
 
   formatMetaList () {
-    const tempMetaList = _.cloneDeep(this.metaList)
+    const tempMetaList = cloneMeta(this.metaList)
     this.metaList = []
     tempMetaList.forEach(meta => {
       if (meta.meta === condition) {
         if (meta.column.type === columnType.fullText) {
-          this.metaList.push({ ...meta, name: stringInQuot(meta.name), label: stringInQuot(meta.name) })
+          const m = cloneMeta(meta)
+          m.column.name = stringInQuot(meta.column.name)
+          m.column.label = m.column.name
+          this.metaList.push(m)
         } else if (meta.column.type === columnType.string) {
           if (_.isArray(meta.value.value)) {
             meta.value.value = meta.value.value.map(v => {
@@ -69,6 +72,8 @@ export default class SqlParser extends SqlParserVisitor {
           }
           this.metaList.push(meta)
         }
+      } else {
+        this.metaList.push(meta)
       }
     })
     return {
@@ -81,9 +86,11 @@ export default class SqlParser extends SqlParserVisitor {
     let sql = ''
     metaList.forEach(meta => {
       if (meta.meta === condition) {
-        sql += meta.column.name
+        sql += (meta.column.name)
         if (meta.column.type !== columnType.fullText) {
           sql += `${meta.operator.value}${meta.value.value} `
+        } else {
+          sql += ' '
         }
       }
       if (meta.meta === connection) {
@@ -133,7 +140,7 @@ export default class SqlParser extends SqlParserVisitor {
             }
           }
           this.tempMeta.value.show = true
-          this.metaList.push(_.cloneDeep(this.tempMeta))
+          this.metaList.push(cloneMeta(this.tempMeta))
         }
         break
       }
@@ -158,7 +165,7 @@ export default class SqlParser extends SqlParserVisitor {
           this.tempMeta.column.type = columnType.fullText
           this.tempMeta.column.name = stringInQuot(this.tempMeta.column.name)
           this.tempMeta.column.label = this.tempMeta.column.name
-          this.metaList.push(_.cloneDeep(this.tempMeta))
+          this.metaList.push(cloneMeta(this.tempMeta))
           this.tempMeta = null
         }
         const meta = new Meta(connection)

src/views/entityExplorer/EntityExplorer.vue

@@ -23,7 +23,7 @@
       <div style="display: flex; height: 100%;">
         <entity-filter
             :filter-data="filterData"
-            :search-params="searchParams"
+            :q="q"
             :time-filter="timeFilter"
             @filter="filter"
         ></entity-filter>
@@ -124,7 +124,7 @@ import EntityList from '@/views/entityExplorer/entityList/EntityList'
 import { entityType, entityFilterType, defaultPageSize } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
-import { getNowTime } from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 
@@ -155,7 +155,6 @@ export default {
       entityIpNew: '-',
       entityIpActive: '-',
 
-      searchParams: {},
       showFilter: ['ip', 'app', 'domain'], // ip,domain,app
       pageObj: {
         pageNo: 1,
@@ -256,6 +255,8 @@ export default {
         }
       ],
       listData: [],
+      q: '',
+      limitFilterType: true, // 是否限定了filter的类型
       listLoading: false/*,
       listData: JSON.parse(`[
         {
@@ -435,21 +436,49 @@ export default {
     dateTimeRangeChange (s, e, v) {
       this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
     },
-    search (params) {
+    search (metaList, formatSql) {
-      if (params) {
+      if (formatSql) {
-        this.searchParams = params
+        this.q = formatSql
+      } else {
+        this.q = ''
       }
+
       if (!this.showList) {
         this.showList = true
       }
       // 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
-      if (this.searchParams && Object.keys(this.searchParams).length > 0) {
+      if (formatSql) {
-        this.queryFilter({ entityType: 'ip', q: this.searchParams.q, ...this.timeFilter })
+        const entityTypeMeta = metaList.find(meta => {
-        this.queryFilter({ entityType: 'app', q: this.searchParams.q, ...this.timeFilter })
+          return meta.column && meta.column === 'entity_type'
-        this.queryFilter({ entityType: 'domain', q: this.searchParams.q, ...this.timeFilter })
+        })
-        this.queryList({ q: this.searchParams.q, ...this.timeFilter, ...this.pageObj })
+        if (entityTypeMeta) {
-        this.queryListTotal({ q: this.searchParams.q, ...this.timeFilter })
+          let entityType = ''
+          this.limitFilterType = false
+          if (entityTypeMeta.value.value === "'ip'") {
+            this.limitFilterType = true
+            entityType = 'ip'
+          } else if (entityTypeMeta.value.value === "'domain'") {
+            this.limitFilterType = true
+            entityType = 'domain'
+          } else if (entityTypeMeta.value.value === "'app'") {
+            this.limitFilterType = true
+            entityType = 'app'
+          } else {
+            this.limitFilterType = false
+          }
+          this.queryFilter({ entityType: entityType, q: formatSql, ...this.timeFilter })
+          this.queryList({ q: formatSql, ...this.timeFilter, ...this.pageObj })
+          this.queryListTotal({ q: formatSql, ...this.timeFilter })
+        } else {
+          this.limitFilterType = false
+          this.queryFilter({ entityType: 'ip', q: formatSql, ...this.timeFilter })
+          this.queryFilter({ entityType: 'domain', q: formatSql, ...this.timeFilter })
+          this.queryFilter({ entityType: 'app', q: formatSql, ...this.timeFilter })
+          this.queryList({ q: formatSql, ...this.timeFilter, ...this.pageObj })
+          this.queryListTotal({ q: formatSql, ...this.timeFilter })
+        }
       } else {
+        this.limitFilterType = false
         this.queryFilter({ entityType: 'ip', ...this.timeFilter })
         this.queryFilter({ entityType: 'app', ...this.timeFilter })
         this.queryFilter({ entityType: 'domain', ...this.timeFilter })
@@ -494,8 +523,8 @@ export default {
     queryFilter (params) {
       const queryParams = {
         ...params,
-        startTime: parseInt(params.startTime / 1000),
+        startTime: getSecond(params.startTime),
-        endTime: parseInt(params.endTime / 1000)
+        endTime: getSecond(params.endTime)
       }
       get(api.entityFilter, queryParams).then(response => {
         if (response.data.result) {
@@ -505,6 +534,10 @@ export default {
                 d.value = response.data.result[d.column]
               })
               this.filterData[0].totalCount = response.data.result.count
+              if (this.limitFilterType) {
+                this.cleanFilterData(1)
+                this.cleanFilterData(2)
+              }
               break
             }
             case 'app': {
@@ -512,6 +545,10 @@ export default {
                 d.value = response.data.result[d.column]
               })
               this.filterData[1].totalCount = response.data.result.count
+              if (this.limitFilterType) {
+                this.cleanFilterData(0)
+                this.cleanFilterData(2)
+              }
               break
             }
             case 'domain': {
@@ -519,6 +556,10 @@ export default {
                 d.value = response.data.result[d.column]
               })
               this.filterData[2].totalCount = response.data.result.count
+              if (this.limitFilterType) {
+                this.cleanFilterData(0)
+                this.cleanFilterData(1)
+              }
               break
             }
           }
@@ -616,6 +657,12 @@ export default {
           this.entityIpActive = response.data.result
         }
       })
+    },
+    cleanFilterData (index) {
+      this.filterData[index].data.forEach(d => {
+        d.value = 0
+      })
+      this.filterData[index].totalCount = 0
     }
   },
   mounted () {

src/views/entityExplorer/EntityFilter.vue

@@ -44,7 +44,7 @@ export default {
   },
   props: {
     filterData: Array,
-    searchParams: Object,
+    q: String,
     timeFilter: Object
   },
   data () {
@@ -63,7 +63,7 @@ export default {
       const offsetLeft = this.$refs['entityTopTen' + i].offsetLeft
       const leftVal = offsetLeft + width
       const queryParams = {
-        q: this.searchParams.q,
+        q: this.q,
         entityType: type,
         column: item.topColumn,
         top: 10,

src/views/entityExplorer/search/ExplorerSearch.vue

@@ -177,8 +177,8 @@ export default {
     }
   },
   methods: {
-    search (q) {
+    search (metaList, formatSql) {
-      this.$emit('search', { q: q })
+      this.$emit('search', metaList, formatSql)
     },
     addParams (params) {
       this.$refs.search.addParams(params)