350 lines
9.2 KiB
Vue
350 lines
9.2 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar back-text="返回" title="立库人工出库" :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-action-sheet :list="actionSheetList" v-model="showActionSheet" @click="actionSheetCallback">
|
||
</u-action-sheet>
|
||
</u-form-item>
|
||
<u-form-item :border-bottom="false">
|
||
<p>扫描标签：</p>
|
||
<u-input :border="true" v-model="barCode2" placeholder="请扫描条码" :focus="focusBarCode" @confirm="ship" />
|
||
</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="">{{MATERIALSPEC}} </label>
|
||
<br />
|
||
<label> 物料规格：</label>
|
||
<label class="">{{SPECNAME}}</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>
|
||
|
||
<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>
|
||
<u-button @click="SubmitSure" type="primary">确定</u-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { removeZeros } from "@/utils/utils"
|
||
export default {
|
||
data() {
|
||
return {
|
||
array: ['请选择物料行号'],
|
||
barCode: "", //单据编号
|
||
barCode2: "", //物料标签号
|
||
date: this.getDate(),
|
||
PLAN_QTY: 0,
|
||
PRTBARCODEQTY: 0,
|
||
kw: "", // 库位号
|
||
materialList: [], //接收后端传回来的数据
|
||
ischecked: false, //默认不使用库位
|
||
focusKw: false, //库位输入框焦点
|
||
focusBarcode: true, //默认聚焦到条码框
|
||
styleType: 'button',
|
||
actionSheetList: [], // 用于存储查询结果的列表
|
||
ReceiveDetailArray: [], // 用于存储明细查询结果的列表
|
||
current: 0,
|
||
items: ['入库清单'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
|
||
matData: [], //后端传回来的绑定表格的数据
|
||
colorIndex: 0,
|
||
MaterialSpecName: '',
|
||
phase: '',
|
||
sdk_desc: '',
|
||
fifthElement: '',
|
||
oUTDESTINATION: '',
|
||
sHIPREQUESTNAME: '',
|
||
DESCRIPTION: '',
|
||
SPECNAME: '',
|
||
MATERIALQUANTITY: '',
|
||
EXPIRINGDATE: '',
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
}, //返回按钮的样式
|
||
useId: "",
|
||
//对应的材料列表下的表格，field对应后端返回了来的字段
|
||
matColumns: [{
|
||
title: '扫描状态',
|
||
field: "'IS_FALSE'",
|
||
width: 120,
|
||
sort: true,
|
||
className: 'text-center' // 居中对齐
|
||
},
|
||
{
|
||
title: '物料编号',
|
||
field: "MATERIALSPECNAME",
|
||
width: 240,
|
||
sort: true,
|
||
className: 'text-center'
|
||
},
|
||
{
|
||
title: '品名',
|
||
field: "DESCRIPTION",
|
||
width: 280,
|
||
sort: true,
|
||
className: 'text-center'
|
||
},
|
||
{
|
||
title: '阶段',
|
||
field: "PHASE",
|
||
width: 50,
|
||
sort: true,
|
||
className: 'text-center'
|
||
},
|
||
{
|
||
title: '批号',
|
||
field: "MATERIALPACKINGNAME",
|
||
width: 300,
|
||
sort: true,
|
||
className: 'text-center'
|
||
},
|
||
{
|
||
title: 'SDK规格',
|
||
field: "SPECNAME",
|
||
width: 150,
|
||
sort: true,
|
||
className: 'text-center'
|
||
},
|
||
{
|
||
title: '数量',
|
||
field: "MATERIALQUANTITY",
|
||
width: 150,
|
||
sort: true,
|
||
className: 'text-center'
|
||
},
|
||
{
|
||
title: '有效期',
|
||
field: "EXPIRINGDATE",
|
||
width: 150,
|
||
sort: true,
|
||
className: 'text-center'
|
||
}
|
||
],
|
||
|
||
};
|
||
|
||
},
|
||
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}`;
|
||
},
|
||
|
||
submit() {
|
||
this.actionSheetList = [];
|
||
//发送请求
|
||
this.$MyRequest('/api/ApiQuery', {
|
||
queryId: "GetMaterialShipRequest_01",
|
||
version: "00001",
|
||
params: {
|
||
SHIPREQUESTNAME: this.barCode,
|
||
}
|
||
}).then(res => {
|
||
if (res.data.message == "SUCCESS!") {
|
||
for (let i=0; i<res.data.data.length;i++) {
|
||
console.log(this.actionSheetList)
|
||
this.actionSheetList.push({
|
||
text: res.data.data[i].SHIPREQUESTNAME,
|
||
color: 'blue',
|
||
fontSize: 28
|
||
});
|
||
}
|
||
this.showActionSheet = true;
|
||
} else {
|
||
this.actionSheetList = [];
|
||
this.showActionSheet = true;
|
||
}
|
||
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
},
|
||
actionSheetCallback(item) {
|
||
// 用户在下拉列表中选择了一个项目
|
||
this.barCode = this.actionSheetList[item].text; // 更新输入框的值
|
||
this.showActionSheet = false; // 关闭下拉列表
|
||
//发送请求---一共多少列
|
||
this.$MyRequest('/api/ApiQuery', {
|
||
queryId: "GetShipRequestList_1",
|
||
version: "00001",
|
||
params: {
|
||
SHIPREQUESTNAME: this.barCode,
|
||
}
|
||
}).then(res => {
|
||
if (res.data.message == "SUCCESS!") {
|
||
console.log('success进来了');
|
||
this.matData=res.data.data;
|
||
}
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
|
||
},
|
||
//扫描条码输入框---------------回车调用方法
|
||
ship() {
|
||
if (this.barCode2 == "") {
|
||
this.$showMessage("请扫描条码");
|
||
this.getfocus('focusBarCode') //焦点移动到条码
|
||
return;
|
||
} else {
|
||
//查询//通过标签查位置和单号
|
||
const str = this.barCode2;
|
||
const elements = str.split("|");
|
||
this.fifthElement = elements[4];
|
||
console.log(this.matData.length)
|
||
for(let i=0;i<this.matData.length;i++)
|
||
{
|
||
if(this.matData[i].MATERIALPACKINGNAME==this.fifthElement)
|
||
{
|
||
this.matData[i]["'IS_FALSE'"]="已扫"
|
||
}
|
||
}
|
||
console.log(this.matData)
|
||
}
|
||
},
|
||
SubmitSure(){
|
||
let IF_TRUE='true';
|
||
for(let i=0;i<this.matData.length;i++)
|
||
{
|
||
if(this.matData[i]["'IS_FALSE'"]!="已扫")
|
||
{
|
||
IF_TRUE='false';
|
||
break;
|
||
}
|
||
|
||
}
|
||
console.log(IF_TRUE)
|
||
if(IF_TRUE=='true')
|
||
{
|
||
//发送请求---一共多少列
|
||
this.$MyRequest('', {
|
||
header: {
|
||
MESSAGENAME: '',
|
||
LANGUAGE: 'Chinese',
|
||
Flag: 'LK'//立库标志
|
||
},
|
||
body: {
|
||
SHIPREQUESTNAME:this.barCode,
|
||
SITENAME: 'SDK',
|
||
}
|
||
}).then(res => {
|
||
|
||
}).catch(err => {
|
||
this.$showMessage(err)
|
||
})
|
||
}else{
|
||
this.$showMessage("该订单下扫描条码有遗漏！");
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* 左对齐 */
|
||
.text-left {
|
||
text-align: left;
|
||
}
|
||
|
||
/* 右对齐 */
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
/* 居中 */
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
</style>
|