|
@@ -0,0 +1,412 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="OEM查询"
|
|
|
+ :visible="show"
|
|
|
+ width="80vw"
|
|
|
+ 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"
|
|
|
+ :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"
|
|
|
+ :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="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"
|
|
|
+ :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="twoSpan(scope.row)">{{ scope.row.caption }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="vin_11" show-overflow-tooltip label="车型"></el-table-column>
|
|
|
+ <el-table-column prop="engine_prefix" show-overflow-tooltip label="发动机"></el-table-column>
|
|
|
+ <el-table-column prop="trans" show-overflow-tooltip label="变速箱"></el-table-column>
|
|
|
+ <el-table-column prop="area" show-overflow-tooltip label="地区"></el-table-column>
|
|
|
+ <el-table-column prop="equips" show-overflow-tooltip label="配置"></el-table-column>
|
|
|
+ <el-table-column prop="grade" show-overflow-tooltip label="级别"></el-table-column>
|
|
|
+ <el-table-column prop="model_code" show-overflow-tooltip label="模型代码"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </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"
|
|
|
+ :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="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"
|
|
|
+ :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="twoSpan(scope.row)">{{ scope.row.caption }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="vin_11" show-overflow-tooltip label="车型"></el-table-column>
|
|
|
+ <el-table-column prop="engine_prefix" show-overflow-tooltip label="发动机"></el-table-column>
|
|
|
+ <el-table-column prop="trans" show-overflow-tooltip label="变速箱"></el-table-column>
|
|
|
+ <el-table-column prop="area" show-overflow-tooltip label="地区"></el-table-column>
|
|
|
+ <el-table-column prop="equips" show-overflow-tooltip label="配置"></el-table-column>
|
|
|
+ <el-table-column prop="grade" show-overflow-tooltip label="级别"></el-table-column>
|
|
|
+ <el-table-column prop="model_code" show-overflow-tooltip label="模型代码"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </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"
|
|
|
+ :max-height="childrenHeight"
|
|
|
+ stripe border style="width: 100%">
|
|
|
+ <el-table-column prop="caption" show-overflow-tooltip 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="caption" show-overflow-tooltip label="名称"></el-table-column>
|
|
|
+ <el-table-column prop="group" show-overflow-tooltip 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',],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ radioType:'0',
|
|
|
+ oem:'',
|
|
|
+ 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:'',
|
|
|
+ token:'',
|
|
|
+ param:'',
|
|
|
+ threeTime:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ id(val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.childrenHeight = this.$refs.oemBox.offsetHeight -100
|
|
|
+ console.log(this.childrenHeight)
|
|
|
+ }, 500)
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.childrenHeight = this.$refs.oemBox.offsetHeight -100
|
|
|
+ console.log(this.childrenHeight)
|
|
|
+ }, 500)
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ threeSpan(item){
|
|
|
+ var token=item.token;
|
|
|
+ var param=item.param;
|
|
|
+ var data={
|
|
|
+ token:token,param:param,threeTime:this.threeTime
|
|
|
+ }
|
|
|
+ this.$emit('update:show', false)
|
|
|
+ this.$emit('done',data)
|
|
|
+ },
|
|
|
+ twoSpan(item){
|
|
|
+ this.token=item.token;
|
|
|
+ this.param=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.token,
|
|
|
+ param: this.param,
|
|
|
+ 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
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message: res.data.message,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('????111')
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ keyup(){
|
|
|
+ setTimeout(() => {
|
|
|
+ this.childrenHeight = this.$refs.oemBox.offsetHeight -100
|
|
|
+ console.log(this.childrenHeight)
|
|
|
+ }, 500)
|
|
|
+ this.tableOneShow=true;
|
|
|
+ console.log(this.oem);
|
|
|
+ fetchGet('/advancedEpc/findPartsPc', {
|
|
|
+ keyword:this.oem,
|
|
|
+ epc_id: this.id,
|
|
|
+ }).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)
|
|
|
+ this.$emit('update:id', '')
|
|
|
+
|
|
|
+ },
|
|
|
+ getDetail() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ .oemTopdiv{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .radioBox{
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-right: 40px;
|
|
|
+ }
|
|
|
+ .oemBox{
|
|
|
+ width: 100%;
|
|
|
+ height: 60vh;
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
+</style>
|