From f1549ac432b865a905b9eb21b071c0fa49e9c6bc Mon Sep 17 00:00:00 2001
From: yangyin <18723093654@163.com>
Date: 星期六, 06 七月 2024 17:32:25 +0800
Subject: [PATCH] 增加搜索功能
---
src/views/project/ch/home/component/waterRight/center.vue | 41 +++++++++++++++++++++++++++++++++--------
1 files changed, 33 insertions(+), 8 deletions(-)
diff --git a/src/views/project/ch/home/component/waterRight/center.vue b/src/views/project/ch/home/component/waterRight/center.vue
index 2531ec4..0fb7c22 100644
--- a/src/views/project/ch/home/component/waterRight/center.vue
+++ b/src/views/project/ch/home/component/waterRight/center.vue
@@ -50,7 +50,8 @@
<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 1">
<div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto">
<div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl">
- <el-input v-model="state.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search"> </el-input>
+ <el-input v-model="queryParams.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable>
+ </el-input>
</div>
<div class="mt20 w100 relative">
<div
@@ -72,8 +73,11 @@
<i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
</div>
<div class="mt20 w100">
- <div class="w100 pb-[20px]" v-for="item in state.exampleContentList" :key="item.sample_id">
- <div class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]" @click="changeExample(item)">
+ <div class="w100 pb-[20px]" v-for="item in queryData" :key="item.sample_id">
+ <div
+ class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]"
+ @click="changeExample(item)"
+ >
<i
class="iconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
:style="`background-color:${item.BgColor}`"
@@ -93,7 +97,8 @@
<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 2">
<div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto">
<div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl">
- <el-input v-model="state.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search"> </el-input>
+ <el-input v-model="queryParams.instructInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable>
+ </el-input>
</div>
<div class="mt20 w100 relative">
<div
@@ -141,10 +146,13 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
-import { computed, onMounted, reactive } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
import { activeSampleId } from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
+import { useSearch } from '/@/hooks/useSearch';
+import { debounce, getRecentDateRange } from '/@/utils/util';
+
let state = reactive({
exampleContent: [],
exampleRandomContent: [],
@@ -154,7 +162,6 @@
],
isShowAdvanceExample: false,
activeName: 1,
- searchInput: '',
exampleTabList: [
{
ID: 1,
@@ -223,13 +230,14 @@
Title: '鍙戠幇鎺㈢储',
},
],
- exampleContentList: [],
+
instructContentList: [],
activeLabelName: 0,
activeInstructName: 0,
isShowExpand: false,
});
+const exampleList = ref([]);
onMounted(() => {
getSelectListSample();
getUserTemplate();
@@ -242,6 +250,7 @@
}
return groups;
});
+//鑾峰彇妯＄増鍒楄〃
const getSelectListSample = async () => {
const res = await getSelectSample({
section_b_id: '',
@@ -257,7 +266,7 @@
array.push(sample);
}
});
- state.exampleContentList = res.samples;
+ exampleList.value = res.samples;
state.exampleContent = array;
};
@@ -307,6 +316,22 @@
.toString(16)
.padEnd(6, '0')}`;
};
+//#region ====================== 鎼滅储鑱婂ぉ瀹� ======================
+const queryParams = ref({
+ searchInput: '',
+ instructInput: '',
+});
+const { query, queryData } = useSearch(exampleList, queryParams);
+
+const debounceQuery = debounce(query);
+
+watch(
+ () => queryParams.value.searchInput,
+ (val) => {
+ debounceQuery();
+ }
+);
+//#endregion
</script>
<style scoped lang="scss">
.pc-prompts {
--
Gitblit v1.9.3