优化

src/views/order/intention/Step2.vue

@@ -160,60 +160,15 @@
                     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>
-                        <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)"
-                          >
-                            <span>{{ thirdLevel.label }}</span>
-                            <el-button
-                              v-if="thirdLevel.replaceable"
-                              type="primary"
-                              link
-                              @click.stop="openReplaceDialog(thirdLevel)"
-                              >替换</el-button
-                            >
-                          </li>
-                        </ul>
                       <el-collapse v-model="collapseActiveNames" accordion>
                         <el-collapse-item
-                            v-for="thirdLevel in thirdLevelsWithChildren"
+                          v-for="thirdLevel in activeSecondLevelItem.children"
                           :key="thirdLevel.code"
                           :name="thirdLevel.code"
+                          :disabled="
+                            !thirdLevel.children ||
+                            thirdLevel.children.length === 0
+                          "
                         >
                           <template #title>
                             <span
@@ -236,7 +191,12 @@
                               >
                             </span>
                           </template>
-                            <ul>
+                          <ul
+                            v-if="
+                              thirdLevel.children &&
+                              thirdLevel.children.length > 0
+                            "
+                          >
                             <li
                               v-for="fourthLevel in thirdLevel.children"
                               :key="fourthLevel.code"
@@ -261,7 +221,6 @@
                           </ul>
                         </el-collapse-item>
                       </el-collapse>
-                      </template>
                     </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 {
-      // 有四级菜单
-      collapseActiveNames.value = [thirdLevels[0].code];
     if (thirdLevels[0].children && thirdLevels[0].children.length > 0) {
+      collapseActiveNames.value = [thirdLevels[0].code];
       selectedNode.value = thirdLevels[0].children[0];
     } else {
-        selectedNode.value = thirdLevels[0];
+      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;
 }
+
+// 新增样式
+: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>