20 changed files with 751 additions and 271 deletions
@ -0,0 +1,14 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 车型配置详细信息
|
||||
|
export function selectExiCarConfig(data) { |
||||
|
return request({ |
||||
|
url: '/base/v1/basevehicle/selectExiCarConfig', |
||||
|
method: 'post', |
||||
|
params: { |
||||
|
modelSid:data.modelSid, |
||||
|
configSid:data.configSid, |
||||
|
vehModelConfigSid:data.vehModelConfigSid, |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,390 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="dataForm" :model="formobj" class="formaddcopy02"> |
||||
|
<!-- <div class="headtitle">{{ formobj.vehicleAlias }}</div>--> |
||||
|
<!-- <div class="headtitle"><span>系列：{{ formobj.productLineValue }}<span style="margin-left: 20px">驱动：{{ formobj.driveFormValue }}<span style="margin-left: 20px">功能：{{ formobj.vehicleTypeValue }}<span style="margin-left: 20px">马力：{{ formobj.powerValue }}</span></span></span></span></div>--> |
||||
|
<div class="headtitle_con"> |
||||
|
<div class="headtitle"> |
||||
|
{{ formobj.vehicleAlias }} |
||||
|
<div class="headtitle_jia">销售指导价:<span>{{guidedPrice}} 万元</span></div> |
||||
|
<div class="icon_sty" @click="changeDown(false)" v-show="isDown"> |
||||
|
<i class="el-icon-arrow-down"/> |
||||
|
<span>展开</span> |
||||
|
</div> |
||||
|
<div class="icon_sty" @click="changeUp(true)" v-show="!isDown"> |
||||
|
<i class="el-icon-arrow-up"/> |
||||
|
<span>收起</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>品牌</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.brandName }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>功能</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.vehicleTypeValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>系列</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.productLineValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>驱动</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.driveFormValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<div class="span-sty"><span>马力</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.powerValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>版本</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.vehicleVersionValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>燃料</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.fuelTypeValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<div class="span-sty"><span>变速箱</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.gearboxTypeValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div class="more_content" v-show="!isDown"> |
||||
|
<div class="headline">车型信息</div> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>排放标准</span></div> |
||||
|
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.emissionStandardValue }}</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>发动机型号</span></div> |
||||
|
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.engineTypeValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>细分市场</span></div> |
||||
|
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.marketSegmentsValue }}</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>规格型号</span></div> |
||||
|
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.specifications }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<div class="span-sty"><span>系别</span></div> |
||||
|
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.departmentValue }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="headline">常用配置</div> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>颜色</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.carColor }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>缓速器</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.slowMachine }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>后视镜</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.rearViewMirror }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>轮胎</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.tireSize }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<div class="span-sty"><span>驾驶室</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.specification }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>后桥速比</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.rearAxleRatio }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>空调</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.airConditioner }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>轮毂材质</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.hubMaterial }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>导流罩</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.baffleModel }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<div class="span-sty"><span>悬架</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.suspension }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>座椅</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.seat }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>护轮罩</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.tireCover }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>鞍座</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.saddle }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>轴距</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.wheelbase }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<div class="span-sty"><span>保险杠</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.bumper }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>配置包</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.configuringBao }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>独立热源</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.independentSources }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>燃料箱</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.fuelTank }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<div class="span-sty"><span>多媒体</span></div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.multimedia }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<!-- <div class="span-sty"><span>货箱</span></div>--> |
||||
|
<!-- <el-form-item><span class="addinputInfo">{{ formobj.packingCase }}</span></el-form-item>--> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="headline"> |
||||
|
更多配置 |
||||
|
<div class="icon_sty" @click="changeDownOtherConfig(false)" v-show="isDownOther"> |
||||
|
<i class="el-icon-arrow-down"/> |
||||
|
<span>展开</span> |
||||
|
</div> |
||||
|
<div class="icon_sty" @click="changeUpOtherConfig(true)" v-show="!isDownOther"> |
||||
|
<i class="el-icon-arrow-up"/> |
||||
|
<span>收起</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-row v-show="!isDownOther"> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item>{{ formobj.otherConfig }}</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { selectExiCarConfig } from '@/api/vehicleModel/vehicleconfiguration.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'chexingpeizhibiaozhun', |
||||
|
props:{ |
||||
|
params: { |
||||
|
type: Object, |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
FormLoading: false, |
||||
|
priceValidity: '', |
||||
|
guidedPrice:'', |
||||
|
formobj: {}, |
||||
|
isDown: true, |
||||
|
isDownOther: true, |
||||
|
sid_list: { |
||||
|
modelSid: '', |
||||
|
configSid: '', |
||||
|
vehModelConfigSid:'', |
||||
|
userSid: window.sessionStorage.getItem('userSid') |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
params: { |
||||
|
deep: true, |
||||
|
immediate: false, |
||||
|
handler(newVal, oldVal) { |
||||
|
console.log('子组件接受的props数据if判断外', newVal) |
||||
|
if (newVal.configSid !== '' && newVal.modelSid !== ''){ |
||||
|
console.log('子组件接受的props数据', newVal) |
||||
|
if (newVal.guidedPrice !== '' || newVal.guidedPrice !== null){ |
||||
|
const guidedPrice_two = parseFloat(Number(newVal.guidedPrice) / 10000).toFixed(2) |
||||
|
this.guidedPrice = guidedPrice_two |
||||
|
} |
||||
|
selectExiCarConfig({ |
||||
|
modelSid:newVal.modelSid, |
||||
|
configSid:newVal.configSid, |
||||
|
vehModelConfigSid:newVal.vehModelConfigSid |
||||
|
}).then((response) => { |
||||
|
this.FormLoading = false |
||||
|
if (response.success) { |
||||
|
this.formobj = response.data |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
showClose: true, |
||||
|
message: '查看失败！', |
||||
|
type: 'error' |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}else { |
||||
|
this.formobj = {} |
||||
|
this.guidedPrice = '' |
||||
|
} |
||||
|
// this.files = newVal |
||||
|
// console.log('aaaa2', this.files) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
this.tempDate.sid = this.$route.query.sid |
||||
|
}, |
||||
|
// 控制标题展开和收起 |
||||
|
changeDown(val) { |
||||
|
this.isDown = val |
||||
|
}, |
||||
|
changeUp(val) { |
||||
|
this.isDown = val |
||||
|
}, |
||||
|
// 控制更多配置展开和收起 |
||||
|
changeDownOtherConfig(val) { |
||||
|
this.isDownOther = val |
||||
|
}, |
||||
|
changeUpOtherConfig(val) { |
||||
|
this.isDownOther = val |
||||
|
}, |
||||
|
// ----------------------------------方法-------------------- |
||||
|
// 查看 |
||||
|
showInfo(row) { |
||||
|
this.FormLoading = true |
||||
|
this.sid_list.modelSid = row.modelSid |
||||
|
this.sid_list.configSid = row.modelConfigSid |
||||
|
this.sid_list.vehModelConfigSid = row.vehModelConfigSid |
||||
|
if (row.guidedPrice !== '' || row.guidedPrice !== null){ |
||||
|
const guidedPrice_two = parseFloat(Number(row.guidedPrice) / 10000).toFixed(2) |
||||
|
this.guidedPrice = guidedPrice_two |
||||
|
} |
||||
|
selectExiCarConfig(this.sid_list).then((response) => { |
||||
|
this.FormLoading = false |
||||
|
if (response.success) { |
||||
|
this.formobj = response.data |
||||
|
|
||||
|
} else { |
||||
|
this.$notify({ |
||||
|
title: '失败', |
||||
|
message: '查询失败', |
||||
|
type: 'error' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
/* 标题头部的样式 */ |
||||
|
.headtitle { |
||||
|
padding: 9px; |
||||
|
font-weight: bold; |
||||
|
font-size: 20px; |
||||
|
background-color: #0294d7; |
||||
|
text-align: left; |
||||
|
color: #ffffff; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
/* 内容头部的样式 */ |
||||
|
.headline { |
||||
|
padding: 9px; |
||||
|
/*font-weight: bold;*/ |
||||
|
font-size: 16px; |
||||
|
background-color: #0294d7; |
||||
|
text-align: left; |
||||
|
color: #ffffff; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
/* 标题中内容的样式 */ |
||||
|
.formaddcopy02 .headtitle_con .span-sty { |
||||
|
font-size: 16px; |
||||
|
width: 88px; |
||||
|
} |
||||
|
|
||||
|
.formaddcopy02 .headtitle_con .addinputInfo { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
/* 内容部分中内容的样式 */ |
||||
|
.formaddcopy02 .more_content .span-sty { |
||||
|
font-size: 16px; |
||||
|
width: 88px; |
||||
|
} |
||||
|
|
||||
|
.formaddcopy02 .more_content /deep/ .el-form-item__content { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.formaddcopy02 .headtitle_con .headtitle .icon_sty .el-icon-arrow-down, .el-icon-arrow-up { |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* 标题部分的展开与收起按钮*/ |
||||
|
.formaddcopy02 .headtitle_con .headtitle .icon_sty { |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
font-size: 14px; |
||||
|
top: 14px; |
||||
|
right: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* 销售指导价的样式 */ |
||||
|
.formaddcopy02 .headtitle_con .headtitle .headtitle_jia { |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
right: 70px; |
||||
|
color: #d00000; |
||||
|
} |
||||
|
|
||||
|
/* 内容部分的展开与收起按钮 */ |
||||
|
.formaddcopy02 .headline .icon_sty { |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
font-size: 14px; |
||||
|
font-weight: bolder; |
||||
|
right: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* 更多配置一行的内边距 */ |
||||
|
.formaddcopy02 .more_content /deep/ .el-col-24 { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 更多配置一行的行高 */ |
||||
|
.formaddcopy02 .more_content .el-col-24 /deep/ .el-form-item__content { |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue