diff --git a/src/views/order/intention/search.vue b/src/views/order/intention/search.vue index 5a39c34..9e8c8a3 100644 --- a/src/views/order/intention/search.vue +++ b/src/views/order/intention/search.vue @@ -134,7 +134,7 @@ > - + 清除所有 @@ -144,7 +144,7 @@
@@ -159,21 +159,35 @@
-
{{ item.name }}
-
+
+ {{ item.name }} +
+
品号:{{ item.productNumber }}
-
+
品号-规格型号: {{ item.specificationModel }}
-
+
车型: {{ item.carModel }}
@@ -181,9 +195,32 @@
-
+
+ + +
+ + + + + 确定 + +
@@ -233,10 +270,23 @@
-
-
- 上一步 - 下一步 + + + +
+ 您选择的品号为:{{ selectedProductNumber }} +
+ +
@@ -252,14 +302,15 @@ import { mockData, fieldValueMap, } from "@/data/step2MockData"; -import { ElMessage, ElEmpty } from "element-plus"; +import { ElMessage, ElEmpty, ElDialog } from "element-plus"; +import { Search, Edit, RefreshLeft } from "@element-plus/icons-vue"; // 接收props和定义emit const props = defineProps({ form: Object, selectedCarType: String, }); -const emit = defineEmits(["update:form", "prev-step", "next-step"]); +const emit = defineEmits(["update:form"]); // 双向绑定 const selectedCarTypeProxy = computed({ @@ -292,12 +343,37 @@ const parsedConditions = ref([]); const showResults = ref(false); const filteredData = ref([]); +// 分页相关变量 +const currentPage = ref(1); +const pageSize = ref(8); +const totalItems = ref(0); + +// 计算当前页数据 +const currentPageData = computed(() => { + const startIndex = (currentPage.value - 1) * pageSize.value; + return filteredData.value.slice(startIndex, startIndex + pageSize.value); +}); + +// 计算选中的商品数量 +const selectedCount = computed(() => { + return filteredData.value.filter((item) => item.selected).length; +}); + +// 选中的商品品号 +const selectedProductNumber = computed(() => { + const selected = filteredData.value.find((item) => item.selected); + return selected ? selected.productNumber : ""; +}); + // 对比相关 const compareDialogVisible = ref(false); const selectedCompareList = computed(() => filteredData.value.filter((i) => i.selected) ); +// 确认弹窗 +const confirmDialogVisible = ref(false); + // 生成对比表格数据 const compareTableData = computed(() => { if (selectedCompareList.value.length === 0) return []; @@ -904,16 +980,23 @@ const parseConditions = (input) => { // 处理查询 const handleSearch = () => { - if (!currentInput.value.trim()) return; - // 解析条件 parsedConditions.value = parseConditions(currentInput.value); - // 执行过滤,创建副本并添加selected属性 - filteredData.value = filterData(parsedConditions.value).map((item) => ({ - ...item, - selected: false, - })); + // 查询条件为空时,展示所有商品 + if (!currentInput.value.trim()) { + filteredData.value = mockData.map((item) => ({ ...item, selected: false })); + } else { + // 执行过滤,创建副本并添加selected属性 + filteredData.value = filterData(parsedConditions.value).map((item) => ({ + ...item, + selected: false, + })); + } + + // 更新总数和重置页码 + totalItems.value = filteredData.value.length; + currentPage.value = 1; // 显示结果 showResults.value = true; @@ -966,6 +1049,7 @@ 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); } @@ -985,10 +1069,19 @@ const removeCondition = (index) => { .replace(/[;;]+/g, ";") .trim(); parsedConditions.value = parseConditions(currentInput.value); - filteredData.value = filterData(parsedConditions.value).map((item) => ({ - ...item, - selected: false, - })); + + // 重新过滤数据 + if (!currentInput.value.trim()) { + filteredData.value = mockData.map((item) => ({ ...item, selected: false })); + } else { + filteredData.value = filterData(parsedConditions.value).map((item) => ({ + ...item, + selected: false, + })); + } + + totalItems.value = filteredData.value.length; + currentPage.value = 1; // 重置选中的条件索引 if (selectedConditionIndex.value === index) { @@ -1001,6 +1094,8 @@ const clearAll = () => { currentInput.value = ""; parsedConditions.value = []; filteredData.value = []; + totalItems.value = 0; + currentPage.value = 1; showResults.value = false; showSuggestions.value = false; possibleFields.value = []; @@ -1008,11 +1103,25 @@ const clearAll = () => { if (searchInput.value) { searchInput.value.focus(); } + handleSearch(); +}; + +// 分页相关方法 +const handleSizeChange = (val) => { + pageSize.value = val; + currentPage.value = 1; // 重置为第一页 +}; + +const handleCurrentChange = (val) => { + currentPage.value = val; + // 滚动到顶部 + window.scrollTo({ top: 0, behavior: "smooth" }); }; // 生命周期钩子 onMounted(() => { initializeValues(); + handleSearch(); updateInputWidth(); window.addEventListener("resize", updateInputWidth); @@ -1072,26 +1181,11 @@ function onCompare() { compareDialogVisible.value = true; } -// 下一步 -function onNextStep() { - const selected = filteredData.value.filter((i) => i.selected); - if (selected.length !== 1) { - ElMessage.warning("请且只能选择一个卡片进入下一步"); - return; +// 确定按钮点击事件 +function handleConfirm() { + if (selectedCount.value === 1) { + confirmDialogVisible.value = true; } - // 写入form - if (props.form) { - props.form.selectedCarType = selectedCarTypeProxy.value; - props.form.selectedPartInfo = { - code: selected[0].productNumber, - label: selected[0].name, - image: selected[0].image, - type: selected[0].model, - feature: selected[0].specificationModel, - }; - emit("update:form", props.form); - } - emit("next-step"); } @@ -1741,31 +1835,8 @@ function onNextStep() { } .results-section { - max-height: 300px; - overflow-y: auto; - /* 添加内边距避免内容紧贴滚动条 */ + /* 移除滚动条相关样式 */ padding: 0 10px 20px; - scrollbar-width: thin; - scrollbar-color: #ccc #f5f5f5; -} - -/* 滚动条美化(针对WebKit浏览器) */ -.results-section::-webkit-scrollbar { - width: 6px; -} - -.results-section::-webkit-scrollbar-track { - background: #f5f5f5; - border-radius: 3px; -} - -.results-section::-webkit-scrollbar-thumb { - background-color: #ccc; - border-radius: 3px; -} - -.results-section::-webkit-scrollbar-thumb:hover { - background-color: #aaa; } .no-results { @@ -1783,6 +1854,50 @@ function onNextStep() { overflow-y: auto; } +/* 分页和确定按钮容器 */ +.pagination-container { + display: flex; + justify-content: end; + align-items: center; + margin-top: 20px; + padding: 10px 0; + border-top: 1px solid #eee; +} + +/* 确定按钮样式 */ +.confirm-button { + min-width: 100px; + margin-left: 15px; +} + +/* 文字溢出处理样式 */ +.text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: relative; +} + +.text-truncate:hover { + /* 保持原样式不变,但通过title属性显示完整内容 */ + overflow: visible; + white-space: normal; + z-index: 10; + background-color: rgba(255, 255, 255, 0.95); + padding: 5px; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + max-width: 300px; + word-break: break-word; +} + +/* 确认弹窗样式 */ +.confirm-message { + font-size: 16px; + text-align: center; + padding: 20px 0; +} + @media (max-width: 768px) { .search-box { flex-direction: column; @@ -1800,5 +1915,15 @@ function onNextStep() { .result-card { width: 100%; } + + .pagination-container { + flex-direction: column; + gap: 15px; + align-items: stretch; + } + + .confirm-button { + width: 100%; + } }