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

package/package.json

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

package/src/index.vue

@@ -1578,81 +1578,192 @@ 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 { /* 原有样式保留 */ }
+  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: '' !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;
+      height: calc(100% - 28px) !important; /* 28 = 标题高度20 + 间距8 */
       border: 1px solid #EAECF0;
       border-radius: 4px;
-      padding: 8px;
+      padding: 0 !important;
       box-sizing: border-box;
-      /* 原样式保留，新增：禁止自身滚动，交给内部容器 */
-      overflow: hidden !important;
+      width: 100% !important;
+      overflow-x: auto !important;
+      overflow-y: auto !important;
       position: relative;
-    }
+      flex-shrink: 1;
+      min-height: 0 !important;
 
-    /* 新增强制滚动容器样式（关键） */
-    .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;
       }
       &::-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;
+    .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);
+      }
+    }
   }
 }
 
@@ -1857,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;
@@ -1868,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

@@ -423,6 +423,7 @@ export default {
   min-width: 100% !important;
   height: 100% !important;
   white-space: nowrap !important;
+  overflow: visible !important;
 }
 
 /deep/ .ivu-tree-node {
@@ -436,6 +437,7 @@ export default {
   cursor: default !important;
   pointer-events: none !important;
   padding-left: 0 !important;
+  width: 100% !important; /* 关键：节点内容宽度100% */
 
   .ivu-checkbox, .ivu-tree-switcher {
     pointer-events: auto !important;
@@ -446,11 +448,13 @@ export default {
 /deep/ .ivu-tree {
   white-space: nowrap !important;
   display: inline-block !important;
-  width: auto !important; /* 宽度自适应内容 */
-  min-width: 100% !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,