CN-1258: 实体搜索框支持has函数

2023-08-25 09:56:29 +08:00
parent 21f32dfdda
commit 7f91d75792
6 changed files with 119 additions and 49 deletions
--- a/src/components/advancedSearch/Index.vue
+++ b/src/components/advancedSearch/Index.vue
@@ -18,7 +18,6 @@
        v-if="searchMode === 'tag'"
        ref="tagMode"
        :column-list="columnList"
-        :operator-list="showOperatorList"
        :connection-list="showConnectionList"
        :convert-meta-list="metaList"
        :show-list="showList"
@@ -31,7 +30,7 @@
 <script>
 import TagMode from '@/components/advancedSearch/TagMode'
 import TextMode from '@/components/advancedSearch/TextMode'
-import { defaultOperatorList, defaultConnectionList } from '@/components/advancedSearch/meta/meta'
+import { defaultConnectionList } from '@/components/advancedSearch/meta/meta'
 import _ from 'lodash'
 import { ref } from 'vue'
 import Parser from '@/components/advancedSearch/meta/parser'
@@ -64,8 +63,6 @@ export default {
      type: Array,
      required: true
    },
-    // 操作符列表
-    operatorList: Array,
    // 连接符列表
    connectionList: Array
  },
@@ -133,12 +130,10 @@ export default {
        }
      }
    }
-    // 如果参数中的operatorList、connectionList为空，使用默认值
-    const showOperatorList = _.isEmpty(props.operatorList) ? defaultOperatorList : [...props.operatorList]
+    // 如果参数中的connectionList为空，使用默认值
    const showConnectionList = _.isEmpty(props.connectionList) ? defaultConnectionList : [...props.connectionList]
    return {
      searchMode,
-      showOperatorList,
      showConnectionList
    }
  }
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -29,10 +29,13 @@
              ></el-option>
            </el-select>
          </div>
-          <span v-show="!meta.column.isEditing" @click="columnClick(meta)">{{meta.column.label}}</span>
+          <span v-if="!meta.column.isEditing && meta.operator.value !== 'has'" @click="columnClick(meta)">{{meta.column.label}}</span>
+          <!--操作符是has时，has需前置-->
+          <span v-else class="condition__operator">{{ meta.operator.value.toUpperCase() }}</span>
        </div>
        <!-- 已选操作符显示 -->
-        <div class="condition__operator" @click="operatorClick(meta)" v-if="meta.operator.show">{{meta.operator.value}}</div>
+        <div class="condition__operator" @click="operatorClick(meta)" v-if="meta.operator.show && meta.operator.value !== 'has'">{{meta.operator.value}}</div>
+        <div v-if="meta.operator.value === 'has'" class="condition__operator" style="color: #000C18">({{meta.column.label}},</div>
        <!-- 值 -->
        <div class="condition__value">
          <div v-if="meta.value.isEditing">
@@ -41,6 +44,8 @@
          </div>
          <span v-else @click="valueClick(meta)">{{meta.value.label}}</span>
        </div>
+        <div v-if="meta.operator.show && meta.operator.value === 'has'">)</div>
+
        <!-- 操作符选择器 -->
        <div class="condition__operation-select" v-if="meta.operator.show && meta.operator.isEditing">
          <div
@@ -107,7 +112,6 @@ export default {
  name: 'TagMode',
  props: {
    columnList: Array,
-    operatorList: Array,
    connectionList: Array,
    convertMetaList: Array,
    showList: Boolean
@@ -116,7 +120,8 @@ export default {
    return {
      condition,
      connection,
-      metaList: []
+      metaList: [],
+      operatorList: [] // 操作符列表，根据所选columnList的label来确定，一般为=,IN，tags操作符为has
    }
  },
  emits: ['changeMode', 'search'],
@@ -225,6 +230,9 @@ export default {
            this.metaList.splice(index, 1)
          }
        }
+        // 根据所选label在columnList中匹配label来确定操作符，一般为=,IN，tags操作符为has
+        const obj = this.columnList.find(t => t.label === meta.column.label)
+        this.operatorList = obj ? obj.doc.constraints.operator_functions.split(',') : ['=', 'IN']
      }, 200)
    },
    connectionClick (meta) {
--- a/src/components/advancedSearch/meta/parser.js
+++ b/src/components/advancedSearch/meta/parser.js
@@ -2,6 +2,7 @@ import Meta, { connection, condition, columnType } from './meta'
 import Token, { types } from './token'
 import ParserError, { errorTypes, errorDesc } from '@/components/advancedSearch/meta/error'
 import _ from 'lodash'
+import { columnList } from '@/utils/static-data'

 const strReg = {
  all: /^[\da-zA-Z\s.'><!=-_(),%]$/,
@@ -94,6 +95,9 @@ export default class Parser {
          } else if (meta.column.type === columnType.string) {
            if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
              str += `${meta.column.label} ${meta.operator.value} '${meta.value.value}' `
+            } else if (meta.operator.value.toLowerCase().indexOf('has') > -1) {
+              // 操作符为has时，has函数需要提前，格式为has(label,value)
+              str += `${meta.operator.value}(${meta.column.label},'${meta.value.value}') `
            } else {
              str += `${meta.column.label}${meta.operator.value}'${meta.value.value}' `
            }
@@ -141,6 +145,9 @@ export default class Parser {
        } else if (meta.column.type === columnType.string) {
          if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
            str += `${meta.column.label} ${meta.operator.value} '${meta.value.value}' `
+          } else if (meta.operator.value.toLowerCase().indexOf('has') > -1) {
+            // 操作符为has时，has函数需要提前，格式为has(label,value)
+            str += `${meta.operator.value}(${meta.column.label},'${meta.value.value}') `
          } else {
            str += `${meta.column.label}${meta.operator.value}'${meta.value.value}' `
          }
@@ -582,6 +589,11 @@ export default class Parser {
                  if (prevToken.type === types.connection && [types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
                    meta.column.type = columnType.string
                    meta.column.label = token.value
+                  } else if (token.value.toLowerCase().indexOf('has(') > -1) {
+                    meta.column.type = columnType.string
+                    // 目前token.value为has(Tag，但避免以后使用has函数的实体不限于Tag，故截取has(后的内容
+                    meta.column.label = token.value.substring(4)
+                    meta.operator.value = 'has'
                  } else {
                    isColumn = false
                  }
@@ -589,6 +601,11 @@ export default class Parser {
                  if ([types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
                    meta.column.type = columnType.string
                    meta.column.label = token.value
+                  } else if (token.value.toLowerCase().indexOf('has(') > -1) {
+                    meta.column.type = columnType.string
+                    // 目前token.value为has(Tag，但避免以后使用has函数的实体不限于Tag，故截取has(后的内容
+                    meta.column.label = token.value.substring(4)
+                    meta.operator.value = 'has'
                  } else {
                    isColumn = false
                  }
@@ -775,7 +792,10 @@ export function handleMetaListToStr (metaList) {
  // 长度为1时，即模糊搜索，例如搜索框值为1.1.1.1，则直接返回1.1.1.1
  // 如果为IP='1.1.1.1'的情况，则从metaList拼接成IP='1.1.1.1'返回出去
  if (metaList && metaList.length === 1) {
-    const arr = ['IP'.toLowerCase(), 'Domain'.toLowerCase(), 'App'.toLowerCase(), 'City'.toLowerCase(), 'Country'.toLowerCase(), 'ASN'.toLowerCase()]
+    const arr = []
+    columnList.forEach(item => {
+      arr.push(item.label.toLowerCase())
+    })
    let label = metaList[0].column.label
    let newStr = JSON.parse(JSON.stringify(label.toLowerCase()))
    // 将str中的IP、Domain等替换为数组arr中的元素
@@ -785,7 +805,11 @@ export function handleMetaListToStr (metaList) {
    // 检查str字段在arr中是否出现,true为出现过
    const result = arr.some(item => newStr.includes(item))
    if (result) {
-      return `${metaList[0].column.label} ${metaList[0].operator.value} ${metaList[0].value.label}`
+      if (metaList[0].operator.value.toLowerCase() === 'has') {
+        return `${metaList[0].operator.value}(${metaList[0].column.label},'${metaList[0].value.label}')`
+      } else {
+        return `${metaList[0].column.label} ${metaList[0].operator.value} ${metaList[0].value.label}`
+      }
    } else {
      const regex = /^["']|["']$/
      // 去除两侧引号，如'1.1.1.1',避免校验时被当作app
@@ -797,10 +821,15 @@ export function handleMetaListToStr (metaList) {
  } else if (metaList && metaList.length > 1) {
    // 此为按语法搜索，将metaList转为字符串
    const newMetaList = []
+    let hasStr = ''
    // 去除metaList的AND项
    metaList.forEach(item => {
      if (item.value !== 'AND') {
-        newMetaList.push(item)
+        if (item.column.label.toLowerCase() === 'tag') {
+          hasStr += `${item.operator.value}(${item.column.label},'${item.value.value}') AND `
+        } else {
+          newMetaList.push(item)
+        }
      }
    })

@@ -815,6 +844,9 @@ export function handleMetaListToStr (metaList) {
        let str = newObj[i]
        str = str.replace(/(\d+\.\d+\.\d+\.\d+),(\d+\.\d+\.\d+\.\d+)/g, "'$1','$2'")
        lastObj[i] = `${i} IN (${str})`
+      } else if (i.toLowerCase() === 'tag') {
+        // lastObj[i] = `${i} = '${newObj[i]}'`
+        lastObj[i] = `has(${i},'${newObj[i]}')`
      } else {
        // 单独存在的,直接保留
        lastObj[i] = `${i} = '${newObj[i]}'`
@@ -825,7 +857,7 @@ export function handleMetaListToStr (metaList) {
    for (const i in lastObj) {
      str += lastObj[i] + ' AND '
    }
-    str = str.slice(0, -5)
+    str = str.slice(0, -5) + ' ' + hasStr.slice(0, -5)

    return str
  }
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -386,8 +386,8 @@ export async function getPermission () {
    axios.post(api.permission, { token: localStorage.getItem(storageKey.token) }).then(response => {
      resolve({
        menuList: sortByOrderNum(response.data.data.menus),
-        buttonList: response.data.buttons,
-        roleList: response.data.roles
+        buttonList: response.data.data.buttons,
+        roleList: response.data.data.roles
      })
    })
  })
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1411,12 +1411,22 @@ export function comparedEntityKey (str) {
        // 判断是否包含=或者in
        const keyEqual = item.substring(0, item.indexOf('='))
        const keyIn = item.substring(0, item.indexOf(' IN '))
+
+        let keyHas // 目前只有Tag操作符为has函数，避免以后会增加其他实体使用has，故不单独将has作为tag使用
+        let objHas
+        if (item.toLowerCase().indexOf('has(') > -1) {
+          keyHas = item.match(/[()]([^,]+)/)[1] // 例：has(Tag,'111'),截取Tag
+          objHas = columnList.find(t => t.label.toLowerCase() === keyHas.toLowerCase())
+        }
+
        const objEqual = columnList.find(t => t.label.toLowerCase() === keyEqual.toLowerCase())
        const objIn = columnList.find(t => t.label.toLowerCase() === keyIn.toLowerCase())
        if (objEqual) {
          newQ += objEqual.label + item.substring(item.indexOf('='), item.length) + ' AND '
        } else if (objIn) {
          newQ += objIn.label + item.substring(item.indexOf(' IN '), item.length) + ' AND '
+        } else if (objHas) {
+          newQ += item.substring(item.indexOf(' has'), item.length) + ' AND '
        } else {
          errorQ += '[' + keyEqual + ']' + '、'
          returnObj.isKey = false
@@ -1451,6 +1461,11 @@ export function comparedEntityKey (str) {
      key: q,
      isKey: true
    }
+  } else if (q && (q.indexOf('has(') > -1)) {
+    return {
+      key: q,
+      isKey: true
+    }
  } else {
    return {
      key: q,
@@ -1513,47 +1528,70 @@ const handleStrToUniteStr = (str) => {
  // 若str = "IP='1.1.1.1' AND Domain IN ('baidu.com','jd.com') AND IP='2.2.2.2'"
  // 则将转换为 str = "IP IN ('1.1.1.1','2.2.2.2') AND Domain IN ('baidu.com','jd.com')"
  const arr = str.split(' AND ')
-  const newArr = []
+  const repeatArr = [] // 判断label是否重复的数组

-  // 仿造成metaList形式如 [{ label: 'IP', value: '1.1.1.1' } ... ]
-  // 从而根据label判断是否是同一属性，如是IP的话，则将value进行拼接，然后再使用in ()包裹
+  // 如果字符串不存在相同字段，则直接返回str，如IP = '1' AND has(Tag,'1')
  arr.forEach(item => {
    if (item.indexOf('=') > -1) {
      const label = item.substring(0, item.indexOf('='))
-      const value = item.substring(item.indexOf('=') + 1)
-      // 去除单引号
-      newArr.push({ label: label, value: value.replace(/^'|'$/g, '') })
+      repeatArr.push(label)
    } else if (item.indexOf(' IN ') > -1) {
      const label = item.substring(0, item.indexOf(' IN '))
-      let value = item.substring(item.indexOf(' IN ') + 4) // 去除（）
-      value = value.replace(/[\(\)]/g, '')
-      newArr.push({ label: label, value: value })
+      repeatArr.push(label)
    }
  })

-  const newObj = combineLabel1(newArr)
-  const lastObj = {}
-  for (const i in newObj) {
-    if (newObj[i].indexOf('(') > -1) {
-      // 原来为IN ()格式的直接保留
-      lastObj[i] = `${i} IN ${newObj[i]}`
-    } else if (newObj[i].indexOf(',') > -1) {
-      let str = newObj[i]
-      str = str.replace(/(\d+\.\d+\.\d+\.\d+),(\d+\.\d+\.\d+\.\d+)/g, "'$1','$2'")
-      lastObj[i] = `${i} IN (${str})`
-    } else {
-      // 单独存在的,直接保留
-      lastObj[i] = `${i} = '${newObj[i]}'`
+  const set = new Set(repeatArr)
+  if (set.size === repeatArr.length) {
+    return str
+  } else {
+    const hasArr = [] // has函数的操作不必合并在一起，继续用and连接，单独放一边
+    const commonArr = [] // 普通连接符数组，如连接符为=、in等，
+
+    // 仿造成metaList形式如 [{ label: 'IP', value: '1.1.1.1' } ... ]
+    // 从而根据label判断是否是同一属性，如是IP的话，则将value进行拼接，然后再使用in ()包裹
+    arr.forEach(item => {
+      if (item.indexOf('=') > -1) {
+        const label = item.substring(0, item.indexOf('='))
+        const value = item.substring(item.indexOf('=') + 1)
+        // 去除单引号
+        commonArr.push({ label: label, value: value.replace(/^'|'$/g, '') })
+      } else if (item.indexOf(' IN ') > -1) {
+        const label = item.substring(0, item.indexOf(' IN '))
+        let value = item.substring(item.indexOf(' IN ') + 4) // 去除（）
+        value = value.replace(/[\(\)]/g, '')
+        commonArr.push({ label: label, value: value })
+      } else if (item.toLowerCase().indexOf('has(') > -1) {
+        hasArr.push(item)
+      }
+    })
+
+    const commonObj = combineLabel1(commonArr)
+    const lastObj = {}
+    for (const i in commonObj) {
+      if (commonObj[i].indexOf('(') > -1) {
+        // 原来为IN ()格式的直接保留
+        lastObj[i] = `${i} IN ${commonObj[i]}`
+      } else if (commonObj[i].indexOf(',') > -1) {
+        let str = commonObj[i]
+        str = str.replace(/(\d+\.\d+\.\d+\.\d+),(\d+\.\d+\.\d+\.\d+)/g, "'$1','$2'")
+        lastObj[i] = `${i} IN (${str})`
+      } else {
+        // 单独存在的,直接保留
+        lastObj[i] = `${i} = '${commonObj[i]}'`
+      }
    }
-  }

-  let str1 = ''
-  for (const i in lastObj) {
-    str1 += lastObj[i] + ' AND '
-  }
-  str1 = str1.slice(0, -5)
+    let lastStr = ''
+    for (const i in lastObj) {
+      lastStr += lastObj[i] + ' AND '
+    }
+    lastStr = lastStr.slice(0, -5)
+    const hasStr = hasArr.join(' AND ')
+    lastStr = lastStr + ' ' + hasStr

-  return str1
+    return lastStr
+  }
 }
 /**
 * 根据label判断是否是同一属性，是的话，则将value进行拼接，否则按原形式返回
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -6,7 +6,6 @@
        <advanced-search
          ref="search"
          :column-list="columnList"
-          :operator-list="operatorList"
          :connection-list="connectionList"
          :default-mode="defaultMode"
          :full-text="true"
@@ -68,8 +67,6 @@ export default {
  data () {
    return {
      columnList: columnList,
-      // operatorList: ['=', '!=', /* '>', '<', '>=', '<=', */'IN', 'NOT IN', 'LIKE', 'NOT LIKE'],
-      operatorList: ['=', 'IN'],
      connectionList: [
        {
          value: 'AND',