From cada3127ca1584598a44d88bc2d150e3f45884f4 Mon Sep 17 00:00:00 2001 From: JenniferW <1627055433@qq.com> Date: Thu, 14 Aug 2025 17:08:19 +0800 Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/order/intention/Step2.vue | 149 ++++++++++++++-------------- 1 file changed, 73 insertions(+), 76 deletions(-) diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue index 4b7c4db..d3e7949 100644 --- a/src/views/order/intention/Step2.vue +++ b/src/views/order/intention/Step2.vue @@ -127,7 +127,7 @@ {{ cond.value || "空值" }}{{ cond.value }} @@ -193,7 +193,7 @@ - + import { ref, computed, watch, onMounted, nextTick } from "vue"; -import { - carTypeOptions, - allParts, // 保留原始数据，但实际查询会使用新的查询逻辑 -} from "@/data/stepMockData"; +import { carTypeOptions, allParts } from "@/data/stepMockData"; import CarModelDialog from "@/components/CarModelDialog.vue"; import { ElMessage, ElEmpty } from "element-plus"; +import { Search, Edit, RefreshLeft } from "@element-plus/icons-vue"; -// 接收props和定义emit，保留step2的原有逻辑 +// 接收props和定义emit const props = defineProps({ form: Object, selectedCarType: String, }); const emit = defineEmits(["update:form", "prev-step", "next-step"]); -// 彻底双向绑定，保留step2的原有逻辑 +// 双向绑定 const selectedCarTypeProxy = computed({ get() { return props.form?.selectedCarType ?? ""; @@ -304,7 +302,7 @@ const selectedCarTypeProxy = computed({ }, }); -// 从query.vue引入的查询相关变量 +// 查询相关变量 const currentInput = ref(""); const searchInput = ref(null); const inputWidth = ref(600); @@ -320,15 +318,15 @@ const activePossibleFieldIndex = ref(-1); // 解析后的条件和查询结果 const parsedConditions = ref([]); const showResults = ref(false); -const filteredData = ref([]); // 使用query.vue的filteredData替代原有的queryResultList +const filteredData = ref([]); -// 对比相关，整合query.vue的逻辑但保留step2的样式和部分逻辑 +// 对比相关 const compareDialogVisible = ref(false); const selectedCompareList = computed(() => filteredData.value.filter((i) => i.selected) ); -// 生成对比表格数据 - 采用query.vue的实现 +// 生成对比表格数据 const compareTableData = computed(() => { if (selectedCompareList.value.length === 0) return []; @@ -370,7 +368,7 @@ const compareTableData = computed(() => { }); }); -// 定义可查询的字段 - 来自query.vue +// 定义可查询的字段 const allFields = [ { key: "productNumber", label: "品号" }, { key: "name", label: "品名/物料名称" }, @@ -385,7 +383,7 @@ const allFields = [ { key: "image", label: "图片" }, ]; -// 模拟数据 - 来自query.vue，实际项目中可能从API获取 +// 模拟数据 const mockData = [ { productNumber: "D311299000045-00005", @@ -645,7 +643,7 @@ const handleInputContainerClick = (e) => { // 处理输入框点击事件 - 支持点击已输入值显示下拉 const handleInputClick = () => { const index = findCursorConditionIndex(); - const parts = currentInput.value.split(/[;；]/); + const parts = currentInput.value.split(";"); if (index >= 0 && index < parts.length) { const part = parts[index].trim(); @@ -662,30 +660,32 @@ const handleInputMouseUp = () => { handleInputClick(); }; -// 聚焦到指定的条件标签 +// 聚焦到指定的条件标签 - 修复问题2 const focusConditionTag = (index) => { const parts = currentInput.value.split(/[;；]/); - if (index < parts.length) { - // 将光标定位到该条件 - selectedConditionIndex.value = index; - const inputEl = searchInput.value.$el.querySelector("input"); + if (index < 0 || index >= parts.length) return; - if (!inputEl) return; + // 将光标定位到该条件 + selectedConditionIndex.value = index; + const inputEl = searchInput.value?.$el.querySelector("input"); + if (!inputEl) return; - // 计算该条件在输入框中的位置 - let cursorPos = 0; - for (let i = 0; i < index; i++) { - cursorPos += parts[i].length + 1; // +1 是分号的长度 - } - - // 设置光标位置 - setTimeout(() => { - inputEl.focus(); - inputEl.setSelectionRange(cursorPos, cursorPos + parts[index].length); - // 触发该条件的建议显示 - triggerConditionSuggestions(parts[index].trim()); - }, 0); + // 计算该条件在输入框中的位置 + let cursorPos = 0; + for (let i = 0; i < index; i++) { + cursorPos += parts[i].length + 1; // +1 是分号的长度 } + + // 设置光标位置到该条件的末尾 + setTimeout(() => { + inputEl.focus(); + inputEl.setSelectionRange( + cursorPos + parts[index].length, + cursorPos + parts[index].length + ); + // 触发该条件的建议显示 + triggerConditionSuggestions(parts[index].trim()); + }, 0); }; // 触发特定条件的建议显示 @@ -899,33 +899,34 @@ const handleInput = (value) => { activePossibleFieldIndex.value = -1; }; -// 选择可能的字段 +// 选择可能的字段 - 修复问题4 const selectPossibleField = (field) => { + // 始终在当前条件上操作，不修改其他条件 const parts = currentInput.value.split(/[;；]/); - let targetIndex = - selectedConditionIndex.value >= 0 - ? selectedConditionIndex.value - : parts.length - 1; + let targetIndex = parts.length - 1; - // 确保索引有效 - if (targetIndex < 0 || targetIndex >= parts.length) { - targetIndex = parts.length - 1; + // 如果最后一个条件为空，使用前一个 + if (parts.length > 0 && parts[targetIndex].trim() === "") { + targetIndex = Math.max(0, parts.length - 2); } // 获取当前部分的值 let targetPart = parts[targetIndex] || ""; - // 在当前值前添加字段名和冒号 - parts[targetIndex] = `${field.label}:${targetPart}`; - - // 重新拼接条件，清理多余分号，并确保末尾有分号 - currentInput.value = parts.join(";").replace(/;;+/g, ";").trim(); - - // 如果当前部分不为空且不以分号结尾，则添加分号 - if (currentInput.value && !currentInput.value.endsWith(";")) { - currentInput.value += ";"; + // 检查是否已有字段 + if (targetPart.includes(":")) { + // 已有字段，添加新条件 + const newPart = `${field.label}:`; + parts.push(newPart); + targetIndex = parts.length - 1; + } else { + // 没有字段，在当前值前添加字段名和冒号 + parts[targetIndex] = `${field.label}:${targetPart}`; } + // 重新拼接条件，清理多余分号 + currentInput.value = parts.join(";").replace(/;;+/g, ";").trim(); + // 保持建议框显示，允许继续编辑 setTimeout(() => { handleInput(currentInput.value); @@ -974,17 +975,15 @@ const getOperator = (conditionValue) => { return operators.find((op) => conditionValue.startsWith(op)); }; -// 选择建议项 - 支持替换已有条件的值 +// 选择建议项 - 修复问题1和问题3 const selectSuggestion = (item) => { const parts = currentInput.value.split(/[;；]/); - let targetIndex = - selectedConditionIndex.value >= 0 - ? selectedConditionIndex.value - : parts.length - 1; + // 总是在最后一个条件上操作，确保新条件添加到末尾 + let targetIndex = parts.length - 1; - // 确保索引有效 - if (targetIndex < 0 || targetIndex >= parts.length) { - targetIndex = parts.length - 1; + // 如果最后一个条件为空，使用前一个 + if (parts.length > 0 && parts[targetIndex].trim() === "") { + targetIndex = Math.max(0, parts.length - 2); } let targetPart = parts[targetIndex] || ""; @@ -1010,20 +1009,21 @@ const selectSuggestion = (item) => { // 普通值替换 parts[targetIndex] = `${fieldPart}${item.label}`; } + + // 问题1：值选择后自动添加分号 + parts[targetIndex] += ";"; } else { // 无字段时直接处理值 parts[targetIndex] = item.label; + + // 问题1：值选择后自动添加分号 + parts[targetIndex] += ";"; } } - // 重新拼接条件，清理多余分号，并确保末尾有分号 + // 重新拼接条件，清理多余分号 currentInput.value = parts.join(";").replace(/;;+/g, ";").trim(); - // 如果当前部分不为空且不以分号结尾，则添加分号 - if (currentInput.value && !currentInput.value.endsWith(";")) { - currentInput.value += ";"; - } - // 保持建议框显示，允许继续编辑 setTimeout(() => { handleInput(currentInput.value); @@ -1144,7 +1144,7 @@ const parseConditions = (input) => { return conditions; }; -// 处理查询 - 采用query.vue的实现 +// 处理查询 const handleSearch = () => { if (!currentInput.value.trim()) return; @@ -1226,12 +1226,6 @@ const removeCondition = (index) => { .join(";") .replace(/[;；]+/g, ";") .trim(); - - // 确保末尾有分号 - if (currentInput.value && !currentInput.value.endsWith(";")) { - currentInput.value += ";"; - } - parsedConditions.value = parseConditions(currentInput.value); filteredData.value = filterData(parsedConditions.value).map((item) => ({ ...item, @@ -1258,7 +1252,7 @@ const clearAll = () => { } }; -// 保留step2的原有生命周期钩子 +// 生命周期钩子 onMounted(() => { initializeValues(); updateInputWidth(); @@ -1300,7 +1294,7 @@ watch( } ); -// 保留step2的原有功能方法 +// 切换选择状态 function toggleSelect(item) { // 统计已选中的数量 const selectedCount = filteredData.value.filter((i) => i.selected).length; @@ -1311,6 +1305,7 @@ function toggleSelect(item) { item.selected = !item.selected; } +// 打开对比弹窗 function onCompare() { if (selectedCompareList.value.length === 0) { ElMessage.warning("请先选择要对比的卡片"); @@ -1319,6 +1314,7 @@ function onCompare() { compareDialogVisible.value = true; } +// 下一步 function onNextStep() { const selected = filteredData.value.filter((i) => i.selected); if (selected.length !== 1) { @@ -1342,7 +1338,7 @@ function onNextStep() {