This commit is contained in:
parent
e47988d1b0
commit
66b6e51050
|
|
@ -2,20 +2,15 @@
|
||||||
<div class="step2-container">
|
<div class="step2-container">
|
||||||
<div class="main-row">
|
<div class="main-row">
|
||||||
<div class="right-content">
|
<div class="right-content">
|
||||||
<div v-if="currentStep === 1">
|
<div>
|
||||||
<!-- 车型横向单选区 -->
|
<!-- 车型横向单选区 -->
|
||||||
<div class="search-row">
|
<div class="search-row">
|
||||||
<span class="search-label">车型：</span>
|
<span class="search-label">车型：</span>
|
||||||
<div class="car-type-text-list">
|
<div class="car-type-text-list">
|
||||||
<span
|
<span
|
||||||
v-for="option in carTypeOptions.flatMap(
|
v-for="option in carTypeOptions.flatMap((group) => group.options)"
|
||||||
(group) => group.options
|
|
||||||
)"
|
|
||||||
:key="option.value"
|
:key="option.value"
|
||||||
:class="[
|
:class="['car-type-text', selectedCarTypeProxy === option.value ? 'active' : '']"
|
||||||
'car-type-text',
|
|
||||||
selectedCarTypeProxy === option.value ? 'active' : '',
|
|
||||||
]"
|
|
||||||
@click="selectCarType(option.value)"
|
@click="selectCarType(option.value)"
|
||||||
>
|
>
|
||||||
{{ option.label }}
|
{{ option.label }}
|
||||||
|
|
@ -29,56 +24,30 @@
|
||||||
<div class="param-form-row">
|
<div class="param-form-row">
|
||||||
<div class="param-form-item">
|
<div class="param-form-item">
|
||||||
<span class="param-label">车轴：</span>
|
<span class="param-label">车轴：</span>
|
||||||
<el-input
|
<el-input v-model="paramAxle" placeholder="不限" class="param-input" />
|
||||||
v-model="paramAxle"
|
|
||||||
placeholder="不限"
|
|
||||||
class="param-input"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="param-form-item">
|
<div class="param-form-item">
|
||||||
<span class="param-label">齿轮箱：</span>
|
<span class="param-label">齿轮箱：</span>
|
||||||
<el-input
|
<el-input v-model="paramGearbox" placeholder="不限" class="param-input" />
|
||||||
v-model="paramGearbox"
|
|
||||||
placeholder="不限"
|
|
||||||
class="param-input"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="param-form-item">
|
<div class="param-form-item">
|
||||||
<span class="param-label">车轮：</span>
|
<span class="param-label">车轮：</span>
|
||||||
<el-input
|
<el-input v-model="paramWheel" placeholder="不限" class="param-input" />
|
||||||
v-model="paramWheel"
|
|
||||||
placeholder="不限"
|
|
||||||
class="param-input"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="param-form-item">
|
<div class="param-form-item">
|
||||||
<span class="param-label">制动盘：</span>
|
<span class="param-label">制动盘：</span>
|
||||||
<el-input
|
<el-input v-model="paramBrake" placeholder="不限" class="param-input" />
|
||||||
v-model="paramBrake"
|
|
||||||
placeholder="不限"
|
|
||||||
class="param-input"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="param-form-btns">
|
<div class="param-form-btns">
|
||||||
<el-button class="param-btn" @click="onQuery">查询</el-button>
|
<el-button class="param-btn" @click="onQuery">查询</el-button>
|
||||||
<el-button class="param-btn" type="primary" @click="onCompare"
|
<el-button class="param-btn" type="primary" @click="onCompare">参数对比</el-button>
|
||||||
>参数对比</el-button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 查询结果卡片区 -->
|
<!-- 查询结果卡片区 -->
|
||||||
<div v-if="queryResultList.length" class="result-card-list">
|
<div v-if="queryResultList.length" class="result-card-list">
|
||||||
<el-card
|
<el-card v-for="item in queryResultList" :key="item.code" class="result-card">
|
||||||
v-for="item in queryResultList"
|
|
||||||
:key="item.code"
|
|
||||||
class="result-card"
|
|
||||||
>
|
|
||||||
<div class="result-card-checkbox-wrap">
|
<div class="result-card-checkbox-wrap">
|
||||||
<el-checkbox
|
<el-checkbox v-model="item.selected" class="result-card-checkbox" @click.stop />
|
||||||
v-model="item.selected"
|
|
||||||
class="result-card-checkbox"
|
|
||||||
@click.stop
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<img :src="item.image" class="result-card-img" />
|
<img :src="item.image" class="result-card-img" />
|
||||||
<div class="result-card-info">
|
<div class="result-card-info">
|
||||||
|
|
@ -90,11 +59,7 @@
|
||||||
<!-- 参数对比弹窗 -->
|
<!-- 参数对比弹窗 -->
|
||||||
<el-dialog v-model="compareDialogVisible" title="参数对比" width="60%" top="40px" :close-on-click-modal="false">
|
<el-dialog v-model="compareDialogVisible" title="参数对比" width="60%" top="40px" :close-on-click-modal="false">
|
||||||
<div class="compare-dialog-cards">
|
<div class="compare-dialog-cards">
|
||||||
<el-card
|
<el-card v-for="item in selectedCompareList" :key="item.code" class="compare-card">
|
||||||
v-for="item in selectedCompareList"
|
|
||||||
:key="item.code"
|
|
||||||
class="compare-card"
|
|
||||||
>
|
|
||||||
<img :src="item.image" class="compare-card-img" />
|
<img :src="item.image" class="compare-card-img" />
|
||||||
<div class="compare-card-info">
|
<div class="compare-card-info">
|
||||||
<div class="compare-card-name">{{ item.label }}</div>
|
<div class="compare-card-name">{{ item.label }}</div>
|
||||||
|
|
@ -105,249 +70,35 @@
|
||||||
<div class="compare-table-wrap">
|
<div class="compare-table-wrap">
|
||||||
<el-table :data="compareTableData" border style="width: 100%">
|
<el-table :data="compareTableData" border style="width: 100%">
|
||||||
<el-table-column prop="param" label="差异参数" width="180" />
|
<el-table-column prop="param" label="差异参数" width="180" />
|
||||||
<el-table-column
|
<el-table-column v-for="item in selectedCompareList" :key="item.code" :label="item.code" :prop="item.code" />
|
||||||
v-for="item in selectedCompareList"
|
|
||||||
:key="item.code"
|
|
||||||
:label="item.code"
|
|
||||||
:prop="item.code"
|
|
||||||
/>
|
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</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">
|
<div class="btn-row">
|
||||||
<el-button @click="handlePrevStep">上一步</el-button>
|
<el-button @click="emit('prev-step')">上一步</el-button>
|
||||||
<el-button type="primary" @click="handleNextStep">下一步</el-button>
|
<el-button type="primary" @click="emit('next-step')">下一步</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 车型信息弹窗 -->
|
<!-- 车型信息弹窗 -->
|
||||||
<car-model-dialog
|
<car-model-dialog v-model="carModelDialogVisible" :car-model="selectedCarModel" />
|
||||||
v-model="carModelDialogVisible"
|
|
||||||
:car-model="selectedCarModel"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted } from "vue";
|
import { ref, computed, watch, onMounted } from "vue";
|
||||||
import {
|
import { carTypeOptions } from "@/data/stepMockData";
|
||||||
carTypeOptions,
|
|
||||||
productTreeData,
|
|
||||||
replacePartsMap,
|
|
||||||
} from "@/data/stepMockData";
|
|
||||||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
form: Object,
|
form: Object,
|
||||||
selectedCarType: String,
|
selectedCarType: String,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
||||||
|
|
||||||
const currentStep = ref(1);
|
|
||||||
const carModelDialogVisible = ref(false);
|
const carModelDialogVisible = ref(false);
|
||||||
const selectedCarModel = ref(null);
|
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({
|
const selectedCarTypeProxy = computed({
|
||||||
|
|
@ -362,230 +113,18 @@ const selectedCarTypeProxy = computed({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 新增参数输入区数据
|
|
||||||
const paramOther = ref("");
|
|
||||||
const paramAxle = ref("");
|
const paramAxle = ref("");
|
||||||
|
const paramGearbox = ref("");
|
||||||
const paramWheel = ref("");
|
const paramWheel = ref("");
|
||||||
const paramBrake = ref("");
|
const paramBrake = ref("");
|
||||||
const paramGearbox = ref("");
|
|
||||||
|
|
||||||
function selectCarType(val) {
|
function selectCarType(val) {
|
||||||
selectedCarTypeProxy.value = val;
|
selectedCarTypeProxy.value = val;
|
||||||
}
|
}
|
||||||
|
|
||||||
const showQueryResult = ref(false);
|
|
||||||
const queryResultList = ref([]);
|
const queryResultList = ref([]);
|
||||||
|
function onQuery() {
|
||||||
function setDefaultQueryResult() {
|
// 示例数据，实际应根据参数查询
|
||||||
queryResultList.value = [
|
queryResultList.value = [
|
||||||
{
|
{
|
||||||
code: "D310000000030",
|
code: "D310000000030",
|
||||||
|
|
@ -608,19 +147,8 @@ function setDefaultQueryResult() {
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
setDefaultQueryResult();
|
|
||||||
});
|
|
||||||
|
|
||||||
function onQuery() {
|
|
||||||
// 示例数据，实际应根据参数查询
|
|
||||||
setDefaultQueryResult();
|
|
||||||
showQueryResult.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const compareDialogVisible = ref(false);
|
const compareDialogVisible = ref(false);
|
||||||
const selectedCompareList = computed(() => queryResultList.value.filter(i => i.selected));
|
const selectedCompareList = computed(() => queryResultList.value.filter(i => i.selected));
|
||||||
|
|
||||||
const compareTableData = ref([
|
const compareTableData = ref([
|
||||||
{
|
{
|
||||||
param: "动车组联轴节",
|
param: "动车组联轴节",
|
||||||
|
|
@ -653,9 +181,7 @@ const compareTableData = ref([
|
||||||
D310000000032: "耐寒",
|
D310000000032: "耐寒",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
function onCompare() {
|
function onCompare() {
|
||||||
// 只弹出已选卡片
|
|
||||||
if (selectedCompareList.value.length === 0) {
|
if (selectedCompareList.value.length === 0) {
|
||||||
ElMessage.warning("请先选择要对比的卡片");
|
ElMessage.warning("请先选择要对比的卡片");
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
|
|
@ -1,88 +1,303 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="step3-container">
|
<div class="step3-container">
|
||||||
<div class="content-wrapper">
|
<div class="main-row">
|
||||||
<el-tabs v-model="activeTab" tab-position="left" class="left-tabs">
|
<div class="right-content">
|
||||||
<el-tab-pane label="付款条件" name="pay">
|
<!-- 商品参数选择页面内容 -->
|
||||||
<div class="editor-container">
|
<div class="step">
|
||||||
<el-input
|
<div class="step-left">
|
||||||
type="textarea"
|
<div class="step-title">
|
||||||
:rows="10"
|
车型:{{
|
||||||
v-model="form.pay"
|
selectedCarTypeProxy === "其他" ? "其他" : selectedCarTypeProxy
|
||||||
placeholder="请输入付款条件"
|
}}
|
||||||
/>
|
<div
|
||||||
|
v-if="selectedCarTypeProxy === '其他'"
|
||||||
|
class="reference-model"
|
||||||
|
>
|
||||||
|
参考车型：{{ referenceCarType || "未选择" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
<div class="image-box right-align">
|
||||||
|
<img src="/images/3D.png" alt="3D结构图" class="main-img" />
|
||||||
<el-tab-pane label="异议" name="objection">
|
|
||||||
<div class="editor-container">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
:rows="10"
|
|
||||||
v-model="form.objection"
|
|
||||||
placeholder="请输入异议信息"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</div>
|
||||||
|
<div class="table-title">商品参数选择</div>
|
||||||
<el-tab-pane label="不可抗力" name="force">
|
<!-- 一级菜单作为表头 -->
|
||||||
<div class="editor-container">
|
<div
|
||||||
<el-input
|
class="header-title"
|
||||||
type="textarea"
|
v-for="item in firstLevelItems"
|
||||||
:rows="10"
|
:key="item.code"
|
||||||
v-model="form.force"
|
>
|
||||||
placeholder="请输入不可抗力信息"
|
<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-tab-pane>
|
</div>
|
||||||
|
<el-dialog
|
||||||
<el-tab-pane label="争议解决" name="dispute">
|
v-model="replaceDialogVisible"
|
||||||
<div class="editor-container">
|
title="特定替换部件"
|
||||||
<el-input
|
width="500px"
|
||||||
type="textarea"
|
>
|
||||||
:rows="10"
|
<div class="replace-list">
|
||||||
v-model="form.dispute"
|
<div
|
||||||
placeholder="请输入争议解决方式"
|
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>
|
</div>
|
||||||
</el-tab-pane>
|
<template #footer>
|
||||||
|
<el-button @click="replaceDialogVisible = false">取消</el-button>
|
||||||
<el-tab-pane label="其他" name="other">
|
<el-button type="primary" @click="handleReplace">替换</el-button>
|
||||||
<div class="editor-container">
|
</template>
|
||||||
<el-input
|
</el-dialog>
|
||||||
type="textarea"
|
<div class="btn-row">
|
||||||
:rows="10"
|
<el-button @click="emit('prev-step')">上一步</el-button>
|
||||||
v-model="form.other"
|
<el-button type="primary" @click="emit('next-step')"
|
||||||
placeholder="请输入其他信息"
|
>下一步</el-button
|
||||||
/>
|
>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</div>
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-row">
|
|
||||||
<el-button @click="$emit('prev-step')">上一步</el-button>
|
|
||||||
<el-button type="primary" @click="$emit('next-step')">下一步</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from "vue";
|
import { ref, computed, watch, onMounted } from "vue";
|
||||||
import {
|
import {
|
||||||
defaultPaymentTerms,
|
carTypeOptions,
|
||||||
defaultObjectionTerms,
|
productTreeData,
|
||||||
defaultForceTerms,
|
replacePartsMap,
|
||||||
defaultDisputeTerms,
|
|
||||||
} from "@/data/stepMockData";
|
} from "@/data/stepMockData";
|
||||||
|
|
||||||
const activeTab = ref("pay");
|
const props = defineProps({
|
||||||
|
form: Object,
|
||||||
|
selectedCarType: String,
|
||||||
|
});
|
||||||
|
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
||||||
|
|
||||||
const form = reactive({
|
const referenceCarType = ref("");
|
||||||
pay: defaultPaymentTerms,
|
const selectedCarTypeProxy = computed({
|
||||||
objection: defaultObjectionTerms,
|
get() {
|
||||||
force: defaultForceTerms,
|
return props.form?.selectedCarType ?? "其他";
|
||||||
dispute: defaultDisputeTerms,
|
},
|
||||||
other: "",
|
set(val) {
|
||||||
|
if (props.form) {
|
||||||
|
props.form.selectedCarType = val;
|
||||||
|
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 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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -91,45 +306,448 @@ const form = reactive({
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: calc(100vh - 320px);
|
}
|
||||||
|
.main-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
.header-title {
|
||||||
.content-wrapper {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.header-code,
|
||||||
.left-tabs {
|
.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%;
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
:deep(.el-tabs__content) {
|
border-radius: 4px;
|
||||||
height: 100%;
|
border: 1px solid #eee;
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__nav-wrap) {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.model-form {
|
||||||
.editor-container {
|
max-width: 900px;
|
||||||
height: 100%;
|
margin-top: 16px;
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
:deep(.el-textarea__inner) {
|
|
||||||
height: 100%;
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-row {
|
.btn-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-top: 16px;
|
margin-top: 20px;
|
||||||
padding-top: 16px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
}
|
}
|
||||||
</style>
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.compare-dialog-cards {
|
||||||
|
display: flex;
|
||||||
|
gap: 32px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.compare-card {
|
||||||
|
width: 220px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.compare-card-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.compare-card-info {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.compare-card-name {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.compare-card-code {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.compare-table-wrap {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,88 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="step4-container">
|
<div class="step4-container">
|
||||||
<div class="success-box">
|
<div class="content-wrapper">
|
||||||
<div class="success-icon">
|
<el-tabs v-model="activeTab" tab-position="left" class="left-tabs">
|
||||||
<svg viewBox="0 0 100 100" width="100" height="100">
|
<el-tab-pane label="付款条件" name="pay">
|
||||||
<circle cx="50" cy="50" r="48" fill="#b6ff3a" />
|
<div class="editor-container">
|
||||||
<polyline
|
<el-input
|
||||||
points="30,55 48,72 72,38"
|
type="textarea"
|
||||||
fill="none"
|
:rows="10"
|
||||||
stroke="#222"
|
v-model="form.pay"
|
||||||
stroke-width="8"
|
placeholder="请输入付款条件"
|
||||||
stroke-linecap="round"
|
/>
|
||||||
stroke-linejoin="round"
|
</div>
|
||||||
/>
|
</el-tab-pane>
|
||||||
</svg>
|
|
||||||
</div>
|
<el-tab-pane label="异议" name="objection">
|
||||||
<div class="success-text">
|
<div class="editor-container">
|
||||||
{{
|
<el-input
|
||||||
selectedCarType === "其他"
|
type="textarea"
|
||||||
? "意向单生成，我们会尽快安排研发"
|
:rows="10"
|
||||||
: "订单生成，我们会尽快安排生产"
|
v-model="form.objection"
|
||||||
}}
|
placeholder="请输入异议信息"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="不可抗力" name="force">
|
||||||
|
<div class="editor-container">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="10"
|
||||||
|
v-model="form.force"
|
||||||
|
placeholder="请输入不可抗力信息"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="争议解决" name="dispute">
|
||||||
|
<div class="editor-container">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="10"
|
||||||
|
v-model="form.dispute"
|
||||||
|
placeholder="请输入争议解决方式"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="其他" name="other">
|
||||||
|
<div class="editor-container">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="10"
|
||||||
|
v-model="form.other"
|
||||||
|
placeholder="请输入其他信息"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn-row">
|
<div class="btn-row">
|
||||||
<el-button @click="$emit('prev-step')">上一步</el-button>
|
<el-button @click="$emit('prev-step')">上一步</el-button>
|
||||||
<el-button type="primary" @click="$emit('view-list')">查看列表</el-button>
|
<el-button type="primary" @click="$emit('next-step')">下一步</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const emit = defineEmits(["view-list"]);
|
import { reactive, ref } from "vue";
|
||||||
|
import {
|
||||||
|
defaultPaymentTerms,
|
||||||
|
defaultObjectionTerms,
|
||||||
|
defaultForceTerms,
|
||||||
|
defaultDisputeTerms,
|
||||||
|
} from "@/data/stepMockData";
|
||||||
|
|
||||||
const props = defineProps({
|
const activeTab = ref("pay");
|
||||||
selectedCarType: {
|
|
||||||
type: String,
|
const form = reactive({
|
||||||
required: true,
|
pay: defaultPaymentTerms,
|
||||||
},
|
objection: defaultObjectionTerms,
|
||||||
|
force: defaultForceTerms,
|
||||||
|
dispute: defaultDisputeTerms,
|
||||||
|
other: "",
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -45,28 +91,45 @@ const props = defineProps({
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
height: calc(100vh - 320px);
|
||||||
.success-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
margin: 48px 0 24px 0;
|
|
||||||
}
|
}
|
||||||
.success-icon {
|
|
||||||
margin-bottom: 24px;
|
.content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.success-text {
|
|
||||||
padding: 24px 0;
|
.left-tabs {
|
||||||
width: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
|
||||||
font-size: 22px;
|
:deep(.el-tabs__content) {
|
||||||
color: #333;
|
height: 100%;
|
||||||
border-radius: 6px;
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__nav-wrap) {
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
:deep(.el-textarea__inner) {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn-row {
|
.btn-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-top: 20px;
|
margin-top: 16px;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div class="step5-container">
|
||||||
|
<div class="success-box">
|
||||||
|
<div class="success-icon">
|
||||||
|
<svg viewBox="0 0 100 100" width="100" height="100">
|
||||||
|
<circle cx="50" cy="50" r="48" fill="#b6ff3a" />
|
||||||
|
<polyline
|
||||||
|
points="30,55 48,72 72,38"
|
||||||
|
fill="none"
|
||||||
|
stroke="#222"
|
||||||
|
stroke-width="8"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="success-text">
|
||||||
|
{{
|
||||||
|
selectedCarType === "其他"
|
||||||
|
? "意向单生成，我们会尽快安排研发"
|
||||||
|
: "订单生成，我们会尽快安排生产"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-row">
|
||||||
|
<el-button @click="$emit('prev-step')">上一步</el-button>
|
||||||
|
<el-button type="primary" @click="$emit('view-list')">查看列表</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const emit = defineEmits(["view-list"]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
selectedCarType: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.step5-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.success-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 48px 0 24px 0;
|
||||||
|
}
|
||||||
|
.success-icon {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.success-text {
|
||||||
|
padding: 24px 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.btn-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue