bug修复
This commit is contained in:
parent
093604011d
commit
cada3127ca
|
|
@ -127,7 +127,7 @@
|
||||||
<span
|
<span
|
||||||
class="tag-value"
|
class="tag-value"
|
||||||
@click.stop="focusConditionTag(index)"
|
@click.stop="focusConditionTag(index)"
|
||||||
>{{ cond.value || "空值" }}</span
|
>{{ cond.value }}</span
|
||||||
>
|
>
|
||||||
<el-icon class="tag-edit-icon" size="14"><Edit /></el-icon>
|
<el-icon class="tag-edit-icon" size="14"><Edit /></el-icon>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
|
|
@ -193,7 +193,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 参数对比弹窗 - 使用query.vue的实现但保留step2的样式 -->
|
<!-- 参数对比弹窗 -->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-model="compareDialogVisible"
|
v-model="compareDialogVisible"
|
||||||
title="参数对比"
|
title="参数对比"
|
||||||
|
|
@ -277,21 +277,19 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted, nextTick } from "vue";
|
import { ref, computed, watch, onMounted, nextTick } from "vue";
|
||||||
import {
|
import { carTypeOptions, allParts } from "@/data/stepMockData";
|
||||||
carTypeOptions,
|
|
||||||
allParts, // 保留原始数据,但实际查询会使用新的查询逻辑
|
|
||||||
} from "@/data/stepMockData";
|
|
||||||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||||||
import { ElMessage, ElEmpty } from "element-plus";
|
import { ElMessage, ElEmpty } from "element-plus";
|
||||||
|
import { Search, Edit, RefreshLeft } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
// 接收props和定义emit,保留step2的原有逻辑
|
// 接收props和定义emit
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
form: Object,
|
form: Object,
|
||||||
selectedCarType: String,
|
selectedCarType: String,
|
||||||
});
|
});
|
||||||
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
||||||
|
|
||||||
// 彻底双向绑定,保留step2的原有逻辑
|
// 双向绑定
|
||||||
const selectedCarTypeProxy = computed({
|
const selectedCarTypeProxy = computed({
|
||||||
get() {
|
get() {
|
||||||
return props.form?.selectedCarType ?? "";
|
return props.form?.selectedCarType ?? "";
|
||||||
|
|
@ -304,7 +302,7 @@ const selectedCarTypeProxy = computed({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 从query.vue引入的查询相关变量
|
// 查询相关变量
|
||||||
const currentInput = ref("");
|
const currentInput = ref("");
|
||||||
const searchInput = ref(null);
|
const searchInput = ref(null);
|
||||||
const inputWidth = ref(600);
|
const inputWidth = ref(600);
|
||||||
|
|
@ -320,15 +318,15 @@ const activePossibleFieldIndex = ref(-1);
|
||||||
// 解析后的条件和查询结果
|
// 解析后的条件和查询结果
|
||||||
const parsedConditions = ref([]);
|
const parsedConditions = ref([]);
|
||||||
const showResults = ref(false);
|
const showResults = ref(false);
|
||||||
const filteredData = ref([]); // 使用query.vue的filteredData替代原有的queryResultList
|
const filteredData = ref([]);
|
||||||
|
|
||||||
// 对比相关,整合query.vue的逻辑但保留step2的样式和部分逻辑
|
// 对比相关
|
||||||
const compareDialogVisible = ref(false);
|
const compareDialogVisible = ref(false);
|
||||||
const selectedCompareList = computed(() =>
|
const selectedCompareList = computed(() =>
|
||||||
filteredData.value.filter((i) => i.selected)
|
filteredData.value.filter((i) => i.selected)
|
||||||
);
|
);
|
||||||
|
|
||||||
// 生成对比表格数据 - 采用query.vue的实现
|
// 生成对比表格数据
|
||||||
const compareTableData = computed(() => {
|
const compareTableData = computed(() => {
|
||||||
if (selectedCompareList.value.length === 0) return [];
|
if (selectedCompareList.value.length === 0) return [];
|
||||||
|
|
||||||
|
|
@ -370,7 +368,7 @@ const compareTableData = computed(() => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 定义可查询的字段 - 来自query.vue
|
// 定义可查询的字段
|
||||||
const allFields = [
|
const allFields = [
|
||||||
{ key: "productNumber", label: "品号" },
|
{ key: "productNumber", label: "品号" },
|
||||||
{ key: "name", label: "品名/物料名称" },
|
{ key: "name", label: "品名/物料名称" },
|
||||||
|
|
@ -385,7 +383,7 @@ const allFields = [
|
||||||
{ key: "image", label: "图片" },
|
{ key: "image", label: "图片" },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 模拟数据 - 来自query.vue,实际项目中可能从API获取
|
// 模拟数据
|
||||||
const mockData = [
|
const mockData = [
|
||||||
{
|
{
|
||||||
productNumber: "D311299000045-00005",
|
productNumber: "D311299000045-00005",
|
||||||
|
|
@ -645,7 +643,7 @@ const handleInputContainerClick = (e) => {
|
||||||
// 处理输入框点击事件 - 支持点击已输入值显示下拉
|
// 处理输入框点击事件 - 支持点击已输入值显示下拉
|
||||||
const handleInputClick = () => {
|
const handleInputClick = () => {
|
||||||
const index = findCursorConditionIndex();
|
const index = findCursorConditionIndex();
|
||||||
const parts = currentInput.value.split(/[;;]/);
|
const parts = currentInput.value.split(";");
|
||||||
|
|
||||||
if (index >= 0 && index < parts.length) {
|
if (index >= 0 && index < parts.length) {
|
||||||
const part = parts[index].trim();
|
const part = parts[index].trim();
|
||||||
|
|
@ -662,30 +660,32 @@ const handleInputMouseUp = () => {
|
||||||
handleInputClick();
|
handleInputClick();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 聚焦到指定的条件标签
|
// 聚焦到指定的条件标签 - 修复问题2
|
||||||
const focusConditionTag = (index) => {
|
const focusConditionTag = (index) => {
|
||||||
const parts = currentInput.value.split(/[;;]/);
|
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");
|
|
||||||
|
|
||||||
if (!inputEl) return;
|
// 将光标定位到该条件
|
||||||
|
selectedConditionIndex.value = index;
|
||||||
|
const inputEl = searchInput.value?.$el.querySelector("input");
|
||||||
|
if (!inputEl) return;
|
||||||
|
|
||||||
// 计算该条件在输入框中的位置
|
// 计算该条件在输入框中的位置
|
||||||
let cursorPos = 0;
|
let cursorPos = 0;
|
||||||
for (let i = 0; i < index; i++) {
|
for (let i = 0; i < index; i++) {
|
||||||
cursorPos += parts[i].length + 1; // +1 是分号的长度
|
cursorPos += parts[i].length + 1; // +1 是分号的长度
|
||||||
}
|
|
||||||
|
|
||||||
// 设置光标位置
|
|
||||||
setTimeout(() => {
|
|
||||||
inputEl.focus();
|
|
||||||
inputEl.setSelectionRange(cursorPos, cursorPos + parts[index].length);
|
|
||||||
// 触发该条件的建议显示
|
|
||||||
triggerConditionSuggestions(parts[index].trim());
|
|
||||||
}, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 设置光标位置到该条件的末尾
|
||||||
|
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;
|
activePossibleFieldIndex.value = -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 选择可能的字段
|
// 选择可能的字段 - 修复问题4
|
||||||
const selectPossibleField = (field) => {
|
const selectPossibleField = (field) => {
|
||||||
|
// 始终在当前条件上操作,不修改其他条件
|
||||||
const parts = currentInput.value.split(/[;;]/);
|
const parts = currentInput.value.split(/[;;]/);
|
||||||
let targetIndex =
|
let targetIndex = parts.length - 1;
|
||||||
selectedConditionIndex.value >= 0
|
|
||||||
? selectedConditionIndex.value
|
|
||||||
: parts.length - 1;
|
|
||||||
|
|
||||||
// 确保索引有效
|
// 如果最后一个条件为空,使用前一个
|
||||||
if (targetIndex < 0 || targetIndex >= parts.length) {
|
if (parts.length > 0 && parts[targetIndex].trim() === "") {
|
||||||
targetIndex = parts.length - 1;
|
targetIndex = Math.max(0, parts.length - 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取当前部分的值
|
// 获取当前部分的值
|
||||||
let targetPart = parts[targetIndex] || "";
|
let targetPart = parts[targetIndex] || "";
|
||||||
|
|
||||||
// 在当前值前添加字段名和冒号
|
// 检查是否已有字段
|
||||||
parts[targetIndex] = `${field.label}:${targetPart}`;
|
if (targetPart.includes(":")) {
|
||||||
|
// 已有字段,添加新条件
|
||||||
// 重新拼接条件,清理多余分号,并确保末尾有分号
|
const newPart = `${field.label}:`;
|
||||||
currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
|
parts.push(newPart);
|
||||||
|
targetIndex = parts.length - 1;
|
||||||
// 如果当前部分不为空且不以分号结尾,则添加分号
|
} else {
|
||||||
if (currentInput.value && !currentInput.value.endsWith(";")) {
|
// 没有字段,在当前值前添加字段名和冒号
|
||||||
currentInput.value += ";";
|
parts[targetIndex] = `${field.label}:${targetPart}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 重新拼接条件,清理多余分号
|
||||||
|
currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
|
||||||
|
|
||||||
// 保持建议框显示,允许继续编辑
|
// 保持建议框显示,允许继续编辑
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
handleInput(currentInput.value);
|
handleInput(currentInput.value);
|
||||||
|
|
@ -974,17 +975,15 @@ const getOperator = (conditionValue) => {
|
||||||
return operators.find((op) => conditionValue.startsWith(op));
|
return operators.find((op) => conditionValue.startsWith(op));
|
||||||
};
|
};
|
||||||
|
|
||||||
// 选择建议项 - 支持替换已有条件的值
|
// 选择建议项 - 修复问题1和问题3
|
||||||
const selectSuggestion = (item) => {
|
const selectSuggestion = (item) => {
|
||||||
const parts = currentInput.value.split(/[;;]/);
|
const parts = currentInput.value.split(/[;;]/);
|
||||||
let targetIndex =
|
// 总是在最后一个条件上操作,确保新条件添加到末尾
|
||||||
selectedConditionIndex.value >= 0
|
let targetIndex = parts.length - 1;
|
||||||
? selectedConditionIndex.value
|
|
||||||
: parts.length - 1;
|
|
||||||
|
|
||||||
// 确保索引有效
|
// 如果最后一个条件为空,使用前一个
|
||||||
if (targetIndex < 0 || targetIndex >= parts.length) {
|
if (parts.length > 0 && parts[targetIndex].trim() === "") {
|
||||||
targetIndex = parts.length - 1;
|
targetIndex = Math.max(0, parts.length - 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
let targetPart = parts[targetIndex] || "";
|
let targetPart = parts[targetIndex] || "";
|
||||||
|
|
@ -1010,20 +1009,21 @@ const selectSuggestion = (item) => {
|
||||||
// 普通值替换
|
// 普通值替换
|
||||||
parts[targetIndex] = `${fieldPart}${item.label}`;
|
parts[targetIndex] = `${fieldPart}${item.label}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 问题1:值选择后自动添加分号
|
||||||
|
parts[targetIndex] += ";";
|
||||||
} else {
|
} else {
|
||||||
// 无字段时直接处理值
|
// 无字段时直接处理值
|
||||||
parts[targetIndex] = item.label;
|
parts[targetIndex] = item.label;
|
||||||
|
|
||||||
|
// 问题1:值选择后自动添加分号
|
||||||
|
parts[targetIndex] += ";";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重新拼接条件,清理多余分号,并确保末尾有分号
|
// 重新拼接条件,清理多余分号
|
||||||
currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
|
currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
|
||||||
|
|
||||||
// 如果当前部分不为空且不以分号结尾,则添加分号
|
|
||||||
if (currentInput.value && !currentInput.value.endsWith(";")) {
|
|
||||||
currentInput.value += ";";
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保持建议框显示,允许继续编辑
|
// 保持建议框显示,允许继续编辑
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
handleInput(currentInput.value);
|
handleInput(currentInput.value);
|
||||||
|
|
@ -1144,7 +1144,7 @@ const parseConditions = (input) => {
|
||||||
return conditions;
|
return conditions;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理查询 - 采用query.vue的实现
|
// 处理查询
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
if (!currentInput.value.trim()) return;
|
if (!currentInput.value.trim()) return;
|
||||||
|
|
||||||
|
|
@ -1226,12 +1226,6 @@ const removeCondition = (index) => {
|
||||||
.join(";")
|
.join(";")
|
||||||
.replace(/[;;]+/g, ";")
|
.replace(/[;;]+/g, ";")
|
||||||
.trim();
|
.trim();
|
||||||
|
|
||||||
// 确保末尾有分号
|
|
||||||
if (currentInput.value && !currentInput.value.endsWith(";")) {
|
|
||||||
currentInput.value += ";";
|
|
||||||
}
|
|
||||||
|
|
||||||
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,
|
||||||
|
|
@ -1258,7 +1252,7 @@ const clearAll = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 保留step2的原有生命周期钩子
|
// 生命周期钩子
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initializeValues();
|
initializeValues();
|
||||||
updateInputWidth();
|
updateInputWidth();
|
||||||
|
|
@ -1300,7 +1294,7 @@ watch(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// 保留step2的原有功能方法
|
// 切换选择状态
|
||||||
function toggleSelect(item) {
|
function toggleSelect(item) {
|
||||||
// 统计已选中的数量
|
// 统计已选中的数量
|
||||||
const selectedCount = filteredData.value.filter((i) => i.selected).length;
|
const selectedCount = filteredData.value.filter((i) => i.selected).length;
|
||||||
|
|
@ -1311,6 +1305,7 @@ function toggleSelect(item) {
|
||||||
item.selected = !item.selected;
|
item.selected = !item.selected;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 打开对比弹窗
|
||||||
function onCompare() {
|
function onCompare() {
|
||||||
if (selectedCompareList.value.length === 0) {
|
if (selectedCompareList.value.length === 0) {
|
||||||
ElMessage.warning("请先选择要对比的卡片");
|
ElMessage.warning("请先选择要对比的卡片");
|
||||||
|
|
@ -1319,6 +1314,7 @@ function onCompare() {
|
||||||
compareDialogVisible.value = true;
|
compareDialogVisible.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 下一步
|
||||||
function onNextStep() {
|
function onNextStep() {
|
||||||
const selected = filteredData.value.filter((i) => i.selected);
|
const selected = filteredData.value.filter((i) => i.selected);
|
||||||
if (selected.length !== 1) {
|
if (selected.length !== 1) {
|
||||||
|
|
@ -1342,7 +1338,7 @@ function onNextStep() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
// 保留step2的原有样式
|
// 原有样式保持不变
|
||||||
.step2-container {
|
.step2-container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
|
@ -1767,7 +1763,7 @@ function onNextStep() {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.result-card-name {
|
.result-card-name {
|
||||||
font-size: 15px;
|
font-size: 13px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
@ -1917,6 +1913,7 @@ function onNextStep() {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: #f0f7ff;
|
background-color: #f0f7ff;
|
||||||
border-bottom: 1px solid #e4e7ed;
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue