bug修复

This commit is contained in:
JenniferW 2025-08-14 17:08:19 +08:00
parent 093604011d
commit cada3127ca
1 changed files with 73 additions and 76 deletions

View File

@ -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";
// propsemitstep2 // propsemit
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.vuefilteredDataqueryResultList const filteredData = ref([]);
// query.vuestep2 //
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.vueAPI //
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));
}; };
// - // - 13
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;