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 |   87 +++++++++++++++++++++++++++++++++++--------
 1 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 506c1db..c9058aa 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -25,22 +25,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 +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
@@ -83,17 +84,17 @@
         </el-button>
       </div>
       <PIMTable
+        rowKey="id"
         :column="tableColumn"
         :tableData="tableData"
         :page="page"
         :isSelection="true"
-        :handleSelectionChange="handleSelectionChange"
+        @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"
@@ -107,7 +108,10 @@
               <el-input
                 v-model="form.productName"
                 placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+                maxlength="20"
+                show-word-limit
                 clearable
+                @keydown.enter.prevent
               />
             </el-form-item>
           </el-col>
@@ -125,6 +129,7 @@
       title="瑙勬牸鍨嬪彿"
       width="400px"
       @close="closeModelDia"
+      @keydown.enter.prevent
     >
       <el-form
         :model="modelForm"
@@ -140,6 +145,7 @@
                 v-model="modelForm.model"
                 placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
                 clearable
+                @keydown.enter.prevent
               />
             </el-form-item>
           </el-col>
@@ -151,6 +157,7 @@
                 v-model="modelForm.unit"
                 placeholder="璇疯緭鍏ュ崟浣�"
                 clearable
+                @keydown.enter.prevent
               />
             </el-form-item>
           </el-col>
@@ -220,18 +227,21 @@
 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: "",
@@ -309,6 +319,7 @@
   proxy.$refs.formRef.resetFields();
   productDia.value = false;
 };
+
 // 鍒犻櫎浜у搧
 const remove = (node, data) => {
   let ids = [];
@@ -381,7 +392,7 @@
   }).then((res) => {
     console.log("res", res);
     tableData.value = res.records;
-    total.value = res.total;
+    page.total = res.total;
     tableLoading.value = false;
   });
 };
@@ -458,22 +469,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