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