240 lines
6.8 KiB
Vue
240 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar back-text="返回" title="立库AGV出库" :background="background"></u-navbar>
|
||
<u-form>
|
||
<u-form-item :border-bottom="false">
|
||
<p>选单据：</p>
|
||
<u-input :focus="focusBarcode" v-model="barCode" placeholder="请选择单据" @confirm="submit" :border="true" />
|
||
<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择单号</u-button>
|
||
</u-form-item>
|
||
<u-form-item :border-bottom="false">
|
||
<p>选物料：</p>
|
||
<u-input :focus="focusBarcode" v-model="barCode" placeholder="请选择物料" @confirm="submit" :border="true" />
|
||
<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择物料</u-button>
|
||
</u-form-item>
|
||
<u-form-item :border-bottom="false">
|
||
<picker @change="bindPickerChange" :range="array">
|
||
<label>选择行：</label>
|
||
<label class="">{{array[index]}}</label>
|
||
<br/>
|
||
<label>物料属性：</label>
|
||
<label class="">XXXX </label>
|
||
<label> 物料规格：</label>
|
||
<label class="">XXXX</label>
|
||
</picker>
|
||
</u-form-item>
|
||
<u-form-item :border-bottom="false">
|
||
<u-row>
|
||
<u-col span="20">
|
||
<picker mode="date" :end="endDate"@change="bindDateChange">
|
||
<label>制造日期：</label>{{date}}
|
||
</picker>
|
||
</u-col >
|
||
</u-row>
|
||
</u-form-item>
|
||
<u-form-item :border-bottom="false">
|
||
<p>选择目的地：</p>
|
||
<u-input :focus="focusBarcode" v-model="barCode" placeholder="请选择目的地" @confirm="submit" :border="true" />
|
||
<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择目的地</u-button>
|
||
</u-form-item>
|
||
</u-form>
|
||
<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" />
|
||
<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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
array : ['请选择物料行号'],
|
||
barCode: "", //单据编号
|
||
date: this.getDate(),
|
||
PLAN_QTY : 0,
|
||
PRTBARCODEQTY : 0,
|
||
kw: "", // 库位号
|
||
materialList: [], //接收后端传回来的数据
|
||
ischecked: false, //默认不使用库位
|
||
focusKw: false, //库位输入框焦点
|
||
focusBarcode: true, //默认聚焦到条码框
|
||
items: ['入库清单'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
|
||
styleType: 'button',
|
||
current: 0,
|
||
matData: [], //后端传回来的绑定表格的数据
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
}, //返回按钮的样式
|
||
useId:"",
|
||
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"
|
||
}
|
||
],
|
||
};
|
||
|
||
},
|
||
|
||
mounted() {
|
||
let that =this
|
||
uni.getStorage({
|
||
key:"userid",
|
||
success(res) {
|
||
that.userId=res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
//设置选中状态
|
||
changeischecked() {
|
||
this.ischecked = !this.ischecked //设置选中状态
|
||
//console.log("选中状态", this.ischecked)
|
||
},
|
||
|
||
//焦点初始化，让页面所有的焦点同时只能存在一个
|
||
initfocus() {
|
||
this.focusKw = false //单号焦点
|
||
this.focusBarcode = false //条码焦点
|
||
},
|
||
|
||
//获取焦点的公共方法
|
||
getfocus(nextfocus) {
|
||
this.initfocus()
|
||
this[nextfocus] //不能用this.nextfocus
|
||
this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
|
||
this[nextfocus] = true
|
||
})
|
||
},
|
||
|
||
//单据编号查询事件（待补充）
|
||
searchMaterialStockIn() {
|
||
this.$MyRequest('', {
|
||
}).then(res => {
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
//用来选择行号，行号唯一就自动选择
|
||
bindPickerChange: function(e) {//改变的事件名
|
||
console.log('picker发送选择改变，携带值为', e.target.value) // 用于输出改变索引值
|
||
this.index = e.target.value//将数组改变索引赋给定义的index变量
|
||
this.jg=this.array[this.index]//将array【改变索引】的值赋给定义的jg变量
|
||
this.$MyRequest('/barCode/getSLInfo', {
|
||
ReceiveRequestName: this.jg
|
||
}).then(res => {
|
||
if (res.data.success) {
|
||
var _Arr = res.data.resultObj;
|
||
for (let i = 0; i < _Arr.length; ++ i) {
|
||
this.description = _Arr[i]['DESCRIPTION'];
|
||
this.PLAN_QTY = _Arr[i]['PLAN_QTY'];
|
||
this.PRTBARCODEQTY = _Arr[i]['PRTBARCODEQTY'];
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
computed:{
|
||
endDate(){
|
||
return this.getDate();
|
||
}
|
||
},
|
||
bindDateChange: function(e) {
|
||
this.date = e.detail.value;
|
||
},
|
||
getDate() {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
//回车事件：入库请求
|
||
ruKuRequest() {
|
||
//发送请求
|
||
this.$MyRequest('/intolocation/receiveinstock', {
|
||
barCode: this.barCode,
|
||
storageName: this.kw,
|
||
userId: this.userId
|
||
}).then(res => {
|
||
if (res.data.success) {
|
||
this.$showMessage(res.data.message)
|
||
this.barCode = ""
|
||
this.getfocus('focusBarcode')
|
||
} else {
|
||
this.$showMessage(res.data.message)
|
||
this.kw = ""
|
||
this.getfocus('focusKw')
|
||
}
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
submit() {
|
||
if (this.ischecked == false) //没有默认使用库位的话
|
||
{
|
||
this.searchmateriallist() //直接请求物料的相关信息
|
||
this.getfocus('focusKw') //焦点下移到下面
|
||
} else {
|
||
//默认使用库位的话，先请求库位信息，再入库
|
||
this.searchmateriallist() //先展示数据
|
||
if(this.materialList == null) {
|
||
return;
|
||
}
|
||
this.ruKuRequest() //调用入库方法
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
</style>
|
||
|