demo
/
zhiqi
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
JenniferW 2025-06-13 11:19:56 +08:00
parent 847be510a3
commit fd9ff16f9d
1 changed files with 100 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
src/views/order/intention/Step2.vue
View File

@ -160,108 +160,67 @@
class="tab-content tab-content-flex" class="tab-content tab-content-flex"
> >
<div class="tab-left"> <div class="tab-left">
<template v-if="allThirdLevelNoChildren"> <el-collapse v-model="collapseActiveNames" accordion>
<ul class="custom-tree no-arrow"> <el-collapse-item
<li v-for="thirdLevel in activeSecondLevelItem.children"
v-for="thirdLevel in activeSecondLevelItem.children" :key="thirdLevel.code"
:key="thirdLevel.code" :name="thirdLevel.code"
:class="[ :disabled="
'tree-node', !thirdLevel.children ||
selectedNode && thirdLevel.children.length === 0
selectedNode.code === thirdLevel.code "
? 'active' >
: '', <template #title>
]" <span
@click="handleNodeClick(thirdLevel)" :class="[
> 'tree-node',
<span>{{ thirdLevel.label }}</span> selectedNode &&
<el-button selectedNode.code === thirdLevel.code
v-if="thirdLevel.replaceable" ? 'active'
type="primary" : '',
link ]"
@click.stop="openReplaceDialog(thirdLevel)" @click.stop="handleNodeClick(thirdLevel)"
>替换</el-button
> >
</li> {{ thirdLevel.label }}
</ul> <el-button
</template> v-if="thirdLevel.replaceable"
<template v-else> type="primary"
<ul class="custom-tree no-arrow"> link
<li @click.stop="openReplaceDialog(thirdLevel)"
v-for="thirdLevel in thirdLevelsWithoutChildren" >替换</el-button
:key="thirdLevel.code" >
:class="[ </span>
'tree-node', </template>
selectedNode && <ul
selectedNode.code === thirdLevel.code v-if="
? 'active' thirdLevel.children &&
: '', thirdLevel.children.length > 0
]" "
@click="handleNodeClick(thirdLevel)"
> >
<span>{{ thirdLevel.label }}</span> <li
<el-button v-for="fourthLevel in thirdLevel.children"
v-if="thirdLevel.replaceable" :key="fourthLevel.code"
type="primary" :class="[
link 'tree-node',
@click.stop="openReplaceDialog(thirdLevel)" selectedNode &&
>替换</el-button selectedNode.code === fourthLevel.code
? 'active'
: '',
]"
@click="handleNodeClick(fourthLevel)"
> >
</li> <span>{{ fourthLevel.label }}</span>
</ul> <el-button
<el-collapse v-model="collapseActiveNames" accordion> v-if="fourthLevel.replaceable"
<el-collapse-item type="primary"
v-for="thirdLevel in thirdLevelsWithChildren" link
:key="thirdLevel.code" @click.stop="openReplaceDialog(fourthLevel)"
:name="thirdLevel.code" >替换</el-button
>
<template #title>
<span
:class="[
'tree-node',
selectedNode &&
selectedNode.code === thirdLevel.code
? 'active'
: '',
]"
@click.stop="handleNodeClick(thirdLevel)"
> >
{{ thirdLevel.label }} </li>
<el-button </ul>
v-if="thirdLevel.replaceable" </el-collapse-item>
type="primary" </el-collapse>
link
@click.stop="openReplaceDialog(thirdLevel)"
>替换</el-button
>
</span>
</template>
<ul>
<li
v-for="fourthLevel in thirdLevel.children"
:key="fourthLevel.code"
:class="[
'tree-node',
selectedNode &&
selectedNode.code === fourthLevel.code
? 'active'
: '',
]"
@click="handleNodeClick(fourthLevel)"
>
<span>{{ fourthLevel.label }}</span>
<el-button
v-if="fourthLevel.replaceable"
type="primary"
link
@click.stop="openReplaceDialog(fourthLevel)"
>替换</el-button
>
</li>
</ul>
</el-collapse-item>
</el-collapse>
</template>
</div> </div>
<div class="tab-right" v-if="selectedNode"> <div class="tab-right" v-if="selectedNode">
<img <img
@ -547,43 +506,17 @@ function handleNextStep() {
} }
} }
const allThirdLevelNoChildren = computed(() => {
const thirdLevels = activeSecondLevelItem.value?.children || [];
return (
thirdLevels.length > 0 &&
thirdLevels.every((item) => !item.children || item.children.length === 0)
);
});
// 计算没有子节点的三级菜单项
const thirdLevelsWithoutChildren = computed(() => {
return (activeSecondLevelItem.value?.children || []).filter(
(item) => !item.children || item.children.length === 0
);
});
// 计算有子节点的三级菜单项
const thirdLevelsWithChildren = computed(() => {
return (activeSecondLevelItem.value?.children || []).filter(
(item) => item.children && item.children.length > 0
);
});
function selectFirstNode() { function selectFirstNode() {
const thirdLevels = activeSecondLevelItem.value?.children || []; const thirdLevels = activeSecondLevelItem.value?.children || [];
if (thirdLevels.length > 0) { if (thirdLevels.length > 0) {
if (allThirdLevelNoChildren.value) { // 默认选择第一个节点
// 只有三级菜单 selectedNode.value = thirdLevels[0];
selectedNode.value = thirdLevels[0]; // 如果第一个节点有子节点，则展开并选择第一个子节点
collapseActiveNames.value = []; if (thirdLevels[0].children && thirdLevels[0].children.length > 0) {
} else {
// 有四级菜单
collapseActiveNames.value = [thirdLevels[0].code]; collapseActiveNames.value = [thirdLevels[0].code];
if (thirdLevels[0].children && thirdLevels[0].children.length > 0) { selectedNode.value = thirdLevels[0].children[0];
selectedNode.value = thirdLevels[0].children[0]; } else {
} else { collapseActiveNames.value = [];
selectedNode.value = thirdLevels[0];
}
} }
} else { } else {
selectedNode.value = null; selectedNode.value = null;
@ -758,13 +691,6 @@ watch(activeTab, () => {
border-radius: 4px; border-radius: 4px;
border: 1px solid #eee; border: 1px solid #eee;
} }
.sub-tree {
margin-top: 20px;
padding: 16px;
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
}
.model-form { .model-form {
max-width: 900px; max-width: 900px;
margin-top: 16px; margin-top: 16px;
@ -836,21 +762,21 @@ watch(activeTab, () => {
} }
} }
.custom-tree.no-arrow .tree-node::before {
display: none;
}
.custom-tree.no-arrow .tree-node {
padding-left: 12px;
}
.tree-node { .tree-node {
transition: background 0.2s; transition: background 0.2s;
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
} }
.tree-node.active { .tree-node.active {
// background: #e6f0ff;
color: #2156f3; color: #2156f3;
} }
.tree-node:hover { .tree-node:hover {
background: #f0f6ff; color: #2156f3;
} }
.tab-content-flex { .tab-content-flex {
display: flex; display: flex;
@ -876,29 +802,6 @@ watch(activeTab, () => {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
} }
.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;
transition: background 0.2s;
}
.tree-node.active {
// background: #e6f0ff;
color: #2156f3;
}
.tree-node:hover {
// background: #f0f6ff;
color: #2156f3;
}
.detail-img { .detail-img {
width: 180px; width: 180px;
height: 120px; height: 120px;
@ -923,7 +826,6 @@ watch(activeTab, () => {
} }
.replace-item.selected { .replace-item.selected {
border-color: #2156f3; border-color: #2156f3;
// background: #e6f0ff;
} }
.replace-img { .replace-img {
width: 80px; width: 80px;
@ -940,4 +842,31 @@ watch(activeTab, () => {
color: #999; color: #999;
font-size: 18px; font-size: 18px;
} }
// 新增样式
:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
cursor: default;
color: #303133;
&:hover {
background-color: transparent;
}
}
:deep(.el-collapse-item.is-disabled .el-collapse-item__arrow) {
display: none;
}
:deep(.el-collapse-item__header) {
padding: 0;
height: auto;
}
:deep(.el-collapse-item__content) {
padding: 0;
padding-left: 16px;
}
:deep(.el-collapse-item__wrap) {
border-bottom: none;
}
</style> </style>