|
|
|
|
@ -266,7 +266,7 @@
|
|
|
|
|
<div class="g_ell_1 g_flex_1" :style="{ color: '#333', fontSize: '14px', flex: 1, marginRight: '8px',padding:'0 4px' }">
|
|
|
|
|
{{ dept.teamName }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="g_flex_column_center g_flex_none">
|
|
|
|
|
<div class="g_flex_column_center g_flex_none" style="margin-right: 4px;">
|
|
|
|
|
<i
|
|
|
|
|
class="iconfont icon-a-duigoubeifen2"
|
|
|
|
|
style="font-size: 24px"
|
|
|
|
|
@ -371,6 +371,7 @@ export default {
|
|
|
|
|
isShow: false,
|
|
|
|
|
},
|
|
|
|
|
deptColumns: [], // 级联列:[[{id,teamName,childs}], [...]]
|
|
|
|
|
expandedDeptIds: [], // 当前展开路径上的部门id集合,用于级联展示
|
|
|
|
|
selectedDeptIds: [], // 选中的部门id集合
|
|
|
|
|
selectedDeptNames: [], // 选中的部门名称集合
|
|
|
|
|
currentDeptItem: null, // 当前编辑的表单项
|
|
|
|
|
@ -811,8 +812,6 @@ export default {
|
|
|
|
|
// 打开部门选择弹窗
|
|
|
|
|
openDeptPicker(item) {
|
|
|
|
|
this.currentDeptItem = item;
|
|
|
|
|
// 初始化列并递归展开所有层级
|
|
|
|
|
this.deptColumns = this.buildAllDeptColumns(this.deptList || []);
|
|
|
|
|
if (item.deptIds && item.deptIds.length) {
|
|
|
|
|
this.selectedDeptIds = [].concat(item.deptIds);
|
|
|
|
|
this.selectedDeptNames = [].concat(item.deptNames || []);
|
|
|
|
|
@ -820,26 +819,53 @@ export default {
|
|
|
|
|
this.selectedDeptIds = [];
|
|
|
|
|
this.selectedDeptNames = [];
|
|
|
|
|
}
|
|
|
|
|
// 根据已选中的部门初始化展开路径
|
|
|
|
|
this.expandedDeptIds = this.buildExpandedPath(this.deptList || [], item.deptIds || []);
|
|
|
|
|
this.deptColumns = this.buildCascadingColumns(this.deptList || []);
|
|
|
|
|
this.deptModal.isShow = true;
|
|
|
|
|
},
|
|
|
|
|
// 递归构建全部层级列
|
|
|
|
|
buildAllDeptColumns(list) {
|
|
|
|
|
// 根据已选中的部门id,构建展开路径
|
|
|
|
|
buildExpandedPath(list, selectedIds) {
|
|
|
|
|
if (!list || list.length === 0 || !selectedIds || selectedIds.length === 0) return [];
|
|
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
|
|
let item = list[i];
|
|
|
|
|
if (selectedIds.indexOf(item.id) > -1) {
|
|
|
|
|
// 找到了选中的节点,返回包含该节点的路径
|
|
|
|
|
return [item.id];
|
|
|
|
|
}
|
|
|
|
|
if (item.childs && item.childs.length > 0) {
|
|
|
|
|
let childPath = this.buildExpandedPath(item.childs, selectedIds);
|
|
|
|
|
if (childPath.length > 0) {
|
|
|
|
|
return [item.id].concat(childPath);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return [];
|
|
|
|
|
},
|
|
|
|
|
// 根据展开路径构建级联列
|
|
|
|
|
buildCascadingColumns(list) {
|
|
|
|
|
if (!list || list.length === 0) return [];
|
|
|
|
|
let columns = [list];
|
|
|
|
|
// 找到所有有子级的节点,合并子级作为下一列
|
|
|
|
|
let nextColumn = [];
|
|
|
|
|
list.forEach(item => {
|
|
|
|
|
if (item.childs && item.childs.length > 0) {
|
|
|
|
|
nextColumn = nextColumn.concat(item.childs);
|
|
|
|
|
let currentList = list;
|
|
|
|
|
for (let i = 0; i < this.expandedDeptIds.length; i++) {
|
|
|
|
|
let expandedId = this.expandedDeptIds[i];
|
|
|
|
|
let found = currentList.find(item => item.id === expandedId);
|
|
|
|
|
if (found && found.childs && found.childs.length > 0) {
|
|
|
|
|
columns.push(found.childs);
|
|
|
|
|
currentList = found.childs;
|
|
|
|
|
} else {
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (nextColumn.length > 0) {
|
|
|
|
|
columns = columns.concat(this.buildAllDeptColumns(nextColumn));
|
|
|
|
|
}
|
|
|
|
|
return columns;
|
|
|
|
|
},
|
|
|
|
|
// 点击部门项:切换选中 + 展开下一级
|
|
|
|
|
// 判断某节点是否在当前展开路径上
|
|
|
|
|
isParentExpanded(dept, colIndex) {
|
|
|
|
|
return this.expandedDeptIds[colIndex] === dept.id;
|
|
|
|
|
},
|
|
|
|
|
// 点击部门项:切换选中 + 展开/收起下一级
|
|
|
|
|
handleDeptClick(dept, colIndex) {
|
|
|
|
|
// 切换选中状态
|
|
|
|
|
let idx = this.selectedDeptIds.indexOf(dept.id);
|
|
|
|
|
if (idx > -1) {
|
|
|
|
|
this.selectedDeptIds.splice(idx, 1);
|
|
|
|
|
@ -848,6 +874,18 @@ export default {
|
|
|
|
|
this.selectedDeptIds.push(dept.id);
|
|
|
|
|
this.selectedDeptNames.push(dept.teamName);
|
|
|
|
|
}
|
|
|
|
|
// 处理展开/收起:点击有子级的节点时,展开或收起其子级
|
|
|
|
|
if (dept.childs && dept.childs.length > 0) {
|
|
|
|
|
if (this.expandedDeptIds[colIndex] === dept.id) {
|
|
|
|
|
// 已展开,则收起该节点及其后续展开
|
|
|
|
|
this.expandedDeptIds = this.expandedDeptIds.slice(0, colIndex);
|
|
|
|
|
} else {
|
|
|
|
|
// 未展开或展开了其他节点,则设置当前节点为展开,并截断后续
|
|
|
|
|
this.expandedDeptIds = this.expandedDeptIds.slice(0, colIndex);
|
|
|
|
|
this.expandedDeptIds.push(dept.id);
|
|
|
|
|
}
|
|
|
|
|
this.deptColumns = this.buildCascadingColumns(this.deptList || []);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 提交部门选择
|
|
|
|
|
submitDept() {
|
|
|
|
|
@ -990,11 +1028,16 @@ export default {
|
|
|
|
|
.dept-columns-scroll {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
overflow-y: hidden;
|
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding-bottom: calc(constant(safe-area-inset-bottom) + 80rpx);
|
|
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
}
|
|
|
|
|
.dept-columns-scroll::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.dept-columns {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -1006,7 +1049,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.dept-column {
|
|
|
|
|
width: 30vw;
|
|
|
|
|
min-width: 30vw;
|
|
|
|
|
min-width: 180px;
|
|
|
|
|
max-width: 30vw;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-right: 1px solid #ddd;
|
|
|
|
|
|