yxt_develop
/
anrui
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善车型简介--查看车型配置标准页面时字段排序和样式

master
yunuo970428 2 years ago
parent
1fa65db5a9
commit
57d1349f06
1 changed files with 196 additions and 293 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 489
      anrui-buscenter/anrui-buscenter-ui/src/components/VehicleConfigurationSub/vehicleconfiguration.vue

489
anrui-buscenter/anrui-buscenter-ui/src/components/VehicleConfigurationSub/vehicleconfiguration.vue
View File

@ -2,193 +2,173 @@
<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 class="title" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
<div>{{ formobj.vehicleAlias }}</div>
<div>销售指导价:<span>{{guidedPrice}} 万元</span></div>
</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.rearAxleValue }}</span></el-form-item>
</el-col>
<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="4">
<div class="span-sty"><span>导流罩</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.baffleModel }}</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.suspension }}</span></el-form-item>
</el-col>
<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="4">
<div class="span-sty"><span>轴距</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.wheelbase }}</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.bumper }}</span></el-form-item>
</el-col>
<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="4">
<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>
<el-row>
<el-col :span="5" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<div class="span-sty"><span>燃料</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.fuelTypeValue }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>排放标准</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.emissionStandardValue }}</span>
</el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>发动机型号</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.engineTypeValue }}</span></el-form-item>
</el-col>
<el-col :span="4" class="tlineheightb">
<div class="span-sty"><span>变速箱类型</span></div>
<el-form-item><span class="addinputInfo"></span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>变速箱</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.gearboxTypeValue }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>细分市场</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.marketSegmentsValue }}</span>
</el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>规格型号</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.specifications }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>系别</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.departmentValue }}</span></el-form-item>
</el-col>
<el-col :span="4" class="tlineheightb">
</el-col>
</el-row>
<div class="title">常用配置</div>
<el-row>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>后桥</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.rearAxleValue }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<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" class="tlineheightb">
<div class="span-sty"><span>轴距</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.wheelbase }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>悬架</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.suspension }}</span></el-form-item>
</el-col>
<el-col :span="4" class="tlineheightb">
<div class="span-sty"><span>鞍座</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.saddle }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="tlineheightb">
<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" class="tlineheightb">
<div class="span-sty"><span>驾驶室</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.specification }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>保险杠</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.bumper }}</span></el-form-item>
</el-col>
<el-col :span="5" class="tlineheightb">
<div class="span-sty"><span>燃料箱</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.fuelTank }}</span></el-form-item>
</el-col>
<el-col :span="4" class="tlineheightb">
<div class="span-sty"><span>导流罩</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.baffleModel }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<div class="span-sty"><span>后视镜</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.rearViewMirror }}</span></el-form-item>
</el-col>
<el-col :span="4" class="tlineheightb">
<div class="span-sty"><span>轮胎</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.tireSize }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<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" class="tlineheightb">
<div class="span-sty"><span>配置包</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.configuringBao }}</span></el-form-item>
</el-col>
</el-row>
<div class="title">
更多配置
</div>
<el-row>
<el-col :span="24">
<el-form-item>{{ formobj.otherConfig }}</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
@ -198,39 +178,39 @@
import { selectExiCarConfig } from '@/api/vehicleconfiguration/vehicleconfiguration.js'
export default {
name: 'chexingpeizhibiaozhun',
props:{
name: 'CheXingPeiZhiBiaoZhun',
props: {
params: {
type: Object,
type: Object
}
},
data() {
return {
FormLoading: false,
priceValidity: '',
guidedPrice:'',
guidedPrice: '',
formobj: {},
isDown: true,
isDownOther: true,
sid_list: {
modelSid: '',
configSid: '',
vehModelConfigSid:'',
vehModelConfigSid: '',
userSid: window.sessionStorage.getItem('userSid')
}
}
},
watch:{
watch: {
params: {
deep: true,
immediate: false,
handler(newVal, oldVal) {
if (newVal.configSid !== '' && newVal.modelSid !== ''){
if (newVal.configSid !== '' && newVal.modelSid !== '') {
this.guidedPrice = newVal.guidedPrice
selectExiCarConfig({
modelSid:newVal.modelSid,
configSid:newVal.configSid,
vehModelConfigSid:newVal.vehModelConfigSid
modelSid: newVal.modelSid,
configSid: newVal.configSid,
vehModelConfigSid: newVal.vehModelConfigSid
}).then((response) => {
this.FormLoading = false
if (response.success) {
@ -240,10 +220,10 @@ export default {
showClose: true,
message: '查看失败！',
type: 'error'
});
})
}
})
}else {
} else {
this.formobj = {}
this.guidedPrice = ''
}
@ -251,108 +231,31 @@ export default {
}
},
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;
.span-sty {
width: 80px !important;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
/* 销售指导价的样式 */
.formaddcopy02 .headtitle_con .headtitle .headtitle_jia {
display: inline-block;
position: absolute;
right: 70px;
/*color: #d00000;*/
.addinputInfo {
margin-left: 70px !important;
}
/* 内容部分的展开与收起按钮 */
.formaddcopy02 .headline .icon_sty {
display: inline-block;
position: absolute;
font-size: 14px;
font-weight: bolder;
right: 10px;
text-align: center;
cursor: pointer;
.tlineheightb {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
/* 更多配置一行的内边距 */
.formaddcopy02 .more_content /deep/ .el-col-24 {
padding: 20px;
}
/* 更多配置一行的行高 */
.formaddcopy02 .more_content .el-col-24 /deep/ .el-form-item__content {
line-height: 28px;
/deep/ .tlineheightb .el-form-item .el-form-item__content .addinputInfo {
line-height: 15px !important;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
</style>

Write Preview
Loading…
Cancel
Save