vue2-client 1.8.47 → 1.8.49

package/src/pages/DynamicStatistics/SearchBar.vue

@@ -1,130 +1,167 @@
-<template>
-  <div class="search-bar">
-    <a-input
-      class="search-input"
-      v-model="searchInput"
-      placeholder="请输入查询的内容"
-      @pressEnter="onSearch(searchInput)">
-    </a-input>
-    <a-button-group size="large" class="btn_group">
-      <a-button @click="onSearch(searchInput)" :loading="loading">
-        <a-icon type="search" />搜索
-      </a-button>
-      <a-tooltip>
-        <template slot="title">
-          将该结果收藏到收藏夹
-        </template>
-        <a-button class="star_button" @click="onSaveToFavorites(undefined)">
-          <a-icon type="star" v-show="!favoriteState"/>
-          <a-icon type="star" v-show="favoriteState" theme="filled"/>
-        </a-button>
-      </a-tooltip>
-      <a-tooltip>
-        <template slot="title">
-          收藏夹
-        </template>
-        <a-popover @visibleChange="favoriteListVisibleAction" title="收藏夹" placement="bottomRight" trigger="click">
-          <template slot="content">
-            <FavoriteList ref="favoriteList" @saveToFavorites="onSaveToFavorites" @openFavorites="openFavorites"/>
-          </template>
-          <a-button>
-            <a-icon type="menu" />
-          </a-button>
-        </a-popover>
-      </a-tooltip>
-    </a-button-group>
-  </div>
-</template>
-
-<script>
-import FavoriteList from './FavoriteList.vue'
-
-export default {
-  name: 'SearchBar',
-  components: { FavoriteList },
-  data () {
-    return {
-      searchInput: '', // 绑定搜索输入框的数据,
-      favoriteState: false, // 是否收藏
-      obj: undefined,
-      favoriteListVisible: false,
-      loading: false
-    }
-  },
-  methods: {
-    // 处理搜索操作
-    onSearch (value) {
-      this.loading = true
-      // 触发父组件的搜索事件，传递搜索输入的值
-      this.$emit('search', value, () => { this.loading = false })
-    },
-    // 处理打开收藏操作
-    openFavorites (uuid) {
-      this.$emit('openFavorites', uuid)
-    },
-    // 处理收藏操作
-    onSaveToFavorites (uuid) {
-      // 触发父组件的保存到收藏夹事件，传递当前搜索的uuid
-      let thisUUid
-      if (uuid) {
-        thisUUid = uuid
-      } else if (this.obj) {
-        thisUUid = this.obj.uuid
-      } else {
-        thisUUid = undefined
-      }
-      this.$emit('saveToFavorites', thisUUid)
-    },
-    // 收藏夹显示隐藏的回调
-    favoriteListVisibleAction (visible) {
-      if (this.$refs.favoriteList && visible) {
-        this.$refs.favoriteList.loadData()
-      }
-    },
-    init () {
-      this.searchInput = ''
-      this.obj = undefined
-      this.favoriteState = false
-    },
-    setObj (obj) {
-      this.obj = obj
-      this.searchInput = obj.question
-      this.favoriteState = obj.isFavorite
-    },
-    setFavorite (uuid, isFavorite) {
-      if (this.obj && uuid === this.obj.uuid) {
-        this.favoriteState = isFavorite
-      }
-      this.favoriteListVisibleAction(true)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.search-bar {
-  display: flex;
-  justify-content: center;
-  padding: 25px 0;
-  margin-bottom: 20px;
-  :deep(.ant-input) {
-    padding: 4px 80px 4px 40px;
-    height: 48px;
-    font-size: 16px;
-  }
-  .btn_group {
-    padding-left: 6px;
-    :deep(.ant-btn) {
-      height: 100%;
-      color: #4F93FE;
-    }
-    .star_button {
-      color: #ffba00;
-    }
-  }
-}
-
-.search-input {
-  width: 40%;
-}
-</style>
+<template>
+  <div class="search-bar">
+    <a-auto-complete
+      class="search-input"
+      placeholder="请输入查询的内容"
+      option-label-prop="title"
+      @select="onSearch"
+      @search="handleSearch"
+    >
+      <template slot="dataSource">
+        <a-select-option v-for="item in dataSourceResults" :key="item.category" :title="item.category">
+          <span>{{ item.category.substr(0,item.category.indexOf(searchInput)) }}</span>
+          <span style="color: red">{{ searchInput }}</span>
+          <span>{{ item.category.substr(item.category.indexOf(searchInput)+searchInput.length) }}</span>
+        </a-select-option>
+      </template>
+      <a-input
+        v-model="searchInput"
+        placeholder="请输入查询的内容"
+        @pressEnter="onSearch(searchInput)">
+      </a-input>
+    </a-auto-complete>
+    <a-button-group size="large" class="btn_group">
+      <a-button @click="onSearch(searchInput)" :loading="loading">
+        <a-icon type="search"/>
+        搜索
+      </a-button>
+    </a-button-group>
+  </div>
+</template>
+
+<script>
+import FavoriteList from './FavoriteList.vue'
+import { post } from '@/services/api'
+
+export default {
+  name: 'SearchBar',
+  components: { FavoriteList },
+  data () {
+    return {
+      searchInput: '', // 绑定搜索输入框的数据,
+      favoriteState: false, // 是否收藏
+      obj: undefined,
+      favoriteListVisible: false,
+      loading: false,
+      dataSource: [],
+      dataSourceResults: [],
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    handleSearch (value) {
+      if (value) {
+        this.dataSourceResults = this.dataSource.filter(
+          item => item.category.indexOf(value) !== -1
+        )
+      } else {
+        this.dataSourceResults = []
+      }
+    },
+    // 处理搜索操作
+    onSearch (value) {
+      this.loading = true
+      // 触发父组件的搜索事件，传递搜索输入的值
+      this.$emit('search', value, () => {
+        this.loading = false
+      })
+    },
+    // // 处理打开收藏操作
+    // openFavorites (uuid) {
+    //   this.$emit('openFavorites', uuid)
+    // },
+    // 收藏夹显示隐藏的回调
+    favoriteListVisibleAction (visible) {
+      if (this.$refs.favoriteList && visible) {
+        this.$refs.favoriteList.loadData()
+      }
+    },
+    init () {
+      post('/api/af-system/logic/openapi/getCommonData', {
+        type: 'ai-evaluation',
+        content: '11'
+      }).then(res => {
+        // todo docker 接口没更新 模拟数据
+        res.data = [
+          {
+            f_input_date: '2024-02-27 20:22:54',
+            id: 1,
+            f_json: '{"date":"2024-02-27 20:21:51","evaluation":true,"question":"查询近三个月各销售人员的销售情况","data":[],"uuid":"461fb4d7-1cc3-4959-82b7-899c6b66a25a","isFavorite":true}',
+            f_type: 'ai-evaluation'
+          },
+          {
+            f_input_date: '2024-02-27 20:22:54',
+            id: 1,
+            f_json: '{"date":"2024-02-27 20:21:51","evaluation":true,"question":"查询近三个月各销售人员的销售情况","data":[],"uuid":"461fb4d7-1cc3-4959-82b7-899c6b66a25a","isFavorite":true}',
+            f_type: 'ai-evaluation'
+          },
+          {
+            f_input_date: '2024-02-27 20:22:54',
+            id: 1,
+            f_json: '{"date":"2024-02-27 20:21:51","evaluation":true,"question":"查询近三个月各销售人员的销售情况","data":[],"uuid":"461fb4d7-1cc3-4959-82b7-899c6b66a25a","isFavorite":true}',
+            f_type: 'ai-evaluation'
+          }
+        ]
+        // 提取 json 中的 question， 并去重
+        this.dataSource = res.data.map(item => JSON.parse(item.f_json).question)
+          .filter((item, index, arr) => arr.indexOf(item) === index)
+          .map(item => ({ category: item }))
+      })
+      this.searchInput = ''
+      this.obj = undefined
+      this.favoriteState = false
+    },
+    setObj (obj) {
+      this.obj = obj
+      this.searchInput = obj.question
+      this.favoriteState = obj.isFavorite
+    },
+    setFavorite (uuid, isFavorite) {
+      if (this.obj && uuid === this.obj.uuid) {
+        this.favoriteState = isFavorite
+      }
+      this.favoriteListVisibleAction(true)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.search-bar {
+  display: flex;
+  justify-content: center;
+  padding: 25px 0;
+  margin-bottom: 20px;
+
+  :deep(.ant-input) {
+    padding: 4px 80px 4px 40px;
+    height: 48px;
+    font-size: 16px;
+  }
+
+  .btn_group {
+    padding-left: 6px;
+
+    :deep(.ant-btn) {
+      height: 100%;
+      color: #4F93FE;
+    }
+
+    .star_button {
+      color: #ffba00;
+    }
+  }
+
+  :deep(.ant-select-selection--single) {
+    height: 100%;
+  }
+}
+
+.search-input {
+  width: 40%;
+}
+</style>