优化

src/views/order/intention/Step2.vue

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