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