需求变更
This commit is contained in:
parent
8635d974e3
commit
9cb2fea0bb
|
|
@ -231,3 +231,158 @@ export const replacePartsMap = {
|
|||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 结构化零部件数据，供Step2查询用
|
||||
export const allParts = [
|
||||
// CR400AF
|
||||
{ code: "D310000000030", label: "轻量化车轴", type: "车轴", feature: "轻量化", image: "/images/cars/1_1_1.jpg", carType: "CR400AF" },
|
||||
{ code: "D310000000031", label: "易探伤车轴", type: "车轴", feature: "易探伤", image: "/images/cars/1_1_2.jpg", carType: "CR400AF" },
|
||||
{ code: "D310000000032", label: "高性能齿轮箱", type: "齿轮箱", feature: "高性能", image: "/images/cars/2.jpg", carType: "CR400AF" },
|
||||
{ code: "D310000000033", label: "高效制动盘", type: "制动盘", feature: "高效", image: "/images/cars/3.jpg", carType: "CR400AF" },
|
||||
{ code: "D310000000034", label: "耐磨车轮", type: "车轮", feature: "耐磨", image: "/images/cars/4.jpg", carType: "CR400AF" },
|
||||
|
||||
// CR400BF
|
||||
{ code: "D310000000130", label: "高强度车轴", type: "车轴", feature: "高强度", image: "/images/cars/CR400BF.jpg", carType: "CR400BF" },
|
||||
{ code: "D310000000131", label: "耐腐蚀车轴", type: "车轴", feature: "耐腐蚀", image: "/images/cars/1_2_1_1_1.jpg", carType: "CR400BF" },
|
||||
{ code: "D310000000132", label: "静音齿轮箱", type: "齿轮箱", feature: "静音", image: "/images/cars/CR400BF.jpg", carType: "CR400BF" },
|
||||
{ code: "D310000000133", label: "耐磨制动盘", type: "制动盘", feature: "耐磨", image: "/images/cars/1_2_1.jpg", carType: "CR400BF" },
|
||||
{ code: "D310000000134", label: "低噪音车轮", type: "车轮", feature: "低噪音", image: "/images/cars/1_2.jpg", carType: "CR400BF" },
|
||||
|
||||
// CRH3A
|
||||
{ code: "D310000000230", label: "经济型车轴", type: "车轴", feature: "经济型", image: "/images/cars/CRH3A.jpg", carType: "CRH3A" },
|
||||
{ code: "D310000000231", label: "标准型车轴", type: "车轴", feature: "标准型", image: "/images/cars/1_2_1_1.jpg", carType: "CRH3A" },
|
||||
{ code: "D310000000232", label: "轻便齿轮箱", type: "齿轮箱", feature: "轻便", image: "/images/cars/CRH3A.jpg", carType: "CRH3A" },
|
||||
{ code: "D310000000233", label: "经济制动盘", type: "制动盘", feature: "经济", image: "/images/cars/1_2_1_1_1.jpg", carType: "CRH3A" },
|
||||
{ code: "D310000000234", label: "标准车轮", type: "车轮", feature: "标准", image: "/images/cars/1_2_1.jpg", carType: "CRH3A" },
|
||||
|
||||
// 其他
|
||||
{ code: "D310000000330", label: "通用车轴", type: "车轴", feature: "通用", image: "/images/cars/1.jpg", carType: "其他" },
|
||||
{ code: "D310000000331", label: "普通齿轮箱", type: "齿轮箱", feature: "普通", image: "/images/cars/2.jpg", carType: "其他" },
|
||||
{ code: "D310000000332", label: "标准制动盘", type: "制动盘", feature: "标准", image: "/images/cars/3.jpg", carType: "其他" },
|
||||
{ code: "D310000000333", label: "经济车轮", type: "车轮", feature: "经济", image: "/images/cars/4.jpg", carType: "其他" },
|
||||
];
|
||||
|
||||
// 参数对比模拟数据
|
||||
export const compareTableData = [
|
||||
{
|
||||
param: "动车组联轴节",
|
||||
D310000000030: "鼓形齿式",
|
||||
D310000000031: "鼓形齿式",
|
||||
D310000000032: "齿式",
|
||||
D310000000130: "鼓形齿式",
|
||||
D310000000131: "鼓形齿式",
|
||||
D310000000132: "齿式",
|
||||
D310000000230: "鼓形齿式",
|
||||
D310000000231: "鼓形齿式",
|
||||
D310000000232: "齿式",
|
||||
D310000000330: "鼓形齿式",
|
||||
D310000000331: "鼓形齿式",
|
||||
D310000000332: "齿式",
|
||||
},
|
||||
{
|
||||
param: "O形橡胶密封圈",
|
||||
D310000000030: "A.2耐用型",
|
||||
D310000000031: "A.1耐热型",
|
||||
D310000000032: "A.2耐用型",
|
||||
D310000000130: "A.2耐用型",
|
||||
D310000000131: "A.1耐热型",
|
||||
D310000000132: "A.2耐用型",
|
||||
D310000000230: "A.2耐用型",
|
||||
D310000000231: "A.1耐热型",
|
||||
D310000000232: "A.2耐用型",
|
||||
D310000000330: "A.2耐用型",
|
||||
D310000000331: "A.1耐热型",
|
||||
D310000000332: "A.2耐用型",
|
||||
},
|
||||
{
|
||||
param: "齿轮箱组成",
|
||||
D310000000030: "不带联轴节",
|
||||
D310000000031: "带联轴节",
|
||||
D310000000032: "带联轴节",
|
||||
D310000000130: "不带联轴节",
|
||||
D310000000131: "带联轴节",
|
||||
D310000000132: "带联轴节",
|
||||
D310000000230: "不带联轴节",
|
||||
D310000000231: "带联轴节",
|
||||
D310000000232: "带联轴节",
|
||||
D310000000330: "不带联轴节",
|
||||
D310000000331: "带联轴节",
|
||||
D310000000332: "带联轴节",
|
||||
},
|
||||
{
|
||||
param: "碳刷",
|
||||
D310000000030: "耐热",
|
||||
D310000000031: "耐用",
|
||||
D310000000032: "耐热",
|
||||
D310000000130: "耐热",
|
||||
D310000000131: "耐用",
|
||||
D310000000132: "耐热",
|
||||
D310000000230: "耐热",
|
||||
D310000000231: "耐用",
|
||||
D310000000232: "耐热",
|
||||
D310000000330: "耐热",
|
||||
D310000000331: "耐用",
|
||||
D310000000332: "耐热",
|
||||
},
|
||||
{
|
||||
param: "齿轮箱温度传感器",
|
||||
D310000000030: "耐热",
|
||||
D310000000031: "耐热",
|
||||
D310000000032: "耐寒",
|
||||
D310000000130: "耐热",
|
||||
D310000000131: "耐热",
|
||||
D310000000132: "耐寒",
|
||||
D310000000230: "耐热",
|
||||
D310000000231: "耐热",
|
||||
D310000000232: "耐寒",
|
||||
D310000000330: "耐热",
|
||||
D310000000331: "耐热",
|
||||
D310000000332: "耐寒",
|
||||
},
|
||||
// 可重复参数
|
||||
{
|
||||
param: "轮对材质",
|
||||
D310000000030: "合金钢",
|
||||
D310000000031: "合金钢",
|
||||
D310000000032: "高强钢",
|
||||
D310000000130: "合金钢",
|
||||
D310000000131: "合金钢",
|
||||
D310000000132: "高强钢",
|
||||
D310000000230: "合金钢",
|
||||
D310000000231: "合金钢",
|
||||
D310000000232: "高强钢",
|
||||
D310000000330: "合金钢",
|
||||
D310000000331: "合金钢",
|
||||
D310000000332: "高强钢",
|
||||
},
|
||||
{
|
||||
param: "制动盘类型",
|
||||
D310000000030: "高效盘",
|
||||
D310000000031: "高效盘",
|
||||
D310000000032: "经济盘",
|
||||
D310000000130: "高效盘",
|
||||
D310000000131: "高效盘",
|
||||
D310000000132: "经济盘",
|
||||
D310000000230: "高效盘",
|
||||
D310000000231: "高效盘",
|
||||
D310000000232: "经济盘",
|
||||
D310000000330: "高效盘",
|
||||
D310000000331: "高效盘",
|
||||
D310000000332: "经济盘",
|
||||
},
|
||||
{
|
||||
param: "轮对寿命",
|
||||
D310000000030: "100万公里",
|
||||
D310000000031: "120万公里",
|
||||
D310000000032: "80万公里",
|
||||
D310000000130: "100万公里",
|
||||
D310000000131: "120万公里",
|
||||
D310000000132: "80万公里",
|
||||
D310000000230: "100万公里",
|
||||
D310000000231: "120万公里",
|
||||
D310000000232: "80万公里",
|
||||
D310000000330: "100万公里",
|
||||
D310000000331: "120万公里",
|
||||
D310000000332: "80万公里",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -29,32 +29,36 @@
|
|||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">车轴：</span>
|
||||
<el-input
|
||||
<el-autocomplete
|
||||
v-model="paramAxle"
|
||||
:fetch-suggestions="queryAxleSuggestions"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">齿轮箱：</span>
|
||||
<el-input
|
||||
<el-autocomplete
|
||||
v-model="paramGearbox"
|
||||
:fetch-suggestions="queryGearboxSuggestions"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">车轮：</span>
|
||||
<el-input
|
||||
<el-autocomplete
|
||||
v-model="paramWheel"
|
||||
:fetch-suggestions="queryWheelSuggestions"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="param-form-item">
|
||||
<span class="param-label">制动盘：</span>
|
||||
<el-input
|
||||
<el-autocomplete
|
||||
v-model="paramBrake"
|
||||
:fetch-suggestions="queryBrakeSuggestions"
|
||||
placeholder="不限"
|
||||
class="param-input"
|
||||
/>
|
||||
|
|
@ -94,7 +98,11 @@
|
|||
class="result-card-checkbox"
|
||||
/>
|
||||
</div>
|
||||
<img :src="item.image" class="result-card-img" @click.stop="toggleSelect(item)" />
|
||||
<img
|
||||
:src="item.image"
|
||||
class="result-card-img"
|
||||
@click.stop="toggleSelect(item)"
|
||||
/>
|
||||
<div class="result-card-info">
|
||||
<div class="result-card-name">{{ item.label }}</div>
|
||||
<div class="result-card-code">{{ item.code }}</div>
|
||||
|
|
@ -138,9 +146,7 @@
|
|||
</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 type="primary" @click="onNextStep">下一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -154,8 +160,9 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { carTypeOptions } from "@/data/stepMockData";
|
||||
import { carTypeOptions, allParts, compareTableData } from "@/data/stepMockData";
|
||||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
form: Object,
|
||||
|
|
@ -197,65 +204,40 @@ function selectCarType(val) {
|
|||
|
||||
const queryResultList = ref([]);
|
||||
function onQuery() {
|
||||
// 示例数据，实际应根据参数查询
|
||||
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,
|
||||
},
|
||||
];
|
||||
queryResultList.value = allParts.filter(item => {
|
||||
// 车型过滤
|
||||
if (selectedCarTypeProxy.value && item.carType !== selectedCarTypeProxy.value) return false;
|
||||
|
||||
// 车轴
|
||||
if (item.type === "车轴") {
|
||||
if (paramAxle.value === "不限") return true;
|
||||
return item.feature.includes(paramAxle.value);
|
||||
}
|
||||
// 齿轮箱
|
||||
if (item.type === "齿轮箱") {
|
||||
if (paramGearbox.value === "不限") return true;
|
||||
return item.feature.includes(paramGearbox.value);
|
||||
}
|
||||
// 车轮
|
||||
if (item.type === "车轮") {
|
||||
if (paramWheel.value === "不限") return true;
|
||||
return item.feature.includes(paramWheel.value);
|
||||
}
|
||||
// 制动盘
|
||||
if (item.type === "制动盘") {
|
||||
if (paramBrake.value === "不限") return true;
|
||||
return item.feature.includes(paramBrake.value);
|
||||
}
|
||||
// 其它类型不显示
|
||||
return false;
|
||||
}).map(item => ({ ...item, selected: false }));
|
||||
}
|
||||
|
||||
const compareDialogVisible = ref(false);
|
||||
const selectedCompareList = computed(() =>
|
||||
queryResultList.value.filter((i) => i.selected)
|
||||
);
|
||||
const compareTableData = ref([
|
||||
{
|
||||
param: "动车组联轴节",
|
||||
D310000000030: "鼓形齿式",
|
||||
D310000000031: "鼓形齿式",
|
||||
D310000000032: "齿式",
|
||||
},
|
||||
{
|
||||
param: "O形橡胶密封圈",
|
||||
D310000000030: "A.2耐用型",
|
||||
D310000000031: "A.1耐热型",
|
||||
D310000000032: "A.2耐用型",
|
||||
},
|
||||
{
|
||||
param: "齿轮箱组成",
|
||||
D310000000030: "不带联轴节",
|
||||
D310000000031: "带联轴节",
|
||||
D310000000032: "带联轴节",
|
||||
},
|
||||
{
|
||||
param: "碳刷",
|
||||
D310000000030: "耐热",
|
||||
D310000000031: "耐用",
|
||||
D310000000032: "耐热",
|
||||
},
|
||||
{
|
||||
param: "齿轮箱温度传感器",
|
||||
D310000000030: "耐热",
|
||||
D310000000031: "耐热",
|
||||
D310000000032: "耐寒",
|
||||
},
|
||||
]);
|
||||
// compareTableData 直接从stepMockData.js导入，无需本地定义
|
||||
function onCompare() {
|
||||
if (selectedCompareList.value.length === 0) {
|
||||
ElMessage.warning("请先选择要对比的卡片");
|
||||
|
|
@ -265,8 +247,61 @@ function onCompare() {
|
|||
}
|
||||
|
||||
function toggleSelect(item) {
|
||||
// 统计已选中的数量
|
||||
const selectedCount = queryResultList.value.filter((i) => i.selected).length;
|
||||
if (!item.selected && selectedCount >= 3) {
|
||||
ElMessage.warning("最多只能选择3个卡片进行对比");
|
||||
return;
|
||||
}
|
||||
item.selected = !item.selected;
|
||||
}
|
||||
|
||||
function onNextStep() {
|
||||
const selected = queryResultList.value.filter((i) => i.selected);
|
||||
if (selected.length !== 1) {
|
||||
ElMessage.warning("请且只能选择一个卡片进入下一步");
|
||||
return;
|
||||
}
|
||||
// 写入form
|
||||
if (props.form) {
|
||||
props.form.selectedCarType = selectedCarTypeProxy.value;
|
||||
props.form.selectedPartInfo = {
|
||||
code: selected[0].code,
|
||||
label: selected[0].label,
|
||||
image: selected[0].image,
|
||||
type: selected[0].type,
|
||||
feature: selected[0].feature,
|
||||
};
|
||||
emit("update:form", props.form);
|
||||
}
|
||||
emit("next-step");
|
||||
}
|
||||
|
||||
// 智能模糊建议方法
|
||||
function queryAxleSuggestions(queryString, cb) {
|
||||
const results = allParts
|
||||
.filter(item => item.type === "车轴" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
|
||||
.map(item => ({ value: item.feature }));
|
||||
cb(results.length ? results : [{ value: queryString }]);
|
||||
}
|
||||
function queryGearboxSuggestions(queryString, cb) {
|
||||
const results = allParts
|
||||
.filter(item => item.type === "齿轮箱" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
|
||||
.map(item => ({ value: item.feature }));
|
||||
cb(results.length ? results : [{ value: queryString }]);
|
||||
}
|
||||
function queryWheelSuggestions(queryString, cb) {
|
||||
const results = allParts
|
||||
.filter(item => item.type === "车轮" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
|
||||
.map(item => ({ value: item.feature }));
|
||||
cb(results.length ? results : [{ value: queryString }]);
|
||||
}
|
||||
function queryBrakeSuggestions(queryString, cb) {
|
||||
const results = allParts
|
||||
.filter(item => item.type === "制动盘" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
|
||||
.map(item => ({ value: item.feature }));
|
||||
cb(results.length ? results : [{ value: queryString }]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -22,15 +22,12 @@
|
|||
</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 class="header-title" v-if="form.selectedPartInfo">
|
||||
<div class="header-code">编号：{{ form.selectedPartInfo.code }}</div>
|
||||
<div class="header-name">名称：{{ form.selectedPartInfo.label }}</div>
|
||||
</div>
|
||||
<!-- 原有商品参数选择区保持不变 -->
|
||||
<div class="tree-table-row">
|
||||
<!-- 二级菜单作为tab页 -->
|
||||
<div class="tab-container">
|
||||
|
|
|
|||
Loading…
Reference in New Issue