Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

src/assets/css/components/views/entityExplorer/search/explorer-search.scss

@@ -81,51 +81,67 @@
       .search__history {
         position: absolute;
         display: flex;
-        padding: 10px 0;
+        padding: 10px 0 0 0;
         flex-direction: column;
         width: 100%;
         max-width: 1000px;
+        z-index: 2;
         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;
+        .history__items {
+          max-height: 300px;
+          overflow: auto;
+          .history__item {
+            height: 35px;
+            display: flex;
+            align-items: center;
+            padding-left: 30px;
+            font-weight: normal;
+            font-size: 14px;
+            flex-shrink: 0;
+
+            &.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 {
+            cursor: pointer;
+          }
+          .history__item:hover {
+            background-color: #ecf5ff;
+            color: #66b1ff;
+          }
+        }
+        .clear-all {
           padding-left: 30px;
           font-weight: normal;
           font-size: 14px;
+          height: 35px;
+          display: flex;
+          align-items: center;
+          color: #3976CB;
 
-          &.clear-all span {
+          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;
         }
       }
     }

src/components/advancedSearch/TextMode.vue

@@ -66,6 +66,9 @@ export default {
         this.$emit('search')
       }
     },
+    focus () {
+      this.codeMirror.focus()
+    },
     changeMode () {
       const originalSql = this.codeMirror.getValue()
       const parser = new SqlParser(originalSql, this.columnList)

src/views/entityExplorer/search/ExplorerSearch.vue

@@ -28,11 +28,13 @@
         </div>
         <transition name="el-zoom-in-top">
           <div class="search__history" v-show="showHistory" v-ele-click-outside="esc">
-            <div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.sql)">
-              <span class="item-date">{{h.date}}</span>
-              <div class="item-value" :title="h.sql">{{h.sql}}</div>
+            <div class="history__items">
+              <div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.sql)">
+                <span class="item-date">{{h.date}}</span>
+                <div class="item-value" :title="h.sql">{{h.sql}}</div>
+              </div>
             </div>
-            <div class="history__item clear-all">
+            <div class="clear-all">
               <span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('overall.clear')}}</span>
               <div v-else>暂无记录</div>
             </div>
@@ -196,7 +198,7 @@ export default {
   methods: {
     search (metaList, formatSql) {
       let sql = formatSql
-      if (metaList) {
+      if (metaList && this.$_.isArray(metaList)) {
         // 全文搜索处理
         const hasFullText = metaList.some(meta => {
           return meta.column && meta.column.type === columnType.fullText
@@ -207,7 +209,7 @@ export default {
         }
       }
       this.$emit('search', metaList, sql)
-      // 加入搜索记录
+      // 加入搜索记录，将记录数量控制在30以内
       if (sql) {
         const oldHistory = localStorage.getItem(storageKey.entitySearchHistory)
         let arr = []
@@ -216,6 +218,9 @@ export default {
           const oldArr = JSON.parse(oldHistory)
           oldArr.unshift(newItem)
           arr = [...oldArr]
+          if (arr.length > 30) {
+            arr = arr.slice(0, 30)
+          }
         } else {
           arr.push(newItem)
         }
@@ -228,6 +233,11 @@ export default {
     selectHistory (sql) {
       this.$refs.search.setSql(sql)
       this.showHistory = false
+      this.$nextTick(() => {
+        if (this.$refs.search.$refs.textMode) {
+          this.$refs.search.$refs.textMode.focus()
+        }
+      })
     },
     clearHistory () {
       localStorage.setItem(storageKey.entitySearchHistory, '')