From de35e4b9515c8778ed6a21b8efb4cd2bd0759f97 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Thu, 12 Jun 2025 16:14:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9C=80=E6=B1=82=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/stepMockData.js            | 126 ++++++++++++++++++++++++++
 src/views/order/intention/Step2.vue | 131 +++++++++++++++++++---------
 2 files changed, 216 insertions(+), 41 deletions(-)

diff --git a/src/data/stepMockData.js b/src/data/stepMockData.js
index 8ac46f3..68e585e 100644
--- a/src/data/stepMockData.js
+++ b/src/data/stepMockData.js
@@ -127,3 +127,129 @@ 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: true,
+            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'
+      },
+      {
+        code: "D326000000038",
+        label: "D326000000038,右轴端装置",
+        replaceable: false,
+        image: '/src/assets/images/cars/1_2_1.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'
+    }
+  ]
+};
diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue
index d1d2dac..4a2dd75 100644
--- a/src/views/order/intention/Step2.vue
+++ b/src/views/order/intention/Step2.vue
@@ -114,11 +114,7 @@
               </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>
@@ -126,35 +122,46 @@
             <el-tree
               :data="treeData"
               :props="treeProps"
-              node-key="id"
+              node-key="code"
               highlight-current
-              @current-change="handleTreeSelect"
+              @node-click="handleNodeClick"
               class="tree-box"
-              default-expand-all
             />
-            <el-table
-              :data="selectedPartInfo ? [selectedPartInfo] : []"
-              border
-              class="part-table"
-              style="width: 600px; margin-left: 24px"
-            >
-              <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="part-detail-box" v-if="selectedNode">
+              <img
+                :src="selectedNode.image || '/images/part-default.png'"
+                class="part-img"
+              />
+              <div class="part-info">
+                <div class="part-label">{{ selectedNode.label }}</div>
+                <div v-if="selectedNode.replaceable">
+                  <el-button
+                    type="primary"
+                    @click="openReplaceDialog(selectedNode)"
+                    >替换</el-button
+                  >
+                </div>
+              </div>
+            </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 +179,8 @@
 </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 +280,39 @@ 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);
 
-function handleTreeSelect(node) {
-  if (node && node.id && partInfoMap[node.id]) {
-    selectedPartInfo.value = { ...partInfoMap[node.id] };
-  } else {
-    selectedPartInfo.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 +364,10 @@ function handleNextStep() {
     emit("next-step");
   }
 }
+
+onMounted(() => {
+  // No need to fetch data here as treeData is already populated
+});
 </script>
 
 <style scoped lang="scss">
@@ -442,9 +475,25 @@ function handleNextStep() {
   margin-right: 24px;
   background: #fff;
 }
-.part-table {
+.part-detail-box {
   min-width: 350px;
   max-width: 600px;
+  margin-left: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.part-img {
+  width: 220px;
+  height: 180px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #eee;
+  margin-bottom: 16px;
+}
+.part-info {
+  font-size: 16px;
+  color: #333;
 }
 .model-form {
   max-width: 900px;