feat: 搜索框(全文搜索,缺搜索历史)

This commit is contained in:
chenjinsong
2022-01-25 22:58:23 +08:00
parent a1e3d88b96
commit 1169d8a2cc
5 changed files with 62 additions and 23 deletions

View File

@@ -87,7 +87,7 @@
<script> <script>
import Meta, { connection, condition, columnType } from './meta/meta' import Meta, { connection, condition, columnType } from './meta/meta'
import _ from 'lodash' import _ from 'lodash'
import SqlParser, { stringInQuot } from '@/utils/sql-parser' import SqlParser, { stringInQuot } from '@/components/advancedSearch/meta/sql-parser'
export default { export default {
name: 'TagMode', name: 'TagMode',
props: { props: {
@@ -183,6 +183,7 @@ export default {
}, },
columnBlur (meta, index) { columnBlur (meta, index) {
setTimeout(() => { setTimeout(() => {
meta.column.name = meta.column.name.replace(/"/g, '')
meta.column.isEditing = false meta.column.isEditing = false
if (meta.isEmpty()) { if (meta.isEmpty()) {
if (this.metaList.length > 1) { if (this.metaList.length > 1) {
@@ -211,6 +212,7 @@ export default {
meta.operator.isEditing = true meta.operator.isEditing = true
}, },
valueBlur (meta) { valueBlur (meta) {
meta.value.value = meta.value.value.replace(/"/g, "'")
meta.value.label = meta.value.value // label是显示value是实际值目前的需求label和value是相等的 meta.value.label = meta.value.value // label是显示value是实际值目前的需求label和value是相等的
meta.value.isEditing = !meta.isCompleteCondition() meta.value.isEditing = !meta.isCompleteCondition()
}, },
@@ -235,7 +237,6 @@ export default {
changeMode () { changeMode () {
const parser = new SqlParser(this.metaList, this.columnList) const parser = new SqlParser(this.metaList, this.columnList)
const { metaList, formatSql } = parser.formatMetaList() const { metaList, formatSql } = parser.formatMetaList()
console.info(formatSql)
this.metaList = metaList this.metaList = metaList
this.$emit('changeMode', 'text', formatSql) this.$emit('changeMode', 'text', formatSql)
}, },

View File

@@ -18,7 +18,7 @@ import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css' import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/display/placeholder' import 'codemirror/addon/display/placeholder'
import 'codemirror/mode/sql/sql' import 'codemirror/mode/sql/sql'
import SqlParser, { stringInQuot } from '@/utils/sql-parser' import SqlParser, { stringInQuot } from '@/components/advancedSearch/meta/sql-parser'
import CodeMirror from 'codemirror' import CodeMirror from 'codemirror'
import { toRaw } from 'vue' import { toRaw } from 'vue'
import { columnType } from '@/components/advancedSearch/meta/meta' import { columnType } from '@/components/advancedSearch/meta/meta'
@@ -43,15 +43,27 @@ export default {
placeholder: 'Enter...', placeholder: 'Enter...',
lineNumbers: false lineNumbers: false
}) })
this.codeMirror.setOption('extraKeys', {
Enter: (cm) => {
this.search()
}
})
}, },
search () { search () {
const originalSql = this.codeMirror.getValue() let originalSql = this.codeMirror.getValue()
if (originalSql) {
originalSql = originalSql.replace(/"/g, '')
const parser = new SqlParser(originalSql, this.columnList) const parser = new SqlParser(originalSql, this.columnList)
const errorList = parser.validate() const errorList = parser.validate()
if (this.$_.isEmpty(errorList)) { if (this.$_.isEmpty(errorList)) {
const { metaList, formatSql } = parser.formatSql() const { metaList, formatSql } = parser.formatSql()
toRaw(this.codeMirror).setValue(formatSql) toRaw(this.codeMirror).setValue(formatSql)
this.$emit('search', metaList, formatSql) this.$emit('search', metaList, formatSql)
} else {
console.info(errorList)
}
} else {
this.$emit('search')
} }
}, },
changeMode () { changeMode () {

View File

@@ -32,7 +32,6 @@ export default class SqlParser extends SqlParserVisitor {
this.visit(tree) this.visit(tree)
if (this.metaList.length === 0 && this.tempMeta.column.name) { if (this.metaList.length === 0 && this.tempMeta.column.name) {
this.tempMeta.column.type = columnType.fullText this.tempMeta.column.type = columnType.fullText
this.tempMeta.column.name = stringInQuot(this.tempMeta.column.name)
this.tempMeta.column.label = this.tempMeta.column.name this.tempMeta.column.label = this.tempMeta.column.name
this.metaList.push(cloneMeta(this.tempMeta)) this.metaList.push(cloneMeta(this.tempMeta))
} }
@@ -50,7 +49,7 @@ export default class SqlParser extends SqlParserVisitor {
if (meta.meta === condition) { if (meta.meta === condition) {
if (meta.column.type === columnType.fullText) { if (meta.column.type === columnType.fullText) {
const m = cloneMeta(meta) const m = cloneMeta(meta)
m.column.name = stringInQuot(meta.column.name) m.column.name = meta.column.name
m.column.label = m.column.name m.column.label = m.column.name
this.metaList.push(m) this.metaList.push(m)
} else if (meta.column.type === columnType.string) { } else if (meta.column.type === columnType.string) {
@@ -82,9 +81,22 @@ export default class SqlParser extends SqlParserVisitor {
} }
} }
parseMetaToSql (metaList) { parseMetaToSql (metaList, isFullText) {
let sql = '' let sql = ''
metaList.forEach(meta => { metaList.forEach(meta => {
if (isFullText) {
if (meta.meta === condition) {
if (meta.column.type !== columnType.fullText) {
sql += `${meta.column.name}${meta.operator.value}${meta.value.value} `
} else {
sql += "QUERY('"
this.columnList.forEach(column => {
sql += `${column.name}:${meta.column.name.replace(/'/g, '')} `
})
sql += "') "
}
}
} else {
if (meta.meta === condition) { if (meta.meta === condition) {
sql += (meta.column.name) sql += (meta.column.name)
if (meta.column.type !== columnType.fullText) { if (meta.column.type !== columnType.fullText) {
@@ -93,6 +105,7 @@ export default class SqlParser extends SqlParserVisitor {
sql += ' ' sql += ' '
} }
} }
}
if (meta.meta === connection) { if (meta.meta === connection) {
sql += `${meta.value} ` sql += `${meta.value} `
} }
@@ -163,7 +176,6 @@ export default class SqlParser extends SqlParserVisitor {
// tempMeta的value为空则上个条件是全文搜索 // tempMeta的value为空则上个条件是全文搜索
if (!this.tempMeta.column.type && !this.tempMeta.value.value) { if (!this.tempMeta.column.type && !this.tempMeta.value.value) {
this.tempMeta.column.type = columnType.fullText this.tempMeta.column.type = columnType.fullText
this.tempMeta.column.name = stringInQuot(this.tempMeta.column.name)
this.tempMeta.column.label = this.tempMeta.column.name this.tempMeta.column.label = this.tempMeta.column.name
this.metaList.push(cloneMeta(this.tempMeta)) this.metaList.push(cloneMeta(this.tempMeta))
this.tempMeta = null this.tempMeta = null

View File

@@ -448,8 +448,9 @@ export default {
} }
// 带参数时只查询对应类型的entity不带参数时3种entity都查 // 带参数时只查询对应类型的entity不带参数时3种entity都查
if (formatSql) { if (formatSql) {
// entity_type处理不查其他两种entity_type对应的左侧筛选
const entityTypeMeta = metaList.find(meta => { const entityTypeMeta = metaList.find(meta => {
return meta.column && meta.column === 'entity_type' return meta.column && meta.column.name === 'entity_type'
}) })
if (entityTypeMeta) { if (entityTypeMeta) {
let entityType = '' let entityType = ''

View File

@@ -22,7 +22,7 @@
<span>{{$t('search.searchHistory')}}</span> <span>{{$t('search.searchHistory')}}</span>
</div> </div>
<div class="foot__item"> <div class="foot__item">
<span @click="search({})">{{$t('overall.explore')}}</span> <span @click="search">{{$t('overall.explore')}}</span>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<span>{{$t('overall.help')}}</span> <span>{{$t('overall.help')}}</span>
</div> </div>
@@ -33,6 +33,8 @@
<script> <script>
import AdvancedSearch from '@/components/advancedSearch/Index' import AdvancedSearch from '@/components/advancedSearch/Index'
import { columnType } from '@/components/advancedSearch/meta/meta'
import SqlParser from '@/components/advancedSearch/meta/sql-parser'
export default { export default {
name: 'CnSearch', name: 'CnSearch',
components: { components: {
@@ -178,7 +180,18 @@ export default {
}, },
methods: { methods: {
search (metaList, formatSql) { search (metaList, formatSql) {
this.$emit('search', metaList, formatSql) let sql = formatSql
if (metaList) {
// 全文搜索处理
const hasFullText = metaList.some(meta => {
return meta.column && meta.column.type === columnType.fullText
})
if (hasFullText) {
const parser = new SqlParser(metaList, this.columnList)
sql = parser.parseMetaToSql(metaList, true)
}
}
this.$emit('search', metaList, sql)
}, },
addParams (params) { addParams (params) {
this.$refs.search.addParams(params) this.$refs.search.addParams(params)