@sy-common/organize-select-help 1.0.0-beta.50 → 1.0.0-beta.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/organize-select-help",
-  "version": "1.0.0-beta.50",
+  "version": "1.0.0-beta.52",
   "description": "",
   "main": "index.js",
   "author": "lambo",

package/src/index.vue

@@ -126,15 +126,17 @@
                 <div class="staff-left-panel">
                   <div class="panel-title">组织选择</div>
                   <div class="tree staff-org-tree">
-                    <organizeTree
-                        @handleChange="getStaffList"
-                        ref="staffTree"
-                        :treeList="staffTree"
-                        :showCheckbox="true"
-                        :checkStrictly="true"
-                        :autoExpandParent="true"
-                        :isSingleSelect="true"
-                    ></organizeTree>
+                    <div class="tree-scroll-force">
+                      <organizeTree
+                          @handleChange="getStaffList"
+                          ref="staffTree"
+                          :treeList="staffTree"
+                          :showCheckbox="true"
+                          :checkStrictly="true"
+                          :autoExpandParent="true"
+                          :isSingleSelect="true"
+                      ></organizeTree>
+                    </div>
                   </div>
                 </div>
 
@@ -1573,6 +1575,7 @@ export default {
     }
   }
 }
+
 .staff-left-right-layout {
   display: flex;
   height: 600px;
@@ -1590,49 +1593,51 @@ export default {
     box-sizing: border-box;
     flex-shrink: 0;
 
-    .panel-title {
-      font-weight: 600;
-      font-size: 15px;
-      color: #1f2937;
-      margin-bottom: 10px;
-      height: 28px;
-      display: flex;
-      align-items: center;
-      position: relative;
-      padding-left: 18px; // 内边距同步加宽2px，保持视觉平衡
-      // 调整竖线宽度为6px，更醒目且仍符合整体简约风格
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 6px; // 从3px调整为6px，加宽竖线
-        height: 18px; // 高度同步微调至18px，比例更协调
-        background-color: var(--primary-color);
-        border-radius: 3px; // 圆角保持3px，视觉更柔和
-      }
-    }
+    .panel-title { /* 原有样式保留 */ }
 
     .staff-org-tree {
-      height: calc(100% - 38px) !important; // 对应title高度+margin-bottom调整
-      overflow: auto;
+      height: calc(100% - 38px) !important;
       border: 1px solid #EAECF0;
       border-radius: 4px;
       padding: 8px;
       box-sizing: border-box;
-      // 保持原有树节点样式
-      /deep/ .ivu-tree-node-content {
-        white-space: normal !important;
-        line-height: 1.4;
-        padding: 4px 0;
-      }
-      /deep/ .ivu-tree-node {
-        padding-left: 4px !important;
+      /* 原样式保留，新增：禁止自身滚动，交给内部容器 */
+      overflow: hidden !important;
+      position: relative;
+    }
+
+    /* 新增强制滚动容器样式（关键） */
+    .tree-scroll-force {
+      width: 100%;
+      height: 100%;
+      overflow: auto !important; /* 强制开启滚动 */
+      overflow-x: scroll !important; /* 强制显示横向滚动条 */
+      overflow-y: auto !important;
+      /* 强制最小宽度，确保内容溢出时触发滚动 */
+      min-width: 100%;
+      max-width: none !important;
+      /* 滚动条样式强制显示 */
+      &::-webkit-scrollbar {
+        width: 8px !important;
+        height: 8px !important;
+        display: block !important;
+        background: #f9f9f9 !important;
       }
-      /deep/ .ivu-tree-child-tree {
-        padding-left: 16px !important;
+      &::-webkit-scrollbar-thumb {
+        background: #ccc !important;
+        border-radius: 4px !important;
       }
+      /* 兼容Firefox */
+      scrollbar-width: thin !important;
+      scrollbar-color: #ccc #f9f9f9 !important;
+    }
+
+    /* 强制组织树组件宽度自适应内容 */
+    .tree-scroll-force /deep/ .ivu-tree {
+      width: fit-content !important; /* 宽度跟随内容 */
+      min-width: 100% !important; /* 最小占满容器 */
+      white-space: nowrap !important;
+      display: inline-block !important;
     }
   }
 

package/src/organize-tree.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="content">
     <Spin fix v-if="loading"></Spin>
-    <Tree
-        :data="data"
-        ref="tree"
-        :load-data="loadData"
-        :render="renderContent"
-        multiple
-        :check-strictly="true"
-        :cascade-check="false"
-    @on-select-change="handleChange"
-    ></Tree>
+    <div class="tree-inner">
+      <Tree
+          :data="data"
+          ref="tree"
+          :load-data="loadData"
+          :render="renderContent"
+          multiple
+          :check-strictly="true"
+          :cascade-check="false"
+          @on-select-change="handleChange"
+      ></Tree>
+    </div>
   </div>
 </template>
 
@@ -50,7 +52,14 @@ export default {
       this.data = data;
     },
 
+    // 树组件内的 handleChange 方法修改（仅保留核心逻辑，移除冗余触发）
     handleChange(data) {
+      // 仅处理复选框触发的选中数据，过滤空数据
+      if (!data || (Array.isArray(data) && data.length === 0)) {
+        this.$emit('handleChange', []);
+        return;
+      }
+
       let checkedData = Array.isArray(data)
           ? data.filter(item => item.checked)
           : (data.checked ? [data] : []);
@@ -63,6 +72,7 @@ export default {
       }
 
       this.syncAllNodeCheckedState(checkedData);
+      // 仅当有有效选中节点时才触发父组件事件
       this.$emit('handleChange', checkedData);
     },
     clearOtherCheckedNodes(keepIds) {
@@ -292,7 +302,18 @@ export default {
           overflow: 'hidden',
           display: 'flex',
           alignItems: 'center',
-          cursor: 'pointer'
+          cursor: 'default' // 文本区域鼠标指针改为默认
+        },
+        // 阻断整个节点容器的点击事件（仅复选框除外）
+        on: {
+          click: (e) => {
+            // 仅当点击复选框时放行，其他区域阻断
+            const isCheckbox = e.target.closest('.ivu-checkbox') || e.target.closest('.ivu-checkbox-icon');
+            if (!isCheckbox) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }
         }
       }, [
         h('Checkbox', {
@@ -302,7 +323,8 @@ export default {
             indeterminate: false
           },
           style: {
-            marginRight: '8px'
+            marginRight: '8px',
+            cursor: 'pointer' // 复选框保留点击指针
           },
           on: {
             'on-change': (checked) => {
@@ -324,10 +346,21 @@ export default {
         }),
         h('img', {
           attrs: { src: require('./assets/icon.png') },
-          style: { marginRight: '8px', width: '14px', height: '14px' }
+          style: {
+            marginRight: '8px',
+            width: '14px',
+            height: '14px',
+            pointerEvents: 'none' // 图标禁用点击
+          }
         }),
         h('span', {
-          style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }
+          style: {
+            // overflow: 'hidden',
+            // textOverflow: 'ellipsis',
+            flex: 1,
+            pointerEvents: 'none', // 文本完全禁用点击
+            userSelect: 'none' // 禁止文本选中
+          }
         }, data.title)
       ]);
     },
@@ -378,9 +411,44 @@ export default {
 
 <style lang="less" scoped>
 .content {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+  width: 100% !important;
+  height: 100% !important;
+  overflow: visible !important; /* 完全放开溢出限制 */
+  box-sizing: border-box;
+}
+
+/* 子组件内层容器强制宽度自适应 */
+.tree-inner {
+  width: fit-content !important;
+  min-width: 100% !important;
+  height: 100% !important;
+  white-space: nowrap !important;
+}
+
+/deep/ .ivu-tree-node {
+  white-space: nowrap !important;
+  width: auto !important;
+  min-width: 100% !important;
+  box-sizing: border-box;
+}
+
+/deep/ .ivu-tree-node-content {
+  cursor: default !important;
+  pointer-events: none !important;
+  padding-left: 0 !important;
+
+  .ivu-checkbox, .ivu-tree-switcher {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+  }
+}
+
+/deep/ .ivu-tree {
+  white-space: nowrap !important;
+  display: inline-block !important;
+  width: auto !important; /* 宽度自适应内容 */
+  min-width: 100% !important; /* 最小宽度占满容器 */
+  box-sizing: border-box;
 }
 
 /deep/ .ivu-tree-node,
@@ -410,8 +478,13 @@ export default {
   padding-left: 0 !important;
 }
 
+/deep/ .ivu-tree::-webkit-scrollbar {
+  display: block !important;
+}
+
 /deep/ .ivu-tree-indent {
   margin-right: 4px;
+  display: inline-block !important;
 }
 
 /deep/ .ivu-tree-node::before,