增加实时搜索
This commit is contained in:
parent
64b9ce0559
commit
46613a9f3c
|
|
@ -26,7 +26,17 @@
|
|||
@keydown="handleKeydown"
|
||||
@click="handleInputClick"
|
||||
@mouseup="handleInputMouseUp"
|
||||
/>
|
||||
>
|
||||
<!-- 输入框内添加话筒图标 -->
|
||||
<template #append>
|
||||
<el-icon
|
||||
class="voice-icon"
|
||||
@click.stop="showVoicePopup = true"
|
||||
>
|
||||
<Microphone />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<!-- 下拉建议框 -->
|
||||
|
|
@ -357,6 +367,23 @@
|
|||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 语音输入弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showVoicePopup"
|
||||
title="语音输入"
|
||||
width="400px"
|
||||
:show-close="true"
|
||||
>
|
||||
<div class="voice-popup-content">
|
||||
正式环境中提供语音输入检索功能,demo中仅做示意。
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="showVoicePopup = false">
|
||||
我知道了
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -373,7 +400,7 @@ import {
|
|||
fieldValueMap,
|
||||
} from "@/data/step2MockData";
|
||||
import { ElMessage, ElEmpty, ElDialog } from "element-plus";
|
||||
import { Search, Edit, RefreshLeft } from "@element-plus/icons-vue";
|
||||
import { Search, Edit, RefreshLeft, Microphone } from "@element-plus/icons-vue";
|
||||
|
||||
// 接收props和定义emit
|
||||
const props = defineProps({
|
||||
|
|
@ -408,6 +435,9 @@ const activeSuggestionIndex = ref(-1);
|
|||
const possibleFields = ref([]);
|
||||
const activePossibleFieldIndex = ref(-1);
|
||||
|
||||
// 语音输入弹窗控制
|
||||
const showVoicePopup = ref(false);
|
||||
|
||||
// 解析后的条件和查询结果
|
||||
const parsedConditions = ref([]);
|
||||
// 精准查询条件
|
||||
|
|
@ -619,6 +649,8 @@ const handleSemicolon = (e) => {
|
|||
setTimeout(() => {
|
||||
// 触发输入事件以更新建议
|
||||
handleInput(currentInput.value);
|
||||
// 分号输入后触发实时查询
|
||||
triggerRealTimeSearch();
|
||||
}, 0);
|
||||
};
|
||||
|
||||
|
|
@ -948,6 +980,8 @@ const selectPossibleField = (field) => {
|
|||
// 保持建议框显示,允许继续编辑
|
||||
setTimeout(() => {
|
||||
handleInput(currentInput.value);
|
||||
// 选择字段后触发实时查询
|
||||
triggerRealTimeSearch();
|
||||
}, 0);
|
||||
|
||||
// 聚焦输入框并将光标定位到字段后的适当位置
|
||||
|
|
@ -1042,6 +1076,8 @@ const selectSuggestion = (item) => {
|
|||
// 保持建议框显示,允许继续编辑
|
||||
setTimeout(() => {
|
||||
handleInput(currentInput.value);
|
||||
// 选择建议项后触发实时查询
|
||||
triggerRealTimeSearch();
|
||||
}, 0);
|
||||
|
||||
// 聚焦输入框并将光标定位到当前条件末尾(分号后)
|
||||
|
|
@ -1199,6 +1235,16 @@ const handleSearch = () => {
|
|||
possibleFields.value = [];
|
||||
};
|
||||
|
||||
// 触发实时查询
|
||||
const triggerRealTimeSearch = () => {
|
||||
// 只有当有有效条件时才触发实时查询
|
||||
if (currentInput.value.trim()) {
|
||||
parsedConditions.value = parseConditions(currentInput.value);
|
||||
applyPreciseFilter();
|
||||
showResults.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 应用精准过滤
|
||||
const applyPreciseFilter = () => {
|
||||
// 先应用原始过滤
|
||||
|
|
@ -1943,6 +1989,18 @@ function handleConfirm() {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
// 语音图标样式
|
||||
:deep(.voice-icon) {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
margin-right: 8px;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #2156f3;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -2180,6 +2238,14 @@ function handleConfirm() {
|
|||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* 语音弹窗内容样式 */
|
||||
.voice-popup-content {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.new-tag-img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue