This commit is contained in:
parent
4e2488ade8
commit
8bd8f74a0e
|
|
@ -19,23 +19,23 @@ export const customerOptions = {
|
|||
};
|
||||
|
||||
export const carTypeOptions = [
|
||||
{
|
||||
label: "最常选择",
|
||||
options: [
|
||||
{
|
||||
value: "CR400AF",
|
||||
label: "CR400AF",
|
||||
description: "中国标准动车组，最高运营速度350km/h",
|
||||
specifications: {
|
||||
"最高运营速度": "350km/h",
|
||||
"编组方式": "8辆编组",
|
||||
"定员": "556人",
|
||||
"轴重": "≤17t"
|
||||
},
|
||||
image: "/images/cars/CR400AF.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// label: "最常选择",
|
||||
// options: [
|
||||
// {
|
||||
// value: "CR400AF",
|
||||
// label: "CR400AF",
|
||||
// description: "中国标准动车组，最高运营速度350km/h",
|
||||
// specifications: {
|
||||
// "最高运营速度": "350km/h",
|
||||
// "编组方式": "8辆编组",
|
||||
// "定员": "556人",
|
||||
// "轴重": "≤17t"
|
||||
// },
|
||||
// image: "/images/cars/CR400AF.jpg"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
label: "高速动车组",
|
||||
options: [
|
||||
|
|
@ -93,36 +93,6 @@ 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 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 = "如因不可抗力的原因，致使卖方推迟或不能交货，卖方不需为此承担责任。但卖方需在上述事件发生次日起七天内，以传真等书面方式通知买方，同时，卖方应采取一切必要措施及早交货。";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,876 @@
|
|||
<template>
|
||||
<div class="step2-container">
|
||||
<div class="main-row">
|
||||
<div class="step-indicator">
|
||||
<div :class="['circle', currentStep === 1 ? 'active' : '']">1</div>
|
||||
<div class="line"></div>
|
||||
<div :class="['circle', currentStep === 2 ? 'active' : '']">2</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div v-if="currentStep === 1">
|
||||
<div class="step-title">第一步：选择车型</div>
|
||||
<el-form label-width="120px" class="model-form">
|
||||
<el-form-item label="车型列表" required>
|
||||
<el-select
|
||||
v-model="selectedCarTypeProxy"
|
||||
placeholder="请选择车型"
|
||||
filterable
|
||||
@change="handleCarTypeChange"
|
||||
>
|
||||
<el-option-group
|
||||
v-for="group in carTypeOptions"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in group.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划购买数量" required>
|
||||
<el-input-number v-model="planCount" :min="1" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划交付时间" required>
|
||||
<el-date-picker
|
||||
v-model="deliveryTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划交付方式" required>
|
||||
<el-radio-group v-model="deliveryMethod">
|
||||
<el-radio label="self">自行提货</el-radio>
|
||||
<el-radio label="logistics">物流配送</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 其他车型的额外表单 -->
|
||||
<template v-if="selectedCarTypeProxy === '其他'">
|
||||
<el-form-item label="可参考车型列表">
|
||||
<el-select
|
||||
v-model="referenceCarType"
|
||||
placeholder="请选择参考车型"
|
||||
filterable
|
||||
@change="handleReferenceCarTypeChange"
|
||||
>
|
||||
<el-option-group
|
||||
v-for="group in referenceCarTypeOptions"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in group.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车型输入">
|
||||
<el-input v-model="modelInput" placeholder="请输入车型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车型描述">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
v-model="modelDesc"
|
||||
placeholder="请输入车型描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="step">
|
||||
<div class="step-left">
|
||||
<div class="step-title">
|
||||
第一步：车型{{
|
||||
selectedCarTypeProxy === "其他"
|
||||
? "其他"
|
||||
: selectedCarTypeProxy
|
||||
}}
|
||||
<div
|
||||
v-if="selectedCarTypeProxy === '其他'"
|
||||
class="reference-model"
|
||||
>
|
||||
参考车型：{{ referenceCarType || "未选择" }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="step-title"
|
||||
:style="{
|
||||
marginTop:
|
||||
selectedCarTypeProxy === '其他' ? '165px' : '192px',
|
||||
}"
|
||||
>
|
||||
第二步：选择轮对商品
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box right-align">
|
||||
<img src="/images/3D.png" alt="3D结构图" class="main-img" />
|
||||
</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">
|
||||
<!-- 二级菜单作为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
|
||||
v-if="
|
||||
activeSecondLevelItem &&
|
||||
activeSecondLevelItem.children &&
|
||||
activeSecondLevelItem.children.length
|
||||
"
|
||||
class="tab-content tab-content-flex"
|
||||
>
|
||||
<div class="tab-left">
|
||||
<el-collapse v-model="collapseActiveNames" accordion>
|
||||
<el-collapse-item
|
||||
v-for="thirdLevel in activeSecondLevelItem.children"
|
||||
:key="thirdLevel.code"
|
||||
:name="thirdLevel.code"
|
||||
:disabled="
|
||||
!thirdLevel.children ||
|
||||
thirdLevel.children.length === 0
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<span
|
||||
:class="[
|
||||
'tree-node',
|
||||
selectedNode &&
|
||||
selectedNode.code === thirdLevel.code
|
||||
? 'active'
|
||||
: '',
|
||||
]"
|
||||
@click.stop="handleNodeClick(thirdLevel)"
|
||||
>
|
||||
{{ thirdLevel.label }}
|
||||
<el-button
|
||||
v-if="thirdLevel.replaceable"
|
||||
type="primary"
|
||||
link
|
||||
@click.stop="openReplaceDialog(thirdLevel)"
|
||||
>替换</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
<ul
|
||||
v-if="
|
||||
thirdLevel.children &&
|
||||
thirdLevel.children.length > 0
|
||||
"
|
||||
>
|
||||
<li
|
||||
v-for="fourthLevel in thirdLevel.children"
|
||||
:key="fourthLevel.code"
|
||||
:class="[
|
||||
'tree-node',
|
||||
selectedNode &&
|
||||
selectedNode.code === fourthLevel.code
|
||||
? 'active'
|
||||
: '',
|
||||
]"
|
||||
@click="handleNodeClick(fourthLevel)"
|
||||
>
|
||||
<span>{{ fourthLevel.label }}</span>
|
||||
<el-button
|
||||
v-if="fourthLevel.replaceable"
|
||||
type="primary"
|
||||
link
|
||||
@click.stop="openReplaceDialog(fourthLevel)"
|
||||
>替换</el-button
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="tab-right" v-if="selectedNode">
|
||||
<img
|
||||
:src="selectedNode.image"
|
||||
class="detail-img"
|
||||
v-if="selectedNode.image"
|
||||
/>
|
||||
<div class="detail-info">
|
||||
<div>编号：{{ selectedNode.code }}</div>
|
||||
<div>名称：{{ selectedNode.label }}</div>
|
||||
<el-button
|
||||
v-if="selectedNode.replaceable"
|
||||
type="primary"
|
||||
class="right-button"
|
||||
@click="openReplaceDialog(selectedNode)"
|
||||
>替换</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" v-else>
|
||||
<span>请选择左侧商品</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="tab-content no-data">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="replaceDialogVisible"
|
||||
title="特定替换部件"
|
||||
width="500px"
|
||||
>
|
||||
<div class="replace-list">
|
||||
<div
|
||||
v-for="item in replaceList"
|
||||
:key="item.code"
|
||||
class="replace-item"
|
||||
:class="{ selected: replaceSelected === item.code }"
|
||||
@click="replaceSelected = item.code"
|
||||
>
|
||||
<img :src="item.image" class="replace-img" v-if="item.image" />
|
||||
<div>
|
||||
<div>编号：{{ item.code }}</div>
|
||||
<div>名称：{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车型信息弹窗 -->
|
||||
<car-model-dialog
|
||||
v-model="carModelDialogVisible"
|
||||
:car-model="selectedCarModel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import {
|
||||
carTypeOptions,
|
||||
productTreeData,
|
||||
replacePartsMap,
|
||||
} from "@/data/stepMockData";
|
||||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||||
|
||||
const props = defineProps({
|
||||
form: Object,
|
||||
selectedCarType: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
||||
|
||||
const currentStep = ref(1);
|
||||
const carModelDialogVisible = ref(false);
|
||||
const selectedCarModel = ref(null);
|
||||
const referenceCarType = ref("");
|
||||
const deliveryTime = ref("");
|
||||
const deliveryMethod = ref("");
|
||||
|
||||
// 计算属性：参考车型选项（排除"其他"选项）
|
||||
const referenceCarTypeOptions = computed(() => {
|
||||
return carTypeOptions.map((group) => ({
|
||||
...group,
|
||||
options: group.options.filter((option) => option.value !== "其他"),
|
||||
}));
|
||||
});
|
||||
|
||||
// 彻底双向绑定
|
||||
const selectedCarTypeProxy = computed({
|
||||
get() {
|
||||
return props.form?.selectedCarType ?? "其他";
|
||||
},
|
||||
set(val) {
|
||||
if (props.form) {
|
||||
props.form.selectedCarType = val;
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const planCount = computed({
|
||||
get() {
|
||||
return props.form?.planCount ?? "";
|
||||
},
|
||||
set(val) {
|
||||
if (props.form) {
|
||||
props.form.planCount = val;
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const modelInput = computed({
|
||||
get() {
|
||||
return props.form?.modelInput ?? "";
|
||||
},
|
||||
set(val) {
|
||||
if (props.form) {
|
||||
props.form.modelInput = val;
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const modelDesc = computed({
|
||||
get() {
|
||||
return props.form?.modelDesc ?? "";
|
||||
},
|
||||
set(val) {
|
||||
if (props.form) {
|
||||
props.form.modelDesc = val;
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const selectedPartInfo = computed({
|
||||
get() {
|
||||
return props.form?.selectedPartInfo ?? null;
|
||||
},
|
||||
set(val) {
|
||||
if (props.form) {
|
||||
props.form.selectedPartInfo = val;
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// 监听车型变化，清空表单
|
||||
watch(selectedCarTypeProxy, (newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
// 清空所有相关字段
|
||||
if (props.form) {
|
||||
props.form.planCount = "";
|
||||
props.form.modelInput = "";
|
||||
props.form.modelDesc = "";
|
||||
props.form.selectedPartInfo = null;
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 商品参数选择相关逻辑
|
||||
const treeData = ref(productTreeData);
|
||||
const selectedNode = ref(null);
|
||||
const replaceDialogVisible = ref(false);
|
||||
const replaceList = ref([]);
|
||||
const replaceSelected = ref(null);
|
||||
const activeTab = ref("");
|
||||
const collapseActiveNames = ref([]);
|
||||
|
||||
// 计算一级菜单项
|
||||
const firstLevelItems = computed(() => treeData.value);
|
||||
|
||||
// 计算二级菜单项（只取第一个一级菜单的 children 作为 tab）
|
||||
const secondLevelItems = computed(() => {
|
||||
return treeData.value.length > 0 ? treeData.value[0].children || [] : [];
|
||||
});
|
||||
|
||||
// 当前激活的二级菜单项
|
||||
const activeSecondLevelItem = computed(() => {
|
||||
return secondLevelItems.value.find((item) => item.code === activeTab.value);
|
||||
});
|
||||
|
||||
// 处理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 !== "其他") {
|
||||
const selectedOption = carTypeOptions
|
||||
.flatMap((group) => group.options)
|
||||
.find((option) => option.value === value);
|
||||
|
||||
if (selectedOption) {
|
||||
selectedCarModel.value = {
|
||||
name: selectedOption.label,
|
||||
description: selectedOption.description || "",
|
||||
specifications: selectedOption.specifications || {},
|
||||
image: selectedOption.image || "",
|
||||
};
|
||||
carModelDialogVisible.value = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleReferenceCarTypeChange(value) {
|
||||
// 显示参考车型信息弹窗
|
||||
const selectedOption = referenceCarTypeOptions.value
|
||||
.flatMap((group) => group.options)
|
||||
.find((option) => option.value === value);
|
||||
|
||||
if (selectedOption) {
|
||||
selectedCarModel.value = {
|
||||
name: selectedOption.label,
|
||||
description: selectedOption.description || "",
|
||||
specifications: selectedOption.specifications || {},
|
||||
image: selectedOption.image || "",
|
||||
};
|
||||
carModelDialogVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function handlePrevStep() {
|
||||
if (currentStep.value === 2) {
|
||||
currentStep.value = 1;
|
||||
} else {
|
||||
emit("prev-step");
|
||||
}
|
||||
}
|
||||
|
||||
function handleNextStep() {
|
||||
if (currentStep.value === 1) {
|
||||
currentStep.value = 2;
|
||||
} else {
|
||||
emit("next-step");
|
||||
}
|
||||
}
|
||||
|
||||
function selectFirstNode() {
|
||||
const thirdLevels = activeSecondLevelItem.value?.children || [];
|
||||
if (thirdLevels.length > 0) {
|
||||
// 默认选择第一个节点
|
||||
selectedNode.value = thirdLevels[0];
|
||||
// 如果第一个节点有子节点，则展开并选择第一个子节点
|
||||
if (thirdLevels[0].children && thirdLevels[0].children.length > 0) {
|
||||
collapseActiveNames.value = [thirdLevels[0].code];
|
||||
selectedNode.value = thirdLevels[0].children[0];
|
||||
} else {
|
||||
collapseActiveNames.value = [];
|
||||
}
|
||||
} else {
|
||||
selectedNode.value = null;
|
||||
collapseActiveNames.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (secondLevelItems.value.length > 0) {
|
||||
activeTab.value = secondLevelItems.value[0].code;
|
||||
}
|
||||
selectFirstNode();
|
||||
});
|
||||
|
||||
watch(secondLevelItems, (newVal) => {
|
||||
if (newVal.length > 0) {
|
||||
activeTab.value = newVal[0].code;
|
||||
}
|
||||
selectFirstNode();
|
||||
});
|
||||
|
||||
watch(activeTab, () => {
|
||||
selectFirstNode();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.step2-container {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.main-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.circle.active {
|
||||
background: #2156f3;
|
||||
}
|
||||
.line {
|
||||
width: 4px;
|
||||
height: 170px;
|
||||
background: #ccc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.right-content {
|
||||
flex: 1;
|
||||
}
|
||||
.step {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.step-left {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
color: #2156f3;
|
||||
}
|
||||
|
||||
.reference-model {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #2156f3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-box.right-align {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
margin: 16px 0 8px 0;
|
||||
color: #333;
|
||||
}
|
||||
.tree-table-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.header-title {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.model-form {
|
||||
max-width: 900px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.btn-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.main-img {
|
||||
width: 580px;
|
||||
height: 260px;
|
||||
object-fit: contain;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
transition: background 0.2s;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tree-node.active {
|
||||
color: #2156f3;
|
||||
}
|
||||
.tree-node:hover {
|
||||
color: #2156f3;
|
||||
}
|
||||
.tab-content-flex {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tab-left {
|
||||
width: 260px;
|
||||
border-right: 1px solid #eee;
|
||||
padding-right: 16px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.tab-right {
|
||||
flex: 1;
|
||||
padding-left: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.right-button {
|
||||
margin: 15px 0 0 260px;
|
||||
}
|
||||
.detail-img {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.replace-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.replace-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.replace-item.selected {
|
||||
border-color: #2156f3;
|
||||
}
|
||||
.replace-img {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.no-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// 新增样式
|
||||
:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
|
||||
cursor: default;
|
||||
color: #303133;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item.is-disabled .el-collapse-item__arrow) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
padding: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__wrap) {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,97 +1,98 @@
|
|||
<template>
|
||||
<div class="step2-container">
|
||||
<div class="main-row">
|
||||
<div class="step-indicator">
|
||||
<div :class="['circle', currentStep === 1 ? 'active' : '']">1</div>
|
||||
<div class="line"></div>
|
||||
<div :class="['circle', currentStep === 2 ? 'active' : '']">2</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div v-if="currentStep === 1">
|
||||
<div class="step-title">第一步：选择车型</div>
|
||||
<el-form label-width="120px" class="model-form">
|
||||
<el-form-item label="车型列表" required>
|
||||
<el-select
|
||||
v-model="selectedCarTypeProxy"
|
||||
placeholder="请选择车型"
|
||||
filterable
|
||||
@change="handleCarTypeChange"
|
||||
<!-- 车型横向单选区 -->
|
||||
<div class="search-row">
|
||||
<span class="search-label">车型：</span>
|
||||
<div class="car-type-text-list">
|
||||
<span
|
||||
v-for="option in carTypeOptions.flatMap(
|
||||
(group) => group.options
|
||||
)"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'car-type-text',
|
||||
selectedCarTypeProxy === option.value ? 'active' : '',
|
||||
]"
|
||||
@click="selectCarType(option.value)"
|
||||
>
|
||||
<el-option-group
|
||||
v-for="group in carTypeOptions"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in group.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划购买数量" required>
|
||||
<el-input-number v-model="planCount" :min="1" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划交付时间" required>
|
||||
<el-date-picker
|
||||
v-model="deliveryTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
{{ option.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-divider"></div>
|
||||
<!-- 其它参数分组标题 -->
|
||||
<div class="param-group-title">其它参数</div>
|
||||
<!-- 参数项区 -->
|
||||
<div class="param-form-row">
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">车轴：</span>
|
||||
<el-input
|
||||
v-model="paramAxle"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划交付方式" required>
|
||||
<el-radio-group v-model="deliveryMethod">
|
||||
<el-radio label="self">自行提货</el-radio>
|
||||
<el-radio label="logistics">物流配送</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 其他车型的额外表单 -->
|
||||
<template v-if="selectedCarTypeProxy === '其他'">
|
||||
<el-form-item label="可参考车型列表">
|
||||
<el-select
|
||||
v-model="referenceCarType"
|
||||
placeholder="请选择参考车型"
|
||||
filterable
|
||||
@change="handleReferenceCarTypeChange"
|
||||
>
|
||||
<el-option-group
|
||||
v-for="group in referenceCarTypeOptions"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in group.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车型输入">
|
||||
<el-input v-model="modelInput" placeholder="请输入车型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车型描述">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
v-model="modelDesc"
|
||||
placeholder="请输入车型描述"
|
||||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">齿轮箱：</span>
|
||||
<el-input
|
||||
v-model="paramGearbox"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">车轮：</span>
|
||||
<el-input
|
||||
v-model="paramWheel"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">制动盘：</span>
|
||||
<el-input
|
||||
v-model="paramBrake"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="param-form-btns">
|
||||
<el-button class="param-btn" @click="onQuery">查询</el-button>
|
||||
<el-button class="param-btn" type="primary" @click="onCompare"
|
||||
>参数对比</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查询结果卡片区 -->
|
||||
<div v-if="queryResultList.length" class="result-card-list">
|
||||
<el-card
|
||||
v-for="item in queryResultList"
|
||||
:key="item.code"
|
||||
class="result-card"
|
||||
>
|
||||
<div class="result-card-checkbox-wrap">
|
||||
<el-checkbox
|
||||
v-model="item.selected"
|
||||
class="result-card-checkbox"
|
||||
@click.stop
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
<img :src="item.image" class="result-card-img" />
|
||||
<div class="result-card-info">
|
||||
<div class="result-card-name">{{ item.label }}</div>
|
||||
<div class="result-card-code">{{ item.code }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="step">
|
||||
<div class="step-left">
|
||||
<div class="step-title">
|
||||
第一步：车型{{
|
||||
车型:{{
|
||||
selectedCarTypeProxy === "其他"
|
||||
? "其他"
|
||||
: selectedCarTypeProxy
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
参考车型：{{ referenceCarType || "未选择" }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<!-- <div
|
||||
class="step-title"
|
||||
:style="{
|
||||
marginTop:
|
||||
|
|
@ -111,7 +112,7 @@
|
|||
}"
|
||||
>
|
||||
第二步：选择轮对商品
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="image-box right-align">
|
||||
<img src="/images/3D.png" alt="3D结构图" class="main-img" />
|
||||
|
|
@ -542,6 +543,57 @@ watch(secondLevelItems, (newVal) => {
|
|||
watch(activeTab, () => {
|
||||
selectFirstNode();
|
||||
});
|
||||
|
||||
// 新增参数输入区数据
|
||||
const paramOther = ref("");
|
||||
const paramAxle = ref("");
|
||||
const paramWheel = ref("");
|
||||
const paramBrake = ref("");
|
||||
const paramGearbox = ref("");
|
||||
|
||||
function selectCarType(val) {
|
||||
selectedCarTypeProxy.value = val;
|
||||
}
|
||||
|
||||
const showQueryResult = ref(false);
|
||||
const queryResultList = ref([]);
|
||||
|
||||
function setDefaultQueryResult() {
|
||||
queryResultList.value = [
|
||||
{
|
||||
code: "D310000000030",
|
||||
label: "动力轮对轴箱组装（带联轴节）",
|
||||
image: "/images/cars/1_1_1.jpg",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
code: "D310000000031",
|
||||
label: "动力轮对轴箱组装（带联轴节）",
|
||||
image: "/images/cars/1_1_2.jpg",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
code: "D310000000032",
|
||||
label: "动力轮对轴箱组装（带联轴节）",
|
||||
image: "/images/cars/2.jpg",
|
||||
selected: false,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setDefaultQueryResult();
|
||||
});
|
||||
|
||||
function onQuery() {
|
||||
// 示例数据，实际应根据参数查询
|
||||
setDefaultQueryResult();
|
||||
showQueryResult.value = true;
|
||||
}
|
||||
|
||||
function onCompare() {
|
||||
// 参数对比逻辑
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -554,34 +606,6 @@ watch(activeTab, () => {
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.circle.active {
|
||||
background: #2156f3;
|
||||
}
|
||||
.line {
|
||||
width: 4px;
|
||||
height: 170px;
|
||||
background: #ccc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.right-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -873,4 +897,118 @@ watch(activeTab, () => {
|
|||
:deep(.el-collapse-item__wrap) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.search-label {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.car-type-text-list {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
.car-type-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
padding: 0 4px 4px 4px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color 0.2s, border 0.2s;
|
||||
}
|
||||
.car-type-text.active {
|
||||
color: #2156f3;
|
||||
border-bottom: 2px solid #2156f3;
|
||||
font-weight: 500;
|
||||
}
|
||||
.search-divider {
|
||||
border-bottom: 1px dashed #e5e5e5;
|
||||
margin: 8px 0 16px 0;
|
||||
}
|
||||
.param-group-title {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin: 12px 0 12px 0;
|
||||
}
|
||||
.param-form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 24px 32px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
.param-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.param-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
.param-input {
|
||||
width: 120px;
|
||||
}
|
||||
.param-form-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
.param-btn {
|
||||
min-width: 90px;
|
||||
}
|
||||
.result-card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.result-card {
|
||||
width: 220px;
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.result-card-checkbox-wrap {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 22px;
|
||||
z-index: 2;
|
||||
}
|
||||
.result-card-checkbox {
|
||||
position: static;
|
||||
}
|
||||
.result-card-img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.result-card-info {
|
||||
text-align: left;
|
||||
}
|
||||
.result-card-name {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.result-card-code {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue