oem.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. <template>
  2. <el-dialog
  3. title="OEM查询"
  4. :visible="show"
  5. width="86vw"
  6. class="create-dialog"
  7. @close="close"
  8. >
  9. <div class="oemTop">
  10. <!-- <el-radio-group v-model="radioType" @change="changeradio" class="radioBox">
  11. <el-radio label="0">品牌下搜索</el-radio>
  12. <el-radio label="1">车型下搜索</el-radio>
  13. </el-radio-group> -->
  14. <div class="oemTopdiv">
  15. <input type="text" v-model="oem" placeholder="配件名称/原厂OEM" class="vinsearch" @keyup.enter="keyup">
  16. <div class="oemssBtn" @click="keyup">查询</div>
  17. </div>
  18. </div>
  19. <div class="oemBox" ref="oemBox">
  20. <div class="tableBoxOne" ref="tableBoxOne" v-if="tableOneShow">
  21. <div class="tableTile">
  22. <div class="sx"></div>
  23. <div class="leftTitle">搜索结果</div>
  24. </div>
  25. <div class="tableBoxOnediv">
  26. <el-table
  27. class="el-table"
  28. :data="rows" size='mini'
  29. :max-height="childrenHeight"
  30. stripe border
  31. style="width: 100%">
  32. <el-table-column
  33. prop="extened"
  34. label="零件号"
  35. >
  36. <template slot-scope="scope">
  37. <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
  38. </template>
  39. </el-table-column>
  40. <el-table-column
  41. prop="caption"
  42. label="名称">
  43. </el-table-column>
  44. <el-table-column
  45. prop="description"
  46. show-overflow-tooltip
  47. label="适用车型">
  48. </el-table-column>
  49. </el-table>
  50. </div>
  51. </div>
  52. <div class="tableBoxOne tableBoxTwo" v-if="tableTwoShow">
  53. <div class="tableBoxLeft">
  54. <div class="tableTile">
  55. <div class="sx"></div><div class="leftTitle">搜索结果</div>
  56. </div>
  57. <div class="tableBoxOnediv">
  58. <el-table
  59. class="el-table" :data="rows" size='mini'
  60. :max-height="childrenHeight"
  61. stripe border style="width: 100%">
  62. <el-table-column prop="extened" label="零件号">
  63. <template slot-scope="scope">
  64. <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
  65. </template>
  66. </el-table-column>
  67. <el-table-column prop="caption" label="名称"></el-table-column>
  68. <el-table-column prop="description" label="适用车型"></el-table-column>
  69. </el-table>
  70. </div>
  71. </div>
  72. <div class="tableBoxRigt">
  73. <div class="tableTile">
  74. <div class="sx"></div><div class="leftTitle">适用车型</div>
  75. </div>
  76. <div class="tableBoxOnediv" style="padding-left: 15px;">
  77. <el-table
  78. class="el-table" :data="carList" size='mini'
  79. :max-height="childrenHeight-32"
  80. stripe border style="width: 100%">
  81. <el-table-column prop="extened" label="名称">
  82. <template slot-scope="scope">
  83. <span style="color: #3F90F7;cursor: pointer;" @click="twoSpan(scope.row)">{{ scope.row.caption }}</span>
  84. </template>
  85. </el-table-column>
  86. <el-table-column prop="vin_11" label="车型"></el-table-column>
  87. <el-table-column prop="engine_prefix" label="发动机"></el-table-column>
  88. <el-table-column prop="trans" label="变速箱"></el-table-column>
  89. <el-table-column prop="area" label="地区"></el-table-column>
  90. <el-table-column prop="equips" label="配置"></el-table-column>
  91. <el-table-column prop="grade" label="级别"></el-table-column>
  92. <el-table-column prop="model_code" label="模型代码"></el-table-column>
  93. </el-table>
  94. <div style="padding-top: 10px;">
  95. <el-pagination
  96. :current-page.sync="currentPage"
  97. :page-size="50"
  98. layout="total,prev, pager, next"
  99. :total="total_page"
  100. background="background"
  101. @current-change="handleCurrentChange"
  102. />
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <!-- 第三级别-->
  108. <div class="tableBoxOne tableBoxTwo" v-if="tabthreeSHow">
  109. <div class="tableBoxLeftThree">
  110. <div class="tableTile">
  111. <div class="sx"></div><div class="leftTitle">搜索结果</div>
  112. </div>
  113. <div class="tableBoxOnediv">
  114. <el-table
  115. class="el-table" :data="rows" size='mini'
  116. :max-height="childrenHeight"
  117. stripe border style="width: 100%">
  118. <el-table-column prop="extened" label="零件号">
  119. <template slot-scope="scope">
  120. <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
  121. </template>
  122. </el-table-column>
  123. <el-table-column prop="caption" label="名称"></el-table-column>
  124. <el-table-column prop="description" label="适用车型"></el-table-column>
  125. </el-table>
  126. </div>
  127. </div>
  128. <div class="tableBoxM">
  129. <div class="tableTile">
  130. <div class="sx"></div><div class="leftTitle">适用车型</div>
  131. </div>
  132. <div class="tableBoxOnediv" style="padding-left: 15px;">
  133. <el-table
  134. class="el-table" :data="carList" size='mini'
  135. :max-height="childrenHeight-35"
  136. stripe border style="width: 100%">
  137. <el-table-column prop="extened" label="名称">
  138. <template slot-scope="scope">
  139. <span style="color: #3F90F7;cursor: pointer;" @click="twoSpan(scope.row)">{{ scope.row.caption }}</span>
  140. </template>
  141. </el-table-column>
  142. <el-table-column prop="vin_11" label="车型"></el-table-column>
  143. <el-table-column prop="engine_prefix" label="发动机"></el-table-column>
  144. <el-table-column prop="trans" label="变速箱"></el-table-column>
  145. <el-table-column prop="area" label="地区"></el-table-column>
  146. <el-table-column prop="equips" label="配置"></el-table-column>
  147. <el-table-column prop="grade" label="级别"></el-table-column>
  148. <el-table-column prop="model_code" label="模型代码"></el-table-column>
  149. </el-table>
  150. <div style="padding-top: 10px;">
  151. <el-pagination
  152. :current-page.sync="currentPage"
  153. :page-size="50"
  154. layout="total,prev, pager, next"
  155. :total="total_page"
  156. background="background"
  157. @current-change="handleCurrentChange"
  158. />
  159. </div>
  160. </div>
  161. </div>
  162. <div class="tableBoxRigtThree">
  163. <div class="tableTile">
  164. <div class="sx"></div><div class="leftTitle">搜索结果</div>
  165. </div>
  166. <div class="tableBoxOnediv" style="padding-left: 15px;">
  167. <el-table
  168. class="el-table" :data="itemList" size='mini'
  169. :max-height="childrenHeight"
  170. stripe border style="width: 100%">
  171. <el-table-column prop="caption" label="子组"></el-table-column>
  172. <el-table-column prop="extened" label="零件号">
  173. <template slot-scope="scope">
  174. <span style="color: #3F90F7;cursor: pointer;" @click="threeSpan(scope.row)">{{ scope.row.partnum }}</span>
  175. </template>
  176. </el-table-column>
  177. <el-table-column prop="name" label="名称"></el-table-column>
  178. <el-table-column prop="group" label="总组"></el-table-column>
  179. </el-table>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </el-dialog>
  185. </template>
  186. <script>
  187. import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
  188. export default {
  189. props: ['show', 'id','param','token','vin'],
  190. data() {
  191. return {
  192. radioType:'0',
  193. oem:'16400RZDH01',
  194. childrenHeight:'',
  195. // rows:[{
  196. // caption: "进气压力传感器",
  197. // description: "C14 CP1 CP2 CP3 CR1 CR2 CR4 CR6 CU1 CU2 CU5 CU6",
  198. // extened: "37830-RNA-A01",
  199. // param: "JBL24RL8XZ0iYM0_U3Cgbjy9zvi2jFiynuAh_Fuxz2H",
  200. // partnum: "37830RNAA01",
  201. // token: "e806381430f79274a3418f55ad496dbe",
  202. // type: "item",
  203. // }],
  204. rows:'',
  205. tableOneShow:false,
  206. tableTwoShow:false,
  207. tabthreeSHow:false,
  208. partnum:'',
  209. carList:'',
  210. itemList:'',
  211. access_time:'',
  212. tokenom:'',
  213. paramom:'',
  214. threeTime:'',
  215. total_page:'',
  216. currentPage:1,
  217. total:'',
  218. background:'#FF4F00'
  219. }
  220. },
  221. watch: {
  222. // id(val) {
  223. // setTimeout(() => {
  224. // this.childrenHeight = this.$refs.oemBox.offsetHeight -80
  225. // console.log(this.childrenHeight)
  226. // }, 500)
  227. // }
  228. },
  229. created() {
  230. setTimeout(() => {
  231. this.childrenHeight = this.$refs.oemBox.offsetHeight -80
  232. console.log(this.childrenHeight)
  233. }, 500)
  234. },
  235. methods: {
  236. handleSizeChange(){
  237. },
  238. handleCurrentChange(){
  239. console.log(this.currentPage)
  240. this.getfindApplicableModelsPage()
  241. },
  242. eliminate(){
  243. this.tableOneShow=false
  244. this.tableTwoShow=false
  245. this.tabthreeSHow=false
  246. this.rows='';
  247. this.carList='';
  248. this.itemList='';
  249. this.oem='16400RZDH01';
  250. },
  251. threeSpan(item){
  252. var tokenom=item.token;
  253. var paramom=item.param;
  254. var data={
  255. token:tokenom,param:paramom,threeTime:this.threeTime,
  256. group:item.group,childrengroup:item.caption
  257. }
  258. this.$emit('update:show', false)
  259. this.$emit('done',data)
  260. },
  261. twoSpan(item){
  262. this.tokenom=item.token;
  263. this.paramom=item.param;
  264. this.getfindInModel()
  265. },
  266. oneSpan(item){
  267. console.log(item);
  268. this.partnum=item.partnum
  269. this.getfindApplicableModels();
  270. },
  271. getfindInModel(){ //3级
  272. fetchGet('/advancedEpc/findInModelPc', {
  273. partnum:this.partnum,
  274. epc_id: this.id,
  275. token: this.tokenom,
  276. param: this.paramom,
  277. access_time: this.access_time,
  278. }).then(res => {
  279. if(res.data.number==200||res.data.number==5212){
  280. this.threeTime=res.data.result.access_time;
  281. this.tableOneShow=false;
  282. this.tableTwoShow=false;
  283. this.tabthreeSHow=true;
  284. this.itemList=res.data.result.list
  285. }else{
  286. this.$message({
  287. message: res.data.message,
  288. type: 'warning'
  289. });
  290. }
  291. }).catch(err => {})
  292. },
  293. getfindApplicableModels(){ //2级
  294. fetchGet('/advancedEpc/findApplicableModelsPc', {
  295. partnum:this.partnum,
  296. epc_id: this.id,
  297. }).then(res => {
  298. if(res.data.number==200||res.data.number==5212){
  299. this.tableOneShow=false;
  300. this.tableTwoShow=true;
  301. this.access_time=res.data.result.access_time;
  302. this.carList=res.data.result.list
  303. this.total_page=res.data.result.total_count;
  304. //sthis.total_page=100;
  305. if(this.total_page>1){
  306. // this.getfindApplicableModelsPage()
  307. }
  308. }else{
  309. this.$message({
  310. message: res.data.message,
  311. type: 'warning'
  312. });
  313. }
  314. }).catch(err => {
  315. console.log('????111')
  316. })
  317. },
  318. getfindApplicableModelsPage(){
  319. fetchGet('/advancedEpc/findApplicableModelsPc', {
  320. partnum:this.partnum,
  321. epc_id: this.id,
  322. page:this.currentPage,
  323. }).then(res => {
  324. if(res.data.number==200||res.data.number==5212){
  325. //this.access_time=res.data.result.access_time;
  326. // var carList=res.data.result.list;
  327. // this.carList=this.carList.concat(carList)
  328. this.carList=res.data.result.list;
  329. }else{
  330. }
  331. }).catch(err => {
  332. })
  333. },
  334. keyup(){ //45022-S10
  335. setTimeout(() => {
  336. this.childrenHeight = this.$refs.oemBox.offsetHeight -80
  337. console.log(this.childrenHeight)
  338. }, 500)
  339. this.tableOneShow=true;
  340. this.tableTwoShow=false;
  341. this.tabthreeSHow=false;
  342. console.log(this.oem);
  343. fetchGet('/advancedEpc/findPartsPc', {
  344. keyword:this.oem,
  345. epc_id: this.id,
  346. // token: this.token,
  347. // param: this.param,
  348. // vin:this.vin
  349. }).then(res => {
  350. if(res.data.number==200||res.data.number==5212){
  351. this.rows=res.data.result.list
  352. }else{
  353. this.$message({
  354. message: res.data.message,
  355. type: 'warning'
  356. });
  357. }
  358. }).catch(err => {
  359. console.log('????111')
  360. })
  361. },
  362. changeradio(){
  363. },
  364. close() {
  365. this.$emit('update:show', false)
  366. },
  367. getDetail() {
  368. },
  369. }
  370. }
  371. </script>
  372. <style scoped>
  373. .oemTop{
  374. display: flex;
  375. width: 100%;
  376. }
  377. .vinsearch{
  378. width: 400px;
  379. height: 34px;
  380. background: #FFFFFF;
  381. border-radius: 4px;
  382. border: 1px solid #DDDDDD;
  383. line-height:34px;
  384. padding-left: 10px;
  385. font-size: 14px;
  386. font-family: PingFangSC-Regular, PingFang SC;
  387. font-weight: 400;
  388. color: #666666;
  389. outline: none;
  390. }
  391. .oemssBtn{
  392. width: 72px;
  393. height: 38px;
  394. background: #FF4F00;
  395. border-radius: 0px 4px 4px 0px;
  396. font-weight: 400;
  397. color: #FFFFFF;
  398. font-size: 14px;
  399. line-height: 34px;
  400. text-align: center;
  401. margin-left: -2px;
  402. position: relative;
  403. cursor: pointer;
  404. }
  405. .oemTopdiv{
  406. display: flex;
  407. }
  408. .radioBox{
  409. padding-top: 10px;
  410. padding-right: 40px;
  411. }
  412. .el-dialog{
  413. margin-top: 10vh !important;
  414. }
  415. .oemBox{
  416. width: 100%;
  417. height: 70vh;
  418. border-radius: 4px;
  419. border: 1px solid #EEEEEE;
  420. margin-top: 20px;
  421. }
  422. .tableTile{
  423. display: flex;
  424. }
  425. .sx{
  426. width: 3px;
  427. height: 12px;
  428. background: #FF4F00;
  429. margin-top: 18px;margin-left: 14px;
  430. }
  431. .leftTitle{
  432. line-height: 48px;
  433. font-weight: 500;
  434. color: #333333;
  435. font-size: 14px;
  436. padding-left: 8px;
  437. }
  438. .tableBoxTwo{
  439. display: flex;
  440. justify-content: space-between;
  441. }
  442. .tableBoxLeft{
  443. width: 50%;
  444. }
  445. .tableBoxRigt{
  446. width: 50%;
  447. }
  448. .tableBoxRigtThree{
  449. width: 33.3%;
  450. }
  451. .tableBoxM{
  452. width: 33.3%;
  453. }
  454. .tableBoxLeftThree{
  455. width: 33.3%;
  456. }
  457. .el-dialog__body{
  458. padding: 0 20px !important;
  459. }
  460. </style>