This commit is contained in:
parent
fdd85196e8
commit
4a14d52403
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="车型信息"
|
||||
width="800px"
|
||||
:close-on-click-modal="false"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<div class="car-model-info">
|
||||
<div class="info-content">
|
||||
<div class="text-info">
|
||||
<h3>{{ carModel.name }}</h3>
|
||||
<p class="description">{{ carModel.description }}</p>
|
||||
<div class="specs">
|
||||
<div class="spec-item" v-for="(spec, key) in carModel.specifications" :key="key">
|
||||
<span class="label">{{ key }}:</span>
|
||||
<span class="value">{{ spec }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-info">
|
||||
<img :src="carModel.image" :alt="carModel.name" class="car-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
carModel: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.car-model-info {
|
||||
padding: 20px;
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
.text-info {
|
||||
flex: 1;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.specs {
|
||||
.spec-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-info {
|
||||
width: 400px;
|
||||
|
||||
.car-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,19 +20,77 @@ export const customerOptions = {
|
|||
|
||||
export const carTypeOptions = [
|
||||
{
|
||||
label: "最近常选",
|
||||
label: "最常选择",
|
||||
options: [
|
||||
{ label: "CR400AF", value: "CR400AF" },
|
||||
],
|
||||
{
|
||||
value: "CR400AF",
|
||||
label: "CR400AF",
|
||||
description: "中国标准动车组，最高运营速度350km/h",
|
||||
specifications: {
|
||||
"最高运营速度": "350km/h",
|
||||
"编组方式": "8辆编组",
|
||||
"定员": "556人",
|
||||
"轴重": "≤17t"
|
||||
},
|
||||
image: "/src/assets/images/cars/CR400AF.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "全部车型",
|
||||
label: "高速动车组",
|
||||
options: [
|
||||
{ label: "CR400AF", value: "CR400AF" },
|
||||
{ label: "JR800AF", value: "JR800AF" },
|
||||
{ label: "其他", value: "其他" },
|
||||
],
|
||||
{
|
||||
value: "CR400AF",
|
||||
label: "CR400AF",
|
||||
description: "中国标准动车组，最高运营速度350km/h",
|
||||
specifications: {
|
||||
"最高运营速度": "350km/h",
|
||||
"编组方式": "8辆编组",
|
||||
"定员": "556人",
|
||||
"轴重": "≤17t"
|
||||
},
|
||||
image: "/src/assets/images/cars/CR400AF.jpg"
|
||||
},
|
||||
{
|
||||
value: "CR400BF",
|
||||
label: "CR400BF",
|
||||
description: "中国标准动车组，最高运营速度350km/h",
|
||||
specifications: {
|
||||
"最高运营速度": "350km/h",
|
||||
"编组方式": "8辆编组",
|
||||
"定员": "556人",
|
||||
"轴重": "≤17t"
|
||||
},
|
||||
image: "/src/assets/images/cars/CR400BF.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "城际动车组",
|
||||
options: [
|
||||
{
|
||||
value: "CRH3A",
|
||||
label: "CRH3A",
|
||||
description: "城际动车组，最高运营速度250km/h",
|
||||
specifications: {
|
||||
"最高运营速度": "250km/h",
|
||||
"编组方式": "8辆编组",
|
||||
"定员": "613人",
|
||||
"轴重": "≤16t"
|
||||
},
|
||||
image: "/src/assets/images/cars/CRH3A.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "其他",
|
||||
options: [
|
||||
{
|
||||
value: "其他",
|
||||
label: "其他"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const treeData = [
|
||||
|
|
|
|||
|
|
@ -2,27 +2,20 @@
|
|||
<div class="step2-container">
|
||||
<div class="main-row">
|
||||
<div class="step-indicator">
|
||||
<div
|
||||
:class="['circle', selectedCarTypeProxy === '其他' ? 'active' : '']"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div :class="['circle', currentStep === 1 ? 'active' : '']">1</div>
|
||||
<div class="line"></div>
|
||||
<div
|
||||
:class="['circle', selectedCarTypeProxy !== '其他' ? 'active' : '']"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div :class="['circle', currentStep === 2 ? 'active' : '']">2</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div v-if="selectedCarTypeProxy === '其他'">
|
||||
<div v-if="currentStep === 1">
|
||||
<div class="step-title">第一步：选择车型</div>
|
||||
<el-form label-width="120px" class="model-form">
|
||||
<el-form-item label="可参考车型列表" required>
|
||||
<el-form-item label="车型列表" required>
|
||||
<el-select
|
||||
v-model="selectedCarTypeProxy"
|
||||
placeholder="请选择车型"
|
||||
filterable
|
||||
@change="handleCarTypeChange"
|
||||
>
|
||||
<el-option-group
|
||||
v-for="group in carTypeOptions"
|
||||
|
|
@ -38,51 +31,87 @@
|
|||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划购买数量">
|
||||
<el-input v-model="planCount" placeholder="请输入计划购买数量" />
|
||||
<el-form-item label="计划购买数量" required>
|
||||
<el-input-number v-model="planCount" :min="1" :max="999" />
|
||||
</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 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">
|
||||
第一步：选择车型
|
||||
<el-form label-width="120px" class="model-form">
|
||||
<el-form-item label="可参考车型列表" required>
|
||||
<el-select
|
||||
v-model="selectedCarTypeProxy"
|
||||
placeholder="请选择车型"
|
||||
filterable
|
||||
>
|
||||
<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>
|
||||
第一步：车型{{
|
||||
selectedCarTypeProxy === "其他"
|
||||
? "其他"
|
||||
: selectedCarTypeProxy
|
||||
}}
|
||||
<div
|
||||
v-if="selectedCarTypeProxy === '其他'"
|
||||
class="reference-model"
|
||||
>
|
||||
参考车型：{{ referenceCarType || "未选择" }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="step-title"
|
||||
:style="{
|
||||
marginTop:
|
||||
selectedCarTypeProxy === '其他' ? '165px' : '192px',
|
||||
}"
|
||||
>
|
||||
第二步：选择轮对商品
|
||||
</div>
|
||||
<div class="step-title">第二步：选择轮对商品</div>
|
||||
</div>
|
||||
<div class="image-box right-align">
|
||||
<img
|
||||
|
|
@ -109,26 +138,43 @@
|
|||
class="part-table"
|
||||
style="width: 600px; margin-left: 24px"
|
||||
>
|
||||
<el-table-column prop="name" label="部件名称" />
|
||||
<el-table-column prop="spec" label="规格" />
|
||||
<el-table-column prop="desc" label="描述" />
|
||||
<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 class="btn-row">
|
||||
<el-button @click="$emit('prev-step')">上一步</el-button>
|
||||
<el-button type="primary" @click="$emit('next-step')"
|
||||
>下一步</el-button
|
||||
>
|
||||
<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 } from "vue";
|
||||
import { carTypeOptions, treeData, partInfoMap } from '@/data/stepMockData';
|
||||
import { carTypeOptions, treeData, partInfoMap } from "@/data/stepMockData";
|
||||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||||
|
||||
const props = defineProps({
|
||||
form: Object,
|
||||
|
|
@ -137,6 +183,21 @@ const props = defineProps({
|
|||
|
||||
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() {
|
||||
|
|
@ -217,11 +278,63 @@ const treeProps = { children: "children", label: "label" };
|
|||
|
||||
function handleTreeSelect(node) {
|
||||
if (node && node.id && partInfoMap[node.id]) {
|
||||
selectedPartInfo.value = partInfoMap[node.id];
|
||||
selectedPartInfo.value = { ...partInfoMap[node.id] };
|
||||
} else {
|
||||
selectedPartInfo.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -268,6 +381,7 @@ function handleTreeSelect(node) {
|
|||
.step {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.step-left {
|
||||
flex: 1;
|
||||
|
|
@ -276,9 +390,32 @@ function handleTreeSelect(node) {
|
|||
.step-title {
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.step-title:last-child {
|
||||
margin-top: 145px;
|
||||
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;
|
||||
|
|
@ -289,6 +426,7 @@ function handleTreeSelect(node) {
|
|||
.table-title {
|
||||
font-weight: bold;
|
||||
margin: 16px 0 8px 0;
|
||||
color: #333;
|
||||
}
|
||||
.tree-table-row {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue