From 649cf95bb793b9a0de7ee4c87bd34d9dbe716b04 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期二, 03 二月 2026 13:07:44 +0800
Subject: [PATCH] fix: 输入框输入位数长度、滑动条

---
 src/views/basicData/product/index.vue |   65 +++++++++++++++++++++++++-------
 1 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index b17be1f..c9058aa 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -25,18 +25,13 @@
           :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">
@@ -45,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
@@ -55,7 +50,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
@@ -99,7 +94,7 @@
         @pagination="pagination"
       ></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"
@@ -113,7 +108,10 @@
               <el-input
                 v-model="form.productName"
                 placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+                maxlength="20"
+                show-word-limit
                 clearable
+                @keydown.enter.prevent
               />
             </el-form-item>
           </el-col>
@@ -131,6 +129,7 @@
       title="瑙勬牸鍨嬪彿"
       width="400px"
       @close="closeModelDia"
+      @keydown.enter.prevent
     >
       <el-form
         :model="modelForm"
@@ -146,6 +145,7 @@
                 v-model="modelForm.model"
                 placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
                 clearable
+                @keydown.enter.prevent
               />
             </el-form-item>
           </el-col>
@@ -157,6 +157,7 @@
                 v-model="modelForm.unit"
                 placeholder="璇疯緭鍏ュ崟浣�"
                 clearable
+                @keydown.enter.prevent
               />
             </el-form-item>
           </el-col>
@@ -237,7 +238,10 @@
     productName: "",
   },
   rules: {
-    productName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    productName: [
+      { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+      { max: 20, message: "浜у搧鍚嶇О涓嶈兘瓒呰繃20涓瓧绗�", trigger: "blur" },
+    ],
   },
   modelForm: {
     model: "",
@@ -315,6 +319,7 @@
   proxy.$refs.formRef.resetFields();
   productDia.value = false;
 };
+
 // 鍒犻櫎浜у搧
 const remove = (node, data) => {
   let ids = [];
@@ -464,18 +469,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;
@@ -483,13 +491,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