优化

src/data/stepMockData.js

@@ -93,35 +93,35 @@ export const carTypeOptions = [
   }
 ];
 
-export const treeData = [
+// export const treeData = [
-  {
+//   {
-    id: 1,
+//     id: 1,
-    label: "D310000000032,动力轮对轴箱组装(带联轴节)",
+//     label: "D310000000032,动力轮对轴箱组装(带联轴节)",
-    children: [
+//     children: [
-      {
+//       {
-        id: 2,
+//         id: 2,
-        label: "D311000000013,动力轮对(带轴承+联轴节)",
+//         label: "D311000000013,动力轮对(带轴承+联轴节)",
-        children: [
+//         children: [
-          { id: 3, label: "D311001000011,动力轮对" },
+//           { id: 3, label: "D311001000011,动力轮对" },
-          { id: 4, label: "D325000000013,左轴箱组装" },
+//           { id: 4, label: "D325000000013,左轴箱组装" },
-          { id: 5, label: "D326000000037,左轴端装置" },
+//           { id: 5, label: "D326000000037,左轴端装置" },
-          { id: 6, label: "D325000000014,右轴箱组装" },
+//           { id: 6, label: "D325000000014,右轴箱组装" },
-          { id: 7, label: "D326000000038,右轴端装置" },
+//           { id: 7, label: "D326000000038,右轴端装置" },
-        ],
+//         ],
-      },
+//       },
-    ],
+//     ],
-  },
+//   },
-];
+// ];
 
-export const partInfoMap = {
+// export const partInfoMap = {
-  1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
+//   1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
-  2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
+//   2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
-  3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
+//   3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
-  4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
+//   4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
-  5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
+//   5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
-  6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
+//   6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
-  7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
+//   7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
-};
+// };
 
 export const defaultPaymentTerms = "货物出厂验收合格前，买方需将所提货物全额货款支付给卖方。";
 export const defaultObjectionTerms = "买方提出对产品质量异议的时间为收到货物起5个工作日内，卖方应在收到异议书次日起3个工作日内与买方沟通，通过技术指导方式解决问题，如不能解决，买方可以要求卖方前往修理，如修理后仍不能使用，买方可以提出更换请求。如买方在收到货物后5日内未提出异议，则视为同意卖方处理意见。";
@@ -145,7 +145,7 @@ export const productTreeData = [
           {
             code: "D311001000011",
             label: "D311001000011,动力轮对",
-            replaceable: true,
+            replaceable: false,
             image: '/src/assets/images/cars/1_1_1.jpg',
             children: [
               {
@@ -217,12 +217,6 @@ export const productTreeData = [
         label: "D326000000037,左轴端装置",
         replaceable: false,
         image: '/src/assets/images/cars/4.jpg'
-      },
-      {
-        code: "D326000000038",
-        label: "D326000000038,右轴端装置",
-        replaceable: false,
-        image: '/src/assets/images/cars/1_2_1.jpg'
       }
     ]
   }

src/views/order/intention/Step2.vue

@@ -118,30 +118,126 @@
             </div>
           </div>
           <div class="table-title">商品参数选择</div>
+          <!-- 一级菜单作为表头 -->
+          <div
+            class="header-title"
+            v-for="item in firstLevelItems"
+            :key="item.code"
+          >
+            <div class="header-code">编号：{{ item.code }}</div>
+            <div class="header-name">名称：{{ item.label }}</div>
+          </div>
           <div class="tree-table-row">
-            <el-tree
+            <!-- 二级菜单作为tab页 -->
-              :data="treeData"
+            <div class="tab-container">
-              :props="treeProps"
+              <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-              node-key="code"
+                <el-tab-pane
-              highlight-current
+                  v-for="item in secondLevelItems"
-              @node-click="handleNodeClick"
+                  :key="item.code"
-              class="tree-box"
+                  :name="item.code"
-            />
+                >
-            <div class="part-detail-box" v-if="selectedNode">
+                  <template #label>
-              <img
+                    <div class="custom-tab-label">
-                :src="selectedNode.image || '/images/part-default.png'"
+                      <div class="tab-label-image">
-                class="part-img"
+                        <img
-              />
+                          :src="item.image || '/images/part-default.png'"
-              <div class="part-info">
+                          class="tab-img"
-                <div class="part-label">{{ selectedNode.label }}</div>
+                        />
-                <div v-if="selectedNode.replaceable">
+                      </div>
-                  <el-button
+                      <div class="tab-label-info">
-                    type="primary"
+                        <div class="tab-label-code">{{ item.code }}</div>
-                    @click="openReplaceDialog(selectedNode)"
+                        <div class="tab-label-name">{{ item.label }}</div>
-                    >替换</el-button
+                      </div>
-                  >
+                    </div>
-                </div>
+                  </template>
-              </div>
+
+                  <!-- 三级及以下树形结构 -->
+                  <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="third-level-actions"
+                            v-if="
+                              thirdLevel.children && thirdLevel.children.length
+                            "
+                          >
+                            <el-button
+                              type="primary"
+                              link
+                              @click="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">
+                              <div
+                                class="fourth-level-image"
+                                v-if="fourthLevel.image"
+                              >
+                                <img
+                                  :src="fourthLevel.image"
+                                  class="fourth-level-img"
+                                />
+                              </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>
+                      </div>
+                    </template>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
             </div>
           </div>
           <el-dialog
@@ -180,7 +276,11 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from "vue";
-import { carTypeOptions, productTreeData, replacePartsMap } from "@/data/stepMockData";
+import {
+  carTypeOptions,
+  productTreeData,
+  replacePartsMap,
+} from "@/data/stepMockData";
 import CarModelDialog from "@/components/CarModelDialog.vue";
 
 const props = defineProps({
@@ -286,20 +386,48 @@ const selectedNode = ref(null);
 const replaceDialogVisible = ref(false);
 const replaceList = ref([]);
 const replaceSelected = ref(null);
+const activeTab = ref("");
 
+// 计算一级菜单项
+const firstLevelItems = computed(() => {
+  return treeData.value.map((item) => ({
+    code: item.code,
+    label: item.label,
+  }));
+});
+
+// 计算二级菜单项
+const secondLevelItems = computed(() => {
+  const activeFirstLevel = treeData.value.find(
+    (item) => item.code === activeTab.value
+  );
+  return activeFirstLevel?.children || [];
+});
+
+// 处理tab切换
+function handleTabClick(tab) {
+  activeTab.value = tab.props.name;
+  selectedNode.value = null;
+}
+
+// 处理节点点击
 function handleNodeClick(node) {
   selectedNode.value = node;
 }
 
+// 打开替换对话框
 function openReplaceDialog(node) {
   replaceList.value = replacePartsMap[node.code] || [];
   replaceSelected.value = null;
   replaceDialogVisible.value = true;
 }
 
+// 处理替换
 function handleReplace() {
   if (!replaceSelected.value) return;
-  const newPart = replaceList.value.find(item => item.code === replaceSelected.value);
+  const newPart = replaceList.value.find(
+    (item) => item.code === replaceSelected.value
+  );
   if (newPart) {
     selectedNode.value.code = newPart.code;
     selectedNode.value.label = newPart.label;
@@ -310,7 +438,7 @@ function handleReplace() {
 
 const treeProps = {
   label: "label",
-  children: "children"
+  children: "children",
 };
 
 function handleCarTypeChange(value) {
@@ -366,7 +494,9 @@ function handleNextStep() {
 }
 
 onMounted(() => {
-  // No need to fetch data here as treeData is already populated
+  if (treeData.value.length > 0) {
+    activeTab.value = treeData.value[0].code;
+  }
 });
 </script>
 
@@ -463,37 +593,67 @@ onMounted(() => {
 }
 .tree-table-row {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   border: 1px solid #bbb;
   border-radius: 4px;
   padding: 12px;
   background: #fff;
 }
-.tree-box {
+.header-title {
-  min-width: 340px;
+  flex: 1;
-  max-width: 400px;
+  padding: 10px;
-  margin-right: 24px;
+  border-radius: 4px;
-  background: #fff;
 }
-.part-detail-box {
+.header-code,
-  min-width: 350px;
+.header-name {
-  max-width: 600px;
+  font-size: 14px;
-  margin-left: 24px;
+  color: #333;
+  margin-bottom: 5px;
+}
+.tab-container {
+  width: 100%;
+}
+.tab-header {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+.tab-header-item {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+.tab-header-image {
+  width: 200px;
+  height: 150px;
+  flex-shrink: 0;
+}
+.tab-header-info {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  gap: 12px;
+}
+.tab-header-code,
+.tab-header-name {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
 }
 .part-img {
-  width: 220px;
+  width: 100%;
-  height: 180px;
+  height: 100%;
   object-fit: contain;
-  border-radius: 8px;
+  border-radius: 4px;
   border: 1px solid #eee;
-  margin-bottom: 16px;
 }
-.part-info {
+.sub-tree {
-  font-size: 16px;
+  margin-top: 20px;
-  color: #333;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
 }
 .model-form {
   max-width: 900px;
@@ -512,4 +672,247 @@ onMounted(() => {
   border-radius: 8px;
   border: 1px solid #eee;
 }
+.custom-tab-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.tab-label-image {
+  width: 80px;
+  height: 60px;
+  margin-bottom: 8px;
+}
+
+.tab-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+
+.tab-label-info {
+  text-align: center;
+}
+
+.tab-label-code {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.tab-label-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+: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);
+  }
+}
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.node-image {
+  width: 60px;
+  height: 45px;
+  flex-shrink: 0;
+}
+
+.node-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+
+.node-info {
+  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);
+  }
+}
 </style>