This commit is contained in:
parent
81c53e71ef
commit
7cd07d635d
|
|
@ -150,91 +150,60 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 三级及以下树形结构 -->
|
||||
<div class="tab-content">
|
||||
1111
|
||||
<template v-if="item.children && item.children.length">
|
||||
<div
|
||||
v-for="thirdLevel in item.children"
|
||||
:key="thirdLevel.code"
|
||||
class="third-level-section"
|
||||
>
|
||||
<div class="third-level-header">
|
||||
<div class="third-level-title">
|
||||
<span class="third-level-code">{{
|
||||
thirdLevel.code
|
||||
}}</span>
|
||||
<span class="third-level-name">{{
|
||||
thirdLevel.label
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="tab-content tab-content-flex">
|
||||
<div class="tab-left">
|
||||
<ul class="custom-tree">
|
||||
<li v-for="thirdLevel in activeSecondLevelItem?.children || []" :key="thirdLevel.code">
|
||||
<div
|
||||
class="third-level-actions"
|
||||
v-if="
|
||||
thirdLevel.children && thirdLevel.children.length
|
||||
"
|
||||
:class="['tree-node', selectedNode && selectedNode.code === thirdLevel.code ? 'active' : '']"
|
||||
@click="handleNodeClick(thirdLevel)"
|
||||
>
|
||||
<span>{{ thirdLevel.label }}</span>
|
||||
<el-button
|
||||
v-if="thirdLevel.replaceable"
|
||||
type="primary"
|
||||
link
|
||||
@click="openReplaceDialog(thirdLevel)"
|
||||
>
|
||||
替换
|
||||
</el-button>
|
||||
@click.stop="openReplaceDialog(thirdLevel)"
|
||||
>替换</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 四级及以下菜单 -->
|
||||
<div
|
||||
v-if="
|
||||
thirdLevel.children && thirdLevel.children.length
|
||||
"
|
||||
class="fourth-level-container"
|
||||
>
|
||||
<div
|
||||
v-for="fourthLevel in thirdLevel.children"
|
||||
:key="fourthLevel.code"
|
||||
class="fourth-level-item"
|
||||
>
|
||||
<div class="fourth-level-content">
|
||||
<ul v-if="thirdLevel.children">
|
||||
<li
|
||||
v-for="fourthLevel in thirdLevel.children"
|
||||
:key="fourthLevel.code"
|
||||
>
|
||||
<div
|
||||
class="fourth-level-image"
|
||||
v-if="fourthLevel.image"
|
||||
:class="['tree-node', selectedNode && selectedNode.code === fourthLevel.code ? 'active' : '']"
|
||||
@click="handleNodeClick(fourthLevel)"
|
||||
>
|
||||
<img
|
||||
:src="fourthLevel.image"
|
||||
class="fourth-level-img"
|
||||
/>
|
||||
<span>{{ fourthLevel.label }}</span>
|
||||
<el-button
|
||||
v-if="fourthLevel.replaceable"
|
||||
type="primary"
|
||||
link
|
||||
@click.stop="openReplaceDialog(fourthLevel)"
|
||||
>替换</el-button>
|
||||
</div>
|
||||
<div class="fourth-level-info">
|
||||
<div class="fourth-level-code">
|
||||
{{ fourthLevel.code }}
|
||||
</div>
|
||||
<div class="fourth-level-name">
|
||||
{{ fourthLevel.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="fourth-level-actions"
|
||||
v-if="
|
||||
fourthLevel.children &&
|
||||
fourthLevel.children.length
|
||||
"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="openReplaceDialog(fourthLevel)"
|
||||
>
|
||||
替换
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-right" v-if="selectedNode">
|
||||
<img :src="selectedNode.image" class="detail-img" v-if="selectedNode.image" />
|
||||
<div class="detail-info">
|
||||
<div>编号：{{ selectedNode.code }}</div>
|
||||
<div>名称：{{ selectedNode.label }}</div>
|
||||
<el-button
|
||||
v-if="selectedNode.replaceable"
|
||||
type="primary"
|
||||
@click="openReplaceDialog(selectedNode)"
|
||||
>替换</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-right" v-else>
|
||||
<span>请选择左侧商品</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
@ -245,14 +214,21 @@
|
|||
title="特定替换部件"
|
||||
width="500px"
|
||||
>
|
||||
<el-radio-group v-model="replaceSelected">
|
||||
<el-radio
|
||||
<div class="replace-list">
|
||||
<div
|
||||
v-for="item in replaceList"
|
||||
:key="item.code"
|
||||
:label="item.code"
|
||||
>{{ item.label }}</el-radio
|
||||
class="replace-item"
|
||||
:class="{selected: replaceSelected === item.code}"
|
||||
@click="replaceSelected = item.code"
|
||||
>
|
||||
</el-radio-group>
|
||||
<img :src="item.image" class="replace-img" v-if="item.image" />
|
||||
<div>
|
||||
<div>编号：{{ item.code }}</div>
|
||||
<div>名称：{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="replaceDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleReplace">替换</el-button>
|
||||
|
|
@ -389,19 +365,16 @@ const replaceSelected = ref(null);
|
|||
const activeTab = ref("");
|
||||
|
||||
// 计算一级菜单项
|
||||
const firstLevelItems = computed(() => {
|
||||
return treeData.value.map((item) => ({
|
||||
code: item.code,
|
||||
label: item.label,
|
||||
}));
|
||||
const firstLevelItems = computed(() => treeData.value);
|
||||
|
||||
// 计算二级菜单项（只取第一个一级菜单的 children 作为 tab）
|
||||
const secondLevelItems = computed(() => {
|
||||
return treeData.value.length > 0 ? treeData.value[0].children || [] : [];
|
||||
});
|
||||
|
||||
// 计算二级菜单项
|
||||
const secondLevelItems = computed(() => {
|
||||
const activeFirstLevel = treeData.value.find(
|
||||
(item) => item.code === activeTab.value
|
||||
);
|
||||
return activeFirstLevel?.children || [];
|
||||
// 当前激活的二级菜单项
|
||||
const activeSecondLevelItem = computed(() => {
|
||||
return secondLevelItems.value.find(item => item.code === activeTab.value);
|
||||
});
|
||||
|
||||
// 处理tab切换
|
||||
|
|
@ -494,8 +467,8 @@ function handleNextStep() {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (treeData.value.length > 0) {
|
||||
activeTab.value = treeData.value[0].code;
|
||||
if (secondLevelItems.value.length > 0) {
|
||||
activeTab.value = secondLevelItems.value[0].code;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -915,4 +888,74 @@ onMounted(() => {
|
|||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content-flex {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
}
|
||||
.tab-left {
|
||||
width: 260px;
|
||||
border-right: 1px solid #eee;
|
||||
padding-right: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tab-right {
|
||||
flex: 1;
|
||||
padding-left: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.custom-tree {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.tree-node {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tree-node.active {
|
||||
background: #e6f0ff;
|
||||
color: #2156f3;
|
||||
}
|
||||
.detail-img {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.replace-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.replace-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.replace-item.selected {
|
||||
border-color: #2156f3;
|
||||
background: #e6f0ff;
|
||||
}
|
||||
.replace-img {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue