You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

432 lines
12 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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.CommissionEntrant') }}</view>
<view class="right"></view>
</view>
<view class="content">
<!-- 单号 -->
<view class="single">
<view class="single-left">
<view>{{ $t('message.CommissionedSingleNumber') }}</view>
<u-search :placeholder="$t('message.InventoryPleaseScan')" 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="material">
<view class="material-left">
<view>{{ $t('message.CommissionedMaterielNo') }}</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" style="overflow: hidden">{{ every.materialDesc }}</view>
</view>
</view>
<!-- 需求数量 -->
<view class="number">
<view class="number-left">
<view class="number-left-title">{{ $t('message.CommissionedDemandData') }}</view>
<u-input v-model="every.poAmount" placeholder=" " :type="type" :border="border" class="input" disabled />
</view>
<view class="number-right">
<view class="number-right-title">{{ $t('message.CommissionedCumulativeData') }}</view>
<u-input :placeholder="$t('message.po_PleaseInput')" v-model="every.receiptAmount" :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="wlCode.value" class="search" :options="Location" />
</view>
<view class="library-right">
<view class="library-right-title">{{ $t('message.CommissionedThisNumber') }}</view>
<u-input :placeholder="$t('message.po_PleaseInput')" v-model="nowAmount" type="number" :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 list" :key="index">
<u-td class="u-td">{{ item.wlCode }}</u-td>
<u-td class="u-td">{{ item.nowAmount }}</u-td>
<u-td class="u-td">
<u-button type="error" size="small" class="u-td" 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.CommissionedEntrantDetails') }}</u-button>
</u-col>
<u-col :span="4">
<u-button type="primary" @click="onSubmit">{{ $t('message.product_Upload') }}</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 = {};
materialList: any = [];
list: any = [];
every: any = '';
value = '';
type = 'text';
border = true;
nowAmount: any = '';
//库位
Location: any = [];
//所选择的库位
wlCode: any = '';
//页面初始化
async onLoad() {
//页面初始化 获取可选库位
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);
console.log('res res', res);
// 库位列表是undefined 委外入库、委外出库都是同样的问题
//guoshuang 修改 库位列表undefiend
res.forEach((item: any) => {
let pickerName: any = {};
pickerName.label = item.locationCode;
pickerName.value = item.locationCode + '(' + item.sendSpot + ')';
pickerName.sendSpot = item.sendSpot;
this.Location.push(pickerName);
});
console.log('库位列表', this.Location);
}
//输入单号 查询数据
async query() {
if (this.form.documentNo == '') {
this.customToast(this.$t('message.Commission_tips1') as any);
return;
}
this.materialList = [];
let res = await this.model.queryOutsourcing(this.form.documentNo);
this.material = res.data;
this.material.forEach((item: any) => {
let pickerName: any = {};
pickerName.label = item.materialCode;
pickerName.value = item.materialCode;
this.materialList.push(pickerName);
});
this.every = this.material[0];
}
//选择物料后触发的回调事件 本次数量receiptAmount 需求数量requestAmount
materialChoice(e: any) {
this.material.forEach((item: any) => {
if (item.materialCode == e.pickerName.value) {
this.every = item;
return;
}
});
}
//选择库位后触发的回调事件
LocationChoice(e: any) {
this.wlCode = e.pickerName;
}
//点击添加
Add() {
if (this.nowAmount == '' || this.wlCode == '') {
this.customToast(this.$t('message.Commission_tips2') as any);
return;
}
if (parseFloat(this.nowAmount) <= 0) {
this.customToast(this.$t('message.Commission_tips3') as any);
return;
}
if (parseFloat(this.nowAmount) > this.every.poAmount) {
this.customToast(this.$t('message.Commission_tips4') as any);
return;
}
let arr = {
wlCode: this.wlCode.label,
nowAmount: this.nowAmount,
};
this.list.push(arr);
this.business();
}
deleteItem(index: any) {
this.list.splice(index, 1);
this.business();
}
async onSubmit() {
if (this.list == null || this.list.length == 0) {
this.customToast(this.$t('message.Commission_tips5') as any);
}
let upload = {
poNo: this.form.documentNo,
materialCode: this.every.materialCode,
loginName: session.loginName,
factoryCode: session.factoryCode,
list: this.list,
};
await this.model.submitOutsourcing(upload);
this.list = [];
this.wlCode = '';
this.nowAmount = '';
this.every = '';
this.materialList = [];
}
async bill() {
if (this.form.documentNo == '') {
this.customToast(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,
poNo: this.form.documentNo,
};
await this.model.querydetaildlist(content);
this.redirectTo(this.page.raw.commission.entrant.detail);
}
//添加和删除操作的时候 计算累计收货数量
business() {
let num = 0;
this.list.forEach((item: any) => {
num += parseFloat(item.nowAmount);
});
this.every.receiptAmount += num;
}
}
</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;
}
}
}
.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;
// line-height: 100rpx;
}
}
}
.number {
height: 100rpx;
display: flex;
.number-left {
width: 50%;
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: 50%;
height: 100%;
display: flex;
.number-right-title {
width: 120rpx;
height: 100%;
line-height: 100rpx;
}
.input {
width: 100rpx;
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 {
text-align: center;
}
}
.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>