diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss index bcf81f8a..0507ea03 100644 --- a/src/assets/css/components/views/detections/detections.scss +++ b/src/assets/css/components/views/detections/detections.scss @@ -56,3 +56,9 @@ } } } +.filter__more { + padding-top: 5px; + font-size: 14px; + color: $--color-primary; + cursor: pointer; +} diff --git a/src/components/advancedSearch/Index.vue b/src/components/advancedSearch/Index.vue index 5ebc8f0a..73bed4ba 100644 --- a/src/components/advancedSearch/Index.vue +++ b/src/components/advancedSearch/Index.vue @@ -74,10 +74,19 @@ export default { this.metaList = data } }, + // params: [{column, operator, value}, ...] addParams (params) { this.$refs.tagMode && this.$refs.tagMode.addParams(params) this.$refs.textMode && this.$refs.textMode.addParams(params) }, + removeParams (params) { + this.$refs.tagMode && this.$refs.tagMode.removeParams(params) + this.$refs.textMode && this.$refs.textMode.removeParams(params) + }, + changeParams (n, o) { + this.$refs.tagMode && this.$refs.tagMode.changeParams(n, o) + this.$refs.textMode && this.$refs.textMode.changeParams(n, o) + }, setSql (sql) { if (this.searchMode === 'text') { this.sql = sql diff --git a/src/components/advancedSearch/TagMode.vue b/src/components/advancedSearch/TagMode.vue index 1f91d0b5..30b375ee 100644 --- a/src/components/advancedSearch/TagMode.vue +++ b/src/components/advancedSearch/TagMode.vue @@ -241,22 +241,39 @@ export default { this.metaList = metaList this.$emit('changeMode', 'text', formatSql) }, + // 处理value，例如转换IN的值 + handleValue (value, column) { + const isArray = ['IN', 'NOT IN'].indexOf(column.operator.value) > -1 + if (isArray) { + if (this.$_.isArray(value)) { + value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v) + return `(${value.join(',')})` + } else { + return value + } + } else { + return column.type === columnType.string ? stringInQuot(value) : value + } + }, addParams (params) { - Object.keys(params).forEach(key => { + params.forEach(param => { const column = this.columnList.find(column => { - return column.name === key + return column.name === param.column }) const meta = new Meta() - meta.column.name = key + meta.column.name = param.column meta.column.type = column ? column.type : columnType.string - meta.column.label = column ? column.label : key + meta.column.label = column ? column.label : param.column meta.operator.value = '=' meta.operator.show = true - meta.value.value = meta.column.type === columnType.string ? stringInQuot(params[key]) : params[key] + meta.value.value = this.handleValue(param.value, column) meta.value.show = true meta.value.label = meta.value.value this.addCondition(meta) }) + }, + changeParams (params) { + } }, watch: { diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue index e33c7e01..ce58cc5c 100644 --- a/src/components/advancedSearch/TextMode.vue +++ b/src/components/advancedSearch/TextMode.vue @@ -18,7 +18,7 @@ import 'codemirror/addon/hint/show-hint' import 'codemirror/addon/hint/show-hint.css' import 'codemirror/addon/display/placeholder' import 'codemirror/mode/sql/sql' -import SqlParser, { stringInQuot } from '@/components/advancedSearch/meta/sql-parser' +import SqlParser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/sql-parser' import CodeMirror from 'codemirror' import { toRaw } from 'vue' import { columnType } from '@/components/advancedSearch/meta/meta' @@ -82,12 +82,40 @@ export default { this.$emit('changeMode', 'tag', []) } }, + // 处理value，例如转换IN的值 + handleValue (value, column, operator) { + const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1 + if (isArray) { + if (this.$_.isArray(value)) { + value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v) + return `(${value.join(',')})` + } else { + return value + } + } else { + return column.type === columnType.string ? stringInQuot(value) : value + } + }, addParams (params) { + let current = this.codeMirror.getValue() + params.forEach(param => { + const column = this.columnList.find(c => c.name === param.column) + current = `${current ? current + ' AND ' : ''}${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}` + }) + toRaw(this.codeMirror).setValue(current) + }, + removeParams () { + + }, + changeParams (params) { Object.keys(params).forEach(key => { const column = this.columnList.find(column => { return column.name === key }) + console.info(this.columnList, params) let current = this.codeMirror.getValue() + let selected = column.value + // if (selected && selected.length ) current = `${current ? current + 'AND ' : ''}${key}=${(column.type === columnType.string ? stringInQuot(params[key]) : params[key])}` toRaw(this.codeMirror).setValue(current) }) diff --git a/src/components/advancedSearch/meta/sql-parser.js b/src/components/advancedSearch/meta/sql-parser.js index 9b183c44..108ec973 100644 --- a/src/components/advancedSearch/meta/sql-parser.js +++ b/src/components/advancedSearch/meta/sql-parser.js @@ -53,21 +53,24 @@ export default class SqlParser extends SqlParserVisitor { m.column.name = 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 => { - return stringInQuot(v) - }) - meta.value.label = `(${meta.value.value.join(',')})` - } else { - meta.value.value = stringInQuot(meta.value.value) - meta.value.label = stringInQuot(meta.value.value) - } - this.metaList.push(meta) } else { if (_.isArray(meta.value.value)) { - meta.value.label = `(${meta.value.value.join(',')})` + const tempArr = meta.value.value.map(v => { + return meta.column.type === columnType.string ? stringInQuot(v.trim()) : v.trim() + }) + meta.value.value = `(${tempArr.join(',')})` + meta.value.label = meta.value.value } else { + const isArray = ['IN', 'NOT IN'].indexOf(meta.operator.value) > -1 + if (isArray) { + const leftBracketIndex = meta.value.value.indexOf('(') + const rightBracketIndex = meta.value.value.lastIndexOf(')') + let temp = meta.value.value.substring(0, rightBracketIndex) + temp = meta.value.value.substring(leftBracketIndex + 1, temp.length) + let tempArr = temp.split(',') + tempArr = tempArr.map(t => meta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim()) + meta.value.value = `(${tempArr.join(',')})` + } meta.value.label = meta.value.value } this.metaList.push(meta) @@ -88,7 +91,7 @@ export default class SqlParser extends SqlParserVisitor { if (isFullText) { if (meta.meta === condition) { if (meta.column.type !== columnType.fullText) { - sql += `${meta.column.name}${meta.operator.value}${meta.value.value} ` + sql += `${meta.column.name}${handleOperatorSpace(meta.operator.value)}${meta.value.value} ` } else { sql += "QUERY('" this.columnList.forEach(column => { @@ -101,7 +104,7 @@ export default class SqlParser extends SqlParserVisitor { if (meta.meta === condition) { sql += (meta.column.name) if (meta.column.type !== columnType.fullText) { - sql += `${meta.operator.value}${meta.value.value} ` + sql += `${handleOperatorSpace(meta.operator.value)}${meta.value.value} ` } else { sql += ' ' } @@ -136,23 +139,26 @@ export default class SqlParser extends SqlParserVisitor { this.metaList.push(cloneMeta(this.tempMeta)) } } else { - if (this.tempMeta.column.type === columnType.string) { - if (_.isArray(value)) { - this.tempMeta.value.value = value.map(v => { - return stringInQuot(v) - }) - this.tempMeta.value.label = `(${this.tempMeta.value.value.join(',')})` - } else { - this.tempMeta.value.value = stringInQuot(value) - this.tempMeta.value.label = stringInQuot(value) - } + if (_.isArray(value)) { + const tempArr = value.map(v => { + return this.tempMeta.column.type === columnType.string ? stringInQuot(v.trim()) : v.trim() + }) + this.tempMeta.value.value = `(${tempArr.join(',')})` + this.tempMeta.value.label = this.tempMeta.value.value } else { - this.tempMeta.value.value = value - if (_.isArray(value)) { - this.tempMeta.value.label = `(${this.tempMeta.value.value.join(',')})` + const isArray = ['IN', 'NOT IN'].indexOf(this.tempMeta.operator.value) > -1 + if (isArray) { + const leftBracketIndex = value.indexOf('(') + const rightBracketIndex = value.lastIndexOf(')') + let temp = value.substring(0, rightBracketIndex) + temp = value.substring(leftBracketIndex + 1, temp.length) + let tempArr = temp.split(',') + tempArr = tempArr.map(t => this.tempMeta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim()) + this.tempMeta.value.value = `(${tempArr.join(',')})` } else { - this.tempMeta.value.label = value + this.tempMeta.value.value = value } + this.tempMeta.value.label = this.tempMeta.value.value } this.tempMeta.value.show = true this.metaList.push(cloneMeta(this.tempMeta)) @@ -168,7 +174,7 @@ export default class SqlParser extends SqlParserVisitor { // (not)in和(not)like特殊处理 case 'like': case 'in': { - const { column, operator, handleValue } = handleInOrLike(value) + const { column, operator, handleValue } = handleInOrLike(value, type) this.buildMeta('expression', column) this.buildMeta('operator', operator) this.buildMeta('expression', handleValue) @@ -245,6 +251,11 @@ export function stringInQuot (value) { const match = `${value}`.match(/^'.+?'$/) return match ? value : `'${value}'` } +// IN和LIKE前后加空格 +export function handleOperatorSpace (operator) { + return ['IN', 'NOT IN', 'LIKE', 'NOT LIKE'].indexOf(operator) > -1 ? ` ${operator} ` : operator +} +// in、like拆分方法；解析后内容挤一堆，如：a in ('b')解析结果是ain('b')，需要拆分 function handleInOrLike (value, type) { let sep if (type === 'in') { @@ -255,7 +266,7 @@ function handleInOrLike (value, type) { const notSep = `not${sep}` let arr let operator - if (value.split(notSep).length === 3) { + if (value.split(notSep).length === 2) { arr = value.split(notSep) operator = `NOT ${type.toUpperCase()}` } else { @@ -266,9 +277,9 @@ function handleInOrLike (value, type) { let v if (type === 'in') { - v = arr[2].substring(0, arr[2].length - 2).split(',') + v = `(${arr[1]}` } else if (type === 'like') { - v = `'${arr[2]}'` + v = `'${arr[1]}` } return { column: columnName, diff --git a/src/utils/tools.js b/src/utils/tools.js index a3a489a1..adb545ed 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -535,3 +535,21 @@ export function copyValue (item) { export function getCurrentRoute () { return router.currentRoute && router.currentRoute.path } + +// 判断数据相等 +export function arrayIsEqual (arr1, arr2) { + if (arr1 === arr2) { // 如果2个数组对应的指针相同，那么肯定相等，同时也对比一下类型 + return true + } else { + if (arr1.length !== arr2.length) { + return false + } else { + for (const i in arr1) { // 循环遍历对比每个位置的元素 + if (arr1[i] !== arr2[i]) { // 只要出现一次不相等，那么2个数组就不相等 + return false + } + } // for循环完成，没有出现不相等的情况，那么2个数组相等 + return true + } + } +} diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue index 0a54e76c..5953d560 100644 --- a/src/views/detections/DetectionFilter.vue +++ b/src/views/detections/DetectionFilter.vue @@ -9,8 +9,8 @@
-
@@ -44,6 +44,15 @@ export default { info: '#D1BD50' } } + }, + methods: { + /*filterChange (value, filter) { + this.$emit('filter', filter.column) + },*/ + showMore (filter) { + filter.showIndex && (filter.showIndex += 10) + filter.showIndex >= filter.data.length && (filter.showMore = false) + } } } diff --git a/src/views/detections/DetectionSearch.vue b/src/views/detections/DetectionSearch.vue index 8cfc0ec2..f935c969 100644 --- a/src/views/detections/DetectionSearch.vue +++ b/src/views/detections/DetectionSearch.vue @@ -21,6 +21,7 @@