309 lines
9.1 KiB
Vue
309 lines
9.1 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar back-text="返回" title="拆分" :background="background"></u-navbar>
|
||
<!-- <table>
|
||
<tr width="50%">
|
||
<td>原条码:</td>
|
||
<td>
|
||
<u-input placeholder="请扫描原条码" :border="true" :focus="focusBarCode" v-model="barCode" />
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<span class="span1">物料名称:</span>
|
||
<td class="td1">
|
||
<u-input placeholder="物料名称" :border="true" disabeled="true" :disabled="true"
|
||
v-model="materialName" />
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>物料编码:</td>
|
||
<td>
|
||
<u-input placeholder="物料编码" :border="true" :disabled="true" v-model="materialSpc" />
|
||
</td>
|
||
<td>原条码数量:</td>
|
||
<td>
|
||
<u-input placeholder="原条码数量" :border="true" :disabled="true" v-model="oldQty" />
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>打印机:</td>
|
||
<td>
|
||
<uni-combox :candidates="XiaLaData" placeholder="请选择打印机" v-model="printer" :border="true" />
|
||
</td>
|
||
|
||
|
||
<td>物料数拆:</td>
|
||
<td>
|
||
<u-input placeholder="物料数量" :border="true" :focus="focusMaterialQty" v-model="Qty" />
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><switch :checked="ischecked" @change="changeischecked" /><td>物料数量拆</td></td>
|
||
<td><button type="primary" size="mini" @click="splict">拆分</button></td>
|
||
<td><button type="warn" size="mini" @click="print">打印</button></td>
|
||
</tr>
|
||
</table> -->
|
||
<u-form class="firstform">
|
||
<u-form-item>
|
||
<p>原条码:</p>
|
||
<u-input placeholder="请扫描原条码" :border="true" :focus="focusBarCode" v-model="barCode"
|
||
@confirm="searchBarCodeInFo" />
|
||
</u-form-item>
|
||
|
||
<u-form-item>
|
||
<p>物料名称:</p>
|
||
<u-input placeholder="物料名称" :border="true" disabeled="true" :disabled="true" v-model="materialName" />
|
||
</u-form-item>
|
||
|
||
<u-form-item>
|
||
<p>物料编码:</p>
|
||
<u-input placeholder="物料编码" disabeled="true" :border="true" :disabled="true" v-model="materialSpc" />
|
||
<p>原条码数量:</p>
|
||
<u-input placeholder="原条码数量" disabeled="true" :border="true" :disabled="true" v-model="oldQty" />
|
||
</u-form-item>
|
||
|
||
|
||
<!-- <tabel>
|
||
<tr>
|
||
<td>打印机:</td>
|
||
<td> <uni-combox :candidates="XiaLaData"
|
||
placeholder="请选择打印机"
|
||
v-model="printer"
|
||
:border="true"
|
||
/></td>
|
||
<td>
|
||
<span v-show="!ischecked">物料数拆:</span>
|
||
<span v-show="ischecked">条码数拆</span> </td>
|
||
<td> <u-input placeholder="物料数量" :border="true" :focus="focusMaterialQty"
|
||
v-model="Qty" type="number" style="width: 170px;"/>
|
||
</td>
|
||
</tr>
|
||
</tabel> -->
|
||
<u-form-item>
|
||
<p>打印机:</p>
|
||
<uni-combox :candidates="XiaLaData"
|
||
placeholder="请选择打印机"
|
||
:border="true"
|
||
@input="whichprinter"
|
||
v-model="printer"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item>
|
||
<span v-show="!ischecked">物料数拆:</span>
|
||
<span v-show="ischecked">条码数拆</span>
|
||
<u-input placeholder="物料数量" :border="true" :focus="focusMaterialQty"
|
||
v-model="Qty" type="number" style="width: 170px;"/>
|
||
</u-form-item>
|
||
|
||
<u-form-item>
|
||
<switch @change="changeischecked" :checked="ischecked" style="transform:scale(0.7)" />
|
||
<span v-if="!ischecked">物料数量拆</span>
|
||
<span v-show="ischecked">条码个数拆</span>
|
||
<button type="primary" size="mini" @click="getsplict">拆分</button>
|
||
<button type="warn" size="mini" @click="print">打印</button>
|
||
</u-form-item>
|
||
</u-form>
|
||
<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
|
||
@clickItem="onClickItem" />
|
||
|
||
<view v-if="current === 0">
|
||
<uni-z-table :style="{'height': tabH+'px'}" :tableData="matData" :columns="matColumns" :showBottomSum="true"
|
||
:rowNumbers="true" :pagination="true">
|
||
</uni-z-table>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//:checked="ischecked" 物料数量拆
|
||
export default {
|
||
data() {
|
||
return {
|
||
items: ['拆分履历'], //'材料列表',
|
||
current: 0,
|
||
activeColor: '#007aff', //分栏器的颜色
|
||
styleType: 'button',
|
||
tabH: 800,
|
||
matColumns: [{
|
||
title: '条码',
|
||
field: "materialPackingName",
|
||
width: 300,
|
||
sort: true,
|
||
align: "center"
|
||
},
|
||
{
|
||
title: '物料编码',
|
||
field: "materialSpecName",
|
||
width: 220,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
{
|
||
title: '数量',
|
||
field: "qty", //BXX2205240004002
|
||
width: 180,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
],
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
}, //返回按钮的样式
|
||
//-----------------------------------上面是样式需要的数据,下面是真正需要的数据
|
||
XiaLaData: [], //下拉框绑定的数据
|
||
matData: [], //后端传回来的绑定表格的数据
|
||
rangedata: [], //后端传回来的下拉框数据，一个对象数组
|
||
printer: "", //下拉框选择的具体打印机
|
||
//焦点和其他的一些数据
|
||
ischecked: false, //开关的初始状态
|
||
focusBarCode: true, //原条码
|
||
focusMaterialQty: false, //物料数拆
|
||
//双向绑定的数据
|
||
siteName: "", //数据库表的主键需要工厂
|
||
barCode: "", //条码
|
||
materialName: "", //物料名称
|
||
materialSpc: "", //物料编码
|
||
oldQty: "", //原条码数量
|
||
Qty: "", //物料数拆对应的数量
|
||
};
|
||
},
|
||
mounted() {
|
||
//挂载页面的时候就查询下拉框的数据,这是无参请求所以没参数
|
||
this.$MyRequest('/split/getprinter').then(res => {
|
||
if (res.data.success) {
|
||
this.rangedata = res.data.resultObj //接数据，是一个对象数组
|
||
for (let i = 0; i < this.rangedata.length; i++) {
|
||
let y = this.rangedata[i]["DESCRIPTION"] //取对象的描述字段
|
||
this.XiaLaData.push(y) //放进下拉框绑定的数据中
|
||
}
|
||
} else {
|
||
this.$showMessage(res.data.message)
|
||
}
|
||
}).catch(err => {
|
||
this.$showMessage("请检查网络或联系开发人员" + err)
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
//分栏器的选中数值，展示不同的表格
|
||
onClickItem(e) {
|
||
if (this.current !== e.currentIndex) {
|
||
this.current = e.currentIndex
|
||
}
|
||
},
|
||
|
||
//开关按钮的选中状态
|
||
changeischecked() {
|
||
this.ischecked = !this.ischecked
|
||
},
|
||
|
||
//下拉框这里要获取到选取那个打印机
|
||
whichprinter(e){
|
||
/* for(let i=0;i<this.XiaLaData.length;i++){
|
||
if(this.printer != this.XiaLaData[i])
|
||
this.printer=""
|
||
else this.printer=e
|
||
} */
|
||
console.log(this.printer)
|
||
},
|
||
|
||
//焦点初始化，让页面所有的焦点同时只能存在一个
|
||
initfocus() {
|
||
this.focusBarCode = false
|
||
this.focusMaterialQty = false
|
||
},
|
||
//获取焦点的公共方法
|
||
getfocus(nextfocus) {
|
||
this.initfocus()
|
||
this[nextfocus]
|
||
this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
|
||
this[nextfocus] = true
|
||
})
|
||
},
|
||
|
||
//回车事件，获取条码的信息
|
||
searchBarCodeInFo() {
|
||
if (this.barCode == "") {
|
||
this.$showMessage("条码不能为空")
|
||
this.getfocus('focusBarCode') //重新聚焦到条码输入框
|
||
} else {
|
||
this.getBarCodeInFo() //获取条码信息
|
||
}
|
||
|
||
},
|
||
|
||
//获取条码信息的请求
|
||
getBarCodeInFo() {
|
||
this.$MyRequest('/split/getlist', {
|
||
materialPackingName: this.barCode
|
||
}).then(res => {
|
||
if (res.data.success) {
|
||
this.materialName = res.data.resultObj[0]["DESCRIPTION"] //获取物料名称
|
||
this.materialSpc = res.data.resultObj[0]["MATERIALSPECNAME"] //获取物料编码
|
||
this.oldQty = res.data.resultObj[0]["MATERIALQUANTITY"] //获取物料原数量
|
||
this.siteName = res.data.resultObj[0]["SITENAME"] //获取工厂名称，后续传回去
|
||
this.getfocus('focusMaterialQty') //焦点移动到拆分数量的输入框
|
||
} else {
|
||
this.$showMessage(res.data.message)
|
||
}
|
||
}).catch(err => {
|
||
this.$showMessage("请检查网络或者联系开发人员" + err)
|
||
})
|
||
},
|
||
|
||
//拆分回车按钮
|
||
getsplict() {
|
||
if (this.Qty >= this.oldQty) {
|
||
this.$showMessage("拆分数量不能大于原条码数量")
|
||
this.Qty = "" //清空数量
|
||
this.getfocus('focusMaterialQty') //重聚焦
|
||
} else {
|
||
this.splict()
|
||
}
|
||
},
|
||
|
||
|
||
//拆分请求
|
||
splict() {
|
||
this.$MyRequest('/split/getsplitbarcode', {
|
||
materialPackingName: this.barCode, //条码编号
|
||
materialQuantity: this.oldQty, //旧条码的数量
|
||
siteName: this.siteName, //工厂名
|
||
newMaterialQuantity: this.Qty, //新条码的数量
|
||
materialSpecName: this.materialSpc //物料编号
|
||
}).then(res => {
|
||
if (res.data.success) {
|
||
this.matData = res.data.resultObj //接后端的数据
|
||
console.log(this.matData)
|
||
} else {
|
||
this.$showMessage(res.data.message)
|
||
}
|
||
}).catch(err => {
|
||
this.$showMessage("请检查网络或者联系开发人员" + err)
|
||
})
|
||
},
|
||
|
||
//打印请求
|
||
print() {
|
||
this.$MyRequest('', {
|
||
|
||
}).then(res => {
|
||
|
||
}).catch(err => {
|
||
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
</style>
|