¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div style="height: 100%;width: 100%"> |
| | | <el-card class="box-card" > |
| | | <el-form :model="queryParams" ref="queryForm" :inline="true" > |
| | | <el-form-item label="è½´å称:" prop="axisName" > |
| | | <el-input |
| | | style="width: 160px" |
| | | v-model="queryParams.axisName" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="é¢å称:" prop="neckName" > |
| | | <el-input |
| | | style="width: 160px" |
| | | v-model="queryParams.neckName" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="ç¦å称:" prop="tileName" > |
| | | <el-input |
| | | style="width: 160px" |
| | | v-model="queryParams.tileName" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | <el-col :span="20"> |
| | | <el-card class="box-card" > |
| | | <el-form :model="queryParams" ref="queryForm" :inline="true" > |
| | | <el-form-item label="ç®±ä½ç :" prop="scanObject1" > |
| | | <el-input |
| | | style="" |
| | | v-model="queryParams.scanObject1" |
| | | placeholder="请è¾å
¥ç®±ä½ç " |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="æ²è½´ç :" prop="scanObject2" > |
| | | <el-input |
| | | style="" |
| | | v-model="queryParams.scanObject2" |
| | | placeholder="请è¾å
¥æ²è½´ç " |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card class="box-card" > |
| | | <el-form :model="queryParams" ref="queryForm" :inline="true" > |
| | | <el-form-item style="margin-left: 1%"> |
| | | <el-button type="primary" icon="el-icon-refresh" @click="handleQuery">æ¥è¯¢</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="24" > |
| | | <el-card class="bottom-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <i class="el-icon-tickets"></i> |
| | | <span style="font-weight: bold">å½å产åä¿¡æ¯</span> |
| | | </div> |
| | | <el-descriptions :column="1" :label-style="{'font-size': '20px'}" border :content-style="{'min-width': '300px'}"> |
| | | <el-descriptions-item label="æºå"> |
| | | <span>{{queryParams.productSeries}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="ç®±ä½ç "> |
| | | <span>{{queryParams.scanObject1}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="æ²è½´ç "> |
| | | <span>{{queryParams.scanObject2}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="è½´å称"> |
| | | <span>{{queryParams.axisName}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="é¢å称"> |
| | | <span>{{queryParams.neckName}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="ç¦å称"> |
| | | <span>{{queryParams.tileName}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="é
ç¦é¢è²"> |
| | | <span :style="{ backgroundColor: queryParams.tileColor }">{{queryParams.tileColor}}</span> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | <el-divider></el-divider> |
| | | </el-card> |
| | | </el-col> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import VueQr from 'vue-qr' |
| | | import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules"; |
| | | export default { |
| | | name: "index", |
| | | dicts: ['colour_hex'], |
| | | components: { |
| | | VueQr, |
| | | }, |
| | | data(){ |
| | | return{ |
| | | loading: true, |
| | | tileMatchKbList: [], |
| | | qrCode: '', |
| | | // æ¥è¯¢åæ° |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | productSeries: null, |
| | | scanObject1: 'P0SQ0-01FZ01-1000;T231224116;DBBBBA', |
| | | scanObject2: 'P0SQ0-041000-1002;T2312020675;DAABBA;S500003', |
| | | axisName: 'ä¸é´ä¸»è½´å', |
| | | neckName: 'ä¸é´ä¸»è½´é¢', |
| | | tileName: 'ä¸å¿ä¸»è½´ç¦', |
| | | axisParameterNoPosition: null, |
| | | neckParameterPosition: null, |
| | | axisValue: null, |
| | | neckValue: null, |
| | | tileColor: null, |
| | | createUser: null, |
| | | updateUser: null, |
| | | state: null, |
| | | }, |
| | | } |
| | | }, |
| | | methods:{ |
| | | |
| | | /** æç´¢æé®æä½ */ |
| | | handleQuery() { |
| | | this.axisValueextracted(); |
| | | this.neckValueextracted(); |
| | | this.productSeriesextracted(); |
| | | this.getList(); |
| | | this.$message(response.row.tileColor) |
| | | }, |
| | | axisValueextracted() { |
| | | // åç®±ä½ç 第ä¸æ®µä¸ºé
ç¦å¼ |
| | | const parts1 = this.queryParams.scanObject1.split(";"); |
| | | if (parts1.length >= 3) { |
| | | const axisValueextracted = parts1[2].substring(3,4); |
| | | return this.queryParams.axisValue= axisValueextracted; |
| | | } |
| | | }, |
| | | neckValueextracted() { |
| | | //åæ²è½´ç 第ä¸æ®µä¸ºé
ç¦å¼ |
| | | const parts2 = this.queryParams.scanObject2.split(";"); |
| | | if (parts2.length >= 3) { |
| | | const neckValueextracted = parts2[2].substring(3,4); |
| | | return this.queryParams.neckValue= neckValueextracted; |
| | | } |
| | | }, |
| | | productSeriesextracted() { |
| | | const parts3 =this.queryParams.scanObject2.split(";"); |
| | | if(parts3.length >= 3) { |
| | | const productSeriesextracted = parts3[0].substring(1, 5); |
| | | return this.queryParams.productSeries = productSeriesextracted; |
| | | } |
| | | }, |
| | | getList() { |
| | | let queryParams = { |
| | | productSeries : this.queryParams.productSeries, |
| | | axisName : this.queryParams.axisName, |
| | | neckName : this.queryParams.neckName, |
| | | tileName : this.queryParams.tileName, |
| | | axisValue: this.queryParams.axisValue, |
| | | neckValue: this.queryParams.neckValue, |
| | | } |
| | | console.log(queryParams) |
| | | listTileMatchRules(queryParams).then(response => { |
| | | this.queryParams.tileColor = response.rows[0].tileColor; |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | ::v-deep .el-form-item__label{ |
| | | font-size: large; |
| | | } |
| | | ::v-deep .el-card__body{ |
| | | padding: 15px 20px 0px 20px; |
| | | } |
| | | ::v-deep .el-input .el-input--medium .el-input--suffix{ |
| | | width: 200px; |
| | | } |
| | | |
| | | </style> |