@sy-common/organize-select-help 1.0.0-beta.21 → 1.0.0-beta.25

package/package.json

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

package/src/index.vue

@@ -62,8 +62,16 @@
             </TabPane>
             <TabPane label="岗位选择" name="post" v-if="name.includes('post')">
               <div class="tab post">
-                <div class="left">
-                  <div v-for="item in positiontList" :class="[selectedPositionId === item.positionId ? 'active' : '']" :key="item.positionId" @click="getPosionId(item)">{{ item.positionName }}</div>
+                <div class="left" style="height: 450px; overflow: hidden; position: relative; z-index: 1;">
+                  <div class="scroll-container">
+                    <div class="position-item"
+                         v-for="item in positiontList"
+                         :class="[selectedPositionId === item.positionId ? 'active' : '']"
+                         :key="item.positionId"
+                         @click="getPosionId(item)">
+                      {{ item.positionName }} <!-- 无需修改模板，仅通过样式实现自动换行 -->
+                    </div>
+                  </div>
                 </div>
                 <div class="right">
                   <span>组织搜索：</span>
@@ -242,7 +250,6 @@ export default {
       includeLevelPost:[],
       positiontList:[],
       postTree:[],
-      defaultOrgUnitId:'',//人员选择默认组织编码
       //直接人员
       staffSearch:'',
       staffAllList:[],
@@ -1294,6 +1301,71 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.tab.post .left {
+  width: 200px;
+  height: 450px !important;
+  overflow: hidden !important;
+  padding-right: 10px;
+  box-sizing: border-box;
+}
+
+.scroll-container {
+  height: 100% !important; /* 完全填充父容器高度 */
+  overflow-y: auto !important; /* 内容超出时显示滚动条，不足时隐藏（也可设为scroll强制显示） */
+  overflow-x: hidden !important;
+  padding: 8px 0;
+  /* 消除可能的内边距/外边距影响 */
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* 3. 强化滚动条样式，确保可见性（兼容webkit浏览器） */
+.scroll-container::-webkit-scrollbar {
+  width: 8px !important; /* 滚动条宽度，确保肉眼可见 */
+  height: 8px;
+  display: block !important; /* 强制显示滚动条容器，避免被隐藏 */
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+  background-color: #ccc !important; /* 滑块颜色，与背景区分明显 */
+  border-radius: 4px !important;
+  transition: background-color 0.2s;
+}
+
+.scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: #999 !important; /* hover时加深，增强交互感 */
+}
+
+.scroll-container::-webkit-scrollbar-track {
+  background-color: #f9f9f9 !important; /* 轨道颜色，与容器背景区分 */
+  border-radius: 4px !important;
+}
+
+/* 4. 保持position-item原有样式，确保布局正常 */
+.position-item {
+  border: 1px solid #ddd;
+  margin: 5px 0;
+  padding: 8px 10px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  /* 取消文字截断，允许自动换行 */
+  white-space: normal !important; /* 关键：取消强制不换行，恢复默认自动换行 */
+  overflow: visible !important; /* 关键：取消内容隐藏，展示全部文字 */
+  text-overflow: clip !important; /* 取消省略号，显示完整文字 */
+  line-height: 1.4; /* 优化行高，换行后文字更易读 */
+  min-height: 40px; /* 给个最小高度，避免内容过少时容器过扁 */
+  word-wrap: break-word; /* 兼容长英文/数字，强制换行（防止横向溢出） */
+}
+
+.position-item.active {
+  border-color: #1890ff;
+  background-color: #e6f7ff;
+}
+
+.position-item:hover:not(.active) {
+  background-color: #f5f5f5;
+}
 .custom-select-wrapper {
   position: relative;