From fd9ff16f9d18e95c17429a0b3c71473a5d03c8d8 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Fri, 13 Jun 2025 11:19:56 +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 | 271 ++++++++++------------------
 1 file changed, 100 insertions(+), 171 deletions(-)

diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue
index c229d3c..8ffaf72 100644
--- a/src/views/order/intention/Step2.vue
+++ b/src/views/order/intention/Step2.vue
@@ -160,108 +160,67 @@
                     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
+                      <el-collapse v-model="collapseActiveNames" accordion>
+                        <el-collapse-item
+                          v-for="thirdLevel in activeSecondLevelItem.children"
+                          :key="thirdLevel.code"
+                          :name="thirdLevel.code"
+                          :disabled="
+                            !thirdLevel.children ||
+                            thirdLevel.children.length === 0
+                          "
+                        >
+                          <template #title>
+                            <span
+                              :class="[
+                                'tree-node',
+                                selectedNode &&
+                                selectedNode.code === thirdLevel.code
+                                  ? 'active'
+                                  : '',
+                              ]"
+                              @click.stop="handleNodeClick(thirdLevel)"
                             >
-                          </li>
-                        </ul>
-                      </template>
-                      <template v-else>
-                        <ul class="custom-tree no-arrow">
-                          <li
-                            v-for="thirdLevel in thirdLevelsWithoutChildren"
-                            :key="thirdLevel.code"
-                            :class="[
-                              'tree-node',
-                              selectedNode &&
-                              selectedNode.code === thirdLevel.code
-                                ? 'active'
-                                : '',
-                            ]"
-                            @click="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 &&
+                              thirdLevel.children.length > 0
+                            "
                           >
-                            <span>{{ thirdLevel.label }}</span>
-                            <el-button
-                              v-if="thirdLevel.replaceable"
-                              type="primary"
-                              link
-                              @click.stop="openReplaceDialog(thirdLevel)"
-                              >替换</el-button
+                            <li
+                              v-for="fourthLevel in thirdLevel.children"
+                              :key="fourthLevel.code"
+                              :class="[
+                                'tree-node',
+                                selectedNode &&
+                                selectedNode.code === fourthLevel.code
+                                  ? 'active'
+                                  : '',
+                              ]"
+                              @click="handleNodeClick(fourthLevel)"
                             >
-                          </li>
-                        </ul>
-                        <el-collapse v-model="collapseActiveNames" accordion>
-                          <el-collapse-item
-                            v-for="thirdLevel in thirdLevelsWithChildren"
-                            :key="thirdLevel.code"
-                            :name="thirdLevel.code"
-                          >
-                            <template #title>
-                              <span
-                                :class="[
-                                  'tree-node',
-                                  selectedNode &&
-                                  selectedNode.code === thirdLevel.code
-                                    ? 'active'
-                                    : '',
-                                ]"
-                                @click.stop="handleNodeClick(thirdLevel)"
+                              <span>{{ fourthLevel.label }}</span>
+                              <el-button
+                                v-if="fourthLevel.replaceable"
+                                type="primary"
+                                link
+                                @click.stop="openReplaceDialog(fourthLevel)"
+                                >替换</el-button
                               >
-                                {{ thirdLevel.label }}
-                                <el-button
-                                  v-if="thirdLevel.replaceable"
-                                  type="primary"
-                                  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>
+                            </li>
+                          </ul>
+                        </el-collapse-item>
+                      </el-collapse>
                     </div>
                     <div class="tab-right" v-if="selectedNode">
                       <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() {
   const thirdLevels = activeSecondLevelItem.value?.children || [];
   if (thirdLevels.length > 0) {
-    if (allThirdLevelNoChildren.value) {
-      // 只有三级菜单
-      selectedNode.value = thirdLevels[0];
-      collapseActiveNames.value = [];
-    } else {
-      // 有四级菜单
+    // 默认选择第一个节点
+    selectedNode.value = thirdLevels[0];
+    // 如果第一个节点有子节点，则展开并选择第一个子节点
+    if (thirdLevels[0].children && thirdLevels[0].children.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];
-      }
+      selectedNode.value = thirdLevels[0].children[0];
+    } else {
+      collapseActiveNames.value = [];
     }
   } else {
     selectedNode.value = null;
@@ -758,13 +691,6 @@ watch(activeTab, () => {
   border-radius: 4px;
   border: 1px solid #eee;
 }
-.sub-tree {
-  margin-top: 20px;
-  padding: 16px;
-  background: #fff;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
 .model-form {
   max-width: 900px;
   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 {
   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 {
-  // background: #e6f0ff;
   color: #2156f3;
 }
 .tree-node:hover {
-  background: #f0f6ff;
+  color: #2156f3;
 }
 .tab-content-flex {
   display: flex;
@@ -876,29 +802,6 @@ watch(activeTab, () => {
   overflow-y: auto;
   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 {
   width: 180px;
   height: 120px;
@@ -923,7 +826,6 @@ watch(activeTab, () => {
 }
 .replace-item.selected {
   border-color: #2156f3;
-  // background: #e6f0ff;
 }
 .replace-img {
   width: 80px;
@@ -940,4 +842,31 @@ watch(activeTab, () => {
   color: #999;
   font-size: 18px;
 }
-</style> 
\ No newline at end of file
+
+// 新增样式
+: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>
\ No newline at end of file