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