From d5ea406aa49890a3d3111b14e920cdf038c18d65 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 15 四月 2026 09:44:32 +0800
Subject: [PATCH] 优化搜索功能：调整关键字匹配逻辑，确保英文模糊匹配不区分大小写，并添加输入事件处理以增强用户体验
---
src/views/basicData/product/index.vue | 136 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 111 insertions(+), 25 deletions(-)
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 6d31b8d..e8b0d0b 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -6,6 +6,7 @@
v-model="search"
style="width: 210px"
placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
+ @input="searchFilter"
@change="searchFilter"
@clear="searchFilter"
clearable
@@ -25,22 +26,23 @@
:data="list"
@node-click="handleNodeClick"
:expand-on-click-node="false"
- default-expand-all
:default-expanded-keys="expandedKeys"
- :draggable="true"
:filter-node-method="filterNode"
:props="{ children: 'children', label: 'label' }"
highlight-current
node-key="id"
- style="
- height: calc(100vh - 190px);
- overflow-y: scroll;
- scrollbar-width: none;
- "
+ class="product-tree-scroll"
+ style="height: calc(100vh - 190px); overflow-y: auto"
>
<template #default="{ node, data }">
<div class="custom-tree-node">
- <span>{{ node.label }}</span>
+ <span class="tree-node-content">
+ <el-icon class="orange-icon">
+ <component :is="data.children && data.children.length > 0
+ ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
+ </el-icon>
+ <span class="tree-node-label">{{ data.label }}</span>
+ </span>
<div>
<el-button
type="primary"
@@ -49,7 +51,7 @@
>
缂栬緫
</el-button>
- <el-button type="primary" link @click="openProDia('add', data)">
+ <el-button type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3">
娣诲姞浜у搧
</el-button>
<el-button
@@ -72,7 +74,7 @@
<el-button type="primary" @click="openModelDia('add')">
鏂板瑙勬牸鍨嬪彿
</el-button>
- <ImportExcel @uploadSuccess="getModelList" />
+ <ImportExcel :product-id="currentId" @uploadSuccess="getModelList" />
<el-button
type="danger"
@click="handleDelete"
@@ -91,10 +93,9 @@
@selection-change="handleSelectionChange"
:tableLoading="tableLoading"
@pagination="pagination"
- :total="total"
></PIMTable>
</div>
- <el-dialog v-model="productDia" title="浜у搧" width="400px">
+ <el-dialog v-model="productDia" title="浜у搧" width="400px" @keydown.enter.prevent>
<el-form
:model="form"
label-width="140px"
@@ -108,7 +109,10 @@
<el-input
v-model="form.productName"
placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+ maxlength="20"
+ show-word-limit
clearable
+ @keydown.enter.prevent
/>
</el-form-item>
</el-col>
@@ -126,6 +130,7 @@
title="瑙勬牸鍨嬪彿"
width="400px"
@close="closeModelDia"
+ @keydown.enter.prevent
>
<el-form
:model="modelForm"
@@ -141,6 +146,20 @@
v-model="modelForm.model"
placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
clearable
+ @keydown.enter.prevent
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="鍘氬害锛�" prop="thickness">
+ <el-input
+ v-model="modelForm.thickness"
+ placeholder="璇疯緭鍏ュ帤搴�"
+ clearable
+ @keydown.enter.prevent
+ @blur="modelForm.thickness = formatThicknessTo15(modelForm.thickness)"
/>
</el-form-item>
</el-col>
@@ -152,6 +171,7 @@
v-model="modelForm.unit"
placeholder="璇疯緭鍏ュ崟浣�"
clearable
+ @keydown.enter.prevent
/>
</el-form-item>
</el-col>
@@ -200,6 +220,12 @@
prop: "model",
},
{
+ label: "鍘氬害",
+ prop: "thickness",
+ // 鍒楄〃灞曠ず鏃剁粺涓�淇濈暀 15 浣嶅皬鏁�
+ formatData: (val) => formatThicknessTo15(val),
+ },
+ {
label: "鍗曚綅",
prop: "unit",
},
@@ -221,29 +247,42 @@
const tableData = ref([]);
const tableLoading = ref(false);
const isShowButton = ref(false);
-const total = ref(0);
const selectedRows = ref([]);
const page = reactive({
current: 1,
size: 10,
+ total: 0,
});
const data = reactive({
form: {
productName: "",
},
rules: {
- productName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ productName: [
+ { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+ { max: 20, message: "浜у搧鍚嶇О涓嶈兘瓒呰繃20涓瓧绗�", trigger: "blur" },
+ ],
},
modelForm: {
model: "",
- unit: "",
+ thickness: "",
},
modelRules: {
model: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- unit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ thickness: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
},
});
const { form, rules, modelForm, modelRules } = toRefs(data);
+
+// 鎶婂帤搴︽牸寮忓寲鎴愬浐瀹� 15 浣嶅皬鏁帮紙鐢ㄤ簬灞曠ず/鎻愪氦锛�
+const formatThicknessTo15 = (val) => {
+ if (val === null || val === undefined) return "";
+ const s = String(val).trim();
+ if (s === "") return "";
+ const n = Number(s);
+ if (Number.isNaN(n)) return s;
+ return n.toFixed(15);
+};
// 鏌ヨ浜у搧鏍�
const getProductTreeList = () => {
treeLoad.value = true;
@@ -277,8 +316,8 @@
modelOperationType.value = type;
modelDia.value = true;
modelForm.value.model = "";
- modelForm.value.model = "";
modelForm.value.id = "";
+ modelForm.value.thickness = "";
if (type === "edit") {
modelForm.value = { ...data };
}
@@ -310,6 +349,7 @@
proxy.$refs.formRef.resetFields();
productDia.value = false;
};
+
// 鍒犻櫎浜у搧
const remove = (node, data) => {
let ids = [];
@@ -349,6 +389,7 @@
proxy.$refs.modelFormRef.validate((valid) => {
if (valid) {
modelForm.value.productId = currentId.value;
+ modelForm.value.thickness = formatThicknessTo15(modelForm.value.thickness);
addOrEditProductModel(modelForm.value).then((res) => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeModelDia();
@@ -382,7 +423,7 @@
}).then((res) => {
console.log("res", res);
tableData.value = res.records;
- total.value = res.total;
+ page.total = res.total;
tableLoading.value = false;
});
};
@@ -421,13 +462,15 @@
//濡傛灉鏁版嵁涓虹┖锛屽垯杩斿洖true,鏄剧ず鎵�鏈夌殑鏁版嵁椤�
return true;
}
- // 鏌ヨ鍒楄〃鏄惁鏈夊尮閰嶆暟鎹紝灏嗗�煎皬鍐欙紝鍖归厤鑻辨枃鏁版嵁
- let val = value.toLowerCase();
+ // 鍏抽敭瀛椾笌鑺傜偣 label 鍧囨寜灏忓啓姣旇緝锛岃嫳鏂囨ā绯婂尮閰嶄笉鍖哄垎澶у皬鍐欙紙濡� LOW / low 鍙尮閰� Low-E锛�
+ const val = String(value).trim().toLowerCase();
+ if (!val) return true;
return chooseNode(val, data, node); // 璋冪敤杩囨护浜屽眰鏂规硶
};
// 杩囨护鐖惰妭鐐� / 瀛愯妭鐐� (濡傛灉杈撳叆鐨勫弬鏁版槸鐖惰妭鐐逛笖鑳藉尮閰嶏紝鍒欒繑鍥炶鑺傜偣浠ュ強鍏朵笅鐨勬墍鏈夊瓙鑺傜偣锛涘鏋滃弬鏁版槸瀛愯妭鐐癸紝鍒欒繑鍥炶鑺傜偣鐨勭埗鑺傜偣銆俷ame鏄腑鏂囧瓧绗︼紝enName鏄嫳鏂囧瓧绗�.
const chooseNode = (value, data, node) => {
- if (data.label.indexOf(value) !== -1) {
+ const labelLower = String(data.label ?? "").toLowerCase();
+ if (labelLower.indexOf(value) !== -1) {
return true;
}
const level = node.level;
@@ -440,8 +483,9 @@
// 閬嶅巻褰撳墠鑺傜偣鐨勭埗鑺傜偣
let index = 0;
while (index < level - 1) {
- // 濡傛灉鍖归厤鍒扮洿鎺ヨ繑鍥烇紝姝ゅname鍊兼槸涓枃瀛楃锛宔nName鏄嫳鏂囧瓧绗︺�傚垽鏂尮閰嶄腑鑻辨枃杩囨护
- if (parentData.data.label.indexOf(value) !== -1) {
+ // 濡傛灉鍖归厤鍒扮洿鎺ヨ繑鍥烇紱涓� filterNode 涓�鑷达紝鏍囩涓庡叧閿瓧鍧囨寜灏忓啓姣旇緝锛岃嫳鏂囨ā绯婂尮閰嶄笉鍖哄垎澶у皬鍐�
+ const parentLabelLower = String(parentData.data.label ?? "").toLowerCase();
+ if (parentLabelLower.indexOf(value) !== -1) {
return true;
}
// 鍚﹀垯鐨勮瘽鍐嶅線涓婁竴灞傚仛鍖归厤
@@ -459,22 +503,64 @@
display: flex;
}
.left {
- width: 380px;
+ width: 450px;
+ min-width: 450px;
padding: 16px;
background: #ffffff;
}
.right {
- width: calc(100% - 380px);
+ flex: 1;
+ min-width: 0;
padding: 16px;
margin-left: 20px;
background: #ffffff;
}
.custom-tree-node {
flex: 1;
+ min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
+.tree-node-content {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ overflow: hidden;
+}
+.tree-node-content .orange-icon {
+ flex-shrink: 0;
+}
+.tree-node-label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.orange-icon {
+ color: orange;
+ font-size: 18px;
+ margin-right: 8px; /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
+}
+.product-tree-scroll {
+ scrollbar-width: thin;
+ scrollbar-color: #c0c4cc #f5f7fa;
+}
+.product-tree-scroll::-webkit-scrollbar {
+ width: 8px;
+}
+.product-tree-scroll::-webkit-scrollbar-track {
+ background: #f5f7fa;
+ border-radius: 4px;
+}
+.product-tree-scroll::-webkit-scrollbar-thumb {
+ background: #c0c4cc;
+ border-radius: 4px;
+}
+.product-tree-scroll::-webkit-scrollbar-thumb:hover {
+ background: #909399;
+}
</style>
--
Gitblit v1.9.3