style: 优化库位树折叠状态及下钻选择器点击热区
This commit is contained in:
@ -64,24 +64,33 @@
|
||||
v-for="item in currentList"
|
||||
:key="item.id"
|
||||
class="location-item"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<div class="item-left">
|
||||
<el-icon><Location /></el-icon>
|
||||
<!-- 左侧热区:点击进入下级或选中 -->
|
||||
<div
|
||||
class="item-main"
|
||||
:class="{ 'has-children': item.children && item.children.length > 0 }"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<el-icon class="item-icon"><Location /></el-icon>
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
<el-icon v-if="item.children && item.children.length > 0" class="item-arrow">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<!-- 右侧操作区 -->
|
||||
<div class="item-actions">
|
||||
<el-tag v-if="!item.children || item.children.length === 0" type="info" size="small">
|
||||
末级
|
||||
</el-tag>
|
||||
<el-button
|
||||
v-if="item.children && item.children.length > 0"
|
||||
v-else
|
||||
type="primary"
|
||||
link
|
||||
size="small"
|
||||
@click.stop="handleDrillDown(item)"
|
||||
>
|
||||
进入下级
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
<el-tag v-else type="info" size="small">末级</el-tag>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -92,7 +101,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { ArrowDown, ArrowLeft, ArrowRight, Location } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
@ -173,6 +182,17 @@ const handleDrillDown = (item: WarehouseItem) => {
|
||||
currentPath.value.push(item)
|
||||
}
|
||||
|
||||
// 点击列表项 - 左侧热区逻辑
|
||||
const handleItemClick = (item: WarehouseItem) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
// 有子节点:进入下一级
|
||||
handleDrillDown(item)
|
||||
} else {
|
||||
// 末级:直接选中
|
||||
handleSelect(item)
|
||||
}
|
||||
}
|
||||
|
||||
// 选择当前项
|
||||
const handleSelect = (item: WarehouseItem) => {
|
||||
emit('update:modelValue', item.full_path)
|
||||
@ -234,7 +254,7 @@ const handleSelect = (item: WarehouseItem) => {
|
||||
}
|
||||
|
||||
.selector-body {
|
||||
max-height: 300px;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -254,33 +274,62 @@ const handleSelect = (item: WarehouseItem) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.location-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.location-item:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
/* 左侧主热区 - 占80%宽度 */
|
||||
.item-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 12px;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-left .el-icon {
|
||||
.item-main.has-children {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-main:hover {
|
||||
background: rgba(64, 158, 255, 0.08);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
color: #409eff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
.item-arrow {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 右侧操作区 */
|
||||
.item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
node-key="id"
|
||||
:props="treeProps"
|
||||
:expand-on-click-node="false"
|
||||
:default-expand-all="true"
|
||||
:default-expand-all="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node">
|
||||
|
||||
Reference in New Issue
Block a user