demo
/
zhiqi
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加精准查询

This commit is contained in:
JenniferW 2025-08-20 14:58:06 +08:00
parent 31177c3022
commit 2c5f7c81d0
1 changed files with 149 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/views/order/intention/search.vue
View File

@ -132,13 +132,38 @@
@click.stop="focusConditionTag(index)"
>{{ cond.value }}</span
>
<el-icon class="tag-edit-icon" size="14"><Edit /></el-icon>
<!-- 将编辑图标替换为"精准"文字，并添加点击事件 -->
<span
class="tag-precise"
@click.stop="addPreciseCondition(index)"
>精准</span
>
</el-tag>
<el-button link @click="clearAll" class="clear-button">
<el-icon><RefreshLeft /></el-icon>
清除所有
</el-button>
</div>
<!-- 精准查询参数展示区域 -->
<div v-if="preciseConditions.length > 0" class="precise-conditions">
<div class="precise-conditions-label">选择精准查询参数：</div>
<div class="precise-tags">
<el-tag
v-for="(cond, index) in preciseConditions"
:key="'precise-' + index"
closable
type="primary"
@close="removePreciseCondition(index)"
class="precise-tag"
>
<span v-if="cond.field" class="tag-field"
>{{ cond.fieldLabel }}:</span
>
<span class="tag-value">{{ cond.value }}</span>
</el-tag>
</div>
</div>
</div>
<!-- 查询结果区域 -->
@ -340,6 +365,8 @@ const activePossibleFieldIndex = ref(-1);
// 解析后的条件和查询结果
const parsedConditions = ref([]);
// 精准查询条件
const preciseConditions = ref([]);
const showResults = ref(false);
const filteredData = ref([]);
@ -978,25 +1005,38 @@ const parseConditions = (input) => {
return conditions;
};
// 添加精准查询条件
const addPreciseCondition = (index) => {
const condition = parsedConditions.value[index];
// 检查是否已经添加到精准查询条件中
const exists = preciseConditions.value.some(
(cond) => cond.field === condition.field && cond.value === condition.value
);
if (!exists) {
preciseConditions.value.push({ ...condition, originalIndex: index });
// 重新过滤数据，应用精准查询
applyPreciseFilter();
}
};
// 移除精准查询条件
const removePreciseCondition = (index) => {
preciseConditions.value.splice(index, 1);
// 重新过滤数据
applyPreciseFilter();
};
// 处理查询
const handleSearch = () => {
// 解析条件
parsedConditions.value = parseConditions(currentInput.value);
// 查询条件为空时，展示所有商品
if (!currentInput.value.trim()) {
filteredData.value = mockData.map((item) => ({ ...item, selected: false }));
} else {
// 执行过滤，创建副本并添加selected属性
filteredData.value = filterData(parsedConditions.value).map((item) => ({
...item,
selected: false,
}));
}
// 清空精准查询条件
preciseConditions.value = [];
// 更新总数和重置页码
totalItems.value = filteredData.value.length;
currentPage.value = 1;
// 应用过滤
applyPreciseFilter();
// 显示结果
showResults.value = true;
@ -1006,6 +1046,36 @@ const handleSearch = () => {
possibleFields.value = [];
};
// 应用精准过滤
const applyPreciseFilter = () => {
// 先应用原始过滤
let filtered = filterData(parsedConditions.value);
// 再应用精准过滤
if (preciseConditions.value.length > 0) {
filtered = filtered.filter((item) => {
return preciseConditions.value.every((condition) => {
if (!condition.valid) return false;
if (condition.field) {
const fieldValue = item[condition.field];
return checkPreciseCondition(fieldValue, condition.value);
} else {
return allFields.some((field) => {
const fieldValue = item[field.key];
return checkPreciseCondition(fieldValue, condition.value);
});
}
});
});
}
// 更新过滤后的数据
filteredData.value = filtered.map((item) => ({ ...item, selected: false }));
totalItems.value = filteredData.value.length;
currentPage.value = 1;
};
// 根据条件过滤数据
const filterData = (conditions) => {
return mockData.filter((item) => {
@ -1028,7 +1098,7 @@ const filterData = (conditions) => {
});
};
// 检查单个条件
// 检查单个条件（模糊匹配）
const checkCondition = (fieldValue, conditionValue) => {
// 将null转换为空字符串处理
const processedValue = fieldValue ?? "";
@ -1049,7 +1119,6 @@ const checkCondition = (fieldValue, conditionValue) => {
const value = processedCondition.substring(op.symbol.length).trim();
if (!isNaN(Number(processedValue)) && !isNaN(Number(value))) {
return op.func(Number(processedValue), Number(value));
return op.func(Number(processedValue), Number(value));
}
return op.func(String(processedValue), value);
}
@ -1060,9 +1129,19 @@ const checkCondition = (fieldValue, conditionValue) => {
.includes(processedCondition.toLowerCase());
};
// 检查精准条件（精确匹配）
const checkPreciseCondition = (fieldValue, conditionValue) => {
// 将null转换为空字符串处理
const processedValue = fieldValue ?? "";
const processedCondition = conditionValue ?? "";
// 精准匹配，不使用包含关系
return String(processedValue) === processedCondition;
};
// 移除单个条件
const removeCondition = (index) => {
const parts = currentInput.value.split(/[;；]/); // 同时匹配中英文分号
const parts = currentInput.value.split(/[;；]/);
parts.splice(index, 1);
currentInput.value = parts
.join(";")
@ -1070,18 +1149,16 @@ const removeCondition = (index) => {
.trim();
parsedConditions.value = parseConditions(currentInput.value);
// 重新过滤数据
if (!currentInput.value.trim()) {
filteredData.value = mockData.map((item) => ({ ...item, selected: false }));
} else {
filteredData.value = filterData(parsedConditions.value).map((item) => ({
...item,
selected: false,
}));
// 检查是否有精准查询条件引用了这个索引，如果有则一并删除
const preciseIndex = preciseConditions.value.findIndex(
(cond) => cond.originalIndex === index
);
if (preciseIndex !== -1) {
preciseConditions.value.splice(preciseIndex, 1);
}
totalItems.value = filteredData.value.length;
currentPage.value = 1;
// 重新过滤数据
applyPreciseFilter();
// 重置选中的条件索引
if (selectedConditionIndex.value === index) {
@ -1093,6 +1170,7 @@ const removeCondition = (index) => {
const clearAll = () => {
currentInput.value = "";
parsedConditions.value = [];
preciseConditions.value = [];
filteredData.value = [];
totalItems.value = 0;
currentPage.value = 1;
@ -1165,10 +1243,10 @@ watch(
function toggleSelect(item) {
// 统计已选中的数量
const selectedCount = filteredData.value.filter((i) => i.selected).length;
if (!item.selected && selectedCount >= 3) {
ElMessage.warning("最多只能选择3个卡片进行对比");
return;
}
// if (!item.selected && selectedCount >= 3) {
// ElMessage.warning("最多只能选择3个卡片进行对比");
// return;
// }
item.selected = !item.selected;
}
@ -1565,7 +1643,6 @@ function handleConfirm() {
.result-card-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.result-card {
@ -1801,7 +1878,7 @@ function handleConfirm() {
.condition-tag {
cursor: pointer;
transition: all 0.2s;
padding-right: 30px !important;
padding-right: 60px !important; /* 增加右侧 padding 以容纳"精准"文字 */
position: relative;
}
@ -1826,18 +1903,52 @@ function handleConfirm() {
color: #1890ff;
}
.tag-edit-icon {
/* 精准查询相关样式 */
.tag-precise {
position: absolute;
right: 10px;
right: 20px; /* 为关闭按钮留出空间 */
top: 50%;
transform: translateY(-50%);
color: #409eff;
opacity: 0.7;
font-size: 12px;
cursor: pointer;
padding: 2px 4px;
border-radius: 2px;
background-color: rgba(64, 158, 255, 0.1);
transition: all 0.2s;
}
.tag-precise:hover {
background-color: rgba(64, 158, 255, 0.2);
color: #1890ff;
}
.precise-conditions {
margin: 15px 0;
}
.precise-conditions-label {
font-size: 14px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
}
.precise-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.precise-tag {
cursor: default;
padding-right: 30px !important;
position: relative;
}
.results-section {
/* 移除滚动条相关样式 */
padding: 0 10px 20px;
max-width: 1250px;
margin: 0 auto;
}
.no-results {