@sy-common/organize-select-help 1.0.0-beta.62 → 1.0.0-beta.63

package/package.json

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

package/src/index.vue

@@ -7,6 +7,7 @@
       width="1180"
       :mask-closable="false"
       class="modal-tree"
+      :fullscreen="true"
   >
     <div slot="header" class="header-text"><Icon type="md-information" class="icon-tip" />人员选择</div>
     <div class="content-container">
@@ -1661,29 +1662,59 @@ export default {
 
 .staff-left-right-layout {
   display: flex;
-  height: 650px !important;
+  // 适配全屏：使用视口高度百分比 + 最小高度限制
+  height: calc(100vh - 180px) !important;
+  min-height: 500px !important;
   gap: 15px;
   padding: 0 5px;
   width: 100%;
   box-sizing: border-box;
   flex-wrap: nowrap !important;
 
+  // 小屏幕 不改变左右结构
+  @media (max-width: 1200px) {
+    height: calc(100vh - 200px) !important;
+
+    & > .staff-left-panel {
+      width: calc(60% - 7.5px) !important;
+      min-width: 280px !important;
+      max-width: none !important;
+    }
+  }
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap !important;
+
+    & > .staff-left-panel {
+      width: 100% !important;
+      min-width: 100% !important;
+      max-width: 100% !important;
+      height: 40% !important;
+      margin-bottom: 10px;
+    }
+
+    .staff-right-panel {
+      width: 100% !important;
+      height: 60% !important;
+    }
+  }
+
   & > .staff-left-panel {
-    width: 320px !important;
+    width: calc(60% - 7.5px) !important;
     min-width: 320px !important;
-    max-width: 320px !important;
+    max-width: none !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 生效
+    position: relative !important;
 
     ::v-deep(.panel-title) {
       all: unset !important;
-      display: flex !important; // 改为flex，方便对齐竖条和文字
-      align-items: center !important; // 文字垂直居中
+      display: flex !important;
+      align-items: center !important;
       visibility: visible !important;
       opacity: 1 !important;
       height: 20px !important;
@@ -1698,20 +1729,20 @@ export default {
       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; // 蓝色竖条（可改颜色）
+        background-color: #1890ff !important; // 蓝色竖条
         margin-right: 8px !important; // 竖条与文字间距
         //border-radius: 1.5px !important;
       }
     }
 
     .staff-org-tree {
-      height: calc(100% - 28px) !important; /* 28 = 标题高度20 + 间距8 */
+      height: calc(100% - 28px - 10px) !important; /* 28=标题高度+间距 + 10px额外缩减，确保按钮可见 */
       border: 1px solid #EAECF0;
       border-radius: 4px;
       padding: 0 !important;
@@ -1748,9 +1779,8 @@ export default {
   }
 
   .staff-right-panel {
-    flex: 1 !important;
+    width: calc(40% - 7.5px) !important;
     min-width: 0 !important;
-    width: calc(100% - 335px) !important;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -1764,9 +1794,10 @@ export default {
       flex-shrink: 0;
     }
 
-    // 右侧人员列表容器：高度 = 父容器高度 - 搜索框高度 - 底部选择栏高度 - 两次间距(8*2)
+    // 右侧人员列表容器：适配全屏高度
     .staff-content {
-      height: calc(100% - 32px - 40px - 16px) !important; /* 40=底部选择栏高度，16=8*2间距 */
+      height: calc(100% - 32px - 40px - 16px - 10px) !important;
+      min-height: 200px !important; // 小屏幕最小高度限制
       border: 1px solid #EAECF0;
       border-radius: 4px;
       overflow-x: hidden !important;
@@ -1807,8 +1838,10 @@ export default {
 .tab-content-pro {
   .tab {
     .tree {
-      height: 500px !important;
-      max-height: 500px !important;
+      // 全屏 使用百分比高度 + 最小高度
+      height: calc(100vh - 340px) !important; // 从300px增加到340px，缩减40px高度
+      min-height: 360px !important; // 降低最小高度，确保按钮可见
+      max-height: none !important; // 移除最大高度限制
       margin-top:20px;
       overflow-y: auto !important;
       overflow-x: auto !important;
@@ -1829,8 +1862,10 @@ export default {
     }
 
     &.post .right .tree {
-      height: 380px !important;
-      max-height: 380px !important;
+      // 岗位树适配全屏（缩减高度确保按钮可见）
+      height: calc(100vh - 430px) !important; // 从400px增加到430px，缩减30px高度
+      min-height: 270px !important; // 降低最小高度，确保按钮可见
+      max-height: none !important;
     }
 
     .bottom-select {
@@ -1850,7 +1885,6 @@ export default {
   }
 }
 
-
 /deep/ .ivu-tree {
   width: 100% !important;
   box-sizing: border-box;
@@ -1893,11 +1927,24 @@ export default {
 }
 
 .tab.post .left {
-  width: 200px;
-  height: 450px !important;
+  width: calc(50% - 10px) !important;
+  // 适配全屏高度
+  height: calc(100vh - 380px) !important;
+  min-height: 270px !important;
   overflow: hidden !important;
   padding-right: 10px;
   box-sizing: border-box;
+
+  // 小屏幕仅调整宽度，不改变左右结构
+  @media (max-width: 1200px) {
+    width: calc(50% - 10px) !important;
+  }
+
+  // 超小屏幕
+  @media (max-width: 768px) {
+    width: 100%;
+    margin-bottom: 10px;
+  }
 }
 
 .scroll-container {
@@ -2010,6 +2057,12 @@ export default {
 }
 
 .modal-tree{
+  // 全屏适配：移除固定宽度限制
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  max-height: none !important;
+
   .header-text{
     font-weight: bold;
     font-size: 16px;
@@ -2024,12 +2077,20 @@ export default {
     line-height: 16px;
   }
   .content-container{
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
   }
   .tree-orig{
     width:100%;
     display: flex;
-    height: 700px;
+    // 适配全屏高度
+    height: calc(100vh - 80px) !important;
+    min-height: 600px !important;
     background: #fff;
+    // 强制保留左右结构，仅超小屏幕 换行
+    flex-wrap: nowrap !important;
 
     :global(.ivu-tabs-ink-bar) {
       height: 0 !important;
@@ -2072,9 +2133,22 @@ export default {
       }
     }
     .tab-content-pro{
-      width: 720px;
+      // 6:4比例 - 减去gap的一半
+      width: calc(60% - 10px) !important;
+      max-width: none !important; // 取消固定最大宽度，按比例适配
+      flex-shrink: 0 !important; // 禁止压缩
       border-radius: 8px;
       border: 1px solid #EAECF0;
+      // 小屏幕保持6:4比例
+      @media (max-width: 1200px) {
+        width: calc(60% - 10px) !important;
+      }
+      // 超小屏幕兜底
+      @media (max-width: 768px) {
+        width: 100% !important;
+        margin-bottom: 10px;
+      }
+
       .tab{
         padding:20px;
         .tag-content{
@@ -2084,12 +2158,13 @@ export default {
           align-items: center;
         }
         .tree {
-          height: 500px !important; // 从450px下调，预留下方复选框空间
-          max-height: 500px !important; // 强制最大高度，禁止超出
+          height: calc(100vh - 340px) !important; // 缩减40px确保按钮可见
+          min-height: 360px !important; // 降低最小高度
+          max-height: none !important; // 移除最大高度限制
           margin-top:20px;
           overflow-y: auto !important; // 纵向溢出时滚动，而非超出
           overflow-x: auto !important; // 横向溢出时滚动
-          border: 1px solid #EAECF0; // 明确容器边界（可选）
+          border: 1px solid #EAECF0; // 明确容器边界
           border-radius: 4px;
           box-sizing: border-box; // 包含边框/内边距计算
           // 滚动条样式统一（与人员Tab保持一致）
@@ -2105,8 +2180,9 @@ export default {
           }
         }
         &.post .right .tree {
-          height: 380px !important;
-          max-height: 380px !important;
+          height: calc(100vh - 430px) !important; // 缩减30px确保按钮可见
+          min-height: 270px !important; // 降低最小高度
+          max-height: none !important;
         }
         .staff-content{
           overflow:auto;
@@ -2120,7 +2196,7 @@ export default {
           background: #fff !important; // 白色背景覆盖树溢出内容
           position: relative;
           z-index: 10; // 层级高于树容器
-          border-top: 1px solid #f0f0f0; // 视觉分隔（可选）
+          border-top: 1px solid #f0f0f0; // 视觉分隔
           .num{
             color:var(--primary-color);
           }
@@ -2163,8 +2239,29 @@ export default {
       .post{
         display: flex;
         height: 100%;
+        // 小屏幕仅调整宽度，不改变左右结构
+        @media (max-width: 1200px) {
+          .left {
+            width: calc(50% - 10px) !important; // 同步改为50%
+          }
+        }
+        // 超小屏幕兜底
+        @media (max-width: 768px) {
+          flex-direction: column;
+
+          .left {
+            width: 100%;
+            margin-bottom: 10px;
+          }
+
+          .right {
+            margin-left: 0;
+            width: 100%;
+          }
+        }
+
         .left{
-          width:200px;
+          width: calc(50% - 10px) !important;
           overflow: auto;
           >div{
             background: #FFFFFF;
@@ -2185,7 +2282,8 @@ export default {
         }
         .right{
           margin-left:20px;
-          flex: 1;
+          width: calc(50% - 10px) !important;
+          flex: none !important;
         }
       }
       .gust-item{
@@ -2235,12 +2333,23 @@ export default {
       //}
     }
     .form-content{
-      flex:1;
+      // 6:4比例 - 减去gap的一半
+      width: calc(40% - 10px) !important;
+      min-width: 300px !important; // 最小宽度限制
       overflow: hidden;
       border-radius: 8px;
       border: 1px solid #EAECF0;
       margin-left:20px;
       padding:10px 20px;
+      height: 100%;
+      flex: none !important; // 取消弹性，固定比例
+      // 超小屏幕
+      @media (max-width: 768px) {
+        margin-left: 0;
+        width: 100%;
+        margin-top: 10px;
+      }
+
       >p{
         font-weight: 500;
         font-size: 16px;
@@ -2300,4 +2409,28 @@ export default {
     }
   }
 }
+
+// 超小屏幕适配（手机端）
+@media (max-width: 768px) {
+  .modal-tree .tree-orig {
+    flex-wrap: wrap !important; // 仅超小屏幕换行
+    height: calc(100vh - 100px) !important;
+    min-height: 400px !important;
+  }
+
+  .tab-content-pro .tab .tree {
+    height: calc(100vh - 380px) !important;
+    min-height: 300px !important;
+  }
+
+  .tab.post .left {
+    height: calc(100vh - 480px) !important;
+    min-height: 200px !important;
+  }
+
+  .staff-left-right-layout {
+    height: calc(100vh - 220px) !important;
+    min-height: 400px !important;
+  }
+}
 </style>