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.

332 lines
9.0 KiB
Vue

<template>
<view class="page-receipt-detail">
<view class="header">
<view class="left">
<u-icon class="icon" name="arrow-left" @click="uni.navigateBack()" />
</view>
<view class="title">{{ $t('message.Pi_SummaryPicking') }}</view>
<view class="right"></view>
</view>
<view class="table-wrapper">
<wyb-table class="table" ref="table" width="100%" enable-check="multiple" show-left-and-right-border :headers="headers" :contents="model.aggregateList" :show-vert-border="false"></wyb-table>
</view>
<view class="bottom-bar">
<div class="extra">
<u-form ref="form" :model="form" :error-type="['toast']">
<u-row class="bottom-info">
<!-- <u-col :span="6"
>{{ $t("message.po_Total") }} {{ model.aggregateList.length }}
{{ $t("message.po_Records") }}</u-col
> -->
<!-- <u-col :span="6">-->
<!-- <u-form-item prop="locationCode" label="库存地点" label-width="120rpx">-->
<!-- <u-input-->
<!-- v-model="form.locationCode"-->
<!-- type="select"-->
<!-- @click="locationCodeSelect = true"-->
<!-- />-->
<!-- <u-select-->
<!-- v-model="locationCodeSelect"-->
<!-- :list="model.locationList"-->
<!-- @confirm="(v) => (form.locationCode = v[0].value)"-->
<!-- ></u-select>-->
<!-- </u-form-item>-->
<!-- </u-col>-->
<!-- <u-col :span="6">
<u-form-item prop="amount" :label="this.$t('message.dn_Number')">
<u-input
v-model="form.amount"
type="number"
:placeholder="this.$t('message.po_PleaseInput')"
/>
</u-form-item>
</u-col> -->
</u-row>
</u-form>
</div>
<div class="container">
<u-row>
<u-col :span="3">
<u-button type="primary" @click="model.checkAllAggregateList(!model.isAggregateCheckedAll)">
{{ model.isAggregateCheckedAll ? this.$t('message.po_noSelectAll') : this.$t('message.po_SelectAll') }}
</u-button>
</u-col>
<u-col :span="3">
<u-button type="primary" class="appoint" @click="appoint">{{ $t('message.Pi_distribution') }}</u-button>
</u-col>
<u-col :span="3">
<u-button type="success" @click="onSubmit">
{{ $t('message.dn_Confirm') }}
</u-button>
</u-col>
<u-col :span="3">
<u-button type="error" @click="onUpload">
{{ $t('message.po_Submit') }}
</u-button>
</u-col>
</u-row>
</div>
</view>
</view>
</template>
<script lang="ts">
import { Component, Ref } from 'vue-property-decorator';
import { BasePage } from '@/components/base/page';
import model from './model';
import { summaryHeaders } from './config';
import { VForm, VFormRules } from 'vue/types/form';
import { session } from '@/store/modules/session';
@Component
export default class RawReceiptDetail extends BasePage {
/**
* 表单引用
*/
@Ref('form') readonly $form!: VForm;
/**
* 页面Module
*/
model = model;
/**
* 表单数据
*/
form: any = {
locationCode: null,
amount: null,
};
/**
* 表单校验
*/
rules: VFormRules<any> = {
// locationCode: [{ required: true, message: '请选择库存地点!' }],
amount: [
{ required: true, message: this.$t('message.Pi_tip1') as string },
// { type: 'integer', min: 1, transform: Number, message: this.$t('message.Pi_tip2') as string },
],
};
/**
* 库存地点选择
*/
locationCodeSelect = false;
/**
* 表头
*/
headers = summaryHeaders;
onShow() {
this.model.queryLocationList();
this.model.aggregateList.forEach((item: any) => {
item.currentAmount = 0;
});
let ant: any = JSON.parse(uni.getStorageSync('material') as string);
let index: any = JSON.parse(uni.getStorageSync('index') as string);
this.model.aggregateList[index] = ant;
uni.removeStorageSync('material');
uni.removeStorageSync('index');
}
appoint() {
let selectStatus = model.aggregateList.map((item) => {
if (item.checked == true) {
return true;
} else {
return false;
}
});
let i = 0;
selectStatus.forEach((item) => {
if (item == true) {
i++;
}
});
if (i > 1) {
uni.showToast({
icon: 'none',
title: '只能选择一条物料' as string,
});
} else if (i == 0) {
uni.showToast({
icon: 'none',
title: '请选择一条物料' as string,
});
} else {
let mater: number = selectStatus.indexOf(true);
uni.setStorageSync('mater', JSON.stringify(model.aggregateList[mater]) as string);
uni.setStorageSync('index', JSON.stringify(mater) as string);
this.toPage(this.page.raw.handover.picking.total);
}
}
/**
* 上传
*/
async onUpload() {
//判断是否有数据
if (this.model.aggregateList.length === 0) {
uni.showToast({
icon: 'none',
title: this.$t('message.Pi_tip4') as string,
});
return;
}
const includeOrderOutIdList = this.model.proOrderResultList.map((_: any) => _.orderOutId);
const dataList: any = [];
//获取选中的列表
this.model.aggregateList.forEach((item: any) => {
if (item.checked === true) {
dataList.push(item);
}
});
//判断选中的列表是否为空
if (dataList.length == 0) {
uni.showToast({
icon: 'none',
title: '请先选中要提交的数据' as string,
});
return;
}
//判断选中的数据中 是否存在没分配库位的数据
let isTrue = true;
dataList.forEach((item: any) => {
if (item.wlList == null || item.wlList.length == 0) {
uni.showToast({
icon: 'none',
title: '请确保所选数据都已分配库位' as string,
});
isTrue = false;
}
});
if (isTrue == true) {
const params = {
factoryCode: session.factoryCode,
loginName: session.loginName,
dataList,
includeOrderOutIdList,
};
await this.model.saveAggregateUpload(params);
}
}
/**
* 提交
*/
async onSubmit() {
if (!this.model.hasAggregateChecked) {
uni.showToast({
icon: 'none',
title: this.$t('message.Pi_tip4') as string,
});
return;
}
this.$form.validate((valid) => {
if (!valid) return;
const list = this.model.checkedAggregateList;
// const needLocationCode = list.findIndex((_: any) => !_.currentWkposCode) > -1;
// if (needLocationCode && !this.form.locationCode) {
// uni.showToast({ icon: 'none', title: '请选择库存地点!' });
// return;
// }
const amount = Number(this.form.amount);
if (amount <= 0 || amount.toString().split('.')[1].length > 3) {
uni.showToast({
icon: 'none',
title: this.$t('message.Pi_tip2') as string,
});
return;
}
for (const item of list) {
if (amount + item.totalMoAmount > item.amount) {
uni.showToast({
icon: 'none',
title: this.$t('message.Pi_tip6') as string,
});
return;
}
}
const locationCode = this.form.locationCode;
this.model.confirmCheckedAggregateList({ amount, locationCode });
});
}
}
</script>
<style lang="scss" scoped>
.page-receipt-detail {
background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #4a78ea 51%, #1753ea 100%) no-repeat;
background-size: 100% 600rpx;
padding: 30rpx;
min-height: 100%;
padding-top: 118rpx;
padding-bottom: 222rpx;
.header {
position: fixed;
top: 36rpx;
left: 0;
right: 0;
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;
}
}
.table-wrapper {
background-color: #fff;
}
.form {
background-color: #fff;
padding: 40rpx;
border-radius: 10rpx;
}
.bottom-bar {
z-index: 21;
position: fixed;
bottom: 0;
left: 0;
right: 0;
.container {
background: #ffffff;
box-shadow: 0 1rpx 20rpx 0 rgba(128, 128, 128, 0.2);
padding: 20rpx;
}
.extra {
background-color: #fff;
margin: 5px;
border-radius: 5px;
padding: 0 10px;
}
.bottom-info {
.u-form-item {
padding: 0;
}
}
}
}
</style>