商品选择优化

src/views/order/intention/Step2.vue

@@ -151,8 +151,41 @@
                     </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">
+                      <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
+                            >
+                          </li>
+                        </ul>
+                      </template>
+                      <template v-else>
                         <el-collapse v-model="collapseActiveNames" accordion>
                           <el-collapse-item
                             v-for="thirdLevel in activeSecondLevelItem.children"
@@ -160,19 +193,37 @@
                             :name="thirdLevel.code"
                           >
                             <template #title>
-                            <span>{{ thirdLevel.label }}</span>
+                              <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>
+                                  >替换</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' : '']"
+                                :class="[
+                                  'tree-node',
+                                  selectedNode &&
+                                  selectedNode.code === fourthLevel.code
+                                    ? 'active'
+                                    : '',
+                                ]"
                                 @click="handleNodeClick(fourthLevel)"
                               >
                                 <span>{{ fourthLevel.label }}</span>
@@ -181,21 +232,20 @@
                                   type="primary"
                                   link
                                   @click.stop="openReplaceDialog(fourthLevel)"
-                              >替换</el-button>
+                                  >替换</el-button
+                                >
                               </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>
+                      </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 v-else class="tab-content no-data">暂无数据</div>
-                    暂无数据
-                  </div>
                 </el-tab-pane>
               </el-tabs>
             </div>
@@ -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,15 +524,30 @@ 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) {
+    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;
     collapseActiveNames.value = [];
@@ -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 {
+.custom-tree.no-arrow .tree-node::before {
-  display: flex;
+  display: none;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 8px 0;
 }
-
+.custom-tree.no-arrow .tree-node {
-.node-content {
+  padding-left: 12px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
 }
-
+.tree-node {
-.node-image {
+  transition: background 0.2s;
-  width: 60px;
-  height: 45px;
-  flex-shrink: 0;
 }
-
+.tree-node.active {
-.node-img {
+  // background: #e6f0ff;
-  width: 100%;
+  color: #2156f3;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 4px;
-  border: 1px solid #eee;
 }
-
+.tree-node:hover {
-.node-info {
+  background: #f0f6ff;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
 }
-
-.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;