From 81c53e71efe647bc5b13a84c6621f3bf0d2d86b6 Mon Sep 17 00:00:00 2001 From: JenniferW <1627055433@qq.com> Date: Fri, 13 Jun 2025 10:04:11 +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/data/stepMockData.js | 64 ++-- src/views/order/intention/Step2.vue | 493 +++++++++++++++++++++++++--- 2 files changed, 477 insertions(+), 80 deletions(-) diff --git a/src/data/stepMockData.js b/src/data/stepMockData.js index 68e585e..5e5deaa 100644 --- a/src/data/stepMockData.js +++ b/src/data/stepMockData.js @@ -93,35 +93,35 @@ 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日内未提出异议，则视为同意卖方处理意见。"; @@ -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' } ] } diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue index 4a2dd75..def43af 100644 --- a/src/views/order/intention/Step2.vue +++ b/src/views/order/intention/Step2.vue @@ -118,30 +118,126 @@
商品参数选择
+ +
+
编号：{{ item.code }}
+
名称：{{ item.label }}
+
- -
- -
-
{{ selectedNode.label }}
-
- 替换 -
-
+ +
+ + + + + +
+ 1111 + +
+ +
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; + } }); @@ -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 { - min-width: 340px; - max-width: 400px; - margin-right: 24px; - background: #fff; +.header-title { + flex: 1; + padding: 10px; + border-radius: 4px; } -.part-detail-box { - min-width: 350px; - max-width: 600px; - margin-left: 24px; +.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; - 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; - height: 180px; + width: 100%; + height: 100%; object-fit: contain; - border-radius: 8px; + border-radius: 4px; border: 1px solid #eee; - margin-bottom: 16px; } -.part-info { - font-size: 16px; - color: #333; +.sub-tree { + margin-top: 20px; + 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); + } +} \ No newline at end of file