From 22a03522b19e9bb9f53d850d304ecb5aa1377292 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Fri, 13 Jun 2025 10:50:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E9=80=89=E6=8B=A9=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/intention/Step2.vue | 371 +++++++++++-----------------
 1 file changed, 139 insertions(+), 232 deletions(-)

diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue
index 276a0a2..0ec43b0 100644
--- a/src/views/order/intention/Step2.vue
+++ b/src/views/order/intention/Step2.vue
@@ -151,51 +151,101 @@
                     </div>
                   </template>
                   <!-- 三级及以下树形结构 -->
-                  <div v-if="activeSecondLevelItem && activeSecondLevelItem.children && activeSecondLevelItem.children.length" 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">
-                      <el-collapse v-model="collapseActiveNames" accordion>
-                        <el-collapse-item
-                          v-for="thirdLevel in activeSecondLevelItem.children"
-                          :key="thirdLevel.code"
-                          :name="thirdLevel.code"
-                        >
-                          <template #title>
+                      <template v-if="allThirdLevelNoChildren">
+                        <ul class="custom-tree no-arrow">
+                          <li
+                            v-for="thirdLevel in activeSecondLevelItem.children"
+                            :key="thirdLevel.code"
+                            :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.stop="openReplaceDialog(thirdLevel)"
-                            >替换</el-button>
-                          </template>
-                          <ul v-if="thirdLevel.children">
-                            <li
-                              v-for="fourthLevel in thirdLevel.children"
-                              :key="fourthLevel.code"
-                              :class="['tree-node', selectedNode && selectedNode.code === fourthLevel.code ? 'active' : '']"
-                              @click="handleNodeClick(fourthLevel)"
+                              >替换</el-button
                             >
-                              <span>{{ fourthLevel.label }}</span>
-                              <el-button
-                                v-if="fourthLevel.replaceable"
-                                type="primary"
-                                link
-                                @click.stop="openReplaceDialog(fourthLevel)"
-                              >替换</el-button>
-                            </li>
-                          </ul>
-                          <div
-                            v-else
-                            :class="['tree-node', selectedNode && selectedNode.code === thirdLevel.code ? 'active' : '']"
-                            @click="handleNodeClick(thirdLevel)"
+                          </li>
+                        </ul>
+                      </template>
+                      <template v-else>
+                        <el-collapse v-model="collapseActiveNames" accordion>
+                          <el-collapse-item
+                            v-for="thirdLevel in activeSecondLevelItem.children"
+                            :key="thirdLevel.code"
+                            :name="thirdLevel.code"
                           >
-                            <span>{{ thirdLevel.label }}</span>
-                          </div>
-                        </el-collapse-item>
-                      </el-collapse>
+                            <template #title>
+                              <span
+                                :class="[
+                                  'tree-node',
+                                  selectedNode &&
+                                  selectedNode.code === thirdLevel.code
+                                    ? 'active'
+                                    : '',
+                                ]"
+                                @click.stop="handleNodeClick(thirdLevel)"
+                              >
+                                {{ thirdLevel.label }}
+                                <el-button
+                                  v-if="thirdLevel.replaceable"
+                                  type="primary"
+                                  link
+                                  @click.stop="openReplaceDialog(thirdLevel)"
+                                  >替换</el-button
+                                >
+                              </span>
+                            </template>
+                            <ul v-if="thirdLevel.children">
+                              <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 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"
+                      />
                       <div class="detail-info">
                         <div>编号：{{ selectedNode.code }}</div>
                         <div>名称：{{ selectedNode.label }}</div>
@@ -203,16 +253,15 @@
                           v-if="selectedNode.replaceable"
                           type="primary"
                           @click="openReplaceDialog(selectedNode)"
-                        >替换</el-button>
+                          >替换</el-button
+                        >
                       </div>
                     </div>
                     <div class="tab-right" v-else>
                       <span>请选择左侧商品</span>
                     </div>
                   </div>
-                  <div v-else class="tab-content no-data">
-                    暂无数据
-                  </div>
+                  <div v-else class="tab-content no-data">暂无数据</div>
                 </el-tab-pane>
               </el-tabs>
             </div>
@@ -227,7 +276,7 @@
                 v-for="item in replaceList"
                 :key="item.code"
                 class="replace-item"
-                :class="{selected: replaceSelected === item.code}"
+                :class="{ selected: replaceSelected === item.code }"
                 @click="replaceSelected = item.code"
               >
                 <img :src="item.image" class="replace-img" v-if="item.image" />
@@ -383,7 +432,7 @@ const secondLevelItems = computed(() => {
 
 // 当前激活的二级菜单项
 const activeSecondLevelItem = computed(() => {
-  return secondLevelItems.value.find(item => item.code === activeTab.value);
+  return secondLevelItems.value.find((item) => item.code === activeTab.value);
 });
 
 // 处理tab切换
@@ -475,14 +524,29 @@ function handleNextStep() {
   }
 }
 
+const allThirdLevelNoChildren = computed(() => {
+  const thirdLevels = activeSecondLevelItem.value?.children || [];
+  return (
+    thirdLevels.length > 0 &&
+    thirdLevels.every((item) => !item.children || item.children.length === 0)
+  );
+});
+
 function selectFirstNode() {
   const thirdLevels = activeSecondLevelItem.value?.children || [];
   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 {
+    if (allThirdLevelNoChildren.value) {
+      // 只有三级菜单
       selectedNode.value = thirdLevels[0];
+      collapseActiveNames.value = [];
+    } else {
+      // 有四级菜单
+      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;
@@ -491,6 +555,16 @@ function selectFirstNode() {
 }
 
 onMounted(() => {
+  if (secondLevelItems.value.length > 0) {
+    activeTab.value = secondLevelItems.value[0].code;
+  }
+  selectFirstNode();
+});
+
+watch(secondLevelItems, (newVal) => {
+  if (newVal.length > 0) {
+    activeTab.value = newVal[0].code;
+  }
   selectFirstNode();
 });
 
@@ -725,205 +799,35 @@ watch(activeTab, () => {
   }
 }
 
-.custom-tree-node {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 8px 0;
+.custom-tree.no-arrow .tree-node::before {
+  display: none;
 }
-
-.node-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.custom-tree.no-arrow .tree-node {
+  padding-left: 12px;
 }
-
-.node-image {
-  width: 60px;
-  height: 45px;
-  flex-shrink: 0;
+.tree-node {
+  transition: background 0.2s;
 }
-
-.node-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 4px;
-  border: 1px solid #eee;
+.tree-node.active {
+  // background: #e6f0ff;
+  color: #2156f3;
 }
-
-.node-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.tree-node:hover {
+  background: #f0f6ff;
 }
-
-.node-code {
-  font-size: 12px;
-  color: #666;
-}
-
-.node-name {
-  font-size: 14px;
-  color: #333;
-}
-
-.node-actions {
-  display: flex;
-  gap: 8px;
-}
-
-:deep(.el-tree-node__content) {
-  height: auto !important;
-  padding: 4px 0 !important;
-}
-
-:deep(.el-tree-node__children) {
-  padding-left: 24px;
-}
-
-:deep(.el-tree-node.is-current > .el-tree-node__content) {
-  background-color: var(--el-color-primary-light-9);
-}
-
-:deep(.el-tree-node__content:hover) {
-  background-color: var(--el-color-primary-light-9);
-}
-
-.tab-content {
-  padding: 16px;
-  background: #fff;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  margin-top: 16px;
-  min-height: 200px;
-}
-
-.third-level-section {
-  margin-bottom: 24px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.third-level-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  background: #f5f7fa;
-  border-radius: 4px;
-  margin-bottom: 12px;
-}
-
-.third-level-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.third-level-code {
-  font-size: 14px;
-  color: #666;
-}
-
-.third-level-name {
-  font-size: 16px;
-  color: #333;
-  font-weight: 500;
-}
-
-.fourth-level-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-  padding: 0 12px;
-}
-
-.fourth-level-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  background: #fff;
-  transition: all 0.3s ease;
-
-  &:hover {
-    border-color: var(--el-color-primary);
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
-.fourth-level-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.fourth-level-image {
-  width: 60px;
-  height: 45px;
-  flex-shrink: 0;
-}
-
-.fourth-level-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 4px;
-  border: 1px solid #eee;
-}
-
-.fourth-level-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.fourth-level-code {
-  font-size: 12px;
-  color: #666;
-}
-
-.fourth-level-name {
-  font-size: 14px;
-  color: #333;
-}
-
-:deep(.el-tabs__content) {
-  overflow: visible;
-}
-
-:deep(.el-tabs__item) {
-  height: auto !important;
-  padding: 0 20px !important;
-}
-
-:deep(.el-tabs__nav) {
-  display: flex;
-  gap: 20px;
-}
-
-:deep(.el-tabs__item.is-active) {
-  .tab-label-code,
-  .tab-label-name {
-    color: var(--el-color-primary);
-  }
-}
-
 .tab-content-flex {
   display: flex;
   min-height: 300px;
+  height: 400px;
+  max-height: 400px;
+  overflow: hidden;
 }
 .tab-left {
   width: 260px;
   border-right: 1px solid #eee;
   padding-right: 16px;
   overflow-y: auto;
+  height: 100%;
 }
 .tab-right {
   flex: 1;
@@ -932,6 +836,8 @@ watch(activeTab, () => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
+  overflow-y: auto;
+  height: 100%;
 }
 .custom-tree {
   list-style: none;
@@ -949,11 +855,12 @@ watch(activeTab, () => {
   transition: background 0.2s;
 }
 .tree-node.active {
-  background: #e6f0ff;
+  // background: #e6f0ff;
   color: #2156f3;
 }
 .tree-node:hover {
-  background: #f0f6ff;
+  // background: #f0f6ff;
+  color: #2156f3;
 }
 .detail-img {
   width: 180px;
@@ -979,7 +886,7 @@ watch(activeTab, () => {
 }
 .replace-item.selected {
   border-color: #2156f3;
-  background: #e6f0ff;
+  // background: #e6f0ff;
 }
 .replace-img {
   width: 80px;