no message

components/panel/formSlot.vue

@@ -258,11 +258,18 @@
 		<u-popup v-model="deptModal.isShow" mode="bottom" border-radius="16" height="980" :mask-close-able="true" @close="deptModal.isShow = false">
 			<div class="dept-picker-wrap">
 				<div class="g_fs_18 g_c_3 g_flex_row_center g_pt_16 g_pb_16">选择部门</div>
-				<div class="dept-columns-scroll">
+				<div class="dept-columns-scroll" style="overflow-x: auto;width: 100vw;">
 					<div class="dept-columns g_flex_row_start">
-						<div class="dept-column" v-for="(column, colIndex) in deptColumns" :key="colIndex">
-							<div class="">
-								<div class="g_flex_row_between g_pt_16 g_pb_16" style="border-bottom: 1px solid #ddd;" v-for="(dept, deptIndex) in column" :key="dept.id" @click="handleDeptClick(dept, colIndex)">
+						<div class="dept-column" v-for="(column, colIndex) in deptColumns" :key="colIndex" :id="'dept-column-' + colIndex">
+							<div :style="{ paddingTop: (columnPaddingTops[colIndex] || 0) + 'px' }">
+								<div
+									class="g_flex_row_between g_pt_16 g_pb_16"
+									style="border-bottom: 1px solid #ddd;"
+									v-for="(dept, deptIndex) in column"
+									:key="dept.id"
+									:id="'dept-item-' + colIndex + '-' + deptIndex"
+									@click="handleDeptClick(dept, colIndex, deptIndex)"
+								>
 									<div class="g_ell_1 g_flex_1" :style="{ color: '#333', fontSize: '14px', flex: 1, marginRight: '8px',padding:'0 4px' }">
 										{{ dept.teamName }}
 									</div>
@@ -375,6 +382,7 @@ export default {
 			selectedDeptIds: [], // 选中的部门id集合
 			selectedDeptNames: [], // 选中的部门名称集合
 			currentDeptItem: null, // 当前编辑的表单项
+			columnPaddingTops: {}, // 每列的内边距顶部偏移，用于子级列和父级节点垂直对齐
 			roleModal: {
 				isShow: false,
 			},
@@ -821,6 +829,7 @@ export default {
 			}
 			// 根据已选中的部门初始化展开路径
 			this.expandedDeptIds = this.buildExpandedPath(this.deptList || [], item.deptIds || []);
+			this.columnPaddingTops = {};
 			this.deptColumns = this.buildCascadingColumns(this.deptList || []);
 			this.deptModal.isShow = true;
 		},
@@ -864,7 +873,7 @@ export default {
 			return this.expandedDeptIds[colIndex] === dept.id;
 		},
 		// 点击部门项：切换选中 + 展开/收起下一级
-		handleDeptClick(dept, colIndex) {
+		handleDeptClick(dept, colIndex, deptIndex) {
 			// 切换选中状态
 			let idx = this.selectedDeptIds.indexOf(dept.id);
 			if (idx > -1) {
@@ -879,14 +888,41 @@ export default {
 				if (this.expandedDeptIds[colIndex] === dept.id) {
 					// 已展开，则收起该节点及其后续展开
 					this.expandedDeptIds = this.expandedDeptIds.slice(0, colIndex);
+					// 清除后续列的 padding-top
+					for (let i = colIndex + 1; i <= Object.keys(this.columnPaddingTops).length; i++) {
+						this.$delete(this.columnPaddingTops, i);
+					}
 				} else {
 					// 未展开或展开了其他节点，则设置当前节点为展开，并截断后续
 					this.expandedDeptIds = this.expandedDeptIds.slice(0, colIndex);
 					this.expandedDeptIds.push(dept.id);
 				}
 				this.deptColumns = this.buildCascadingColumns(this.deptList || []);
+				// 下一帧滚动新展开的子级列，使其顶部与当前点击项对齐
+				this.$nextTick(() => {
+					this.alignColumnToParent(colIndex, deptIndex);
+				});
 			}
 		},
+		// 滚动子级列，使其顶部与父级节点垂直对齐
+		alignColumnToParent(colIndex, deptIndex) {
+			let that = this;
+			let parentItemId = '#dept-item-' + colIndex + '-' + deptIndex;
+			let childColumnId = '#dept-column-' + (colIndex + 1);
+			let firstColumnId = '#dept-column-0';
+			uni.createSelectorQuery().in(that).select(parentItemId).boundingClientRect(function(parentRect) {
+				if (!parentRect) return;
+				uni.createSelectorQuery().in(that).select(firstColumnId).boundingClientRect(function(firstRect) {
+					if (!firstRect) return;
+					// 计算父级节点相对于第一列顶部的偏移量
+					let offset = parentRect.top - firstRect.top;
+					if (offset > 0) {
+						// 给子级列设置相同的 padding-top，使子级列第一项与父级节点垂直对齐
+						that.$set(that.columnPaddingTops, colIndex + 1, offset);
+					}
+				}).exec();
+			}).exec();
+		},
 		// 提交部门选择
 		submitDept() {
 			let ids = this.selectedDeptIds.join(",");