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 |  112 ++++++++++++++++++++++++++++----------------------------
 1 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 3aa263e..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
@@ -113,6 +108,8 @@
               <el-input
                 v-model="form.productName"
                 placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+                maxlength="20"
+                show-word-limit
                 clearable
                 @keydown.enter.prevent
               />
@@ -241,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: "",
@@ -319,53 +319,17 @@
   proxy.$refs.formRef.resetFields();
   productDia.value = false;
 };
-// 灏佽涓�涓畨鍏ㄧ殑纭妗嗭紝褰诲簳闃绘Enter閿Е鍙�
-const safeConfirm = (message, title) => {
-  // 鏍囪鏄惁鏄紶鏍囩偣鍑伙紙鐐瑰嚮鎸夐挳浼氳Е鍙慺ocus浜嬩欢锛�
-  let isMouseClick = false;
 
-  return new Promise((resolve, reject) => {
-    const box = ElMessageBox.confirm(message, title, {
-      confirmButtonText: "纭",
-      cancelButtonText: "鍙栨秷",
-      type: "warning",
-      beforeClose: (action, instance, done) => {
-        if (action === "confirm") {
-          // 鍙湁榧犳爣鐐瑰嚮鏃舵墠鍏佽纭
-          if (isMouseClick) {
-            done();
-            resolve();
-          } else {
-            // Enter閿Е鍙戞椂闃绘
-            done(false);
-          }
-        } else {
-          // 鍙栨秷鎿嶄綔鐩存帴鍏佽
-          done();
-          reject();
-        }
-      }
-    });
-
-    // 鐩戝惉纭鎸夐挳鐨刦ocus浜嬩欢锛堥紶鏍囩偣鍑讳細瑙﹀彂锛孍nter閿笉浼氾級
-    setTimeout(() => {
-      const confirmBtn = document.querySelector('.el-message-box__btns .el-button--primary');
-      if (confirmBtn) {
-        confirmBtn.addEventListener('focus', () => {
-          isMouseClick = true;
-        });
-      }
-    }, 0); // 寤惰繜鑾峰彇锛岀‘淇滵OM宸叉覆鏌�
-  });
-};
-// 鍒犻櫎浜у搧
 // 鍒犻櫎浜у搧
 const remove = (node, data) => {
-  let ids = [data.id];
-  // 浣跨敤灏佽鐨剆afeConfirm
-  safeConfirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず")
+  let ids = [];
+  ids.push(data.id);
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
     .then(() => {
-      // 纭鍒犻櫎閫昏緫
       tableLoading.value = true;
       delProduct(ids)
         .then((res) => {
@@ -441,7 +405,11 @@
     proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
     return;
   }
-  safeConfirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず")
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
     .then(() => {
       tableLoading.value = true;
       delProductModel(ids)
@@ -501,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;
@@ -520,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