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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/organize-select-help",
-  "version": "1.0.0-beta.50",
+  "version": "1.0.0-beta.53",
   "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,81 +1575,195 @@ export default {
     }
   }
 }
+
 .staff-left-right-layout {
   display: flex;
-  height: 600px;
+  height: 550px !important;
   gap: 15px;
   padding: 0 5px;
   width: 100%;
   box-sizing: border-box;
-
-  .staff-left-panel {
-    min-width: 300px;
-    max-width: 350px;
-    width: 320px;
-    display: flex;
-    flex-direction: column;
-    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，更醒目且仍符合整体简约风格
+  flex-wrap: nowrap !important;
+
+  & > .staff-left-panel {
+    width: 320px !important;
+    min-width: 320px !important;
+    max-width: 320px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    box-sizing: border-box !important;
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
+    height: 100% !important;
+    position: relative !important; // 确保子元素 z-index 生效
+
+    ::v-deep(.panel-title) {
+      all: unset !important;
+      display: flex !important; // 改为flex，方便对齐竖条和文字
+      align-items: center !important; // 文字垂直居中
+      visibility: visible !important;
+      opacity: 1 !important;
+      height: 20px !important;
+      line-height: 20px !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+      color: #333 !important;
+      margin-bottom: 8px !important;
+      background: #fff !important;
+      z-index: 999 !important;
+      padding: 0 !important;
+      box-sizing: border-box !important;
+      position: relative !important;
+      width: 100% !important;
+      // 左侧竖条核心样式
       &::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，视觉更柔和
+        content: '' !important;
+        display: inline-block !important;
+        width: 5px !important; // 竖条宽度
+        height: 16px !important; // 竖条高度（略小于文字行高）
+        background-color: #1890ff !important; // 蓝色竖条（可改颜色）
+        margin-right: 8px !important; // 竖条与文字间距
+        //border-radius: 1.5px !important;
       }
     }
 
     .staff-org-tree {
-      height: calc(100% - 38px) !important; // 对应title高度+margin-bottom调整
-      overflow: auto;
+      height: calc(100% - 28px) !important; /* 28 = 标题高度20 + 间距8 */
       border: 1px solid #EAECF0;
       border-radius: 4px;
-      padding: 8px;
+      padding: 0 !important;
       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;
+      width: 100% !important;
+      overflow-x: auto !important;
+      overflow-y: auto !important;
+      position: relative;
+      flex-shrink: 1;
+      min-height: 0 !important;
+
+      &::-webkit-scrollbar {
+        width: 8px !important;
+        height: 8px !important;
+        background: #f9f9f9 !important;
       }
-      /deep/ .ivu-tree-child-tree {
-        padding-left: 16px !important;
+      &::-webkit-scrollbar-thumb {
+        background: #ccc !important;
+        border-radius: 4px !important;
       }
+      scrollbar-width: thin !important;
+      scrollbar-color: #ccc #f9f9f9 !important;
+    }
+
+    .tree-scroll-force {
+      width: 100% !important;
+      height: 100% !important;
+      margin: 0 !important;
+      padding: 8px !important;
+      box-sizing: border-box;
+      overflow: visible !important;
+      position: relative;
     }
   }
 
   .staff-right-panel {
     flex: 1 !important;
-    min-width: 350px;
+    min-width: 0 !important;
     width: calc(100% - 335px) !important;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    gap: 8px;
+    gap: 8px; /* 搜索框与列表、列表与底部选择栏的间距统一为8px */
     padding: 0 5px;
-    flex-shrink: 0;
+    flex-shrink: 1 !important;
+
+    // 搜索框：固定高度
+    .ivu-input-wrapper {
+      height: 32px;
+      flex-shrink: 0;
+    }
+
+    // 右侧人员列表容器：高度 = 父容器高度 - 搜索框高度 - 底部选择栏高度 - 两次间距(8*2)
+    .staff-content {
+      height: calc(100% - 32px - 40px - 16px) !important; /* 40=底部选择栏高度，16=8*2间距 */
+      border: 1px solid #EAECF0;
+      border-radius: 4px;
+      overflow-x: hidden !important;
+      overflow-y: auto !important;
+      flex-shrink: 1;
+
+      &::-webkit-scrollbar {
+        width: 8px !important;
+        height: 8px !important;
+        background: #f9f9f9 !important;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc !important;
+        border-radius: 4px !important;
+      }
+      scrollbar-width: thin !important;
+      scrollbar-color: #ccc #f9f9f9 !important;
+    }
+
+    // 底部选择栏：固定高度
+    .bottom-select {
+      height: 40px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 0;
+      background: #fff !important;
+      border-top: 1px solid #f0f0f0;
 
-    // 其他右侧样式保持不变...
+      .num {
+        color: var(--primary-color);
+      }
+    }
+  }
+}
+
+.tab-content-pro {
+  .tab {
+    .tree {
+      height: 400px !important;
+      max-height: 400px !important;
+      margin-top:20px;
+      overflow-y: auto !important;
+      overflow-x: auto !important;
+      border: 1px solid #EAECF0;
+      border-radius: 4px;
+      box-sizing: border-box;
+
+      &::-webkit-scrollbar {
+        width: 8px !important;
+        height: 8px !important;
+        display: block !important;
+        background: #f9f9f9 !important;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc !important;
+        border-radius: 4px !important;
+      }
+    }
+
+    &.post .right .tree {
+      height: 380px !important;
+      max-height: 380px !important;
+    }
+
+    .bottom-select {
+      display:flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top:15px !important;
+      padding: 8px 0;
+      background: #fff !important;
+      position: relative;
+      z-index: 10;
+      border-top: 1px solid #f0f0f0;
+      .num{
+        color:var(--primary-color);
+      }
+    }
   }
 }
 
@@ -1852,9 +1968,30 @@ export default {
           display:flex;
           align-items: center;
         }
-        .tree{
-          height:450px;
+        .tree {
+          height: 400px !important; // 从450px下调，预留下方复选框空间
+          max-height: 400px !important; // 强制最大高度，禁止超出
           margin-top:20px;
+          overflow-y: auto !important; // 纵向溢出时滚动，而非超出
+          overflow-x: auto !important; // 横向溢出时滚动
+          border: 1px solid #EAECF0; // 明确容器边界（可选）
+          border-radius: 4px;
+          box-sizing: border-box; // 包含边框/内边距计算
+          // 滚动条样式统一（与人员Tab保持一致）
+          &::-webkit-scrollbar {
+            width: 8px !important;
+            height: 8px !important;
+            display: block !important;
+            background: #f9f9f9 !important;
+          }
+          &::-webkit-scrollbar-thumb {
+            background: #ccc !important;
+            border-radius: 4px !important;
+          }
+        }
+        &.post .right .tree {
+          height: 380px !important;
+          max-height: 380px !important;
         }
         .staff-content{
           overflow:auto;
@@ -1863,7 +2000,12 @@ export default {
           display:flex;
           align-items: center;
           justify-content: space-between;
-          margin-top:20px;
+          margin-top:15px !important; // 增加间距
+          padding: 8px 0; // 内边距提升可读性
+          background: #fff !important; // 白色背景覆盖树溢出内容
+          position: relative;
+          z-index: 10; // 层级高于树容器
+          border-top: 1px solid #f0f0f0; // 视觉分隔（可选）
           .num{
             color:var(--primary-color);
           }

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,11 +411,50 @@ 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;
+  overflow: visible !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;
+  width: 100% !important; /* 关键：节点内容宽度100% */
+
+  .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;
+  height: 100% !important; /* 关键：树组件高度100% */
+}
+
+
 /deep/ .ivu-tree-node,
 /deep/ .ivu-tree-node *,
 /deep/ .ivu-tree-node-content,
@@ -410,8 +482,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,