epcPc/src/page/oem.vue

<template>
  <el-dialog
    title="OEM查询"
    :visible="show"
    width="86vw"
    class="create-dialog"
    @close="close"
  >
  <div class="oemTop">
     <!-- <el-radio-group v-model="radioType" @change="changeradio" class="radioBox">
        <el-radio label="0">品牌下搜索</el-radio>
        <el-radio label="1">车型下搜索</el-radio>
      </el-radio-group> -->
      <div class="oemTopdiv">
        <input type="text" v-model="oem" placeholder="配件名称/原厂OEM" class="vinsearch" @keyup.enter="keyup">
        <div class="oemssBtn" @click="keyup">查询</div>
      </div>
  </div>

  <div class="oemBox" ref="oemBox">
     <div class="tableBoxOne" ref="tableBoxOne" v-if="tableOneShow">
       <div class="tableTile">
         <div class="sx"></div>
         <div class="leftTitle">搜索结果</div>
       </div>
       <div class="tableBoxOnediv">
          <el-table
              class="el-table"
              :data="rows" size='mini'
              :max-height="childrenHeight"
              stripe   border
              style="width: 100%">
              <el-table-column
                prop="extened"
                label="零件号"
                >
                <template slot-scope="scope">
                      <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="caption"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="description"
                show-overflow-tooltip
                label="适用车型">
              </el-table-column>

            </el-table>
       </div>
     </div>
     <div class="tableBoxOne tableBoxTwo" v-if="tableTwoShow">
       <div class="tableBoxLeft">
         <div class="tableTile">
           <div class="sx"></div><div class="leftTitle">搜索结果</div>
         </div>
         <div class="tableBoxOnediv">
            <el-table
                class="el-table" :data="rows" size='mini'
                :max-height="childrenHeight"
                stripe   border style="width: 100%">
                <el-table-column prop="extened" label="零件号">
                  <template slot-scope="scope">
                        <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="caption" label="名称"></el-table-column>
                <el-table-column prop="description"  label="适用车型"></el-table-column>

              </el-table>
         </div>
       </div>
       <div class="tableBoxRigt">
         <div class="tableTile">
           <div class="sx"></div><div class="leftTitle">适用车型</div>
         </div>
         <div class="tableBoxOnediv" style="padding-left: 15px;">
            <el-table
                class="el-table" :data="carList" size='mini'
                :max-height="childrenHeight-32"
                stripe   border style="width: 100%">
                <el-table-column prop="extened" label="名称">
                  <template slot-scope="scope">
                        <span style="color: #3F90F7;cursor: pointer;" @click="twoSpan(scope.row)">{{ scope.row.caption }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="vin_11"  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 style="padding-top: 10px;">
                <el-pagination
                  :current-page.sync="currentPage"
                   :page-size="50"
                  layout="total,prev, pager, next"
                  :total="total_page"
                  background="background"
                  @current-change="handleCurrentChange"
                />
              </div>

         </div>
       </div>
     </div>
     <!-- 第三级别-->
     <div class="tableBoxOne tableBoxTwo" v-if="tabthreeSHow">
       <div class="tableBoxLeftThree">
         <div class="tableTile">
           <div class="sx"></div><div class="leftTitle">搜索结果</div>
         </div>
         <div class="tableBoxOnediv">
            <el-table
                class="el-table" :data="rows" size='mini'
                :max-height="childrenHeight"
                stripe   border style="width: 100%">
                <el-table-column prop="extened" label="零件号">
                  <template slot-scope="scope">
                        <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="caption" label="名称"></el-table-column>
                <el-table-column prop="description"  label="适用车型"></el-table-column>

              </el-table>
         </div>
       </div>
       <div class="tableBoxM">
         <div class="tableTile">
           <div class="sx"></div><div class="leftTitle">适用车型</div>
         </div>
         <div class="tableBoxOnediv" style="padding-left: 15px;">
            <el-table
                class="el-table" :data="carList" size='mini'
                :max-height="childrenHeight-35"
                stripe   border style="width: 100%">
                <el-table-column prop="extened" label="名称">
                  <template slot-scope="scope">
                        <span style="color: #3F90F7;cursor: pointer;" @click="twoSpan(scope.row)">{{ scope.row.caption }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="vin_11"  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 style="padding-top: 10px;">
              <el-pagination
                  :current-page.sync="currentPage"
                   :page-size="50"
                  layout="total,prev, pager, next"
                  :total="total_page"
                  background="background"
                  @current-change="handleCurrentChange"
                />
              </div>
         </div>
       </div>
       <div class="tableBoxRigtThree">
         <div class="tableTile">
           <div class="sx"></div><div class="leftTitle">搜索结果</div>
         </div>
         <div class="tableBoxOnediv" style="padding-left: 15px;">
            <el-table
                class="el-table" :data="itemList" size='mini'
                :max-height="childrenHeight"
                stripe   border style="width: 100%">
                 <el-table-column prop="caption"  label="子组"></el-table-column>
                <el-table-column prop="extened" label="零件号">
                  <template slot-scope="scope">
                        <span style="color: #3F90F7;cursor: pointer;" @click="threeSpan(scope.row)">{{ scope.row.partnum }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="name"  label="名称"></el-table-column>
                <el-table-column prop="group"  label="总组"></el-table-column>
              </el-table>
         </div>
       </div>
     </div>
  </div>



  </el-dialog>
</template>
<script>
import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
export default {

  props: ['show', 'id','param','token','vin'],
  data() {
    return {
         radioType:'0',
         oem:'16400RZDH01',
         childrenHeight:'',
         // rows:[{
         //   caption: "进气压力传感器",
         //   description: "C14 CP1 CP2 CP3 CR1 CR2 CR4 CR6 CU1 CU2 CU5 CU6",
         //   extened: "37830-RNA-A01",
         //   param: "JBL24RL8XZ0iYM0_U3Cgbjy9zvi2jFiynuAh_Fuxz2H",
         //   partnum: "37830RNAA01",
         //   token: "e806381430f79274a3418f55ad496dbe",
         //   type: "item",
         // }],
         rows:'',
         tableOneShow:false,
         tableTwoShow:false,
         tabthreeSHow:false,
         partnum:'',
         carList:'',
         itemList:'',
         access_time:'',
         tokenom:'',
         paramom:'',
         threeTime:'',
         total_page:'',
         currentPage:1,
         total:'',
         background:'#FF4F00'
    }
  },
  watch: {
    // id(val) {
    //   setTimeout(() => {
    //       this.childrenHeight = this.$refs.oemBox.offsetHeight -80
    //      console.log(this.childrenHeight)
    //   }, 500)

    // }
  },
  created() {
    setTimeout(() => {
        this.childrenHeight = this.$refs.oemBox.offsetHeight -80
       console.log(this.childrenHeight)
    }, 500)

  },
  methods: {
    handleSizeChange(){

    },
    handleCurrentChange(){
      console.log(this.currentPage)
      this.getfindApplicableModelsPage()
    },
    eliminate(){
      this.tableOneShow=false
      this.tableTwoShow=false
      this.tabthreeSHow=false
      this.rows='';
      this.carList='';
      this.itemList='';
      this.oem='16400RZDH01';
    },
    threeSpan(item){
      var tokenom=item.token;
      var paramom=item.param;
      var data={
        token:tokenom,param:paramom,threeTime:this.threeTime,
        group:item.group,childrengroup:item.caption

      }
      this.$emit('update:show', false)
      this.$emit('done',data)
    },
    twoSpan(item){
      this.tokenom=item.token;
      this.paramom=item.param;
      this.getfindInModel()
    },

    oneSpan(item){
      console.log(item);
      this.partnum=item.partnum
      this.getfindApplicableModels();
    },
    getfindInModel(){ //3级
      fetchGet('/advancedEpc/findInModelPc', {
        partnum:this.partnum,
        epc_id: this.id,
        token: this.tokenom,
        param: this.paramom,
        access_time: this.access_time,
       }).then(res => {
         if(res.data.number==200||res.data.number==5212){
           this.threeTime=res.data.result.access_time;
           this.tableOneShow=false;
           this.tableTwoShow=false;
           this.tabthreeSHow=true;
           this.itemList=res.data.result.list
         }else{
           this.$message({
                  message: res.data.message,
                  type: 'warning'
            });
         }
       }).catch(err => {})
    },
    getfindApplicableModels(){  //2级
      fetchGet('/advancedEpc/findApplicableModelsPc', {
        partnum:this.partnum,
         epc_id: this.id,
       }).then(res => {
         if(res.data.number==200||res.data.number==5212){
           this.tableOneShow=false;
           this.tableTwoShow=true;
           this.access_time=res.data.result.access_time;
           this.carList=res.data.result.list
           this.total_page=res.data.result.total_count;
           //sthis.total_page=100;
           if(this.total_page>1){
             // this.getfindApplicableModelsPage()
           }
         }else{
           this.$message({
                  message: res.data.message,
                  type: 'warning'
            });
         }

       }).catch(err => {
          console.log('？？？？111')

       })
    },
    getfindApplicableModelsPage(){

        fetchGet('/advancedEpc/findApplicableModelsPc', {
          partnum:this.partnum,
           epc_id: this.id,
           page:this.currentPage,
         }).then(res => {
           if(res.data.number==200||res.data.number==5212){
             //this.access_time=res.data.result.access_time;
           //  var carList=res.data.result.list;
            // this.carList=this.carList.concat(carList)
            this.carList=res.data.result.list;
           }else{
           }

         }).catch(err => {

         })

    },
    keyup(){    //45022-S10
      setTimeout(() => {
          this.childrenHeight = this.$refs.oemBox.offsetHeight -80
         console.log(this.childrenHeight)
      }, 500)
      this.tableOneShow=true;
      this.tableTwoShow=false;
      this.tabthreeSHow=false;
        console.log(this.oem);
        fetchGet('/advancedEpc/findPartsPc', {
          keyword:this.oem,
           epc_id: this.id,
           // token: this.token,
           // param: this.param,
           // vin:this.vin
         }).then(res => {
           if(res.data.number==200||res.data.number==5212){
               this.rows=res.data.result.list
           }else{
             this.$message({
                    message: res.data.message,
                    type: 'warning'
              });
           }

         }).catch(err => {
            console.log('？？？？111')

         })
    },
   changeradio(){

   },
    close() {

      this.$emit('update:show', false)

    },
    getDetail() {

    },


  }

}
</script>
<style scoped>
  .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;
   cursor: pointer;
 }
 .oemTopdiv{
   display: flex;
 }
 .radioBox{
   padding-top: 10px;
   padding-right: 40px;
 }
 .el-dialog{
   margin-top: 10vh !important;
 }
 .oemBox{
   width: 100%;
   height: 70vh;
   border-radius: 4px;
   border: 1px solid #EEEEEE;
   margin-top: 20px;
 }
 .tableTile{
   display: flex;
 }
 .sx{
   width: 3px;
   height: 12px;
   background: #FF4F00;
   margin-top: 18px;margin-left: 14px;
 }
 .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%;

 }
 .tableBoxRigtThree{
   width: 33.3%;
 }
 .tableBoxM{
    width: 33.3%;
 }
 .tableBoxLeftThree{
   width: 33.3%;
 }
 .el-dialog__body{
   padding: 0 20px !important;
 }
</style>