anrui/anrui-scm/anrui-scm-ui/src/components/VehicleConfigurationSub/vehicleconfiguration.vue

<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/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) {
        if (newVal.configSid !== '' && newVal.modelSid !== ''){
          this.guidedPrice = newVal.guidedPrice
          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>