diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss index 58f2052b..73e87515 100644 --- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss +++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss @@ -35,14 +35,21 @@ display: flex; align-items: center; height: 40px; + overflow: auto hidden; border: 1px solid #CECECE; border-radius: 2px; padding-left: 10px; padding-right: 80px; background-color: white; + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + .tag-search__meta, .tag-search__add { margin-right: 10px; + flex-shrink: 0; } .tag-search__add { diff --git a/src/assets/css/components/components/advancedSearch/codemirror.scss b/src/assets/css/components/components/advancedSearch/codemirror.scss index 3a55faf1..5fea5cad 100644 --- a/src/assets/css/components/components/advancedSearch/codemirror.scss +++ b/src/assets/css/components/components/advancedSearch/codemirror.scss @@ -160,12 +160,15 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} position: relative; overflow: hidden; background: white; + width: 100%; + padding-right: 120px; } .CodeMirror-scroll { // overflow: scroll !important; /* Things will break if this is overridden */ /* 50px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ + overflow: hidden; margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; diff --git a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss index 7c8080c1..d4f44976 100644 --- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss +++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss @@ -53,6 +53,7 @@ padding-top: 18px; width: 100%; max-width: 1000px; + position: relative; justify-content: space-between; font-weight: bold; @@ -64,9 +65,68 @@ background-color: #3976CB; } - span { + i, span { cursor: pointer; } + + i { + transition: all linear .1s; + transform: rotate(0) translate(0, 0); + } + i.arrow-rotate { + transform: rotate(90deg) translate(2px, 3px); + } + } + + .search__history { + position: absolute; + display: flex; + padding: 10px 0; + flex-direction: column; + width: 100%; + max-width: 1000px; + top: 47px; + border: 1px solid rgba(206,206,206,0.20); + border-radius: 2px; + background-color: white; + + .history__item { + height: 35px; + display: flex; + align-items: center; + padding-left: 30px; + font-weight: normal; + font-size: 14px; + + &.clear-all span { + cursor: pointer; + } + div { + color: #999; + } + .item-date { + color: #bbb; + padding: 0 20px 0 0; + } + .item-value { + flex-basis: calc(100% - 200px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + color: #444; + } + } + .history__item:not(.clear-all) { + cursor: pointer; + } + .history__item:hover:not(.clear-all) { + background-color: #ecf5ff; + color: #66b1ff; + } + .history__item.clear-all { + color: #3976CB; + } } } } diff --git a/src/components/advancedSearch/Index.vue b/src/components/advancedSearch/Index.vue index e2ec181c..ab35d17f 100644 --- a/src/components/advancedSearch/Index.vue +++ b/src/components/advancedSearch/Index.vue @@ -29,6 +29,7 @@ import TextMode from '@/components/advancedSearch/TextMode' import { defaultOperatorList, defaultConnectionList } from '@/components/advancedSearch/meta/meta' import _ from 'lodash' import { ref } from 'vue' +import SqlParser from "@/components/advancedSearch/meta/sql-parser"; export default { name: 'Index', components: { @@ -74,6 +75,18 @@ export default { addParams (params) { this.$refs.tagMode && this.$refs.tagMode.addParams(params) this.$refs.textMode && this.$refs.textMode.addParams(params) + }, + setSql (sql) { + if (this.searchMode === 'text') { + this.sql = sql + } else if (this.searchMode === 'tag') { + const parser = new SqlParser(sql, this.columnList) + const errorList = parser.validate() + if (this.$_.isEmpty(errorList)) { + const { metaList } = parser.formatSql() + this.metaList = metaList + } + } } }, setup (props) { diff --git a/src/utils/constants.js b/src/utils/constants.js index c7e08761..2176233a 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -16,7 +16,8 @@ export const storageKey = { tableTitlePrefix: 'cn-table-title', tablePageSizePrefix: 'cn-page-size', leftMenuShrink: 'cn-left-menu-shrink', - unsavedChange: 'cn-unsaved-change' + unsavedChange: 'cn-unsaved-change', + entitySearchHistory: 'cn-entity-search-history' } // 统一定义跳转来源 diff --git a/src/views/entityExplorer/search/ExplorerSearch.vue b/src/views/entityExplorer/search/ExplorerSearch.vue index c7f3eb82..06932a28 100644 --- a/src/views/entityExplorer/search/ExplorerSearch.vue +++ b/src/views/entityExplorer/search/ExplorerSearch.vue @@ -17,8 +17,8 @@
-
- +
+ {{$t('search.searchHistory')}}
@@ -26,6 +26,18 @@ {{$t('overall.help')}}
+ +
+
+ {{h.date}} +
{{h.sql}}
+
+
+ {{$t('overall.clear')}} +
暂无记录
+
+
+
@@ -35,6 +47,7 @@ import AdvancedSearch from '@/components/advancedSearch/Index' import { columnType } from '@/components/advancedSearch/meta/meta' import SqlParser from '@/components/advancedSearch/meta/sql-parser' +import {storageKey} from "@/utils/constants"; export default { name: 'CnSearch', components: { @@ -175,7 +188,9 @@ export default { value: 'OR', label: 'OR' } - ] + ], + showHistory: false, + history: [] } }, methods: { @@ -192,9 +207,43 @@ export default { } } this.$emit('search', metaList, sql) + // 加入搜索记录 + if (sql) { + const oldHistory = localStorage.getItem(storageKey.entitySearchHistory) + let arr = [] + const newItem = { sql, date: window.$dayJs.tz(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss') } + if (!this.$_.isEmpty(oldHistory)) { + const oldArr = JSON.parse(oldHistory) + oldArr.unshift(newItem) + arr = [...oldArr] + } else { + arr.push(newItem) + } + localStorage.setItem(storageKey.entitySearchHistory, JSON.stringify(arr)) + } }, addParams (params) { this.$refs.search.addParams(params) + }, + selectHistory (sql) { + this.$refs.search.setSql(sql) + this.showHistory = false + }, + clearHistory () { + localStorage.setItem(storageKey.entitySearchHistory, '') + this.history = [] + }, + triggerHistory () { + this.showHistory = !this.showHistory + if (this.showHistory) { + const history = localStorage.getItem(storageKey.entitySearchHistory) + if (!this.$_.isEmpty(history)) { + this.history = JSON.parse(history) + } + } + }, + esc () { + this.showHistory = false } } }