|
@@ -2,12 +2,71 @@
|
|
|
<el-dialog
|
|
|
title="OEM零件详情"
|
|
|
:visible="show"
|
|
|
- width="80vw"
|
|
|
+ width="86vw"
|
|
|
class="create-dialog"
|
|
|
@close="close"
|
|
|
>
|
|
|
+ <div class="partBox">
|
|
|
+ <div class="partLeft" ref="partLeft">
|
|
|
+ <div class="partLine" :class="{leftActive:leftIndex==1}" @click="tabck(1)">配件信息</div>
|
|
|
+ <div class="partLine" :class="{leftActive:leftIndex==2}" @click="tabck(2)">EPC车型(共999条)</div>
|
|
|
+ </div>
|
|
|
+ <div class="partRight" v-if="leftIndex==1">
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">零件编号</div>
|
|
|
+ <div class="rightTxt">{{mesData.partsnum}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">名称</div>
|
|
|
+ <div class="rightTxt">{{mesData.caption}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">位置</div>
|
|
|
+ <div class="rightTxt">{{threeData.refernum}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">用量</div>
|
|
|
+ <div class="rightTxt">{{threeData.qty}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">备注</div>
|
|
|
+ <div class="rightTxt">{{mesData.remark}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">英文名称</div>
|
|
|
+ <div class="rightTxt"></div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">适用车型代码</div>
|
|
|
+ <div class="rightTxt"></div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">是否颜色配件</div>
|
|
|
+ <div class="rightTxt"></div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLine">
|
|
|
+ <div class="rightTitle">4S价格</div>
|
|
|
+ <div class="rightTxt">¥{{threeData.price}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="partRight" v-if="leftIndex==2">
|
|
|
+ <el-table
|
|
|
+ class="el-table" :data="tableList" size='mini'
|
|
|
+ :max-height="childrenHeight"
|
|
|
+ stripe border style="width: 100%">
|
|
|
+ <el-table-column prop="caption" label="名称"></el-table-column>
|
|
|
+ <el-table-column prop="vin_11" label="车型"></el-table-column>
|
|
|
+ <el-table-column prop="year" label="年份"></el-table-column>
|
|
|
+ <el-table-column prop="engine_prefix" label="发动机"></el-table-column>
|
|
|
+ <el-table-column prop="trans" label="变速箱"></el-table-column>
|
|
|
+ <el-table-column prop="area" label="地区"></el-table-column>
|
|
|
+ <el-table-column prop="equips" label="配置"></el-table-column>
|
|
|
+ <el-table-column prop="grade" label="级别"></el-table-column>
|
|
|
+ <el-table-column prop="model_code" label="模型代码"></el-table-column>
|
|
|
|
|
|
-
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
|
|
@@ -17,10 +76,14 @@
|
|
|
import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
|
|
|
export default {
|
|
|
|
|
|
- props: ['show', 'id','param','token','vin'],
|
|
|
+ props: ['show', 'epc_id','partnum','threeData','vin'],
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ leftIndex:1,
|
|
|
+ tableList:[],
|
|
|
+ childrenHeight:'',
|
|
|
+ mesData:'',
|
|
|
+ modelsData:'',
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -31,95 +94,107 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ getinfoPc(num){
|
|
|
+ fetchGet('/advancedEpc/generalEpc/infoPc', {
|
|
|
+ epc_id: this.epc_id,
|
|
|
+ partsnum: num
|
|
|
+ }).then(res => {
|
|
|
+ if(res.data.number==200||res.data.number==5212){
|
|
|
+ this.mesData=res.data.result
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message: res.data.message,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err => {})
|
|
|
+ setTimeout(() => {
|
|
|
+ this.childrenHeight = this.$refs.partLeft.offsetHeight;
|
|
|
+ console.log(this.childrenHeight)
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ getfindApplicableModels(){
|
|
|
+ fetchGet('/advancedEpc/findApplicableModelsPc', {
|
|
|
+ epc_id: this.epc_id,
|
|
|
+ partnum: this.partnum
|
|
|
+ }).then(res => {
|
|
|
+ if(res.data.number==200||res.data.number==5212){
|
|
|
+ this.tableList=res.data.result.list
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message: res.data.message,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err => {})
|
|
|
+ },
|
|
|
+ tabck(num){
|
|
|
+ this.leftIndex=num;
|
|
|
+
|
|
|
+ if(num==2){
|
|
|
+ this.getfindApplicableModels()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+
|
|
|
+ this.$emit('update:show', false)
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style >
|
|
|
- .oemTop{
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-.vinsearch{
|
|
|
- width: 400px;
|
|
|
- height: 34px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #DDDDDD;
|
|
|
- line-height:34px;
|
|
|
- padding-left: 10px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-.oemssBtn{
|
|
|
- width: 72px;
|
|
|
- height: 38px;
|
|
|
- background: #FF4F00;
|
|
|
- border-radius: 0px 4px 4px 0px;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 34px;
|
|
|
- text-align: center;
|
|
|
- margin-left: -2px;
|
|
|
- position: relative;
|
|
|
+.el-dialog__body{
|
|
|
+ padding: 0 20px !important;
|
|
|
}
|
|
|
- .oemTopdiv{
|
|
|
- display: flex;
|
|
|
+ .el-dialog{
|
|
|
+ margin-top: 10vh !important;
|
|
|
}
|
|
|
- .radioBox{
|
|
|
- padding-top: 10px;
|
|
|
- padding-right: 40px;
|
|
|
+ .partBox{
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 20px;
|
|
|
}
|
|
|
- .oemBox{
|
|
|
- width: 100%;
|
|
|
+ .partLeft{
|
|
|
+ width: 258px;
|
|
|
height: 60vh;
|
|
|
+ background: #FFFFFF;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid #EEEEEE;
|
|
|
- margin-top: 20px;
|
|
|
}
|
|
|
- .tableTile{
|
|
|
- display: flex;
|
|
|
+ .leftActive{
|
|
|
+ background: #FDF9E6;
|
|
|
}
|
|
|
- .sx{
|
|
|
- width: 3px;
|
|
|
- height: 12px;
|
|
|
- background: #FF4F00;
|
|
|
- margin-top: 18px;margin-left: 14px;
|
|
|
+ .partLine{
|
|
|
+ line-height: 38px;padding-left: 14px;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .leftTitle{
|
|
|
- line-height: 48px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- font-size: 14px;
|
|
|
- padding-left: 8px;
|
|
|
- }
|
|
|
- .tableBoxTwo{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .tableBoxLeft{
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- .tableBoxRigt{
|
|
|
- width: 50%;
|
|
|
+ .partRight{
|
|
|
+ width: calc(86vw - 300px);
|
|
|
+ height: 60vh;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ margin-left: 16px;
|
|
|
|
|
|
}
|
|
|
- .tableBoxRigtThree{
|
|
|
- width: 33.3%;
|
|
|
- }
|
|
|
- .tableBoxM{
|
|
|
- width: 33.3%;
|
|
|
+ .rightLine{
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 14px;
|
|
|
}
|
|
|
- .tableBoxLeftThree{
|
|
|
- width: 33.3%;
|
|
|
+ .rightTitle{
|
|
|
+ width: 130px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
- .el-dialog__body{
|
|
|
- padding: 0 20px !important;
|
|
|
+ .rightTxt{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
</style>
|