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