386 lines
11 KiB
Vue
386 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<u-navbar back-text="返回" title="IQC检验" :background="background"></u-navbar>
|
|||
|
|
<u-form>
|
|||
|
|
<u-form-item :border-bottom="false">
|
|||
|
|
<p>单号 : </p>
|
|||
|
|
<u-input class="uni-input1" v-model="billNo" placeholder="请扫描单号"
|
|||
|
|
:focus="focusBillNo" @confirm="serachMaterialList" />
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form-item>
|
|||
|
|
|
|||
|
|
<u-form-item>
|
|||
|
|
<p>条码:</p>
|
|||
|
|
<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
|
|||
|
|
@confirm="getBarcodeInfo" />
|
|||
|
|
</u-form-item>
|
|||
|
|
|
|||
|
|
<view class="uni-padding-wrap uni-common-mt">
|
|||
|
|
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
|||
|
|
:active-color="activeColor" @clickItem="onClickItem" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="current === 0">
|
|||
|
|
<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
|
|||
|
|
:showBottomSum="true" :rowNumbers="true" :pagination="true">
|
|||
|
|
</uni-z-table>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="current === 1">
|
|||
|
|
<u-form>
|
|||
|
|
<view >
|
|||
|
|
<u-form-item>物料编号:<u-input v-model="materialSpec" :border="true"/></u-form-item>
|
|||
|
|
<u-form-item>物料规格:<u-input v-model="description" :border="true"/></u-form-item>
|
|||
|
|
<u-form-item>原条码数:<u-input v-model="materialQuantity" :border="true"/></u-form-item>
|
|||
|
|
<u-form-item>不良品数:<u-input v-model="badQty":border="true"/></u-form-item>
|
|||
|
|
<u-form-item>良品数:<u-input v-model="goodQty" :border="true"/></u-form-item>
|
|||
|
|
<u-form-item class="item2">
|
|||
|
|
<button type="primary" size="mini" @click="Print">打印</button>
|
|||
|
|
<button type="warn" size="mini" @click="Splict">拆分</button>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item class="item">
|
|||
|
|
<view>打印机:</view>
|
|||
|
|
<picker @change="bindPickerChange" :value="index" mode="selector" :range="rangedata"
|
|||
|
|
:range-key="'DESCRIPTION'" >
|
|||
|
|
<view class="uni-input" v-if="show">
|
|||
|
|
{{rangedata[index].DESCRIPTION}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
</u-form>
|
|||
|
|
<uni-z-table :style="{'height': tabH+'px'}" :tableData="barCodeInfoList" :columns="barcodeColums"
|
|||
|
|
:showBottomSum="true" :rowNumbers="true" :pagination="true">
|
|||
|
|
</uni-z-table>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</u-form>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
//导入蓝牙打印JS方法
|
|||
|
|
import {
|
|||
|
|
print
|
|||
|
|
} from '../../../../common/BluetoothPrint.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
items: ['材料列表', '条码操作' ], //分栏器的选项卡
|
|||
|
|
tabH: 800, //表格的宽度
|
|||
|
|
ischecked: true, //默认出库
|
|||
|
|
background: {
|
|||
|
|
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
|||
|
|
}, //返回按钮的样式
|
|||
|
|
//分栏器的样式
|
|||
|
|
styles: [{
|
|||
|
|
value: 'button',
|
|||
|
|
text: '按钮',
|
|||
|
|
checked: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'text',
|
|||
|
|
text: '文字'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
colors: ['#007aff', '#4cd964', '#dd524d'],
|
|||
|
|
current: 0,
|
|||
|
|
colorIndex: 0,
|
|||
|
|
activeColor: '#007aff',
|
|||
|
|
styleType: 'text',
|
|||
|
|
//---------------------分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
|
|||
|
|
barcodeData:[],//接扫条码后的数据
|
|||
|
|
materialSpec:"",
|
|||
|
|
description:"",
|
|||
|
|
badQty:0,
|
|||
|
|
goodQty:0,
|
|||
|
|
materialQuantity:"",//一开始的条码数量
|
|||
|
|
index:0,//蓝牙打印机默认的顺序
|
|||
|
|
scanedData:[],//已扫描列表
|
|||
|
|
billNo: "", //单据号
|
|||
|
|
requestData: [], //材料列表
|
|||
|
|
rangedata:[],//蓝牙打印机的信息
|
|||
|
|
barCodeInfoList:[],//条码信息
|
|||
|
|
barCode: "", //条码
|
|||
|
|
focusBarCode: false, //条码的焦点是否被选中
|
|||
|
|
focusBillNo: true, //单号的焦点一来就默认选中
|
|||
|
|
ISRELEASE: "", //是否释放
|
|||
|
|
show:false,
|
|||
|
|
|
|||
|
|
//对应的材料列表的表格
|
|||
|
|
matColumns: [
|
|||
|
|
{
|
|||
|
|
title: '条码编号',
|
|||
|
|
field: "MATERIALPACKINGNAME",
|
|||
|
|
width: 280,
|
|||
|
|
sort: true,
|
|||
|
|
align: "center"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '物料编号',
|
|||
|
|
field: "MATERIALSPECNAME",
|
|||
|
|
width: 280,
|
|||
|
|
sort: true,
|
|||
|
|
align: "left"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '物料描述',
|
|||
|
|
field: "MATERIALDESCRIPTION",
|
|||
|
|
width: 300,
|
|||
|
|
sort: true,
|
|||
|
|
align: "left"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '检验结果',
|
|||
|
|
field: "OQARESULT",
|
|||
|
|
width: 170,
|
|||
|
|
sort: true,
|
|||
|
|
align: "left"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
//对应拆分后的表格
|
|||
|
|
barcodeColums:[
|
|||
|
|
{
|
|||
|
|
title: '条码编号',
|
|||
|
|
field: "materialPackingName",
|
|||
|
|
width: 280,
|
|||
|
|
sort: true,
|
|||
|
|
align: "left"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '物料编号',
|
|||
|
|
field: "materialSpecName",
|
|||
|
|
width: 280,
|
|||
|
|
sort: true,
|
|||
|
|
align: "left"
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
title: '数量',
|
|||
|
|
field: "qty",
|
|||
|
|
width: 150,
|
|||
|
|
sort: true,
|
|||
|
|
align: "right"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
|
|||
|
|
//挂载页面的时候就查询下拉框的数据,这是无参请求所以没参数
|
|||
|
|
this.$MyRequest('/split/getbluetoothprinter', {}, 'GET').then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.data.success) {
|
|||
|
|
this.rangedata = res.data.resultObj //接数据，是一个对象数组
|
|||
|
|
this.show=true //设置为true展示picker组件
|
|||
|
|
} else {
|
|||
|
|
console.log(this.data.message)
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
this.$showMessage(err)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//监听数据变换，自动计算不良品和良品的值
|
|||
|
|
watch:{
|
|||
|
|
badQty:{
|
|||
|
|
immediate:true,
|
|||
|
|
handler(){
|
|||
|
|
this.goodQty=this.materialQuantity-this.badQty
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
goodQty:{
|
|||
|
|
immediate:true,
|
|||
|
|
handler(){
|
|||
|
|
this.badQty=this.materialQuantity-this.goodQty
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
//picker选择器选择时
|
|||
|
|
bindPickerChange(e) {
|
|||
|
|
this.index = e.detail.value //获取到当前选择的index
|
|||
|
|
},
|
|||
|
|
//分栏器的点击事件
|
|||
|
|
onClickItem(e) {
|
|||
|
|
if (this.current !== e.currentIndex) {
|
|||
|
|
this.current = e.currentIndex //获取当前选中的index
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//焦点初始化，让页面所有的焦点同时只能存在一个
|
|||
|
|
initfocus() {
|
|||
|
|
this.focusBillNo = false
|
|||
|
|
this.focusBarCode = false
|
|||
|
|
},
|
|||
|
|
//获取焦点的公共方法
|
|||
|
|
getfocus(nextfocus) {
|
|||
|
|
this.initfocus()
|
|||
|
|
this[nextfocus]
|
|||
|
|
this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
|
|||
|
|
this[nextfocus] = true
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//扫描单据号-----------回车搜索
|
|||
|
|
serachMaterialList() {
|
|||
|
|
if (this.billNo == "") {
|
|||
|
|
this.$showMessage("请先扫描单号");
|
|||
|
|
this.$playFail()
|
|||
|
|
this.getfocus('focusBillNo')
|
|||
|
|
} else {
|
|||
|
|
this.getMateriallist() //获取材料信息
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//扫描条码回车事件
|
|||
|
|
getBarcodeInfo() {
|
|||
|
|
if (this.billNo == "") {
|
|||
|
|
this.$showMessage("请先扫描单号");
|
|||
|
|
this.$playFail()
|
|||
|
|
this.getfocus('focusBillNo') //获取焦点
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.barCode == "") {
|
|||
|
|
this.$showMessage("请扫描条码");
|
|||
|
|
this.$playFail()
|
|||
|
|
this.getfocus('focusBarCode')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.getBarCodeInfo() //调用条码查询
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取材料列表
|
|||
|
|
getMateriallist() {
|
|||
|
|
this.$MyRequest('/Iqc/getinfo', {
|
|||
|
|
billNo: this.billNo
|
|||
|
|
}).then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.data.success) {
|
|||
|
|
this.requestData = res.data.resultObj //接后端返回的物料参数，并展示在表格里面
|
|||
|
|
this.$playSuccess()
|
|||
|
|
this.getfocus('focusBarCode')
|
|||
|
|
} else {
|
|||
|
|
this.$showMessage(res.data.message) //单号有问题的话重新聚焦在单号输入框
|
|||
|
|
this.$playFail()
|
|||
|
|
this.getfocus('focusBillNo')
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
this.$showMessage(err)
|
|||
|
|
this.billNo = ""
|
|||
|
|
this.getfocus('focusBillNo') //请求失败的话重新聚焦在单号输入框
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取条码信息
|
|||
|
|
getBarCodeInfo(){
|
|||
|
|
this.$MyRequest('/Iqc/getbarcodeinfo',{
|
|||
|
|
materialPackingName:this.barCode
|
|||
|
|
}).then(res=>{
|
|||
|
|
console.log(res)
|
|||
|
|
if(res.data.success){
|
|||
|
|
this.barcodeData=res.data.resultObj
|
|||
|
|
this.materialSpec=res.data.resultObj[0]["MATERIALSPECNAME"]
|
|||
|
|
this.description=res.data.resultObj[0]["DESCRIPTION"]
|
|||
|
|
this.materialQuantity=res.data.resultObj[0]["MATERIALQUANTITY"]
|
|||
|
|
this.current=1
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.onClickItem()
|
|||
|
|
},1000)
|
|||
|
|
}else{
|
|||
|
|
this.barCode=""
|
|||
|
|
this.$showMessage(res.data.message)
|
|||
|
|
this.getfocus('focusBarCode')
|
|||
|
|
}
|
|||
|
|
}).catch(err=>{
|
|||
|
|
this.barCode=""
|
|||
|
|
this.$showMessage(err)
|
|||
|
|
this.getfocus('focusBarCode')
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//拆分
|
|||
|
|
Splict(){
|
|||
|
|
this.$MyRequest('/Iqc/splict',{
|
|||
|
|
materialPackingName:this.barCode,
|
|||
|
|
newMaterialQuantity:this.badQty,
|
|||
|
|
materialQuantity:this.materialQuantity,
|
|||
|
|
materialSpecName:this.materialSpec
|
|||
|
|
}).then(res=>{
|
|||
|
|
console.log(res)
|
|||
|
|
if(res.data.success){
|
|||
|
|
this.barCodeInfoList=res.data.resultObj
|
|||
|
|
}else{
|
|||
|
|
this.$showMessage(res.data.message)
|
|||
|
|
this.getfocus('focusBarCode')
|
|||
|
|
}
|
|||
|
|
}).catch(err=>{
|
|||
|
|
this.$showMessage(err)
|
|||
|
|
this.barCode=""
|
|||
|
|
this.getfocus('focusBarCode')
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//打印请求
|
|||
|
|
Print() {
|
|||
|
|
let macaddress = this.rangedata[this.index].ENUMVALUE//mac地址，可以在打印机上看
|
|||
|
|
// console.log(macaddress)
|
|||
|
|
//先打印原条码
|
|||
|
|
let printStr = '! 0 200 200 640 1\n' +
|
|||
|
|
'PAGE-WIDTH 640\n' +
|
|||
|
|
'PW 848\n' +
|
|||
|
|
'TONE 0\n' +
|
|||
|
|
'SPEED 0\n' +
|
|||
|
|
'GAP-SENSE\n' +
|
|||
|
|
'NO-PACE\n' +
|
|||
|
|
'POSTFEED 0\n' +
|
|||
|
|
'LEFT\n' +
|
|||
|
|
'T 65 1 20 20 物料编码：\n' +
|
|||
|
|
'SETBOLD 2\n' +
|
|||
|
|
'T 65 1 135 20 ' + this.materialSpec + '\n' +
|
|||
|
|
'SETBOLD 0\n' +
|
|||
|
|
'T 65 0 20 50 物料描述：\n' +
|
|||
|
|
'T 65 1 135 50 ' + this.description + '\n' +
|
|||
|
|
'T 65 1 20 80 供应商代码：\n' +
|
|||
|
|
'T 65 1 160 80 ' + this.barcodeData[0]["SUPPLIERNAME"] + '\n' +
|
|||
|
|
'T 65 0 20 110 供应商：\n' +
|
|||
|
|
'T 65 1 135 110 ' + this.barcodeData[0]["DESCRIPTION"] + '\n' +
|
|||
|
|
'T 65 0 20 140 制造日期：\n' +
|
|||
|
|
'T 65 1 135 140' + this.barcodeData[0]["MAKEDATE"] + '\n' +
|
|||
|
|
'T 65 0 20 170 有效期至：\n' +
|
|||
|
|
'T 65 1 135 170 ' + this.barcodeData[0]["EXPIRINGDATE"] + '\n' +
|
|||
|
|
'T 65 0 20 200 批次：\n' +
|
|||
|
|
'T 65 1 135 200 ' + this.barcodeData[0]["CHARGE"] + '\n' +
|
|||
|
|
'T 65 0 20 230 数量：\n' +
|
|||
|
|
'T 65 1 135 230 300' + this.goodQty+ '\n' +
|
|||
|
|
'T 65 0 20 260 SN：\n' +
|
|||
|
|
'T 65 1 135 260 ' + this.barCode + '\n' +
|
|||
|
|
'SETBOLD 2\n' +
|
|||
|
|
'SETBOLD 0\n' +
|
|||
|
|
'B QR 20 290 M 12 H 4\n' +
|
|||
|
|
'MA,' + this.barCode+ '\n' +
|
|||
|
|
'ENDQR\n' +
|
|||
|
|
'B 128 2 1 50 50 560 ' + this.barCode+ '\n' +
|
|||
|
|
'T 65 1 200 620 ' + this.barCode+ '\n' +
|
|||
|
|
'FORM\n' +
|
|||
|
|
'PRINT\n';
|
|||
|
|
print(macaddress, printStr);//common文件夹里的打印方法
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.uni-input1{
|
|||
|
|
border:1px solid red;}
|
|||
|
|
.item{
|
|||
|
|
border-bottom: solid 1rpx blue;
|
|||
|
|
}
|
|||
|
|
.item2{
|
|||
|
|
border-bottom: solid 1rpx blue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|