春风项目四线(合箱线、总装线)
yyt
2024-06-03 5030f3d30ccc1bd16db371c6970a48103aff9191
提交 | 用户 | 时间
1c7036 1 <template>
Y 2   <div class="app-container">
3     <div style="width: 100%">
4       <el-card class="box-card" >
5         <el-form :model="from" size="large" :inline="true" label-width="68px" @submit.native.prevent>
6           <el-form-item label-width="200" label="平衡轴码" :prop="from.scanObject2"  style="align-content: center">
7             <input v-model="from.scanObject2"
8                    ref="inputdata"
9                    style="height: 39px; width: 300px"
10                    placeholder="请输入平衡轴码"
11             />
12           </el-form-item>
13         </el-form>
14         <el-form :model="from" ref="queryForm" :inline="true" >
15           <el-form-item  label="机型:" prop="productSeries" >
16             <el-select v-model="from.productSeries" placeholder="" clearable   style="width: 105px">
17               <el-option
18
19                 v-for="dict in dict.type.productseries"
20                 :key="dict.value"
21                 :label="dict.label"
22                 :value="dict.value"
23               />
24             </el-select>
25           </el-form-item>
26           <el-form-item  label="瓦名称:" prop="tileName" >
27             <el-select v-model="from.tileName" placeholder="" clearable style="width: 125px" >
28               <el-option
29                 v-for="dict in dict.type.tilename"
30                 :key="dict.value"
31                 :label="dict.label"
32                 :value="dict.value"
33               />
34             </el-select>
35           </el-form-item>
36           <el-button type="primary" icon="el-icon-refresh" @click="handleQuery">查询</el-button>
37         </el-form>
38       </el-card>
39       <el-col :span="24" >
40         <el-card class="bottom-card">
41           <div slot="header" class="clearfix">
42             <i class="el-icon-tickets"></i>
43             <span style="font-weight: bold">当前产品信息</span>
44           </div>
45           <el-descriptions :column="1"  :label-style="{'font-size': '20px'}" border  :content-style="{'min-width': '300px'}">
46             <el-descriptions-item label="机型">
47               <span>{{queryParams.productSeries}}</span>
48             </el-descriptions-item>
49             <el-descriptions-item label="箱体码">
50               <span>{{queryParams.scanObject1}}</span>
51             </el-descriptions-item>
52             <el-descriptions-item label="平衡轴码">
53               <span>{{queryParams.scanObject2}}</span>
54             </el-descriptions-item>
55             <el-descriptions-item label="瓦名称">
56               <span>{{queryParams.tileName}}</span>
57             </el-descriptions-item>
58             <el-descriptions-item label="配瓦颜色">
5030f3 59               <span v-for="(word, index) in queryParams.words" :key="index" :style="{ backgroundColor: queryParams.colors[index],fontSize: '30px',}">{{ word }}</span>
1c7036 60             </el-descriptions-item>
Y 61           </el-descriptions>
62           <el-divider></el-divider>
63         </el-card>
64       </el-col>
65     </div>
66   </div>
67 </template>
68 <script>
69 import VueQr from 'vue-qr'
70 import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
5030f3 71 import {setBarcode} from "@/api/main/bs/tileMatchRules/tileMatchRules";
1c7036 72 export default {
Y 73   name: "index",
74   dicts: ['colour_hex','productseries','axisname','neckname','tilename'],
75   components: {
76     VueQr,
77   },
78   data(){
79     return{
80       scannerFlag: false,
81       loading: true,
82       tileMatchKbList: [],
83       qrCode: '',
84       // 查询参数
85       from:{
86         pageNum: 1,
87         pageSize: 10,
5030f3 88         productSeries: '380Y',
Y 89         scanObject1: null,
90         scanObject2: 'P0NYK0410001000;T231107031;D2222232;S500003',
1c7036 91         axisName: null,
Y 92         neckName: null,
5030f3 93         tileName: '平衡轴瓦',
1c7036 94         axisParameterNoPosition: null,
Y 95         neckParameterPosition: null,
96         axisValue: null,
97         neckValue: null,
98         tileColor: null,
99         createUser: null,
100         updateUser: null,
101         state: null,
102         weight: null,
103       },
104       queryParams: {
105         pageNum: 1,
106         pageSize: 10,
107         productSeries: null,
108         scanObject1: null,
5030f3 109         scanObject2: 'P0NYK0410001000;T231107031;D2222232;S500003',
1c7036 110         axisName: null,
Y 111         neckName: null,
112         tileName: null,
5030f3 113         words: ['------', '------', ],
Y 114         colors: ['#FFFFFF', '#FFFFFF'],
1c7036 115         axisParameterNoPosition: null,
Y 116         neckParameterPosition: null,
117         axisValue: null,
118         neckValue: null,
119         tileColor: null,
120         createUser: null,
121         updateUser: null,
122         state: null,
123         weight: null,
124       },
125     }
126   },
127   mounted() {
128     this.setFocus()
129     this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
130   },
131   beforeDestroy() {
132     this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
133   },
134   methods:{
135     refresh() {
136       location.reload();
137     },
138     setFocus(){
139       this.$nextTick(()=>{
140         this.$refs.inputdata.focus()
141       })
142     },
143     handleScannerInput(event){
144       if (this.scannerFlag){
145         this.from.scanObject2 = ''
146         this.$refs.inputdata.value = ''
147         this.scannerFlag = false
148       }
149       const input = event.target
150       const inputValue = input.value
151       this.from.scanObject2 = inputValue
152       if (event.key === 'Enter'){
153         this.scannerFlag = true
154         console.log('条码:',this.from.scanObject2)
155         //扫描完成
5030f3 156         if (typeof this.from.scanObject2 !== 'undefined') {
Y 157           console.log('条码:',this.from.scanObject2,'HOP040')
158           setBarcode({barcode:this.from.scanObject2,locationCode:'HOP040'}).then(res =>{
159             console.log('res',res)
160             this.from.scanObject1=res
161           })
162         }
163         this.handleQuery()
1c7036 164       }
Y 165     },
166     /** 搜索按钮操作 */
167     handleQuery() {
168       this.clear();
169
170       if(this.from.scanObject1 !== null && this.from.scanObject2 !== null
5030f3 171         // && this.from.axisName !== null && this.from.axisName !== ""
Y 172         // && this.from.neckName !== null && this.from.neckName !== ""
173         // && this.from.tileName !== null && this.from.tileName !== ""
1c7036 174         && this.from.productSeries !== null && this.from.productSeries !== "")
Y 175       {
176         this.axisValueextracted();
177         this.neckValueextracted();
178         if(this.queryParams.axisValue !== null && this.queryParams.neckValue !== null){
179           this.insetFromToQueryParams();
180           this.getList();
181         }
182         else{
183           const h = this.$createElement;
184           this.$message({
185             message: h('p',null, [
186               h('span', null, '警告 '),
187               h('i', { style: 'color: black' }, '箱体码或曲轴码输入有误'),
188               h()]),
189             type: 'error',
190             center: true,
191             offset:300
192           });
193         }
194       }
195       else{
5030f3 196         console.log("搜索条件",this.from.scanObject1 ,this.from.scanObject2)
1c7036 197         const h = this.$createElement;
Y 198         this.$message({
199           message: h('p',null, [
200             h('span', null, '警告 '),
201             h('i', { style: 'color: black' }, '请填写所有搜索条件'),
202             h()]),
203           type: 'error',
204           center: true,
205           offset:300
206         });
207       }
208     },
209
210     // 取箱体码第三段为配瓦值
211     axisValueextracted() {
212       const parts1 = this.from.scanObject1.split(";");
213       if (parts1.length >= 3) {
214         //const axisValueextracted = parts1[2].substring(3,4);
215         const axisValueextracted = parts1[2];
216         return this.queryParams.axisValue= axisValueextracted;
217
218       }
219     },
220
221     //取曲轴码第三段为配瓦值
222     neckValueextracted() {
223       const parts2 = this.from.scanObject2.split(";");
224       if (parts2.length >= 3) {
225         //const neckValueextracted = parts2[2].substring(3,4);
226         const neckValueextracted = parts2[2];
227         return this.queryParams.neckValue= neckValueextracted;
228       }
229     },
230     //取配瓦颜色
231     getList() {
232       let queryParams = {
233         productSeries : this.queryParams.productSeries,
234         axisName : this.queryParams.axisName,
235         neckName : this.queryParams.neckName,
236         tileName : this.queryParams.tileName,
237         axisValue: this.queryParams.axisValue,
238         neckValue: this.queryParams.neckValue,
239       }
240       console.log(queryParams)
241       listTileMatchRules(queryParams).then(response => {
5030f3 242         // this.queryParams.tileColor = response.rows[0].tileColor;
Y 243         this.queryParams.words= ['------', '------']
244         this.queryParams.colors= ['#FFFFFF', '#FFFFFF']
245         for (var i=0;i<response.rows.length;i++){
246           this.queryParams.colors[i]=response.rows[i].tileColor;
247           this.queryParams.words[i]=response.rows[i].tileName;
248         }
249         console.log('颜色:',response)
1c7036 250       });
Y 251     },
252     clear(){
253       this.queryParams.axisValue=null;
254       this.queryParams.neckValue=null;
255     },
256     insetFromToQueryParams(){
257       this.queryParams.productSeries=this.from.productSeries;
258       this.queryParams.axisName=this.from.axisName;
259       this.queryParams.neckName=this.from.neckName;
260       this.queryParams.tileName=this.from.tileName;
261       this.queryParams.scanObject1=this.from.scanObject1;
262       this.queryParams.scanObject2=this.from.scanObject2;
263     }
264
265   },
266 }
267 </script>
268
269 <style scoped>
270 ::v-deep .el-form-item__label{
271   font-size: large;
272 }
273 ::v-deep .el-card__body{
274   padding: 15px 20px 0px 20px;
275 }
276 ::v-deep .el-input .el-input--medium .el-input--suffix{
277   width: 200px;
278 }
279
280 </style>