需求变更
This commit is contained in:
parent
b35c91db5c
commit
de35e4b951
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,36 +122,47 @@
|
|||
<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"
|
||||
<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
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
<el-button type="primary" @click="handleNextStep">下一步</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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue