优化

src/data/stepMockData.js

@@ -93,37 +93,157 @@ export const carTypeOptions = [
   }
 ];
 
-export const treeData = [
-  {
-    id: 1,
-    label: "D310000000032,动力轮对轴箱组装(带联轴节)",
-    children: [
-      {
-        id: 2,
-        label: "D311000000013,动力轮对(带轴承+联轴节)",
-        children: [
-          { id: 3, label: "D311001000011,动力轮对" },
-          { id: 4, label: "D325000000013,左轴箱组装" },
-          { id: 5, label: "D326000000037,左轴端装置" },
-          { id: 6, label: "D325000000014,右轴箱组装" },
-          { id: 7, label: "D326000000038,右轴端装置" },
-        ],
-      },
-    ],
-  },
-];
+// export const treeData = [
+//   {
+//     id: 1,
+//     label: "D310000000032,动力轮对轴箱组装(带联轴节)",
+//     children: [
+//       {
+//         id: 2,
+//         label: "D311000000013,动力轮对(带轴承+联轴节)",
+//         children: [
+//           { id: 3, label: "D311001000011,动力轮对" },
+//           { id: 4, label: "D325000000013,左轴箱组装" },
+//           { id: 5, label: "D326000000037,左轴端装置" },
+//           { id: 6, label: "D325000000014,右轴箱组装" },
+//           { id: 7, label: "D326000000038,右轴端装置" },
+//         ],
+//       },
+//     ],
+//   },
+// ];
 
-export const partInfoMap = {
-  1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
-  2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
-  3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
-  4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
-  5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
-  6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
-  7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
-};
+// export const partInfoMap = {
+//   1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
+//   2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
+//   3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
+//   4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
+//   5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
+//   6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
+//   7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
+// };
 
 export const defaultPaymentTerms = "货物出厂验收合格前，买方需将所提货物全额货款支付给卖方。";
 export const defaultObjectionTerms = "买方提出对产品质量异议的时间为收到货物起5个工作日内，卖方应在收到异议书次日起3个工作日内与买方沟通，通过技术指导方式解决问题，如不能解决，买方可以要求卖方前往修理，如修理后仍不能使用，买方可以提出更换请求。如买方在收到货物后5日内未提出异议，则视为同意卖方处理意见。";
 export const defaultForceTerms = "如因不可抗力的原因，致使卖方推迟或不能交货，卖方不需为此承担责任。但卖方需在上述事件发生次日起七天内，以传真等书面方式通知买方，同时，卖方应采取一切必要措施及早交货。";
 export const defaultDisputeTerms = "合同双方因履行本合同发生争议时，应本着友好合作的精神共同协商解决。如协商后双方仍然无法达成一致则向买方所在地法院申请裁决。";
+
+// 商品参数选择静态树形数据
+export const productTreeData = [
+  {
+    code: "D310000000032",
+    label: "D310000000032,动力轮对轴箱组成（带联轴节）",
+    replaceable: false,
+    image: '/src/assets/images/cars/totle.jpg',
+    children: [
+      {
+        code: "D311000000013",
+        label: "D311000000013,动力轮对（带轴承+联轴节）",
+        replaceable: false,
+        image: '/src/assets/images/cars/1.jpg',
+        children: [
+          {
+            code: "D311001000011",
+            label: "D311001000011,动力轮对",
+            replaceable: false,
+            image: '/src/assets/images/cars/1_1_1.jpg',
+            children: [
+              {
+                code: "D351200000018",
+                label: "D351200000018,动车组联轴节（鼓形齿式）",
+                replaceable: true,
+                image: '/src/assets/images/cars/1_2_1.jpg'
+              },
+              {
+                code: "D312000000013",
+                label: "D312000000013,齿轮箱组成",
+                replaceable: true,
+                image: '/src/assets/images/cars/1_2_1_1.jpg'
+              },
+              {
+                code: "D311101000008",
+                label: "D311101000008,动力车轮组成（带喷漆）",
+                replaceable: false,
+                image: '/src/assets/images/cars/1_2_1_1.jpg'
+              },
+              {
+                code: "D311299000016",
+                label: "D311299000016,动力车轴（带喷漆）",
+                replaceable: false,
+                image: '/src/assets/images/cars/1_2_1_1_1.jpg'
+              }
+            ]
+          },
+          {
+            code: "D311303000007",
+            label: "D311303000007,后挡圈",
+            replaceable: false,
+            image: '/src/assets/images/cars/1_1_2.jpg'
+          },
+          {
+            code: "3627401100024",
+            label: "3627401100024,O形橡胶密封圈",
+            replaceable: false,
+            image: '/src/assets/images/cars/1_2.jpg'
+          },
+          {
+            code: "3627401100023",
+            label: "3627401100023,O形橡胶密封圈",
+            replaceable: false,
+            image: '/src/assets/images/cars/1_2_1.jpg'
+          },
+          {
+            code: "D311300000020",
+            label: "D311300000020,轴箱轴承",
+            replaceable: false,
+            image: '/src/assets/images/cars/1_2_1_1.jpg'
+          }
+        ]
+      },
+      {
+        code: "D325000000013",
+        label: "D325000000013,左轴箱组成",
+        replaceable: false,
+        image: '/src/assets/images/cars/2.jpg'
+      },
+      {
+        code: "D325000000014",
+        label: "D325000000014,右轴箱组成",
+        replaceable: false,
+        image: '/src/assets/images/cars/3.jpg'
+      },
+      {
+        code: "D326000000037",
+        label: "D326000000037,左轴端装置",
+        replaceable: false,
+        image: '/src/assets/images/cars/4.jpg'
+      }
+    ]
+  }
+];
+
+// 替换部件列表
+export const replacePartsMap = {
+  "D351200000018": [
+    {
+      code: "D351200000002",
+      label: "D351200000002,动车组联轴节（鼓形齿式）",
+      replaceable: true,
+      image: '/src/assets/images/cars/1_1_1.jpg'
+    }
+  ],
+  "D312000000013": [
+    {
+      code: "D312000000014",
+      label: "D312000000014,齿轮箱组成",
+      replaceable: true,
+      image: '/src/assets/images/cars/1_2_1.jpg'
+    },
+    {
+      code: "312000000015",
+      label: "D312000000015，齿轮箱组成",
+      replaceable: true,
+      image: '/src/assets/images/cars/4.jpg'
+    }
+  ]
+};

src/views/order/intention/Step2.vue

@@ -114,47 +114,150 @@
               </div>
             </div>
             <div class="image-box right-align">
-              <img
-                src="/images/3D.png"
-                alt="3D结构图"
-                class="main-img"
-              />
+              <img src="/images/3D.png" alt="3D结构图" class="main-img" />
             </div>
           </div>
           <div class="table-title">商品参数选择</div>
-          <div class="tree-table-row">
-            <el-tree
-              :data="treeData"
-              :props="treeProps"
-              node-key="id"
-              highlight-current
-              @current-change="handleTreeSelect"
-              class="tree-box"
-              default-expand-all
-            />
-            <el-table
-              :data="selectedPartInfo ? [selectedPartInfo] : []"
-              border
-              class="part-table"
-              style="width: 600px; margin-left: 24px"
+          <!-- 一级菜单作为表头 -->
+          <div
+            class="header-title"
+            v-for="item in firstLevelItems"
+            :key="item.code"
           >
-              <el-table-column prop="name" label="部件名称">
-                <template #default="scope">
-                  <el-input v-model="scope.row.name" />
-                </template>
-              </el-table-column>
-              <el-table-column prop="spec" label="规格">
-                <template #default="scope">
-                  <el-input v-model="scope.row.spec" />
-                </template>
-              </el-table-column>
-              <el-table-column prop="desc" label="描述">
-                <template #default="scope">
-                  <el-input v-model="scope.row.desc" />
-                </template>
-              </el-table-column>
-            </el-table>
+            <div class="header-code">编号：{{ item.code }}</div>
+            <div class="header-name">名称：{{ item.label }}</div>
           </div>
+          <div class="tree-table-row">
+            <!-- 二级菜单作为tab页 -->
+            <div class="tab-container">
+              <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+                <el-tab-pane
+                  v-for="item in secondLevelItems"
+                  :key="item.code"
+                  :name="item.code"
+                >
+                  <template #label>
+                    <div class="custom-tab-label">
+                      <div class="tab-label-image">
+                        <img
+                          :src="item.image || '/images/part-default.png'"
+                          class="tab-img"
+                        />
+                      </div>
+                      <div class="tab-label-info">
+                        <div class="tab-label-code">{{ item.code }}</div>
+                        <div class="tab-label-name">{{ item.label }}</div>
+                      </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="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
+            v-model="replaceDialogVisible"
+            title="特定替换部件"
+            width="500px"
+          >
+            <el-radio-group v-model="replaceSelected">
+              <el-radio
+                v-for="item in replaceList"
+                :key="item.code"
+                :label="item.code"
+                >{{ item.label }}</el-radio
+              >
+            </el-radio-group>
+            <template #footer>
+              <el-button @click="replaceDialogVisible = false">取消</el-button>
+              <el-button type="primary" @click="handleReplace">替换</el-button>
+            </template>
+          </el-dialog>
         </div>
         <div class="btn-row">
           <el-button @click="handlePrevStep">上一步</el-button>
@@ -172,8 +275,12 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
-import { carTypeOptions, treeData, partInfoMap } from "@/data/stepMockData";
+import { ref, computed, watch, onMounted } from "vue";
+import {
+  carTypeOptions,
+  productTreeData,
+  replacePartsMap,
+} from "@/data/stepMockData";
 import CarModelDialog from "@/components/CarModelDialog.vue";
 
 const props = defineProps({
@@ -273,17 +380,67 @@ watch(selectedCarTypeProxy, (newVal, oldVal) => {
   }
 });
 
-// 模拟树形结构数据
-const treeProps = { children: "children", label: "label" };
+// 商品参数选择相关逻辑
+const treeData = ref(productTreeData);
+const selectedNode = ref(null);
+const replaceDialogVisible = ref(false);
+const replaceList = ref([]);
+const replaceSelected = ref(null);
+const activeTab = ref("");
 
-function handleTreeSelect(node) {
-  if (node && node.id && partInfoMap[node.id]) {
-    selectedPartInfo.value = { ...partInfoMap[node.id] };
-  } else {
-    selectedPartInfo.value = null;
+// 计算一级菜单项
+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
+  );
+  if (newPart) {
+    selectedNode.value.code = newPart.code;
+    selectedNode.value.label = newPart.label;
+    selectedNode.value.image = newPart.image;
+  }
+  replaceDialogVisible.value = false;
+}
+
+const treeProps = {
+  label: "label",
+  children: "children",
+};
+
 function handleCarTypeChange(value) {
   // 只有非"其他"选项才显示车型信息弹窗
   if (value !== "其他") {
@@ -335,6 +492,12 @@ function handleNextStep() {
     emit("next-step");
   }
 }
+
+onMounted(() => {
+  if (treeData.value.length > 0) {
+    activeTab.value = treeData.value[0].code;
+  }
+});
 </script>
 
 <style scoped lang="scss">
@@ -430,21 +593,67 @@ function handleNextStep() {
 }
 .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 {
-  min-width: 340px;
-  max-width: 400px;
-  margin-right: 24px;
-  background: #fff;
+.header-title {
+  flex: 1;
+  padding: 10px;
+  border-radius: 4px;
 }
-.part-table {
-  min-width: 350px;
-  max-width: 600px;
+.header-code,
+.header-name {
+  font-size: 14px;
+  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;
+  gap: 12px;
+}
+.tab-header-code,
+.tab-header-name {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+.part-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  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;
@@ -463,4 +672,247 @@ function handleNextStep() {
   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>