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

package/package.json

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

package/src/index.vue

@@ -701,11 +701,10 @@ export default {
       }
     },
     async loadMore(){
-      let nowTime = Date.now()
-      if (this.loadingStaff || this.staffEnding || (nowTime - this.lastLoadingTime < 1000)) return
+      if (this.loadingStaff || this.staffEnding) return
       this.loadingStaff = true
       try {
-        console.log("--触底加载---")
+        console.log("--触底加载/强制加载---", new Date().getTime()); // 调试日志，确认方法执行
         let res = await this.queryAllStaffList()
         let list = res.rows;
         list.map((item)=>item.checked=false)
@@ -944,27 +943,57 @@ export default {
     },
     visibleChange(val) {
       this.$emit('input', val);
-      // val 为 true 时表示帮助框打开，此时发起请求
       if (val) {
-        this.initStaffList() // 新增初始化方法，统一处理打开后的请求逻辑
+        this.resetStaffTreeChecked();
+        this.staffEnding = false;
+        this.offset = 0;
+        this.staffAllList = [];
+        this.loadingStaff = false;
+        if (this.tabName === 'staff') {
+          this.loadMore().catch(err => console.log("弹窗打开加载失败：", err));
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.loadMore();
+            }, 100);
+          });
+        }
       } else {
-        // 可选：关闭帮助框时重置人员列表相关状态，避免下次打开残留旧数据
         this.staffEnding = false;
         this.offset = 0;
         this.staffAllList = [];
-        // 关闭时重置选中状态
         this.$set(this, 'selectedStaffOrgId', '');
+        if (this.$refs.staffTree) {
+          this.$refs.staffTree.clearAllChecked(this.$refs.staffTree.data);
+          this.$refs.staffTree.$emit('handleChange', []);
+        }
+      }
+    },
+    resetStaffTreeChecked() {
+      this.$set(this, 'selectedStaffOrgId', '');
+      this.proStaffOrgList = [];
+      if (this.$refs.staffTree) {
+        this.$refs.staffTree.clearAllChecked(this.$refs.staffTree.data);
+        this.$refs.staffTree.$emit('handleChange', []);
+        if (this.$refs.staffTree.initData) {
+          this.$refs.staffTree.initData();
+        }
+      }
+      if (this.tabName === 'staff') {
+        this.$nextTick(() => {
+          this.loadMore();
+        });
       }
     },
     initStaffList() {
       this.staffEnding = false;
       this.offset = 0;
       this.staffAllList = [];
-      // 初始化时确保selectedStaffOrgId状态正确
-      if (this.tabName === 'staff' && (!this.selectedStaffOrgId || this.selectedStaffOrgId.trim())) {
-        this.$set(this, 'selectedStaffOrgId', '');
-      }
-      this.loadMore(); // 打开帮助框后，再发起第一次请求
+      // 小幅延迟，确保树重置完成后再发起查询（避免时序差）
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.loadMore();
+        }, 50); // 50ms足够，可根据实际情况调整
+      });
     },
     // 处理Tab切换，同步更新tabName
     handleTabChange(tabName) {
@@ -972,16 +1001,20 @@ export default {
 
       // 仅修改人员Tab相关逻辑，不影响其他Tab
       if (tabName === 'staff') {
-        // 重置人员选择相关状态
-        this.$set(this, 'selectedStaffOrgId', '');
-        this.proStaffOrgList = [];
-        // 清空树组件选中状态
-        if (this.$refs.staffTree) {
-          this.$refs.staffTree.clearAllChecked(this.$refs.staffTree.data);
-          this.$refs.staffTree.$emit('handleChange', []);
-        }
-        // 切换到人员tab时，立即触发一次搜索，确保orgUnitId参数正确
-        this.$nextTick(() => this.searchStaff());
+        this.resetStaffTreeChecked();
+        // 第一步：同步重置查询参数（确保参数干净）
+        this.staffEnding = false;
+        this.offset = 0;
+        this.staffAllList = [];
+        this.loadingStaff = false; // 强制解除加载中状态
+        // 第二步：立即同步调用（优先执行）
+        this.loadMore().catch(err => console.log("同步加载失败：", err));
+        // 第三步：异步兜底调用（防止同步调用被阻塞）
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.loadMore();
+          }, 100);
+        });
       } else if (tabName === 'post' && this.$refs.postTree && this.proPostList.length === 0) {
         // 保留原有岗位Tab逻辑，不修改
         this.proPostList = [];
@@ -1578,81 +1611,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 +2001,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 +2033,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,