车辆详情，零件详情

src/page/carInfo.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-dialog
+    title="车型信息"
+    :visible="show"
+    width="86vw"
+    class="create-dialog"
+    @close="close"
+  >
+   <div class="carBox" v-if="carInfoData">
+     <div class="carLIne" v-for="(item,index) in carInfoData.tree[0].views" :class="{nob:index==carInfoData.tree[0].views.length-1}">
+       <div class="carTitle">{{item.title}}</div>
+       <div class="carLineInfo">
+         <div class="carlineline" v-for="(v,index2) in item.content">
+           <div class="carlineLeft">{{v.k}}:</div>
+           <div class="carLineRight">{{v.v}}</div>
+         </div>
+       </div>
+     </div>
+
+   </div>
+
+
+
+  </el-dialog>
+</template>
+<script>
+import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
+export default {
+
+  props: ['show', 'carInfoData'],
+  data() {
+    return {
+       leftIndex:2,
+       tableList:[],
+       childrenHeight:'',
+    }
+  },
+  watch: {
+
+  },
+  created() {
+
+
+  },
+  methods: {
+     close() {
+
+       this.$emit('update:show', false)
+
+     },
+
+  }
+
+}
+</script>
+<style >
+.el-dialog__body{
+   padding: 0 20px !important;
+ }
+ .el-dialog{
+   margin-top: 10vh !important;
+ }
+ .carBox{
+   max-height: 60vh;
+   overflow-y: auto;
+   padding-bottom: 20px;
+ }
+.carlineline{
+  display: flex;
+}
+.carTitle{
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;padding-top: 10px;padding-bottom: 10px;
+}
+.carlineLeft{
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+}
+.carLineRight{
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  padding-left: 10px;
+}
+.carLineInfo{
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #DDDDDD;
+  padding-bottom: 10px;
+}
+.carlineline{
+  width: 33.3%;padding-top: 10px;padding-bottom: 10px;
+}
+.nob .carLineInfo{
+  border: none;
+}
+</style>

src/page/index.vue

@@ -18,7 +18,7 @@
      <div class="toConfigure">
        <span v-if="carConfigName">  车辆配置：<span class="span1">{{carConfigName}}> </span></span>
         车型: <span class="span1" v-if="!description">{{brand_name?brand_name:'--'}}</span>
-             <span class="span1" v-if="description">{{description}}</span>
+             <span class="span1" @click="carCK" v-if="description" style="cursor: pointer;">{{description}}</span>
        <span class="s1"> {{navfName}}：<span class="span1">{{zzName}}></span></span>
        <span class="s2" v-if="navchildrenNameTitle">{{navchildrenNameTitle}}：<span class="span1">{{navchildrenName?navchildrenName:'--'}}</span></span>
        <span class="s3" v-if="restrainTitleTwo">{{restrainTitleTwo}}:<span class="span1">{{zkName2?zkName2:'--'}}></span></span>
@@ -196,7 +196,7 @@
                   label="零件号" align="center"
                  >
                  <template slot-scope="scope">
-                       <span style="color: #606266;" @click="threeSpan(scope.row)">{{ scope.row.partnum[0] }}</span>
+                       <span style="color:#3F90F7;cursor: pointer;" @click="threeSpan(scope.row)">{{ scope.row.partnum[0] }}</span>
                  </template>
                 </el-table-column>
                 <el-table-column
@@ -219,8 +219,8 @@
                   prop="price" align="center"
                   label="4S价">
                   <template slot-scope="scope">
-                        <span style="color: red;cursor: pointer;    text-align: right;
-    display: block;" @click="threeSpan(scope.row)">￥{{ scope.row.price }}</span>
+                        <span style="color: red;    text-align: right;
+    display: block;" >￥{{ scope.row.price }}</span>
                   </template>
                 </el-table-column>
               </el-table>
@@ -228,16 +228,20 @@
       </div>
      </div>
      <oem  ref="childoem" :show.sync="oemFlag" @done="getOemDetail" :param='param' :token='token' :vin='vin' :id.sync="epc_id"></oem>
+     <part ref="childrenPart" :show.sync="partFlag" :epc_id='epc_id' :partnum="partnum" :threeData='threeData'></part>
+     <carInfo  ref="childrencar" :show.sync="carFlag" :carInfoData="carInfoData"></carInfo>
   </div>
 </template>
 
 <script>
 import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
 import oem from './oem'
+import part from './part'
+import carInfo from './carInfo'
 export default {
   name: 'index',
   components: {
-    oem
+    oem,part,carInfo
   },
   data () {
     return {
@@ -296,6 +300,11 @@ export default {
        lastName:'',
        firstShow:true,
        description:'',
+       partFlag:false,
+       partnum:'',
+       threeData:'',
+       carFlag:true,
+       carInfoData:'',
     }
   },
   computed:{
@@ -309,6 +318,17 @@ export default {
     this.keyup()
   },
   methods:{
+    carCK(){
+      console.log(this.carInfoData)
+      this.carFlag=true;
+    },
+    threeSpan(e){
+      console.log(e);
+      this.threeData=e;
+      this.partnum=e.partnum[0]
+      this.partFlag=true;
+      this.$refs.childrenPart.getinfoPc(this.partnum);
+    },
     getOemDetail(e){
       console.log(e);
       this.oemData=e
@@ -388,7 +408,8 @@ export default {
                 this.carConfigName=''
                 this.getSubgroupPc();
                 if(res.data.result.vehicle.description){
-                  this.description=res.data.result.vehicle.description
+                  this.description=res.data.result.vehicle.description;
+                  this.carInfoData=res.data.result.vehicle
                 }
               }
          }else{
@@ -431,7 +452,8 @@ export default {
                    this.param=this.zlist[0].param;
                    this.token=this.zlist[0].token;
                    if(res.data.result.vehicle.description){
-                     this.description=res.data.result.vehicle.description
+                     this.description=res.data.result.vehicle.description;
+                     this.carInfoData=res.data.result.vehicle
                    }
                    //this.navchildrenName=this.zlist[0].caption
                    this.getSubgroupPc()

src/page/part.vue

@@ -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>