777

src/page/carCk.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="carCkbox" v-if="show">
-     <div class="brandsBox" ref="brandsBox">
+     <div class="brandsBox" ref="brandsBox" v-if="brandsBoxShow">
        <div class="mainLeft" >
          <div class="mainLeftTop">
            <div class="sx"></div>
@@ -56,7 +56,76 @@
        </div>
 
      </div>
+     <div class="carzzBox brandsBox" v-if="carzzShow" ref="firstBox2">
+       <!-- 车辆配置应该不会有-->
+       <!-- <div class="mainLeft" v-if="carConfig">
+         <div class="mainLeftTop">
+           <div class="sx"></div>
+           <div class="leftTitle">选择车辆配置</div>
+         </div>
+         <div class="mainLeftLineBox">
+           <div class="lineName" v-for="(item,index) in restrains" @click="carConfigClick(index,item)"
+           :class="{mainLeftLineActive:carConfigIndex==index}">{{item.combine_cp}}</div>
+         </div>
+
+       </div> -->
+         <!-- 动态 -->
+         <div class="mainLeft" v-for="(i,index) in carpzList">
+           <div class="mainLeftTop">
+             <div class="sx"></div>
+             <div class="leftTitle">{{i.caption}}</div>
+           </div>
+           <div class="mainLeftLineBox">
+             <div class="lineName"  :class="{mainLeftLineActive:captionlist[index]==item.caption}"
+              v-for="(item,index2) in i.list" @click="morez(item,index,i.time)" v-html="item.caption">{{item.caption}}</div>
+           </div>
+         </div>
+         <div class="mainRight2" v-if="restrainShow3">
+           <div class="mainRightTop">
+             <div class="sx2"></div>
+             <div class="mainRightTopTitle">子组</div>
+             <!-- <div class="childrensearchBox">
+               <input type="text" v-model="childrenss" class="childrensearchInput" placeholder="搜索子组"  @keyup.enter="childrenkeyup">
+               <img src="../assets/icon_search@2x.png" alt="" class="childrensearchImg"  @click="childrenkeyup">
+             </div> -->
+           </div>
+           <div class="mainRightCont">
+             <div class="mainRightLine2" v-for="(item,index) in childrenList" @click="childrenClick(item,index)">
+               <div class="mainRightLineImgBox">
+                 <img class="mainRightLineImg" v-if="item.image_url" :src="item.image_url.split('').reverse().join('').replace(/09/, '023').split('').reverse().join('')" alt="">
+                 <img src="../assets/noImg.png" alt="" v-else class="mainRightLineNOImg">
+               </div>
+               <div class="mainRightLineMsBox">
+                 <div class="mainRightLineName" >{{item.caption | re}}</div>
+                 <div class="mainRightLineZm">组号：{{item.group_no}}</div>
+                 <div class="mainRightLineRemarks">备注：{{item.remark | re}}</div>
+               </div>
+             </div>
+           </div>
+
+         </div>
+     </div>
     </div>
+
+
+    <el-dialog
+      title="选择品牌"
+      :visible="bshow"
+      width="80vw"
+      class="create-dialog"
+      @close="bclose"
+    >
+
+     <div>
+       <div >
+         <div class="tktitleStrBox"> <div class="tktitleStr" v-for="item in brandList"> {{item.titleStr}}</div></div>
+
+       </div>
+
+     </div>
+    </el-dialog>
+
+
   </div>
 
 </template>
@@ -89,6 +158,19 @@ export default {
        cxShow:false,
        cxTime:'',
        combineCplist:[],
+       brandsBoxShow:true,
+       carzzShow:false,
+       carpzList:[],
+       restrains:'',
+       carConfigIndex:-1,
+       configTime:'',
+       carConfig:false,
+       restrainShow3:false,
+       childrenList:'',
+       oldList:'',
+       ltime:'',
+       captionlist:[],
+       bshow:false,
     }
   },
   watch: {
@@ -99,6 +181,132 @@ export default {
 
   },
   methods: {
+    childrenClick(item,index){
+
+      var data={
+        token:item.token,param:item.param,threeTime:this.access_time,
+        group:item.group,childrengroup:item.caption,epc_id:this.epc_id
+
+      }
+      this.$emit('update:show', false)
+      this.$emit('cxpart',data)
+    },
+    bclose(){
+      this.bshow=false;
+    },
+    morez(item,index,time){
+      this.captionlist[index]=item.caption;
+      this.captionlist=this.captionlist.splice(0,index+1)
+      if(item.next_restrain==1||index==0){
+        fetchGet('/advancedEpc/getSubgroupPc', {
+          access_time:time,
+          param:item.param,
+          token:item.token,
+          epc_id: this.epc_id,
+         }).then(res => {
+           console.log(res.data.number);
+           if(res.data.number==200||res.data.number==5212){
+                if(index + 2 > this.carpzList.length){
+                  var obj={
+                    time:res.data.result.access_time,
+                    list:res.data.result.list,
+                    caption:res.data.result.caption
+                  }
+                  this.carpzList.push(obj)
+                }else{
+                  var obj={
+                    time:res.data.result.access_time,
+                    list:res.data.result.list,
+                    caption:res.data.result.caption
+                  }
+                  this.carpzList=this.carpzList.splice(0,index+1)
+                  this.$set(this.carpzList, index+1, obj)
+                }
+               // setTimeout(() => {
+               //   console.log(this.$refs.firstBox2.scrollWidth)
+               //    this.$refs.firstBox2.scrollLeft = this.$refs.firstBox2.scrollWidth
+               // }, 500);
+           }else{
+             this.$message({
+                    message: res.data.message,
+                    type: 'warning'
+              });
+           }
+           }).catch(err => {
+
+
+           })
+      }else{
+        fetchGet('/advancedEpc/getSubgroupPc', {
+
+          access_time:time,
+          param:item.param,
+          token:item.token,
+           epc_id: this.epc_id,
+         }).then(res => {
+           console.log(res.data.number);
+           if(res.data.number==200||res.data.number==5212){
+                 this.access_time=res.data.result.access_time;
+                   this.restrainShow3=true;
+                   this.childrenList=res.data.result.list;
+                  // this.zkName3=res.data.result.caption;
+                   //console.log(this.zkName1)
+                   this.oldList=this.childrenList;
+                 setTimeout(() => {
+                   console.log(this.$refs.firstBox2.scrollWidth)
+                    this.$refs.firstBox2.scrollLeft = this.$refs.firstBox2.scrollWidth
+                 }, 500);
+           }else{
+             this.$message({
+                    message: res.data.message,
+                    type: 'warning'
+              });
+           }
+           }).catch(err => {
+
+
+           })
+      }
+
+    },
+    getModelGroup(data){
+      this.brandsBoxShow=false;
+      this.carzzShow=true;
+      this.carpzList=[];
+      fetchGet('advancedEpc/getModelGroupPc', {
+      	token: data.token,
+      	param: data.param,
+      	epc_id: this.epc_id,
+      	access_time: data.time
+      }, 'GET').then(res => {
+      	//console.log(res.data.number);
+      	if (res.data.number == 200 || res.data.number == 5212) {
+      		this.configTime = res.data.result.access_time;
+      		this.epc_id = res.data.result.epc_id;
+      		if(res.data.result.restrains.length>0){
+      		  this.restrains=res.data.result.restrains;
+      		  this.carConfig=true;
+
+      		}else{
+      		 var obj={
+      		   time:res.data.result.access_time,
+      		   list:res.data.result.list,
+      		   caption:res.data.result.caption
+      		 }
+      		 this.carpzList.push(obj);
+
+      		}
+
+      	} else {
+           this.$message({
+                  message: res.data.message,
+                  type: 'warning'
+            });
+
+      	}
+
+      });
+    },
     brandCk(item){  //点击品牌
       this.brandName=item.brand;
       this.epc_id=item.epc_id;
@@ -161,7 +369,8 @@ export default {
           brand_name:this.brandName,
           description:this.modelname,
         }
-        this.$emit('done',data)
+        //this.$emit('done',data)
+        this.getModelGroup(data)
       }
 
 
@@ -215,6 +424,10 @@ export default {
     },
     getBrands(){ //品牌
         this.cxShow=false;
+        this.brandsBoxShow=true;
+        this.bshow=true;
+        this.carzzShow=false;
+        this.carpzList=[];
          this.pzList=[];
          this.modelname='';
          this.brandName='';
@@ -318,6 +531,92 @@ export default {
 }
 </script>
 <style scoped>
+  .tktitleStrBox{
+    display: flex;
+  }
+  .tktitleStr{
+      width: 26px;
+      height: 26px;
+      text-align: center;
+      line-height: 26px;
+      color: #999;
+      font-weight: bold;
+          margin: 0 8px;
+          cursor: pointer!important;
+  }
+  .mainRight2 .mainRightLine2{
+   width: 200px;
+   border-radius: 4px;
+   border: 1px solid #EEEEEE;
+   margin: 1vw;
+   cursor: pointer;
+  }
+  .mainRight2{
+    height: calc(100vh - 150px );
+    width: calc(100% - 600px );
+    border-radius: 4px;
+    border: 1px solid #EEEEEE;
+    margin-left: 20px;
+    overflow: auto;
+       flex-shrink: 0
+  }
+  .mainRightLineNOImg{
+    width: 100%;
+    height: 100%;
+  }
+  .mainRightTopTitle{
+     line-height: 34px;font-weight: 500;font-size: 14px;
+  color: #333333;padding-left: 10px;padding-right: 20px;
+   }
+  .mainRightLineImgBox {
+    /*图片容器宽高各220px，容器水平居中，图片水平垂直居中*/
+    width: 100%;
+    height: 180px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #EEEEEE;
+    overflow: hidden;
+  }
+  .mainRightLineImg {
+    /*图片宽高各200px*/
+   width: 100%;
+
+  }
+  .mainRightCont{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .mainRightLineMsBox{
+    padding-left: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  .mainRightLineName{
+    font-size: 14px;font-weight: 500;color: #333333;
+    width: calc(100% - 30px);
+    word-wrap: break-word; /*强制换行*/
+      overflow: hidden; /*超出隐藏*/
+      text-overflow: ellipsis;/*隐藏后添加省略号*/
+      white-space: nowrap;/*强制不换行*/
+  }
+  .mainRightLineZm{
+    font-size: 12px;font-weight: 400;color: #999999;padding-top: 4px;
+    width: calc(100% - 30px);
+    word-wrap: break-word; /*强制换行*/
+      overflow: hidden; /*超出隐藏*/
+      text-overflow: ellipsis;/*隐藏后添加省略号*/
+      white-space: nowrap;/*强制不换行*/
+  }
+  .mainRightLineRemarks{
+    font-size: 12px;font-weight: 400;color: #999999;padding-top: 4px;
+    width: calc(100% - 30px);
+    word-wrap: break-word; /*强制换行*/
+      overflow: hidden; /*超出隐藏*/
+      text-overflow: ellipsis;/*隐藏后添加省略号*/
+      white-space: nowrap;/*强制不换行*/
+  }
   .brandsBox{
     display: flex;
     overflow-x: auto;

src/page/index.vue

@@ -254,7 +254,7 @@
      <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>
-     <carCk :show.sync="carCkShow" ref="childrencarCk" @done="carckhl" @brandCk="brandCkFn"></carCk>
+     <carCk :show.sync="carCkShow" ref="childrencarCk" @done="carckhl" @brandCk="brandCkFn" @cxpart="cxpartFn"></carCk>
   </div>
 </template>
 
@@ -408,7 +408,7 @@ export default {
     	}, 'GET').then(res => {
     		//console.log(res.data.number);
     		if (res.data.number == 200 || res.data.number == 5212) {
-    			this.access_time = res.data.result.access_time;
+    			this.zzTime = res.data.result.access_time;
     			this.epc_id = res.data.result.epc_id;
     			if(res.data.result.restrains.length>0){
     			  this.restrains=res.data.result.restrains;
@@ -500,6 +500,16 @@ export default {
       this.zzName=e.group
       this.getPartsPc2()
     },
+    cxpartFn(e){
+      console.log(e);
+      this.vin=''
+      this.oemData=e;
+      this.lastName=e.childrengroup;
+      this.navfName='总组'
+      this.zzName=e.group
+      this.epc_id=e.epc_id
+      this.getPartsPc2()
+    },
     oemClick(){
       if(this.brand_name){
          this.oemFlag=true;
@@ -1024,7 +1034,8 @@ export default {
         vin:this.vin,
         access_time:this.oemData.threeTime,
         param:this.oemData.param,
-        token:this.oemData.token
+        token:this.oemData.token,
+        epc_id: this.epc_id,
        }).then(res => {
 
          if(res.data.number==200||res.data.number==5212){