From 7cd07d635d792089e23fc0e5486992127e0c83d0 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Fri, 13 Jun 2025 10:17:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/intention/Step2.vue | 227 +++++++++++++++++-----------
 1 file changed, 135 insertions(+), 92 deletions(-)

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