From 6ce0d7be73f491fcda424ac815006a82e0d871c4 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期一, 30 三月 2026 10:18:29 +0800
Subject: [PATCH] fix: 添加规格型号搜索
---
src/views/basicData/product/index.vue | 98 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 82 insertions(+), 16 deletions(-)
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 3f0921a..27905f8 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -30,11 +30,8 @@
: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">
@@ -43,7 +40,7 @@
<component :is="data.children && data.children.length > 0
? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
</el-icon>
- {{ data.label }}
+ <span class="tree-node-label">{{ data.label }}</span>
</span>
<div>
<el-button
@@ -76,7 +73,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"
@@ -111,6 +108,8 @@
<el-input
v-model="form.productName"
placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+ maxlength="20"
+ show-word-limit
clearable
@keydown.enter.prevent
/>
@@ -154,12 +153,22 @@
<el-row>
<el-col :span="24">
<el-form-item label="鍗曚綅锛�" prop="unit">
- <el-input
+ <el-select
v-model="modelForm.unit"
- placeholder="璇疯緭鍏ュ崟浣�"
+ placeholder="璇烽�夋嫨鍗曚綅"
clearable
- @keydown.enter.prevent
- />
+ style="width: 100%"
+ :filterable="isConsumablesBranch"
+ :allow-create="isConsumablesBranch"
+ :default-first-option="isConsumablesBranch"
+ >
+ <el-option
+ v-for="u in unitSelectOptions"
+ :key="u"
+ :label="u"
+ :value="u"
+ />
+ </el-select>
</el-form-item>
</el-col>
</el-row>
@@ -175,7 +184,7 @@
</template>
<script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
import { ElMessageBox } from "element-plus";
import {
addOrEditProduct,
@@ -239,7 +248,10 @@
productName: "",
},
rules: {
- productName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ productName: [
+ { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+ { max: 20, message: "浜у搧鍚嶇О涓嶈兘瓒呰繃20涓瓧绗�", trigger: "blur" },
+ ],
},
modelForm: {
model: "",
@@ -251,6 +263,28 @@
},
});
const { form, rules, modelForm, modelRules } = toRefs(data);
+
+/** 褰撳墠閫変腑浜у搧鏄惁灞炰簬銆岃�楁潗銆嶅ぇ绫讳笅锛堟部鐖堕摼鏌ユ壘 label 涓恒�岃�楁潗銆嶇殑鑺傜偣锛� */
+const isConsumablesBranch = computed(() => {
+ if (!tree.value || !currentId.value) return false;
+ const n = tree.value.getNode(currentId.value);
+ if (!n) return false;
+ let p = n.parent;
+ while (p && p.data) {
+ if (p.data.label === "鑰楁潗") return true;
+ p = p.parent;
+ }
+ return false;
+});
+
+/** 鍗曚綅涓嬫媺锛氳�楁潗鍒嗘敮鍚欢銆佷釜鏁颁笖鍙墜鍔ㄦ柊澧烇紱鍏朵粬鍒嗘敮浠呭惃銆佸叕鏂� */
+const unitSelectOptions = computed(() => {
+ if (isConsumablesBranch.value) {
+ return ["鍚�", "鍏枻", "浠�", "涓暟",'妗�'];
+ }
+ return ["鍚�", "鍏枻"];
+});
+
// 鏌ヨ浜у搧鏍�
const getProductTreeList = () => {
treeLoad.value = true;
@@ -467,18 +501,21 @@
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;
@@ -486,13 +523,42 @@
padding-right: 8px;
}
.tree-node-content {
+ flex: 1;
+ min-width: 0;
display: flex;
- align-items: center; /* 鍨傜洿灞呬腑 */
+ 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