Zhao Qiqi
3 years ago
26 changed files with 824 additions and 890 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,357 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="listconadd"> |
|||
<el-form ref="dataForm" :model="formobj" class="formaddcopy02"> |
|||
<!-- <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/vehicleconfiguration/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) { |
|||
if (newVal.configSid !== '' && newVal.modelSid !== ''){ |
|||
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 = '' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 控制标题展开和收起 |
|||
changeDown(val) { |
|||
this.isDown = val |
|||
}, |
|||
changeUp(val) { |
|||
this.isDown = val |
|||
}, |
|||
// 控制更多配置展开和收起 |
|||
changeDownOtherConfig(val) { |
|||
this.isDownOther = val |
|||
}, |
|||
changeUpOtherConfig(val) { |
|||
this.isDownOther = val |
|||
} |
|||
} |
|||
} |
|||
</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> |
|||
@ -1,19 +1,30 @@ |
|||
.el-table { |
|||
.el-table__header{ |
|||
tr th{ |
|||
.el-table__header { |
|||
tr th { |
|||
background: #edf1f7; |
|||
color: #333333; |
|||
padding: 8px 0; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-describe{ |
|||
.el-table { |
|||
.el-table__body { |
|||
tr td { |
|||
padding: 6px 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-describe { |
|||
border: 1px solid #dfe4ed; |
|||
border-bottom: 0px solid #dfe4ed; |
|||
h4{ |
|||
border-bottom: 0 solid #dfe4ed; |
|||
|
|||
h4 { |
|||
float: left; |
|||
margin: 0; |
|||
line-height: 34px; |
|||
padding:0 15px; |
|||
padding: 0 15px; |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue