|
|
<template>
|
|
|
<view class="page-raw-receipt">
|
|
|
<!-- 头部 -->
|
|
|
<view class="header" :style="{ backgroundColor: `rgba(23, 83, 234, ${scrollTop / 100})` }">
|
|
|
<view class="left">
|
|
|
<u-icon class="icon" name="arrow-left" @click="uni.navigateBack({})" />
|
|
|
</view>
|
|
|
<view class="title">{{ $t('message.dn_ReceivingGoods') }}</view>
|
|
|
<view class="right"></view>
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
<!-- 单号 -->
|
|
|
<view class="single">
|
|
|
<view class="single-left">
|
|
|
<view>{{ $t('message.dn_OddNumbers') }}</view>
|
|
|
<u-search :placeholder="$t('message.dn_PleaseScan')" v-model="form.documentNo" @search="query" :show-action="false"></u-search>
|
|
|
</view>
|
|
|
<view class="single-right">
|
|
|
<u-button type="primary" @click="query">{{ $t('message.Query') }}</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 采购单号 -->
|
|
|
<view class="Purchase-title">
|
|
|
<view class="Purchase">
|
|
|
<view>{{ $t('message.Purchase') }}</view>
|
|
|
<jPicker sureColor="#ff0000" style="width: 260rpx" @bindpicker="poListChoice" showKey="value" valKey="value" :val="poNo" class="search" :options="poList" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 物料 -->
|
|
|
<view class="material">
|
|
|
<view class="material-left">
|
|
|
<view>{{ $t('message.Materiel') }}</view>
|
|
|
<jPicker sureColor="#ff0000" style="width: 260rpx" @bindpicker="materialChoice" showKey="value" valKey="value" :val="every.materialCode" class="search" :options="materialList" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="material"
|
|
|
><view class="material-right">
|
|
|
<view class="material-right-title">{{ $t('message.CommissionedMaterielDesc') }}</view>
|
|
|
<view class="material-right-code">{{ every.materialDesc }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 需求数量 -->
|
|
|
<view class="number">
|
|
|
<view class="number-left">
|
|
|
<view class="number-left-title">{{ $t('message.DemandQuantity') }}</view>
|
|
|
<u-input v-model="every.requestAmount" placeholder=" " :type="type" :border="border" class="input" disabled />
|
|
|
</view>
|
|
|
<view class="number-right">
|
|
|
<view class="number-right-title">{{ $t('message.Cumulative') }}</view>
|
|
|
<u-input v-model="every.receiptAmount" :placeholder="$t('message.po_PleaseInput')" :type="type" :border="border" class="input" disabled />
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 库位 -->
|
|
|
<view class="library">
|
|
|
<view class="library-left">
|
|
|
<view>{{ $t('message.CommissionedLocation') }}</view>
|
|
|
<jPicker sureColor="#ff0000" style="width: 230rpx" @bindpicker="LocationChoice" showKey="value" valKey="value" :val="wl.value" class="search" :options="newLocation" />
|
|
|
</view>
|
|
|
<view class="library-right">
|
|
|
<view class="library-right-title">{{ $t('message.CommissionedThisNumber') }}</view>
|
|
|
<u-input v-model="receiptAmount" :placeholder="$t('message.po_PleaseInput')" :type="type" :border="border" class="input" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 添加 -->
|
|
|
<view class="add">
|
|
|
<u-button type="primary" @click="Add">{{ $t('message.product_add') }}</u-button>
|
|
|
</view>
|
|
|
<!-- 表格 -->
|
|
|
<u-table class="library-table">
|
|
|
<u-tr class="u-tr">
|
|
|
<u-th class="u-th">{{ $t('message.product_Location') }}</u-th>
|
|
|
<u-th class="u-th">{{ $t('message.product_Number') }}</u-th>
|
|
|
<u-th class="u-th">{{ $t('message.operation') }}</u-th>
|
|
|
</u-tr>
|
|
|
<u-tr class="u-tr" v-for="(item, index) in LocationList" :key="index">
|
|
|
<u-td class="u-td">{{ item.wlCode }}</u-td>
|
|
|
<u-td class="u-td">{{ item.receiptAmount }}</u-td>
|
|
|
<u-td class="u-td">
|
|
|
<u-button type="error" size="small" style="font-size: 20px" @click="deleteItem(index)">{{ $t('message.product_Delete') }}</u-button>
|
|
|
</u-td>
|
|
|
</u-tr>
|
|
|
</u-table>
|
|
|
</view>
|
|
|
<!-- 底部按钮 -->
|
|
|
<view class="bottom-bar">
|
|
|
<u-row class="button-bar">
|
|
|
<u-col :span="4">
|
|
|
<u-button type="primary" @click="bill">{{ $t('message.detailed') }}</u-button>
|
|
|
</u-col>
|
|
|
<u-col :span="4">
|
|
|
<u-button type="primary" @click="onSubmit">{{ $t('message.po_Submit') }}</u-button>
|
|
|
</u-col>
|
|
|
<u-col :span="4">
|
|
|
<u-button type="error" @click="uni.navigateBack({})">{{ $t('message.po_Return') }}</u-button>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { Component, Ref } from 'vue-property-decorator';
|
|
|
import { BasePage } from '@/components/base/page';
|
|
|
import jPicker from '@/components/J-Picker/jPicker.vue';
|
|
|
import { session } from '@/store/modules/session';
|
|
|
import { VForm, VFormRules } from 'vue/types/form';
|
|
|
import model from './model';
|
|
|
@Component({
|
|
|
components: {
|
|
|
jPicker,
|
|
|
},
|
|
|
})
|
|
|
export default class dnReceiptDom extends BasePage {
|
|
|
model = model;
|
|
|
form: any = {
|
|
|
documentNo: '',
|
|
|
};
|
|
|
material: any = [];
|
|
|
poList: any = [];
|
|
|
materialList: any = [];
|
|
|
every: any = {};
|
|
|
value = '';
|
|
|
type = 'text';
|
|
|
border = true;
|
|
|
//累计数量
|
|
|
//Cumulative: any = 0;
|
|
|
//判断要添加的库位和已添加的库位是否相等
|
|
|
//sendSpotList: any = [];
|
|
|
//本次数量
|
|
|
receiptAmount: any = '';
|
|
|
//库位
|
|
|
Location: any = [];
|
|
|
//根据物料选择过滤的新库位
|
|
|
newLocation: any = [];
|
|
|
//添加库位和数量的列表
|
|
|
LocationList: any = [];
|
|
|
//所选择的库位
|
|
|
wl: any = {
|
|
|
value: null,
|
|
|
};
|
|
|
//所选择的采购单号
|
|
|
poNo: any = null;
|
|
|
// 需求数量
|
|
|
requestAmount: number = null;
|
|
|
//上传
|
|
|
upload: any = [];
|
|
|
//页面初始化
|
|
|
async onReady() {}
|
|
|
// 页面初始化
|
|
|
// 页面需要清空仓库，因此需要复用该方法
|
|
|
async initLocation() {
|
|
|
let means: any = JSON.parse(localStorage.getItem('__GWMS_APP_STATE_DATA__') as any);
|
|
|
let sendSpot = JSON.parse(localStorage.getItem('sendSpot') as any);
|
|
|
let content = {
|
|
|
loginName: means.session.user.loginName,
|
|
|
sendSpot: sendSpot,
|
|
|
factoryCode: means.session.user.factoryCode,
|
|
|
workArea: session.workareaCode,
|
|
|
};
|
|
|
let res: any = await this.model.queryByFactoryCodeAndWorkAreaCode(content);
|
|
|
res.forEach((item: any) => {
|
|
|
console.log('res is:', res);
|
|
|
let pickerName: any = {};
|
|
|
pickerName.label = item.locationCode;
|
|
|
pickerName.value = item.locationCode + '(' + item.sendSpot + ')';
|
|
|
pickerName.sendSpot = item.sendSpot;
|
|
|
this.Location.push(pickerName);
|
|
|
});
|
|
|
}
|
|
|
//输入单号 查询数据
|
|
|
async query() {
|
|
|
if (this.form.documentNo == '') {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.Commission_tips1') as any,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
// 查询时初始化仓库
|
|
|
this.initLocation();
|
|
|
await this.model.ImportQueryOrderInfo(this.form.documentNo);
|
|
|
if (model.code == '1') {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.successful') as any,
|
|
|
});
|
|
|
}
|
|
|
let list: any = localStorage.getItem('list');
|
|
|
localStorage.removeItem('list');
|
|
|
this.material = JSON.parse(list);
|
|
|
this.poList = [...this.material];
|
|
|
let arr = this.removeDuplicates(this.poList, 'poNo');
|
|
|
// 组装下拉结构
|
|
|
arr.forEach((item: any) => {
|
|
|
item.label = item.poNo;
|
|
|
item.value = item.poNo;
|
|
|
});
|
|
|
this.poList = arr;
|
|
|
}
|
|
|
// 去除重复 方法
|
|
|
// 传入数组 list 及要去重的属性 valueKey
|
|
|
// 返回去重后的数组对象
|
|
|
removeDuplicates(list, valueKey: string) {
|
|
|
let temp = {};
|
|
|
let arr = [];
|
|
|
arr = list.reduce(function (item, next) {
|
|
|
temp[next[valueKey]] ? '' : (temp[next[valueKey]] = true && item.push(next));
|
|
|
return item;
|
|
|
}, []);
|
|
|
return arr;
|
|
|
}
|
|
|
// ADD方法后的库存数量检测 list是单号获取数组数据
|
|
|
totalLocation(list: []) {
|
|
|
const receiptAmount = list.reduce((total: number, nextItem: any): any => {
|
|
|
return total + +nextItem.receiptAmount;
|
|
|
}, 0);
|
|
|
return receiptAmount;
|
|
|
}
|
|
|
//选择采购单后触发的回调事件
|
|
|
poListChoice(e: any) {
|
|
|
this.poNo = e.pickerName.value;
|
|
|
// 过滤重复物料
|
|
|
this.materialList = JSON.parse(JSON.stringify(this.removeDuplicates(this.material, 'materialCode')));
|
|
|
// 返回物料中poNo为选中的项；
|
|
|
this.materialList = this.materialList.filter((item: any) => {
|
|
|
if (item.poNo == e.pickerName.value) {
|
|
|
item.label = item.materialCode;
|
|
|
item.value = item.materialCode;
|
|
|
return true;
|
|
|
}
|
|
|
});
|
|
|
// this.material.forEach((item: any) => {
|
|
|
// if (item.poNo == e.pickerName.value) {
|
|
|
// let pickerName: any = {};
|
|
|
// pickerName.label = item.materialCode;
|
|
|
// pickerName.value = item.materialCode;
|
|
|
// this.materialList.push(pickerName);
|
|
|
// }
|
|
|
// });
|
|
|
}
|
|
|
//选择物料后触发的回调事件 本次数量：receiptAmount 需求数量：requestAmount 选择一条物料候every=这条物料对应的所有数据
|
|
|
materialChoice(e: any) {
|
|
|
// 待放入新增中的公共对象
|
|
|
this.every = { ...e.pickerName };
|
|
|
this.newLocation = this.Location.filter((item: any) => item.sendSpot === this.every.sendSpot);
|
|
|
console.log('newLoction', this.newLocation);
|
|
|
}
|
|
|
//选择库位后触发的回调事件
|
|
|
LocationChoice(e: any) {
|
|
|
this.wl = e.pickerName;
|
|
|
}
|
|
|
//点击添加
|
|
|
Add() {
|
|
|
//如何得到count
|
|
|
const count = this.totalLocation(this.LocationList);
|
|
|
if (this.receiptAmount == '' || this.wl.value == '') {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.Commission_tips2') as any,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (parseFloat(this.receiptAmount) <= 0) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.Commission_tips3') as any,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (parseFloat(this.receiptAmount) > this.every.requestAmount || +this.receiptAmount + count > this.every.requestAmount) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.Commission_tips4') as any,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
// 判断已添加库位和新添加库位是否相同，不相同return
|
|
|
let isTrue = this.LocationList.some((item) => item.wlCode !== this.wl.label);
|
|
|
//是要在相同库位下add???
|
|
|
if (isTrue) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message._tips5') as any,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
//将选好的数据aad进去
|
|
|
this.LocationList.push({
|
|
|
...this.every,
|
|
|
wlCode: this.wl.label,
|
|
|
receiptAmount: this.receiptAmount,
|
|
|
});
|
|
|
//将本次数量蓝清空
|
|
|
this.receiptAmount = '';
|
|
|
//为什莫要将置为true？？？？
|
|
|
isTrue = true;
|
|
|
this.business();
|
|
|
}
|
|
|
deleteItem(index: any) {
|
|
|
//splice有删除功能，第一个参数为位置，第二个参数是数量
|
|
|
this.LocationList.splice(index, 1);
|
|
|
this.business();
|
|
|
// guoshuang 删除成功提示
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.success') as any,
|
|
|
});
|
|
|
}
|
|
|
// 重置页面数据
|
|
|
resetForm() {
|
|
|
this.form.documentNo = '';
|
|
|
// 清空 add table
|
|
|
this.LocationList = [];
|
|
|
// 仓库
|
|
|
this.Location = [];
|
|
|
this.newLocation = [];
|
|
|
this.poNo = '';
|
|
|
this.poList = [];
|
|
|
// 清空 当前选择的库位对象
|
|
|
this.wl = {
|
|
|
value: null,
|
|
|
};
|
|
|
// 清空 物料对象
|
|
|
this.every = {};
|
|
|
// 清空 去重后的物料列表
|
|
|
this.materialList = [];
|
|
|
// 清空 当前累计数量
|
|
|
this.receiptAmount = null;
|
|
|
}
|
|
|
async onSubmit() {
|
|
|
if (this.LocationList.length === 0) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message.Commission_tips5') as any,
|
|
|
});
|
|
|
return null;
|
|
|
}
|
|
|
//此条是什么作用 提交里的入参是和后端商量好的吗？？？？
|
|
|
this.every.wllist = this.LocationList;
|
|
|
await this.model.submitOrderInEnter([this.every]);
|
|
|
this.resetForm();
|
|
|
}
|
|
|
async bill() {
|
|
|
if (this.form.documentNo == '') {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: this.$t('message._tips6') as any,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
let person = JSON.parse(localStorage.getItem('__GWMS_APP_STATE_DATA__') as any);
|
|
|
let content = {
|
|
|
loginName: person.session.user.loginName,
|
|
|
dnNo: this.form.documentNo,
|
|
|
};
|
|
|
await this.model.querydetaildlist(content);
|
|
|
this.redirectTo(this.page.raw.ingoods.dnReceipt.Local);
|
|
|
}
|
|
|
//添加和删除操作的时候 计算累计收货数量 调用totalLocation，totalLocation用了some方法
|
|
|
business() {
|
|
|
this.every.receiptAmount = this.totalLocation(this.LocationList);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.page-raw-receipt {
|
|
|
background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #4a78ea 51%, #1753ea 100%) no-repeat;
|
|
|
background-size: 100% 600rpx;
|
|
|
padding: 118rpx 30rpx 162rpx;
|
|
|
min-height: 100%;
|
|
|
.header {
|
|
|
position: fixed;
|
|
|
top: 36rpx;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
z-index: 99;
|
|
|
display: flex;
|
|
|
height: 88rpx;
|
|
|
line-height: 88rpx;
|
|
|
color: #fff;
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
.title {
|
|
|
flex: 3;
|
|
|
}
|
|
|
.left,
|
|
|
.right {
|
|
|
flex: 1;
|
|
|
}
|
|
|
.icon {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: 88rpx;
|
|
|
height: 88rpx;
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
background: white;
|
|
|
border-radius: 15rpx;
|
|
|
padding: 10rpx;
|
|
|
.single {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
display: flex;
|
|
|
.single-left {
|
|
|
width: 80%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
view {
|
|
|
width: 110rpx;
|
|
|
height: 100%;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
}
|
|
|
.single-right {
|
|
|
button {
|
|
|
margin-top: 15rpx;
|
|
|
width: 150rpx;
|
|
|
height: 70rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.Purchase-title {
|
|
|
width: 100%;
|
|
|
.Purchase {
|
|
|
width: 60%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
view {
|
|
|
width: 200rpx;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.material {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
display: flex;
|
|
|
.material-left {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
view {
|
|
|
width: 100rpx;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.material {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
display: flex;
|
|
|
.material-right {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
.material-right-title {
|
|
|
width: 120rpx;
|
|
|
height: 100%;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
.material-right-code {
|
|
|
width: 80%;
|
|
|
height: 100%;
|
|
|
line-height: 100rpx;
|
|
|
text-align: left;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.number {
|
|
|
height: 100rpx;
|
|
|
display: flex;
|
|
|
.number-left {
|
|
|
width: 45%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
.number-left-title {
|
|
|
width: 120rpx;
|
|
|
height: 100%;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
.input {
|
|
|
width: 200rpx;
|
|
|
height: 70rpx;
|
|
|
margin-top: 15rpx;
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
}
|
|
|
.number-right {
|
|
|
width: 55%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
.number-right-title {
|
|
|
width: 140rpx;
|
|
|
height: 100%;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
.input {
|
|
|
width: 200rpx;
|
|
|
height: 70rpx;
|
|
|
margin-top: 15rpx;
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.library {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
display: flex;
|
|
|
.library-left {
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
view {
|
|
|
width: 100rpx;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
.search {
|
|
|
padding-left: 30px;
|
|
|
}
|
|
|
}
|
|
|
.library-right {
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
.library-right-title {
|
|
|
width: 120rpx;
|
|
|
height: 100%;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
.input {
|
|
|
width: 200rpx;
|
|
|
height: 70rpx;
|
|
|
margin-top: 15rpx;
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.add {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
position: relative;
|
|
|
button {
|
|
|
position: absolute;
|
|
|
top: 10rpx;
|
|
|
right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bottom-bar {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
z-index: 99;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0 1rpx 20rpx 0 rgba(128, 128, 128, 0.2);
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|