CN-1415 fix: 建议Entity列表页增加Search History用于查看和使用历史搜索条件

2023-11-07 18:36:01 +08:00
parent 36c3db5dee
commit c89397da97
6 changed files with 169 additions and 34 deletions
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -65,8 +65,8 @@

    &.search__suffixes--tag-mode__block {
      background: #fff;
-      margin-top: -10px;
-      padding-top: 10px;
+      margin-top: -9px;
+      padding-top: 9px;
    }
  }
  /*.search-tip--error {
@@ -174,6 +174,9 @@
    }
  }
 }
+.entity__search .tag-search {
+  padding-left: 65px;
+}

 .el-popover.my-popper-class {
  width: auto !important;
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -13,6 +13,11 @@
    color: #ccc;
  }
 }
+.entity__search {
+  .CodeMirror {
+    padding-left: 60px;
+  }
+}

 /* PADDING */

--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -26,7 +26,8 @@
    padding: 0 20px;

    &.explorer-search__input-case--question-mark-in-line {
-      flex-direction: row;
+      //flex-direction: row;
+      flex-direction: column;
      padding: 0;

      .explorer-search__input {
@@ -53,14 +54,14 @@
      max-width: 1000px;
      height: 40px;
    }
-    .explorer-search__foot {
+    .explorer-search__foot,.explorer-search__foot-list {
      display: flex;
-      padding-top: 18px;
+      padding-top: 9px;
      width: 100%;
      max-width: 1000px;
      position: relative;
-      justify-content: space-between;
-      font-weight: bold;
+      justify-content: flex-start;
+      //font-weight: bold;

      .foot__item {
        display: flex;
@@ -93,8 +94,8 @@
        width: 100%;
        max-width: 1000px;
        z-index: 2;
-        top: 47px;
-        border: 1px solid rgba(206,206,206,0.20);
+        //top: 47px;
+        border: 1px solid rgba(226,229,236,1);
        border-radius: 2px;
        background-color: white;

@@ -137,8 +138,32 @@
            color: #66b1ff;
          }
        }
+
+        .history__items-new {
+          max-height: 300px;
+          overflow: auto;
+          .el-table th,.el-table td {
+            padding: 6px 0;
+            border: none !important;
+          }
+          .el-table {
+            font-family: NotoSansSChineseRegular;
+            font-size: 14px;
+            color: #575757;
+            font-weight: 400;
+            thead {
+              font-family: NotoSansHans-Medium;
+              font-size: 14px;
+              color: #353636;
+              font-weight: 500;
+            }
+            .cell {
+              padding-left: 18px;
+            }
+          }
+        }
        .clear-all {
-          padding-left: 30px;
+          padding-left: 18px;
          font-weight: normal;
          font-size: 14px;
          height: 35px;
@@ -152,6 +177,64 @@
        }
      }
    }
+    .explorer-search__foot-list {
+      max-width: 756px;
+      position: absolute;
+      left: 196px;
+      top: 44px;
+      .search__history {
+        max-width: 756px;
+        margin-left: -196px;
+        .history__items-new {
+          max-height: 300px;
+          overflow: auto;
+          .el-table th,.el-table td {
+            padding: 4px 0;
+            border: none !important;
+          }
+          .el-table {
+            font-size: 12px;
+            thead {
+              font-size: 12px;
+            }
+          }
+          .el-table--scrollable-x .el-table__body-wrapper {
+            overflow-x: hidden;
+          }
+        }
+      }
+    }
  }

 }
+.highlight__text {
+  background: #FEECC2;
+  padding: 2px 3px;
+}
+.explorer-search__foot-list .explorer-search__block {
+  margin-left: -196px;
+  top: -42px;
+}
+.explorer-search__foot .explorer-search__block {
+  margin-left: 0;
+  top: -40px;
+}
+.explorer-search__block {
+  position: absolute;
+  padding: 10px 15px;
+  display: flex;
+  cursor: pointer;
+
+  i {
+    font-size: 20px;
+    color: #999;
+  }
+
+  .search-dividing-line {
+    width: 1px;
+    height: 30px;
+    background: #DEDEDE;
+    margin-left: 15px;
+    margin-top: -5px;
+  }
+}
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -1,8 +1,10 @@
 <template>
  <textarea
+      style="text-indent: 65px;"
+      cols="40"
      ref="textSearch"
  ></textarea>
-  <div class="search__suffixes search__suffixes--text-mode" style="background: #fff;">
+  <div class="search__suffixes search__suffixes--text-mode" style="padding-left: 1px">
    <div class="search__suffix">
      <el-popover
          popper-class="my-popper-class"
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1403,3 +1403,22 @@ export const myHighLight = {
    }
  }
 }
+
+export const changeTimeByDate = (date) => {
+  if (date) {
+    const nowDate = Date.now()
+    const oldDate = Date.parse(date)
+    const diff = Math.floor((nowDate - oldDate) / 1000)
+    if (diff < 60) {
+      return 60 + i18n.global.t('entity.search.secondsAgo')
+    } else if (diff >= 60 && diff < 3600) {
+      const minutes = Math.floor(diff / 60)
+      return minutes === 1 ? `${minutes} ${i18n.global.t('entity.search.minuteAgo')}` : `${minutes} ${i18n.global.t('entity.search.minutesAgo')}`
+    } else if (diff >= 3600 && diff < 86400) {
+      const hours = Math.floor(diff / 3600)
+      return hours === 1 ? `${hours} ${i18n.global.t('entity.search.hourAgo')}` : `${hours} ${i18n.global.t('entity.search.hoursAgo')}`
+    } else {
+      return new Date(oldDate)
+    }
+  }
+}
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -2,7 +2,7 @@
  <div class="explorer-search">
    <div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div>
    <div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
-      <div class="explorer-search__input explorer-search__input__border">
+      <div class="explorer-search__input explorer-search__input__border entity__search">
        <advanced-search
          ref="search"
          :column-list="columnList"
@@ -17,26 +17,40 @@
 <!--      <div class="search-symbol-inline" v-if="showList">-->
 <!--        <i class="cn-icon cn-icon-help"></i>-->
 <!--      </div>-->
-      <div v-if="!showList" class="explorer-search__foot" v-ele-click-outside="esc">
-        <div class="foot__item" @click="triggerHistory">
-          <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': showHistory }" style="padding-right: 5px;"></i>
-          <span>{{$t('search.searchHistory')}}</span>
-        </div>
-        <div class="foot__item">
-          <!-- <span @click="search">{{$t('overall.explore')}}</span>
-          <el-divider direction="vertical"></el-divider>
-          <span>{{$t('overall.help')}}</span>-->
+      <div :class="showList ? 'explorer-search__foot-list' : 'explorer-search__foot'" v-ele-click-outside="esc">
+        <div style="position: absolute;" class="explorer-search__block" @click="triggerHistory">
+          <i class="cn-icon cn-icon-time"></i>
+          <div class="search-dividing-line"></div>
        </div>
+<!--        <div class="foot__item" @click="triggerHistory">-->
+<!--          <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': showHistory }" style="padding-right: 5px;"></i>-->
+<!--          <span>{{$t('search.searchHistory')}}</span>-->
+<!--        </div>-->
+<!--        <div class="foot__item">-->
+<!--          &lt;!&ndash; <span @click="search">{{$t('overall.explore')}}</span>-->
+<!--          <el-divider direction="vertical"></el-divider>-->
+<!--          <span>{{$t('overall.help')}}</span>&ndash;&gt;-->
+<!--        </div>-->
        <transition name="el-zoom-in-top">
-          <div class="search__history" v-show="showHistory">
-            <div class="history__items">
-              <div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.str)">
-                <span class="item-date">{{h.date}}</span>
-                <div class="item-value" :title="h.str">{{h.str}}</div>
-              </div>
+          <div class="search__history" v-if="showHistory">
+            <div class="history__items-new">
+              <el-table
+                  :data="history"
+                  :default-sort="{ prop: 'date', order: 'descending' }"
+                  scrollbar-always-on="false"
+                  @row-click="selectHistory"
+                  style="overflow-x: unset"
+              >
+                <el-table-column prop="str" label="Search" min-width="560" />
+                <el-table-column prop="date" label="Last Run" sortable width="200">
+                  <template #default="scope">
+                    <span>{{ changeTimeByDate(scope.row.date) }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
            </div>
            <div class="clear-all">
-              <span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('overall.clear')}}</span>
+              <span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('entity.clearAll')}}</span>
              <div v-else>{{$t('overall.noRecords')}}</div>
            </div>
          </div>
@@ -53,6 +67,7 @@ import { storageKey } from '@/utils/constants'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { columnList } from '@/utils/static-data'
+import { changeTimeByDate } from '@/utils/tools'
 export default {
  name: 'CnSearch',
  components: {
@@ -90,6 +105,7 @@ export default {
    }
  },
  methods: {
+    changeTimeByDate,
    search ({ str, q, metaList, keywordList }) {
      if (str) {
        // 加入搜索记录，将记录数量控制在30以内
@@ -98,9 +114,8 @@ export default {
        const newItem = { str, date: this.dateFormatByAppearance(new Date()) }
        if (!_.isEmpty(oldHistory)) {
          const oldArr = JSON.parse(oldHistory)
-          const obj = oldArr.find(d => d.str === str)
-          if (obj) {
-            oldArr[0].date = this.dateFormatByAppearance(new Date())
+          if (str === oldArr[0].str) {
+            oldArr[0].date = Date.now()
          } else {
            oldArr.unshift(newItem)
          }
@@ -118,14 +133,19 @@ export default {
    addParams (params) {
      this.$refs.search.addParams(params)
    },
-    selectHistory (str) {
-      this.$refs.search.setStr(str)
+    selectHistory (row) {
+      this.$refs.search.setStr(row.str)
      this.showHistory = false
      this.$nextTick(() => {
        if (this.$refs.search.$refs.textMode) {
          this.$refs.search.$refs.textMode.focus()
        }
      })
+      if (this.showList) {
+        this.$nextTick(() => {
+          this.emitter.emit('advanced-search')
+        })
+      }
    },
    clearHistory () {
      localStorage.setItem(storageKey.entitySearchHistory, '')
@@ -141,7 +161,10 @@ export default {
      }
    },
    esc () {
+      const timer = setTimeout(() => {
        this.showHistory = false
+        clearTimeout(timer)
+      }, 100)
    }
  }
 }