feat: 优化库位选择器,支持打开时自动回显至已选层级

This commit is contained in:
DXC
2026-03-06 17:12:52 +08:00
parent 1adaa38893
commit 59eebb5736

View File

@ -64,6 +64,7 @@
v-for="item in currentList"
:key="item.id"
class="location-item"
:class="{ 'is-selected': item.full_path === modelValue }"
>
<!-- 左侧热区点击进入下级或选中 -->
<div
@ -101,7 +102,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'
import { ArrowDown, ArrowLeft, ArrowRight, Location } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
@ -145,6 +146,55 @@ const currentList = computed(() => {
return lastNode?.children || []
})
// 监听弹窗显示状态,恢复选中层级
watch(popoverVisible, (visible) => {
if (visible) {
restoreSelection()
}
})
// 根据 modelValue 恢复选择状态
const restoreSelection = () => {
if (!props.modelValue) {
// 无选中值,重置到顶层
currentPath.value = []
return
}
// 根据 full_path 查找父级路径
const path = findPathByFullPath(props.options, props.modelValue)
if (path) {
// 找到路径:还原 currentPath不包含最后一个节点因为它是当前选中的节点
currentPath.value = path
} else {
// 未找到(可能树结构已变化),重置到顶层
currentPath.value = []
}
}
// 根据 full_path 在树中查找从根到目标节点的路径
const findPathByFullPath = (
tree: WarehouseItem[],
targetFullPath: string,
currentPath: WarehouseItem[] = []
): WarehouseItem[] | null => {
for (const node of tree) {
// 检查当前节点是否匹配
if (node.full_path === targetFullPath) {
return currentPath
}
// 递归检查子节点
if (node.children && node.children.length > 0) {
const result = findPathByFullPath(node.children, targetFullPath, [...currentPath, node])
if (result) {
return result
}
}
}
return null
}
// 处理弹窗显示/隐藏
const handleVisibleChange = (visible: boolean) => {
popoverVisible.value = visible
@ -286,6 +336,16 @@ const handleSelect = (item: WarehouseItem) => {
background: #f5f7fa;
}
/* 选中高亮样式 */
.location-item.is-selected {
background: rgba(64, 158, 255, 0.1);
}
.location-item.is-selected .item-name {
color: #409eff;
font-weight: 500;
}
/* 左侧主热区 - 占80%宽度 */
.item-main {
flex: 1;