This commit is contained in:
parent
7cd07d635d
commit
bc7646d5f0
|
|
@ -151,14 +151,15 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 三级及以下树形结构 -->
|
<!-- 三级及以下树形结构 -->
|
||||||
<div class="tab-content tab-content-flex">
|
<div v-if="activeSecondLevelItem && activeSecondLevelItem.children && activeSecondLevelItem.children.length" class="tab-content tab-content-flex">
|
||||||
<div class="tab-left">
|
<div class="tab-left">
|
||||||
<ul class="custom-tree">
|
<el-collapse v-model="collapseActiveNames" accordion>
|
||||||
<li v-for="thirdLevel in activeSecondLevelItem?.children || []" :key="thirdLevel.code">
|
<el-collapse-item
|
||||||
<div
|
v-for="thirdLevel in activeSecondLevelItem.children"
|
||||||
:class="['tree-node', selectedNode && selectedNode.code === thirdLevel.code ? 'active' : '']"
|
:key="thirdLevel.code"
|
||||||
@click="handleNodeClick(thirdLevel)"
|
:name="thirdLevel.code"
|
||||||
>
|
>
|
||||||
|
<template #title>
|
||||||
<span>{{ thirdLevel.label }}</span>
|
<span>{{ thirdLevel.label }}</span>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="thirdLevel.replaceable"
|
v-if="thirdLevel.replaceable"
|
||||||
|
|
@ -166,28 +167,32 @@
|
||||||
link
|
link
|
||||||
@click.stop="openReplaceDialog(thirdLevel)"
|
@click.stop="openReplaceDialog(thirdLevel)"
|
||||||
>替换</el-button>
|
>替换</el-button>
|
||||||
</div>
|
</template>
|
||||||
<ul v-if="thirdLevel.children">
|
<ul v-if="thirdLevel.children">
|
||||||
<li
|
<li
|
||||||
v-for="fourthLevel in thirdLevel.children"
|
v-for="fourthLevel in thirdLevel.children"
|
||||||
:key="fourthLevel.code"
|
:key="fourthLevel.code"
|
||||||
|
:class="['tree-node', selectedNode && selectedNode.code === fourthLevel.code ? 'active' : '']"
|
||||||
|
@click="handleNodeClick(fourthLevel)"
|
||||||
>
|
>
|
||||||
<div
|
<span>{{ fourthLevel.label }}</span>
|
||||||
:class="['tree-node', selectedNode && selectedNode.code === fourthLevel.code ? 'active' : '']"
|
<el-button
|
||||||
@click="handleNodeClick(fourthLevel)"
|
v-if="fourthLevel.replaceable"
|
||||||
>
|
type="primary"
|
||||||
<span>{{ fourthLevel.label }}</span>
|
link
|
||||||
<el-button
|
@click.stop="openReplaceDialog(fourthLevel)"
|
||||||
v-if="fourthLevel.replaceable"
|
>替换</el-button>
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click.stop="openReplaceDialog(fourthLevel)"
|
|
||||||
>替换</el-button>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
<div
|
||||||
</ul>
|
v-else
|
||||||
|
:class="['tree-node', selectedNode && selectedNode.code === thirdLevel.code ? 'active' : '']"
|
||||||
|
@click="handleNodeClick(thirdLevel)"
|
||||||
|
>
|
||||||
|
<span>{{ thirdLevel.label }}</span>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-right" v-if="selectedNode">
|
<div class="tab-right" v-if="selectedNode">
|
||||||
<img :src="selectedNode.image" class="detail-img" v-if="selectedNode.image" />
|
<img :src="selectedNode.image" class="detail-img" v-if="selectedNode.image" />
|
||||||
|
|
@ -205,6 +210,9 @@
|
||||||
<span>请选择左侧商品</span>
|
<span>请选择左侧商品</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="tab-content no-data">
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -363,6 +371,7 @@ const replaceDialogVisible = ref(false);
|
||||||
const replaceList = ref([]);
|
const replaceList = ref([]);
|
||||||
const replaceSelected = ref(null);
|
const replaceSelected = ref(null);
|
||||||
const activeTab = ref("");
|
const activeTab = ref("");
|
||||||
|
const collapseActiveNames = ref([]);
|
||||||
|
|
||||||
// 计算一级菜单项
|
// 计算一级菜单项
|
||||||
const firstLevelItems = computed(() => treeData.value);
|
const firstLevelItems = computed(() => treeData.value);
|
||||||
|
|
@ -466,10 +475,27 @@ function handleNextStep() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
function selectFirstNode() {
|
||||||
if (secondLevelItems.value.length > 0) {
|
const thirdLevels = activeSecondLevelItem.value?.children || [];
|
||||||
activeTab.value = secondLevelItems.value[0].code;
|
if (thirdLevels.length > 0) {
|
||||||
|
collapseActiveNames.value = [thirdLevels[0].code];
|
||||||
|
if (thirdLevels[0].children && thirdLevels[0].children.length > 0) {
|
||||||
|
selectedNode.value = thirdLevels[0].children[0];
|
||||||
|
} else {
|
||||||
|
selectedNode.value = thirdLevels[0];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectedNode.value = null;
|
||||||
|
collapseActiveNames.value = [];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
selectFirstNode();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(activeTab, () => {
|
||||||
|
selectFirstNode();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -920,11 +946,15 @@ onMounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
.tree-node.active {
|
.tree-node.active {
|
||||||
background: #e6f0ff;
|
background: #e6f0ff;
|
||||||
color: #2156f3;
|
color: #2156f3;
|
||||||
}
|
}
|
||||||
|
.tree-node:hover {
|
||||||
|
background: #f0f6ff;
|
||||||
|
}
|
||||||
.detail-img {
|
.detail-img {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
|
|
@ -958,4 +988,12 @@ onMounted(() => {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
.no-data {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 300px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue