步骤二优化
This commit is contained in:
parent
5ad4767667
commit
889400c9ab
|
|
@ -330,7 +330,7 @@ const selectedCompareList = computed(() =>
|
||||||
|
|
||||||
// 生成对比表格数据 - 采用query.vue的实现
|
// 生成对比表格数据 - 采用query.vue的实现
|
||||||
const compareTableData = computed(() => {
|
const compareTableData = computed(() => {
|
||||||
if (selectedCompareList.value.length <= 1) return [];
|
if (selectedCompareList.value.length === 0) return [];
|
||||||
|
|
||||||
// 需要对比的参数列表
|
// 需要对比的参数列表
|
||||||
const paramsToCompare = [
|
const paramsToCompare = [
|
||||||
|
|
@ -566,28 +566,34 @@ const allValues = ref([]);
|
||||||
const initializeValues = () => {
|
const initializeValues = () => {
|
||||||
const values = [];
|
const values = [];
|
||||||
allFields.forEach((field) => {
|
allFields.forEach((field) => {
|
||||||
const uniqueValues = [...new Set(mockData.map((item) => item[field.key]))];
|
const uniqueValues = [
|
||||||
|
...new Set(
|
||||||
|
mockData.map((item) => item[field.key] ?? "") // 将null转换为空字符串
|
||||||
|
),
|
||||||
|
];
|
||||||
uniqueValues.forEach((value) => {
|
uniqueValues.forEach((value) => {
|
||||||
values.push({
|
// 过滤空值,避免空提示
|
||||||
value: String(value),
|
if (value !== "") {
|
||||||
fieldKey: field.key,
|
values.push({
|
||||||
fieldLabel: field.label,
|
value: String(value),
|
||||||
weight: fieldValueMap[field.key]?.includes(String(value)) ? 2 : 1,
|
fieldKey: field.key,
|
||||||
});
|
fieldLabel: field.label,
|
||||||
|
weight: fieldValueMap[field.key]?.includes(String(value)) ? 2 : 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
allValues.value = values;
|
allValues.value = values;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 从query.vue引入的查询相关方法
|
|
||||||
const getCurrentInputPart = () => {
|
const getCurrentInputPart = () => {
|
||||||
const parts = currentInput.value.split(";");
|
const parts = currentInput.value.split(/[;;]/);
|
||||||
return parts[parts.length - 1].trim();
|
return parts[parts.length - 1].trim();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleKeydown = (e) => {
|
const handleKeydown = (e) => {
|
||||||
// 检查是否按下了分号键
|
// 检查是否按下了分号键
|
||||||
if (e.key === ";" || e.keyCode === 186) {
|
if (e.key === ";" || e.key === ";" || e.keyCode === 186) {
|
||||||
handleSemicolon(e);
|
handleSemicolon(e);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -616,7 +622,7 @@ const findCursorConditionIndex = () => {
|
||||||
|
|
||||||
const cursorPos = inputEl.selectionStart;
|
const cursorPos = inputEl.selectionStart;
|
||||||
const inputValue = currentInput.value;
|
const inputValue = currentInput.value;
|
||||||
const parts = inputValue.split(";");
|
const parts = inputValue.split(/[;;]/);
|
||||||
|
|
||||||
let currentLength = 0;
|
let currentLength = 0;
|
||||||
for (let i = 0; i < parts.length; i++) {
|
for (let i = 0; i < parts.length; i++) {
|
||||||
|
|
@ -1001,9 +1007,7 @@ const selectSuggestion = (item) => {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 无字段时直接处理值
|
// 无字段时直接处理值
|
||||||
parts[targetIndex] = targetPart
|
parts[targetIndex] = item.label;
|
||||||
? `${targetPart}${item.label}`
|
|
||||||
: item.label;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1096,7 +1100,7 @@ const hideSuggestions = () => {
|
||||||
const parseConditions = (input) => {
|
const parseConditions = (input) => {
|
||||||
const conditions = [];
|
const conditions = [];
|
||||||
const parts = input
|
const parts = input
|
||||||
.split(";")
|
.split(/[;;]/) // 同时匹配中英文分号
|
||||||
.map((part) => part.trim())
|
.map((part) => part.trim())
|
||||||
.filter((part) => part);
|
.filter((part) => part);
|
||||||
|
|
||||||
|
|
@ -1175,7 +1179,11 @@ const filterData = (conditions) => {
|
||||||
|
|
||||||
// 检查单个条件
|
// 检查单个条件
|
||||||
const checkCondition = (fieldValue, conditionValue) => {
|
const checkCondition = (fieldValue, conditionValue) => {
|
||||||
// 支持的运算符
|
// 将null转换为空字符串处理
|
||||||
|
const processedValue = fieldValue ?? "";
|
||||||
|
const processedCondition = conditionValue ?? "";
|
||||||
|
|
||||||
|
// 后续逻辑使用processedValue和processedCondition
|
||||||
const operators = [
|
const operators = [
|
||||||
{ symbol: ">=", func: (a, b) => a >= b },
|
{ symbol: ">=", func: (a, b) => a >= b },
|
||||||
{ symbol: "<=", func: (a, b) => a <= b },
|
{ symbol: "<=", func: (a, b) => a <= b },
|
||||||
|
|
@ -1185,30 +1193,29 @@ const checkCondition = (fieldValue, conditionValue) => {
|
||||||
{ symbol: "=", func: (a, b) => a == b },
|
{ symbol: "=", func: (a, b) => a == b },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 查找是否使用了运算符
|
|
||||||
for (const op of operators) {
|
for (const op of operators) {
|
||||||
if (conditionValue.startsWith(op.symbol)) {
|
if (processedCondition.startsWith(op.symbol)) {
|
||||||
const value = conditionValue.substring(op.symbol.length).trim();
|
const value = processedCondition.substring(op.symbol.length).trim();
|
||||||
// 尝试转换为数字进行比较
|
if (!isNaN(Number(processedValue)) && !isNaN(Number(value))) {
|
||||||
if (!isNaN(Number(fieldValue)) && !isNaN(Number(value))) {
|
return op.func(Number(processedValue), Number(value));
|
||||||
return op.func(Number(fieldValue), Number(value));
|
|
||||||
}
|
}
|
||||||
// 字符串比较
|
return op.func(String(processedValue), value);
|
||||||
return op.func(String(fieldValue), value);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 没有运算符,默认包含即可
|
return String(processedValue)
|
||||||
return String(fieldValue)
|
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(conditionValue.toLowerCase());
|
.includes(processedCondition.toLowerCase());
|
||||||
};
|
};
|
||||||
|
|
||||||
// 移除单个条件
|
// 移除单个条件
|
||||||
const removeCondition = (index) => {
|
const removeCondition = (index) => {
|
||||||
const parts = currentInput.value.split(";");
|
const parts = currentInput.value.split(/[;;]/); // 同时匹配中英文分号
|
||||||
parts.splice(index, 1);
|
parts.splice(index, 1);
|
||||||
currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
|
currentInput.value = parts
|
||||||
|
.join(";")
|
||||||
|
.replace(/[;;]+/g, ";")
|
||||||
|
.trim();
|
||||||
parsedConditions.value = parseConditions(currentInput.value);
|
parsedConditions.value = parseConditions(currentInput.value);
|
||||||
filteredData.value = filterData(parsedConditions.value).map((item) => ({
|
filteredData.value = filterData(parsedConditions.value).map((item) => ({
|
||||||
...item,
|
...item,
|
||||||
|
|
@ -1257,15 +1264,6 @@ onMounted(() => {
|
||||||
showSuggestions.value = false;
|
showSuggestions.value = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 只有已选车型才自动查询,否则等待用户选择
|
|
||||||
if (props.form.selectedCarType) {
|
|
||||||
// 使用新的查询方式,自动填充车型条件
|
|
||||||
currentInput.value = `车型:${props.form.selectedCarType}`;
|
|
||||||
setTimeout(() => {
|
|
||||||
handleSearch();
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听输入框宽度变化
|
// 监听输入框宽度变化
|
||||||
|
|
@ -1830,11 +1828,10 @@ function onNextStep() {
|
||||||
background: #f5f7fa !important;
|
background: #f5f7fa !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 从query.vue整合的样式
|
|
||||||
.search-box-container {
|
.search-box-container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
|
|
@ -1982,8 +1979,8 @@ function onNextStep() {
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-section {
|
.results-section {
|
||||||
margin-top: 30px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-table {
|
.results-table {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue