416 lines
11 KiB
Vue
416 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar back-text="返回" title="调拨出库" :background="background"></u-navbar>
|
||
<u-form ref="testForm">
|
||
<u-form-item :border-bottom="false">
|
||
<p>单号:</p>
|
||
<u-input :focus="focusShipRequest" :border="true" v-model="shipRequestName"
|
||
placeholder="请输入单号" @confirm="serachMaterialList" /><!-- @blur="pointblur"-->
|
||
<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择单号</u-button>
|
||
</u-form-item>
|
||
<u-form-item :border-bottom="false">
|
||
<p>条码:</p>
|
||
<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
|
||
@confirm="ship" />
|
||
</u-form-item>
|
||
</u-form>
|
||
<view class="uni-padding-wrap uni-common-mt">
|
||
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
||
:active-color="activeColor" @clickItem="clickitem" />
|
||
</view>
|
||
<view>
|
||
<view v-show="current === 0">
|
||
<view class="material">
|
||
<u-form ref="materialform">
|
||
<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
|
||
:showBottomSum="true" :rowNumbers="true" :pagination="true" @onSelect="selectTableRow">
|
||
</uni-z-table>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-show="current === 1">
|
||
<uni-z-table :style="{'height': tabH+'px'}" :tableData="materialKwData" :columns="matLocation"
|
||
:showBottomSum="true" :rowNumbers="true" :pagination="true">
|
||
</uni-z-table>
|
||
</view>
|
||
|
||
|
||
<view v-show="current === 2">
|
||
<uni-z-table :style="{'height': tabH+'px'}" :tableData="scanData" :columns="materialLocationData"
|
||
:showBottomSum="true" :rowNumbers="true" :pagination="true">
|
||
</uni-z-table>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
shipRequestName: "", //单据号
|
||
items: ['材料列表', '已出库列表'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
|
||
tabH: 800, //表格的宽度
|
||
ischecked: true, //默认出库
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
}, //返回按钮的样式
|
||
switched: [{
|
||
value: 'Y',
|
||
name: "取消"
|
||
},
|
||
{
|
||
value: 'N',
|
||
name: "入库"
|
||
},
|
||
], //开关数据源
|
||
//分栏器的样式
|
||
styles: [{
|
||
value: 'button',
|
||
text: '按钮',
|
||
checked: true
|
||
},
|
||
{
|
||
value: 'text',
|
||
text: '文字'
|
||
}
|
||
],
|
||
//style:{color: '#2979FF'},
|
||
colors: ['#007aff', '#4cd964', '#dd524d'],
|
||
current: 0,
|
||
colorIndex: 0,
|
||
activeColor: '#007aff',
|
||
styleType: 'text',
|
||
loading: false,
|
||
//-----------------上方是template标签中的分栏器等需要的样式，下方是双向绑定需要使用到的数据
|
||
requestData: [], //材料列表
|
||
materialKwData: [], //库位的信息
|
||
scanData: [], //已扫描箱
|
||
shipRequestDetailName: "",
|
||
barCode: "", //条码
|
||
focusBarCode: false, //焦点是否被选中
|
||
focusShipRequest: true, //默认焦点在单号
|
||
siteName:"",
|
||
userId:"",
|
||
//对应的材料列表下的表格，field对应后端返回了来的字段
|
||
matColumns: [{
|
||
title: '序号',
|
||
field: "SHIPREQUESTDETAILNAME",
|
||
width: 120,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '物料编号',
|
||
field: "MATERIALSPECNAME",
|
||
width: 240,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '物料描述',
|
||
field: "MATERIALSPECDESCRIPTION",
|
||
width: 280,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '应发数量',
|
||
field: "REQUESTQUANTITY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
{
|
||
title: '实发数量',
|
||
field: "ASSIGNEDQUANTITY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
{
|
||
title: '待发数量',
|
||
field: "DFQTY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
}
|
||
],
|
||
|
||
//对应的相应的库位信息
|
||
matLocation: [{
|
||
title: '序号',
|
||
field: "SHIPREQUESTDETAILNAME",
|
||
width: 120,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '物料编号',
|
||
field: "MATERIALSPECNAME",
|
||
width: 240,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '物料描述',
|
||
field: "MATERIALSPECDESCRIPTION",
|
||
width: 280,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '应发数量',
|
||
field: "REQUESTQUANTITY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
{
|
||
title: '实发数量',
|
||
field: "ASSIGNEDQUANTITY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
{
|
||
title: '待发数量',
|
||
field: "DFQTY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
}
|
||
],
|
||
|
||
//对应已出库的表格
|
||
materialLocationData: [{
|
||
title: '行号',
|
||
field: "ROWNO",
|
||
width: 120,
|
||
sort: true,
|
||
align: "left"
|
||
|
||
},
|
||
{
|
||
title: '条码编号',
|
||
field: "PACKINGCODE",
|
||
width: 280,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '物料编号',
|
||
field: "MATERIALSPECNAME",
|
||
width: 260,
|
||
sort: true,
|
||
align: "left"
|
||
},
|
||
{
|
||
title: '数量',
|
||
field: "QTY",
|
||
width: 150,
|
||
sort: true,
|
||
align: "right"
|
||
},
|
||
]
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
|
||
let that=this
|
||
uni.getStorage({
|
||
key:"sitename",
|
||
success(res) {
|
||
that.siteName=res.data
|
||
}
|
||
})
|
||
uni.getStorage({
|
||
key:"userid",
|
||
success(res) {
|
||
that.userId=res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
|
||
//点击拆分按钮
|
||
spilitbox() {
|
||
uni.navigateTo({
|
||
url: './SplitBoxPage' //跳转到拆分页面
|
||
})
|
||
},
|
||
|
||
//设置开关的选中状态
|
||
changeischecked() {
|
||
this.ischecked = !this.ischecked
|
||
//console.log("选中状态", this.ischecked)
|
||
},
|
||
|
||
//分栏器的点击事件
|
||
clickitem(e) {
|
||
if (this.current !== e.currentIndex) {
|
||
this.current = e.currentIndex //获取当前选中的index
|
||
}
|
||
},
|
||
|
||
//焦点初始化，让页面所有的焦点同时只能存在一个
|
||
initfocus() {
|
||
this.focusBarCode = false
|
||
this.focusShipRequest = false
|
||
},
|
||
//获取焦点的公共方法
|
||
getfocus(nextfocus) {
|
||
this.initfocus()
|
||
this[nextfocus]
|
||
this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
|
||
this[nextfocus] = true
|
||
})
|
||
},
|
||
|
||
//选中table的当前选中行时，对数据进行一系列的操作
|
||
selectTableRow(e) {
|
||
var matId = e.row["MATERIALSPECNAME"];
|
||
this.getmaterialkw(matId);
|
||
this.shipRequestDetailName = e.row["SHIPREQUESTDETAILNAME"]
|
||
},
|
||
|
||
//扫描单据号输入框-----------回车调用方法
|
||
serachMaterialList() {
|
||
if (this.shipRequestName != "") //为空的话不进行查询操作
|
||
{
|
||
this.getmateriallist() //获取材料信息
|
||
this.getscandata() //获取已扫描箱子
|
||
this.getfocus('focusBarCode')//获取焦点
|
||
} else return
|
||
},
|
||
//单据编号查询事件（待补充）
|
||
searchMaterialStockIn() {
|
||
this.$MyRequest('', {
|
||
}).then(res => {
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
//扫描条码输入框---------------回车调用方法
|
||
ship() {
|
||
if (this.shipRequestName == "") {
|
||
this.$showMessage("请先扫描单号");
|
||
this.getfocus('focusShipRequestName') //焦点移动到单号
|
||
return;
|
||
}
|
||
if (this.barCode == "") {
|
||
this.$showMessage("请扫描条码");
|
||
this.getfocus('focusBarCode') //焦点移动到条码
|
||
return;
|
||
} else {
|
||
this.scanBarCodeShip()
|
||
this.getscandata()//请求已出库列表
|
||
}
|
||
},
|
||
|
||
|
||
//扫描条码出库的真正方法
|
||
scanBarCodeShip() {
|
||
//判断开启取消按钮是否启用
|
||
if(this.ischecked){//如果switch为选中状态，代表出库
|
||
this.$MyRequest('/request/outstock', {
|
||
barCode: this.barCode, //条码
|
||
billNo: this.shipRequestName, //单号
|
||
userId: this.userId, //登录用户
|
||
site: this.siteName, //工厂名称
|
||
detailRowNo: this.shipRequestDetailName, //序号
|
||
flag: this.ischecked //是否出库的标志
|
||
}).then(res=>{
|
||
this.$showMessage(res.data.message) //执行出库后返回的消息
|
||
this.barCode = ''; //清空条码，继续扫
|
||
this.getfocus('focusBarCode')//获取焦点，好继续扫描
|
||
}).catch(err=>{
|
||
this.barCode = '';//请空条码
|
||
this.getfocus('focusBarCode')
|
||
this.$showMessage(err)
|
||
})
|
||
}else{//选择器为关闭状态，执行取消出库操作
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "是否确定取消出库！",
|
||
success: (conf) => {
|
||
if (conf.confirm) {
|
||
//发送取消出库请求
|
||
this.$MyRequest('/request/outstock', {
|
||
barCode: this.barCode, //条码
|
||
billNo: this.shipRequestName, //单号
|
||
userId: this.userId, //登录用户
|
||
site: this.siteName, //工厂名称
|
||
detailRowNo: this.shipRequestDetailName, //序号
|
||
flag: this.ischecked //是否取消出库的标志
|
||
}).then(res=>{
|
||
this.$showMessage(res.data.message) //执行出库后返回的消息
|
||
this.barCode = ''; //清空条码，继续扫
|
||
this.getfocus('focusBarCode')//获取焦点，好继续扫描
|
||
}).catch(err=>{this.$showMessage(err)})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
this.barCode = '';
|
||
this.getfocus('focusBarCode')
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
|
||
//获取已出库列表方法
|
||
getscandata() {
|
||
this.$MyRequest('/request/getdetail', {
|
||
shipRequestName: this.shipRequestName
|
||
}).then(res => {
|
||
if (res.data.success)
|
||
this.scanData = res.data.resultObj //接数据
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
|
||
//获取选中当前行的库位信息
|
||
getmaterialkw(material) {
|
||
this.$MyRequest('/request/getlocation', {
|
||
materialSpecName: material
|
||
}).then(res => {
|
||
if (res.data.success)
|
||
this.materialKwData = res.data.resultObj //接收数据
|
||
else this.$showMessage(res.data.message)
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
|
||
//获取材料信息
|
||
getmateriallist() {
|
||
this.$MyRequest('/request/getlist', {
|
||
shipRequestName: this.shipRequestName
|
||
}).then(res => {
|
||
if (res.data.success)
|
||
this.requestData = res.data.resultObj //接数据
|
||
else this.$showMessage(res.data.message)
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
switch{
|
||
color: #FFCC33;
|
||
}
|
||
|
||
|
||
|
||
</style>
|
||
|