bug修复
This commit is contained in:
parent
093604011d
commit
cada3127ca
|
|
@ -127,7 +127,7 @@
|
|||
<span
|
||||
class="tag-value"
|
||||
@click.stop="focusConditionTag(index)"
|
||||
>{{ cond.value || "空值" }}</span
|
||||
>{{ cond.value }}</span
|
||||
>
|
||||
<el-icon class="tag-edit-icon" size="14"><Edit /></el-icon>
|
||||
</el-tag>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 参数对比弹窗 - 使用query.vue的实现但保留step2的样式 -->
|
||||
<!-- 参数对比弹窗 -->
|
||||
<el-dialog
|
||||
v-model="compareDialogVisible"
|
||||
title="参数对比"
|
||||
|
|
@ -277,21 +277,19 @@
|
|||
|
||||
<script setup>
|
||||
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,14 +660,14 @@ const handleInputMouseUp = () => {
|
|||
handleInputClick();
|
||||
};
|
||||
|
||||
// 聚焦到指定的条件标签
|
||||
// 聚焦到指定的条件标签 - 修复问题2
|
||||
const focusConditionTag = (index) => {
|
||||
const parts = currentInput.value.split(/[;；]/);
|
||||
if (index < parts.length) {
|
||||
if (index < 0 || index >= parts.length) return;
|
||||
|
||||
// 将光标定位到该条件
|
||||
selectedConditionIndex.value = index;
|
||||
const inputEl = searchInput.value.$el.querySelector("input");
|
||||
|
||||
const inputEl = searchInput.value?.$el.querySelector("input");
|
||||
if (!inputEl) return;
|
||||
|
||||
// 计算该条件在输入框中的位置
|
||||
|
|
@ -678,14 +676,16 @@ const focusConditionTag = (index) => {
|
|||
cursorPos += parts[i].length + 1; // +1 是分号的长度
|
||||
}
|
||||
|
||||
// 设置光标位置
|
||||
// 设置光标位置到该条件的末尾
|
||||
setTimeout(() => {
|
||||
inputEl.focus();
|
||||
inputEl.setSelectionRange(cursorPos, cursorPos + parts[index].length);
|
||||
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] || "";
|
||||
|
||||
// 在当前值前添加字段名和冒号
|
||||
// 检查是否已有字段
|
||||
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();
|
||||
|
||||
// 如果当前部分不为空且不以分号结尾，则添加分号
|
||||
if (currentInput.value && !currentInput.value.endsWith(";")) {
|
||||
currentInput.value += ";";
|
||||
}
|
||||
|
||||
// 重新拼接条件，清理多余分号
|
||||
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() {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 保留step2的原有样式
|
||||
// 原有样式保持不变
|
||||
.step2-container {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
|
|
@ -1767,7 +1763,7 @@ function onNextStep() {
|
|||
text-align: left;
|
||||
}
|
||||
.result-card-name {
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -1917,6 +1913,7 @@ function onNextStep() {
|
|||
padding: 10px 15px;
|
||||
background-color: #f0f7ff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue