diff --git a/components/panel/formSlot.vue b/components/panel/formSlot.vue index 5811865..bd9ea82 100644 --- a/components/panel/formSlot.vue +++ b/components/panel/formSlot.vue @@ -258,11 +258,18 @@
选择部门
-
+
-
-
-
+
+
+
{{ dept.teamName }}
@@ -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(",");