vue2-client 1.16.27 → 1.16.28

package/src/pages/DynamicStatistics/SearchBar.vue

@@ -1,192 +1,192 @@
-<template>
-  <div class="search-bar">
-    <!--    <a-select default-value="all" class="select" @change="handleChange" :dropdownMatchSelectWidth="false">-->
-    <!--      <a-select-option v-for="d in selectOption" :key="d.value">-->
-    <!--        {{ d.text }}-->
-    <!--      </a-select-option>-->
-    <!--    </a-select>-->
-    <a-auto-complete
-      v-model="searchInput"
-      class="search-input"
-      ref="autoComplete"
-      placeholder="请输入查询的内容"
-      option-label-prop="title"
-      @search="fetchFunction"
-    >
-      <a-spin v-if="searching" slot="notFoundContent" size="small" />
-      <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
-        class="contentInput"
-        v-model="searchInput"
-        placeholder="请输入查询的内容">
-      </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 { get, post } from '@vue2-client/services/api'
-import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
-
-export default {
-  name: 'SearchBar',
-  components: { FavoriteList },
-  data () {
-    // 检索去抖
-    this.fetchFunction = debounce(this.fetchFunction, 300)
-    return {
-      // 最后检索版本
-      lastFetchId: 0,
-      searching: false,
-      searchInput: '', // 绑定搜索输入框的数据,
-      favoriteState: false, // 是否收藏
-      obj: undefined,
-      favoriteListVisible: false,
-      loading: false,
-      dataSourceResults: [],
-      selectOption: [],
-      queryType: 'all',
-    }
-  },
-  computed: {
-  },
-  created () {
-    this.selectOption = [
-      { value: 'all', text: '全部' }
-    ]
-    get('/ai/question_types', {}).then(res => {
-      for (const item of res) {
-        this.selectOption.push({ value: item, text: item })
-      }
-    })
-  },
-  mounted () {
-    this.init()
-  },
-  methods: {
-    handleChange (value) {
-      this.queryType = value
-    },
-    fetchFunction (value) {
-      this.dataSourceResults = []
-      if (value) {
-        this.searching = true
-        this.lastFetchId += 1
-        const fetchId = this.lastFetchId
-        post('/api/af-system/logic/openapi/getCommonData', {
-          type: 'ai-question',
-          content: value
-        }).then(res => {
-          if (fetchId !== this.lastFetchId) {
-            return
-          }
-          if (res != null && Array.isArray(res)) {
-            // 提取 json 中的 question， 并去重
-            this.dataSourceResults = res.map(item => JSON.parse(item.f_json).question)
-              .filter((item, index, arr) => arr.indexOf(item) === index)
-              .map(item => ({ category: item }))
-          }
-        }).finally(() => {
-          this.searching = false
-        })
-      }
-    },
-    // 处理搜索操作
-    onSearch (value) {
-      this.loading = true
-      // 触发父组件的搜索事件，传递搜索输入的值
-      this.$emit('search', value, this.queryType, () => {
-        this.loading = false
-      })
-    },
-    // // 处理打开收藏操作
-    // openFavorites (uuid) {
-    //   this.$emit('openFavorites', uuid)
-    // },
-    // 收藏夹显示隐藏的回调
-    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;
-  align-items: center; /* 添加这一行来实现垂直居中 */
-  height:100%;
-
-  .btn_group {
-    padding-left: 6px;
-
-    :deep(.ant-btn) {
-      height: 3rem;
-      color: #4F93FE;
-    }
-
-    .star_button {
-      color: #ffba00;
-    }
-  }
-
-  :deep(.ant-select-selection--single) {
-    height: 100%;
-  }
-  :deep(.search__field__mirror) {
-    height: 100%;
-  }
-  .contentInput{
-    height: 48px;
-    width: 35rem;
-    background-color: #fff;
-    padding: 4px 80px 4px 40px;
-    font-size: 16px;
-  }
-  .select {
-    width: 160px;
-    height: 48px;
-    padding-right: 6px;
-    font-size: 16px;
-    text-align: center;
-    :deep(.ant-select-selection-selected-value) {
-      width: 120px;
-      height: 48px;
-      line-height: 48px;
-    }
-  }
-}
-
-</style>
+<template>
+  <div class="search-bar">
+    <!--    <a-select default-value="all" class="select" @change="handleChange" :dropdownMatchSelectWidth="false">-->
+    <!--      <a-select-option v-for="d in selectOption" :key="d.value">-->
+    <!--        {{ d.text }}-->
+    <!--      </a-select-option>-->
+    <!--    </a-select>-->
+    <a-auto-complete
+      v-model="searchInput"
+      class="search-input"
+      ref="autoComplete"
+      placeholder="请输入查询的内容"
+      option-label-prop="title"
+      @search="fetchFunction"
+    >
+      <a-spin v-if="searching" slot="notFoundContent" size="small" />
+      <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
+        class="contentInput"
+        v-model="searchInput"
+        placeholder="请输入查询的内容">
+      </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 { get, post } from '@vue2-client/services/api'
+import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
+
+export default {
+  name: 'SearchBar',
+  components: { FavoriteList },
+  data () {
+    // 检索去抖
+    this.fetchFunction = debounce(this.fetchFunction, 300)
+    return {
+      // 最后检索版本
+      lastFetchId: 0,
+      searching: false,
+      searchInput: '', // 绑定搜索输入框的数据,
+      favoriteState: false, // 是否收藏
+      obj: undefined,
+      favoriteListVisible: false,
+      loading: false,
+      dataSourceResults: [],
+      selectOption: [],
+      queryType: 'all',
+    }
+  },
+  computed: {
+  },
+  created () {
+    this.selectOption = [
+      { value: 'all', text: '全部' }
+    ]
+    get('/ai/question_types', {}).then(res => {
+      for (const item of res) {
+        this.selectOption.push({ value: item, text: item })
+      }
+    })
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    handleChange (value) {
+      this.queryType = value
+    },
+    fetchFunction (value) {
+      this.dataSourceResults = []
+      if (value) {
+        this.searching = true
+        this.lastFetchId += 1
+        const fetchId = this.lastFetchId
+        post('/api/af-system/logic/openapi/getCommonData', {
+          type: 'ai-question',
+          content: value
+        }).then(res => {
+          if (fetchId !== this.lastFetchId) {
+            return
+          }
+          if (res != null && Array.isArray(res)) {
+            // 提取 json 中的 question， 并去重
+            this.dataSourceResults = res.map(item => JSON.parse(item.f_json).question)
+              .filter((item, index, arr) => arr.indexOf(item) === index)
+              .map(item => ({ category: item }))
+          }
+        }).finally(() => {
+          this.searching = false
+        })
+      }
+    },
+    // 处理搜索操作
+    onSearch (value) {
+      this.loading = true
+      // 触发父组件的搜索事件，传递搜索输入的值
+      this.$emit('search', value, this.queryType, () => {
+        this.loading = false
+      })
+    },
+    // // 处理打开收藏操作
+    // openFavorites (uuid) {
+    //   this.$emit('openFavorites', uuid)
+    // },
+    // 收藏夹显示隐藏的回调
+    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;
+  align-items: center; /* 添加这一行来实现垂直居中 */
+  height:100%;
+
+  .btn_group {
+    padding-left: 6px;
+
+    :deep(.ant-btn) {
+      height: 3rem;
+      color: #4F93FE;
+    }
+
+    .star_button {
+      color: #ffba00;
+    }
+  }
+
+  :deep(.ant-select-selection--single) {
+    height: 100%;
+  }
+  :deep(.search__field__mirror) {
+    height: 100%;
+  }
+  .contentInput{
+    height: 48px;
+    width: 35rem;
+    background-color: #fff;
+    padding: 4px 80px 4px 40px;
+    font-size: 16px;
+  }
+  .select {
+    width: 160px;
+    height: 48px;
+    padding-right: 6px;
+    font-size: 16px;
+    text-align: center;
+    :deep(.ant-select-selection-selected-value) {
+      width: 120px;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+}
+
+</style>